:root{font:15px/1.5 system-ui,sans-serif;color:#243e34;background:#f3f5ef}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:22px;align-items:center;justify-content:space-between;padding:18px 4vw;background:#163d31;color:#fff}header a{color:#eee8d4;font-size:13px}header strong{letter-spacing:.18em}header strong span{font-size:11px;letter-spacing:.28em;margin-left:12px}a{color:#285d43}main{max-width:1500px;margin:auto;padding:28px 4vw 50px}.intro{max-width:1000px}.eyebrow{letter-spacing:.14em;font-size:11px;color:#627468}h1{font-size:clamp(25px,3vw,36px);line-height:1.15;margin:10px 0 14px}h2{font-size:18px;margin:0 0 5px}p{margin:10px 0}.scope{font-size:13px;background:#ede8d9;border-left:3px solid #9c763a;padding:12px 16px}.steps{display:flex;gap:30px;flex-wrap:wrap;margin:26px 0 16px}.steps b{display:inline-grid;place-items:center;background:#dce6d9;border-radius:50%;width:26px;height:26px;margin-right:6px}.templates{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 24px}button,input,select{font:inherit}button{border:1px solid #bfcbbd;border-radius:7px;padding:9px 12px;background:white;color:#294737;cursor:pointer;min-height:42px}button:hover{background:#edf3e6}button:disabled{opacity:.45;cursor:default}.templates button{padding:12px 8px;text-align:left;display:grid;gap:4px;align-content:start}.templates svg{height:62px;max-width:100%;width:100%}.templates strong{font-size:14px}.templates small{font-size:11px;line-height:1.4}.templates button[aria-pressed=true]{outline:2px solid #416b4c;background:#f6faee}.workspace{display:grid;grid-template-columns:315px minmax(0,1fr);gap:20px;align-items:start}aside,.preview{background:#fff;border:1px solid #d8dfd3;border-radius:12px;padding:20px;min-width:0}label{display:grid;gap:6px;font-size:12px;margin:10px 0}input,select{width:100%;min-width:0;border:1px solid #bbc9b8;padding:9px;border-radius:5px;background:#fff;color:#263e34}.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.primary{background:#275841;color:white;width:100%;margin:8px 0}.primary:hover{background:#356d50}.hint,.mouse{font-size:12px;color:#627065}.actions{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.actions button{font-size:12px}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.toolbar .actions,.toolbar label{margin:0}.toolbar label{display:flex;align-items:center}.toolbar button[aria-pressed=true]{background:#dbe7d2}.toolbar select{width:auto;margin:0}.toolbar button{font-size:12px}#layout-canvas{height:430px;min-height:300px;background:#f5f7ef;margin-top:16px;position:relative;border-radius:8px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid #dae0d3;border-bottom:1px solid #dae0d3;padding:16px 0;margin:15px 0}.metrics strong{display:block;font-size:24px;line-height:1.4}.metrics span{font-size:11px;color:#61715e}details{border-top:1px solid #e0e5d9;padding-top:13px;margin-top:15px;font-size:13px}summary{cursor:pointer;font-weight:600;min-height:30px}ol,ul{padding-left:20px}#layout-message{font-size:12px;color:#32613d;margin-top:14px}#layout-error{font-size:13px;color:#8d352d;background:#fff1ec;padding:0 8px}#layout-error:not(:empty){padding:12px 8px;margin-top:12px}#layout-warnings{font-size:12px;color:#73644b}#layout-plan-summary svg{width:100%;height:160px;max-width:270px}#layout-plan-summary{display:flex;align-items:center;gap:20px;font-size:12px}.preview{position:sticky;top:16px}:focus-visible{outline:3px solid #b4813c;outline-offset:3px}@media(max-width:1000px){.templates{grid-template-columns:repeat(3,1fr)}.workspace{grid-template-columns:280px minmax(0,1fr)}.toolbar label{display:grid}.preview{padding:14px}#layout-canvas{height:350px}.metrics strong{font-size:20px}}@media(max-width:700px){main{padding:22px 16px}header{padding:14px;gap:8px;flex-wrap:wrap}header strong{order:-1;width:100%}.templates{grid-template-columns:repeat(2,1fr)}.workspace{display:flex;flex-direction:column}.workspace>aside,.preview{width:100%}.preview{position:static}#layout-canvas{height:350px}.steps{gap:12px;font-size:12px}#layout-plan-summary{display:block}.metrics{gap:6px}.metrics strong{font-size:21px}}

/* Keep the live 3D visible while choosing the first model. */
main{padding-top:20px}.intro p{margin:8px 0}.scope{padding:9px 12px}.steps{margin:16px 0}.templates{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0 22px}.templates button{padding:8px 6px;gap:2px}.templates svg{height:38px}.templates strong{font-size:12px}.templates small{display:none}.workspace{grid-template-columns:330px minmax(0,1fr)}#layout-canvas{height:400px}.toolbar label{font-size:11px}@media(max-width:1000px){.workspace{grid-template-columns:295px minmax(0,1fr)}#layout-canvas{height:350px}.toolbar label{display:flex}}@media(max-width:700px){.workspace{display:flex}.templates{grid-template-columns:repeat(3,1fr)}.intro{font-size:14px}.scope{font-size:12px}.steps{gap:10px}.preview{position:static}}

.topology-legend{display:flex;gap:9px;flex-wrap:wrap;font-size:12px}.topology-legend span{display:flex;gap:5px;align-items:center}.topology-legend i{width:10px;height:10px;display:inline-block}.topology-toggle{display:flex;align-items:center;gap:8px}.topology-toggle input{width:18px;height:18px}.topology-pending{border-left:3px solid #a16f37;padding:8px 12px;background:#faf2e4}#layout-feature-info{font-size:12px;line-height:1.55}#layout-feature-info h3{font-size:15px;margin:18px 0 8px}#layout-topology button{font-size:12px}

#layout-crease-detail{border:1px solid #bdcbb5;border-radius:8px;padding:16px;margin-top:18px;font-size:12px}#layout-crease-detail[hidden]{display:none}#layout-crease-detail h3{font-size:17px;margin-top:0}#crease-canvas{height:350px;border:1px solid #e0e5d9;border-radius:6px;overflow:hidden}.crease-table{overflow:auto}.crease-table table{width:100%;border-collapse:collapse;font-size:11px}.crease-table th,.crease-table td{padding:8px;text-align:left;border-bottom:1px solid #dce3d5}#crease-error{color:#8d352d}#layout-crease-detail .fields{grid-template-columns:1fr}@media(min-width:1100px){#layout-crease-detail .fields{grid-template-columns:1fr 1fr}}

#layout-framing-detail{border:1px solid #bdcbb5;border-radius:8px;padding:16px;margin-top:18px;font-size:12px}#layout-framing-detail[hidden]{display:none}#layout-framing-detail h3{font-size:17px;margin-top:0}#framing-canvas{height:420px;border:1px solid #e0e5d9;border-radius:6px;overflow:hidden}#framing-error{color:#8d352d}#framing-status{font-size:12px;color:#32613d}#layout-framing-detail .fields{grid-template-columns:1fr}@media(min-width:1100px){#layout-framing-detail .fields{grid-template-columns:1fr 1fr}}

.preview:has(#layout-framing-detail:not([hidden])),.preview:has(#layout-crease-detail:not([hidden])){position:static}

#layout-sketch{margin:16px 0;padding:16px;border:1px solid #bdcbb5;border-radius:8px;font-size:13px}#layout-sketch[hidden]{display:none}#layout-sketch h3{margin-top:0;font-size:19px}#layout-sketch .fields{grid-template-columns:repeat(2,minmax(0,1fr))}#sketch-plan{display:block;width:100%;height:360px;background:#f6f8f2;border:1px solid #c6d1c1;border-radius:6px;cursor:crosshair;touch-action:manipulation}#sketch-proposal:not(:empty){background:#fff4e5;border-left:3px solid #a9631d;padding:10px}#sketch-error{color:#8d352d}#layout-sketch-open{margin-right:8px;margin-top:12px}.preview:has(#layout-sketch:not([hidden])){position:static}@media(max-width:700px){#layout-sketch .fields{grid-template-columns:1fr}#sketch-plan{height:310px}}

#sketch-custom-label[hidden]{display:none}

#sketch-dimension-editor{border:1px solid #b5c9aa;border-radius:7px;background:#f4f8ef;padding:12px;margin-top:10px}#sketch-dimension-editor[hidden]{display:none}#sketch-dimension-editor h4{margin:0 0 8px}.sketch-dimension-button{cursor:pointer}.sketch-dimension-button:hover rect,.sketch-dimension-button:focus-visible rect{fill:#cfdfbe;stroke:#224f35;stroke-width:.08}.sketch-dimension-button:focus-visible{outline:none}

#layout-sketch details[hidden]{display:none}.sketch-dimension-button:focus-visible rect{stroke-width:2;vector-effect:non-scaling-stroke}

#sketch-reference-root{margin:10px 0}#sketch-reference-root [hidden]{display:none}#roof-ref-error{color:#8d352d}#roof-ref-status{font-size:12px;color:#426146}#roof-ref-properties{padding:8px;background:#f4f7ef;border-radius:6px}#roof-ref-properties .primary{max-width:100%}

#layout-covering[hidden]{display:none}#layout-covering{margin-block:1rem;padding:1rem;border:1px solid #cbd5c9;border-radius:10px;background:#fff}#layout-covering .covering-plan{display:block;width:100%;max-height:360px;background:#f5f7f2;border:1px solid #cbd5c9;margin-block:1rem}#covering-error{color:#8a3028}#covering-status{color:#255641}#layout-covering input[type="text"]{width:100%}
#layout-commercial{margin-block:1rem;padding:1rem;border:1px solid #cbd5c9;border-radius:10px;background:#fff}#layout-commercial [hidden],#layout-commercial[hidden]{display:none}#roof-commercial-error{color:#8a3028;padding:12px;background:#fff1ec;border-left:3px solid #a24831}#roof-commercial-status{color:#255641;font-size:13px}#layout-commercial [aria-invalid="true"]{border-color:#a24831}#layout-commercial [id$="-error"]:not(:empty){color:#8a3028}#layout-commercial input,#layout-commercial select{max-width:100%}#framing-material-contents small{overflow-wrap:anywhere}
#roof-catalog-error{color:#8a3028;padding:12px;background:#fff1ec;border-left:3px solid #a24831}#roof-catalog-status{font-size:13px;color:#255641}#roof-catalog-table small,#roof-catalog-table .hint{overflow-wrap:anywhere}#roof-catalog-preview{border-left:3px solid #92aa8e;padding-left:12px;margin-block:12px}#roof-catalog-table td{min-width:145px;vertical-align:top}#roof-catalog-table .topology-toggle{align-items:flex-start}
#layout-project-library{padding:10px 0 16px;border-bottom:1px solid #d7dfd0}#layout-project-library h3{margin:4px 0;font-size:15px}#roof-project-status{font-size:12px;color:#255641}#roof-project-error{font-size:12px;color:#8a3028;padding:8px;background:#fff1ec}#roof-project-error[hidden]{display:none}#layout-project-library details{font-size:12px}

#layout-description textarea{width:100%;resize:vertical;font:inherit;padding:10px;border:1px solid #b8c7b2;border-radius:6px;box-sizing:border-box}#layout-description [hidden]{display:none}#layout-description h3{font-size:17px}#layout-description .fields{grid-template-columns:1fr}#roof-description-error:not(:empty){color:#8a3028;background:#fff1ec;border-left:3px solid #a24831;padding:10px}#roof-description-status{color:#255641;font-size:12px}#roof-description-preview{font-size:12px}#roof-description-preview svg{display:block;width:100%;height:200px;background:#f3f6ee;border:1px solid #cbd5c9}#layout-description .description-table{overflow:auto}#layout-description table{border-collapse:collapse;width:100%;font-size:11px}#layout-description td,#layout-description th{padding:7px;text-align:left;vertical-align:top;border-bottom:1px solid #d4dfcb}#layout-description-box>summary{font-weight:700;color:#255641}

#framing-fascias-controls svg{display:block;width:100%;height:230px;background:#f3f6ef;border:1px solid #c9d7c1}#framing-fascias-controls td{vertical-align:top;min-width:160px}#framing-fascias-controls label{font-size:12px}#framing-fascias-controls select{max-width:100%}

/* Screen legibility matches the main studio; keep drawing/print dimensions intact. */
@media screen {
  :root {color:#203b30;}
  .eyebrow,.hint,.mouse,.metrics span,.topology-legend,.scope {color:#455b49;font-size:14px;}
  label,.templates strong,.templates small {font-size:14px;}
  .templates strong {line-height:1.45;}
  #layout-message,#layout-warnings,#layout-feature-info,#layout-framing-detail {font-size:14px;line-height:1.6;}
  #layout-warnings {color:#6d512c;}
  #layout-framing-detail table,.crease-table,table {font-size:13px;line-height:1.5;}
  #layout-framing-detail th,#layout-framing-detail td small,th,td small {font-size:13px;line-height:1.6;color:#455b49;}
  input,select,textarea {color:#203b30;border-color:#acbda7;}
  input::placeholder,textarea::placeholder {color:#596b58;opacity:1;}
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible {outline:3px solid #356b45;outline-offset:3px;}
}

.roof-drawing-export{margin:18px 0;padding:14px;border:1px solid #adbfa5;border-radius:8px;background:#f7faf2}.roof-drawing-export>summary{font-size:15px;font-weight:650;cursor:pointer}.roof-drawing-export p,.roof-drawing-export li{font-size:14px;line-height:1.6;color:#354e3b}.roof-drawing-export [data-drawing-error]{color:#873b29}.roof-drawing-export input[type=number]{width:100%}.roof-drawing-export .actions{gap:8px;flex-wrap:wrap}

.roof-drawing-print-preview iframe{display:block;width:100%;height:660px;margin-top:12px;border:1px solid #adbfa5;background:white}.roof-drawing-print-preview>button{margin:4px}

/* Seller-facing list: physical project pieces first; commercial allocation is secondary. */
.sales-pick-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;background:transparent;color:#203b30;padding:0;margin:0 0 16px;flex-wrap:wrap}.sales-pick-heading h2{font-size:21px;margin:0}.sales-pick-heading p{font-size:14px;color:#40553f;margin:6px 0}.sales-pick-actions{display:flex;gap:8px;flex-wrap:wrap}.sales-pick-actions button{font:inherit;font-size:14px;color:#244b32;background:white;border:1px solid #9caf96;border-radius:6px;padding:9px 11px;cursor:pointer}.sales-pick-actions button[aria-pressed=true]{background:#254d3c;color:white}.sales-simple-table{overflow:auto;border:1px solid #c0ceba;border-radius:8px;background:white;margin:12px 0}.sales-simple-table table{width:100%;border-collapse:collapse;line-height:1.45;font-size:15px}.sales-simple-table th{font-size:13px;color:#304a31;padding:10px;text-align:left;background:#edf3e8}.sales-simple-table td{padding:12px 10px;color:#213d2b;vertical-align:top;border-bottom:1px solid #e2e9dc}.sales-simple-table td strong{font-size:16px;color:#193e29;white-space:nowrap}.sales-simple-table td small{display:block;font-size:12px;color:#52654c;line-height:1.5;margin-top:4px}.sales-list-note{font-size:13px;color:#40553f;line-height:1.6}.sales-pending{padding:10px;background:#fff4dd;border:1px solid #c7ab68;border-radius:6px;font-size:14px;color:#5c491f}.sales-pick-list textarea{width:100%;font:14px/1.6 monospace}.framing-sales-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,1fr);gap:18px;align-items:start;margin:18px 0}.framing-model-pane{min-width:0}#framing-sales-list{max-height:620px;overflow:auto;border:1px solid #b9cbb1;border-radius:9px;padding:14px;background:#f7faf3}#materials-technical-details{margin-top:24px;padding:16px;border:1px solid #cad4c4;border-radius:8px;color:#40553f}@media(max-width:1400px){.framing-sales-workspace{grid-template-columns:1fr}#framing-sales-list{max-height:560px}}

/* Short creation flow, keeping the existing detailed editor below. */
.quick-roof{border:1px solid #b8cbb1;border-radius:12px;background:#fff;padding:22px;margin:20px 0 26px}.quick-roof-heading{display:flex;justify-content:space-between;align-items:start;gap:24px}.quick-roof-heading h2{font-size:24px;line-height:1.25;margin:7px 0}.quick-roof-heading p{font-size:14px;color:#3f5647}.quick-roof-heading>details{flex:0 0 200px;margin:0;border:0;padding:0}.quick-roof fieldset{border:0;padding:0;margin:0;min-width:0}.quick-roof-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px}.quick-roof label{font-size:14px;color:#294735}.quick-roof-tile{grid-column:span 2}.quick-roof .primary{width:auto;min-width:240px;font-size:16px;font-weight:650;padding:12px 24px}.quick-roof [role=alert]:not(:empty){color:#882f23;padding:12px;background:#fff1e8;border-left:3px solid #b44d32}.quick-roof [role=status]{font-size:14px;color:#275841}.quick-roof .hint{font-size:13px}.quick-roof [disabled]{opacity:.65}@media(max-width:900px){.quick-roof-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-roof-heading{display:block}.quick-roof-heading>details{margin:12px 0}}@media(max-width:550px){.quick-roof{padding:16px}.quick-roof-fields{grid-template-columns:1fr}.quick-roof-tile{grid-column:auto}.quick-roof .primary{width:100%;min-width:0}}

.sales-partial{display:block;padding:5px 7px;margin-top:5px;color:#7b2d1c;background:#fff0e6;border-left:3px solid #ad4b2d;font-size:13px;font-weight:700}

.client-share-dialog{width:min(700px,calc(100vw - 30px));max-height:85vh;overflow:auto;border:1px solid #9eb49a;border-radius:12px;padding:25px;background:#fff;color:#234733;font:15px/1.6 Arial,sans-serif}.client-share-dialog::backdrop{background:#10291c88}.client-share-dialog h2{font-size:23px;margin:0 35px 15px 0}.client-share-dialog p{color:#425e47}.client-share-close{float:right;border:0;background:white;font-size:26px;color:#214a34;cursor:pointer}.client-share-row{border-top:1px solid #c4d2bc;padding:16px 0}.client-share-row strong,.client-share-row input{display:block}.client-share-row input{width:100%;padding:11px;margin:10px 0;border:1px solid #b2c1ac;color:#234733;background:#f4f7ef}.client-share-row button,.client-share-dialog>[data-create]{padding:9px 12px;border:1px solid #9db297;border-radius:6px;background:#f7faf3;color:#234733;cursor:pointer}.client-share-row a{font-size:14px}.client-share-dialog [data-status]{font-weight:600}.client-share-dialog button:disabled{opacity:.5}

/* Edge attachment keeps only controls relevant to the operation visible. */
#layout-sketch.roof-attach-mode{padding:10px;margin:8px 0}
#layout-sketch.roof-attach-mode #sketch-plan{height:230px;cursor:pointer}
#layout-sketch.roof-attach-mode #sketch-attachment-editor>.fields{grid-template-columns:repeat(4,minmax(0,1fr))}
#layout-sketch.roof-attach-mode #sketch-proposal{padding:6px;margin:6px 0}
@media(max-width:900px){#layout-sketch.roof-attach-mode #sketch-attachment-editor>.fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#layout-sketch.roof-attach-mode #sketch-attachment-editor>.fields{grid-template-columns:1fr}#layout-sketch.roof-attach-mode #sketch-plan{height:200px}}
/* Explicit geometric placement suggestions remain compact and collapsed. */
.roof-truss-position-search{margin:4px 0;font-size:14px;line-height:1.35}
.roof-truss-position-search>details{margin:0;padding:3px 0;border:0}
.roof-truss-position-search summary{padding:4px 0;min-height:28px;font-size:14px}
.roof-truss-position-search p{margin:5px 0}.roof-truss-position-search label{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:5px 0;font-size:14px}
.roof-truss-position-search input{width:90px;min-height:30px;height:30px;padding:3px 5px;font-size:14px}
.roof-truss-position-search button{min-height:28px;padding:4px 7px;font-size:14px}
.roof-truss-position-search table{border-collapse:collapse;width:100%;font-size:13px;margin:5px 0}
.roof-truss-position-search th,.roof-truss-position-search td{padding:4px 6px;border-bottom:1px solid #cad5c8;text-align:left}
.roof-truss-position-search [hidden]{display:none!important}.roof-truss-position-search [role=alert]:empty{display:none}.roof-truss-position-search [role=alert]:not(:empty){color:#803821;background:#fff0e7;padding:5px 7px}

/* 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:14px;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:30px;padding:4px 8px;font-size:14px}.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}

.framing-sales-workspace.framing-wide-view{grid-template-columns:minmax(0,1fr)}.framing-wide-view #framing-sales-list{display:none}.framing-wide-view #framing-canvas{height:65dvh;min-height:360px;max-height:750px}