:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1c2c3c;background:#eef2f6;font-size:16px;line-height:1.5;--ink:#19364e;--blue:#17699b;--line:#d8e1e9;--muted:#607486;--orange:#e6a64a}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer;border:1px solid #c8d5df;border-radius:6px;background:white;color:var(--ink);padding:8px 13px;font-size:.875rem;font-weight:600}button:hover{background:#eaf3f9;border-color:#7da6c1}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--blue);border-color:var(--blue);color:#fff}button.primary:hover{background:#12577f}a{color:var(--blue)}:focus-visible{outline:3px solid #e6a64a;outline-offset:3px}input,select{width:100%;min-width:0;background:#fff;color:var(--ink);border:1px solid #c8d5df;border-radius:5px;padding:9px 10px;font-size:.925rem}input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue);flex:none}input:invalid{border-color:#c75641}label{display:block;font-size:.875rem;font-weight:550;color:#40586b}label>input,label>select{margin-top:5px}h1,h2,h3,p{margin:0}h1{font-size:1.6rem;font-weight:650;letter-spacing:-.04em}h2{font-size:1.125rem;font-weight:650;letter-spacing:-.02em}h3{font-size:1rem}.topbar{min-height:82px;padding:16px 30px;background:#132d43;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-size:1.4rem;letter-spacing:.13em;font-weight:700}.brand small{display:block;font-size:.65rem;letter-spacing:.15em;color:#a9c0d2;font-weight:500}.brand-mark{background:#e6a64a;color:#132d43;font-size:1.5rem;font-weight:800;display:grid;place-items:center;width:42px;height:42px;border-radius:3px;letter-spacing:0}.topbar nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.topbar .external{font-size:.875rem;color:#c8d8e5;text-decoration:none;margin-left:12px}.topbar button{background:#213f55;border-color:#3c566a;color:#fff}.topbar .primary{background:#287eaf;border-color:#287eaf}main{display:grid;grid-template-columns:350px minmax(0,1fr);max-width:1900px;margin:auto}.editor{background:#fff;border-right:1px solid var(--line);align-self:stretch}.editor-head{padding:22px 24px;border-bottom:1px solid var(--line)}.editor-head input{margin-top:8px;font-weight:600}.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.15em;color:var(--muted)}.input-section{padding:22px 24px;border-bottom:1px solid var(--line)}.input-section h2{margin-bottom:17px}.input-section h2 span{font-size:.75rem;color:#648299;margin-right:11px;font-weight:500}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.measurement{display:flex;gap:6px;margin-top:5px}.unit-input{display:flex;align-items:center;position:relative;min-width:0}.unit-input input{padding-right:28px}.unit-input span{position:absolute;right:9px;color:#6a8193;font-size:.75rem;pointer-events:none}.hint{font-size:.8rem;color:#617485;line-height:1.55;margin-top:9px}.inline{display:flex;gap:7px;align-items:center;font-weight:500}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-title h2{margin:0}.section-title+.hint{margin-top:10px;margin-bottom:14px}#panel-fields>label{margin-bottom:12px}#purlin-fields>label{margin-bottom:12px}.workspace{padding:26px 30px 30px;min-width:0}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.muted{color:var(--muted);font-size:.875rem}.model-card{background:#dce7f0;border:1px solid #c9d7e2;border-radius:10px;overflow:hidden}.model-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;gap:10px;font-size:.875rem}.model-toolbar>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.model-toolbar button{padding:5px 9px;font-size:.8rem;background:#ffffffb3}.model-toolbar label{font-size:.8rem}.model-footer{padding:10px 18px;display:flex;justify-content:space-between;color:#577086;font-size:.75rem}#viewer{height:390px;position:relative;overflow:hidden}#viewer canvas{display:block;width:100%;height:100%;touch-action:none}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}.stat{background:white;border:1px solid var(--line);padding:17px 20px;border-radius:7px}.stat strong{display:block;font-size:1.55rem;letter-spacing:-.04em;font-weight:650}.stat span{color:#657a8a;font-size:.8rem}.stat small{font-size:.8rem;font-weight:450;margin-left:5px}.takeoff{background:white;border:1px solid var(--line);border-radius:9px;overflow:hidden}.results-heading{padding:22px 22px 18px;display:flex;justify-content:space-between;align-items:center}.tabs{display:flex;gap:20px;padding:0 22px;border-bottom:1px solid var(--line);overflow:auto}.tabs button{border:0;border-radius:0;border-bottom:3px solid transparent;background:transparent;padding:10px 0;color:#667b8d;white-space:nowrap}.tabs button[aria-selected=true]{border-bottom-color:var(--blue);color:var(--blue)}.table-wrap{overflow:auto;max-height:590px}table{width:100%;border-collapse:collapse;font-size:.875rem}th{text-align:left;background:#f5f8fa;font-weight:600;font-size:.75rem;letter-spacing:.04em;color:#52697a;position:sticky;top:0;z-index:1}td,th{padding:13px 20px;border-bottom:1px solid #e6ecf1;white-space:nowrap}td.notes{white-space:normal;min-width:220px;color:#617687;font-size:.8rem}.num{text-align:right;font-variant-numeric:tabular-nums}.code{font-family:ui-monospace,monospace;color:#48667d;font-size:.8rem}.subtle{display:block;font-size:.75rem;color:#647b8d}.result-note{padding:13px 22px;color:#667b8d;font-size:.8rem;background:#f9fbfc}.page-footer{margin-top:22px;color:#738695;font-size:.8rem}.issues{background:#fff7e9;border:1px solid #e8cea0;border-radius:7px;padding:15px 20px;margin-bottom:20px;font-size:.875rem;color:#805723}.issues.error{background:#fff0ed;border-color:#e7b6ac;color:#903e2b}.issues ul{margin:8px 0 0;padding-left:20px}.issues li+li{margin-top:5px}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px}.check-grid label{display:flex;align-items:center;gap:7px;font-size:.825rem;font-weight:450}.check-grid input{margin:0}.opening-card{border:1px solid var(--line);border-radius:6px;padding:11px 12px;margin-top:10px;background:#f8fafc}.opening-card strong{font-size:.875rem}.opening-card p{font-size:.8rem;color:#637b8e;margin:3px 0 8px}.opening-card button{padding:3px 8px;font-size:.75rem;margin-right:6px}summary{cursor:pointer;font-size:.875rem;font-weight:600}#rule-fields{padding-top:16px}#rule-fields>label{margin-bottom:12px}.rule-section{border-top:1px solid var(--line);padding-top:14px;margin-top:16px}.rule-section h3{margin-bottom:12px}.assumptions{padding:20px 24px;line-height:1.6;font-size:.875rem}.assumptions p{margin-bottom:12px}.assumptions ul{padding-left:20px}.assumptions li{margin-bottom:10px}.rule-override{width:90px;padding:5px}.row-status{font-size:.75rem;color:#8a6224}dialog{width:min(560px,calc(100% - 30px));padding:25px;border:1px solid #c5d1dc;border-radius:10px;color:var(--ink);box-shadow:0 25px 100px #132d4333}dialog::backdrop{background:#122c4566}dialog .section-title{margin-bottom:20px}dialog>form>.primary{width:100%;margin-top:20px}#opening-fields>label{margin-bottom:14px}.form-error{color:#a6422d;font-size:.875rem;margin-top:10px}#message{position:fixed;z-index:40;top:90px;right:25px;max-width:min(460px,calc(100% - 40px));padding:14px 20px;background:#173e59;color:#fff;box-shadow:0 5px 30px #0d284433;border-radius:7px;font-size:.875rem}#drop-overlay{position:fixed;inset:16px;background:#163e59ef;color:#fff;z-index:100;border:3px dashed #a1c9e3;border-radius:12px;place-items:center;font-size:1.5rem;padding:30px;text-align:center}#drop-overlay:not([hidden]){display:grid}[hidden]{display:none!important}.empty{padding:24px;color:#687e8e;font-size:.875rem}#show-purlins{margin:0}.disclosure-note{padding:12px 0;color:#526e83;font-size:.8rem}
@media(min-width:1550px){#viewer{height:480px}.workspace{padding:32px 42px}.stats{gap:20px}}@media(max-width:1100px){main{grid-template-columns:310px minmax(0,1fr)}.workspace{padding:20px}.input-section{padding:20px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.model-toolbar{align-items:flex-start;flex-direction:column}.workspace-heading{align-items:flex-start;flex-direction:column;gap:5px}.topbar{padding:16px 20px}.external{display:none}#viewer{height:330px}.tabs{gap:16px}.model-footer{gap:8px;flex-wrap:wrap}}@media(max-width:760px){main{display:flex;flex-direction:column}.editor{border-right:0}.workspace{order:-1;padding:16px}.topbar{align-items:flex-start;flex-direction:column;gap:15px}.topbar nav{width:100%}.topbar nav button{flex:1}.brand small{display:inline;font-size:.65rem;margin-left:8px}.topbar .external{display:block;width:100%;margin:0;padding-top:3px}.model-toolbar>div{gap:8px}#viewer{height:300px}.stats{gap:8px;margin:14px 0}.stat{padding:12px 16px}.stat strong{font-size:1.4rem}.input-section{padding:20px 24px}.editor-head{padding:20px 24px}.takeoff{margin-top:14px}.table-wrap{max-height:380px}.workspace-heading h1{font-size:1.4rem}.results-heading{padding:16px}.tabs{padding:0 16px;gap:16px}td,th{padding:10px 14px}.page-footer{margin-bottom:10px}.check-grid{grid-template-columns:repeat(2,1fr)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Give dimensions a full row and keep unit labels outside the editable value. */
#dimension-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.measurement-field{min-width:0;margin-bottom:14px}
.field-grid>.measurement-field{margin-bottom:0}
.measurement-title{font-size:.875rem;font-weight:550;color:var(--ink)}
.measurement{gap:10px}
.measurement-unit{flex:1;min-width:0}
.measurement-unit>span{font-size:.75rem;font-weight:400;color:var(--muted)}
.measurement-unit>input{display:block;margin-top:3px;padding:9px 10px}
/* Dark working surface; panel finish colors are independent of the interface theme. */
.opening-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.opening-top strong{max-width:52%}.opening-top .inline{font-size:.75rem;white-space:nowrap}.opening-top input{margin:0}.measurement>.unit-input{flex:1;min-width:0}.model-toolbar label{color:#b9ccdc}.editor input[type=color]{height:38px;padding:3px}#rule-fields>.field-grid{grid-template-columns:1fr}#rule-fields .measurement{max-width:260px}
:root{color-scheme:dark;color:#dce7f0;background:#0c141e;--ink:#e0ebf4;--blue:#62b8eb;--line:#2b3c4d;--muted:#9ab0c4}
button,input,select{background:#162636;border-color:#3c5267;color:#e1ebf4}button:hover{background:#25425a;border-color:#7199b8}button.primary{background:#237cae;color:#fff;border-color:#3798ce}button.primary:hover{background:#3294c8}label{color:#b9cddd}.topbar{background:#101f2e;border-bottom:1px solid #2b3c4d}.editor,.stat,.takeoff{background:#121f2c}.model-card{background:#142638;border-color:#2b4257}.model-toolbar button{background:#20374d;color:#dce8f1;border-color:#3e5970}.model-footer,.hint,.subtle,.page-footer,.stat span,.muted{color:#97afc3}.opening-card{background:#172b3c}.opening-card p{color:#a4bed2}.opening-card button{background:#213b50}.tabs button{color:#93aabe}.tabs button[aria-selected=true]{color:#7dccf9;border-color:#64bcef}th{background:#1b2e3e;color:#b4cadd}td,th{border-color:#283b4d}td.notes,.code{color:#acc5d7}.result-note{background:#162838;color:#9fb9cc}.issues{background:#342b1b;border-color:#6c5530;color:#e8c183}.issues.error{background:#391f24;border-color:#814451;color:#ffb7b0}.row-status{color:#e7bd7a}.assumptions{color:#b9cddd}.form-error{color:#ffb6a7}dialog{background:#132638;color:#dfebf5;border-color:#415e76}.disclosure-note,.empty{color:#9fb5c6}input:invalid{border-color:#b76f59}a{color:#79c7f4}

.panel-length-editor{width:180px;text-align:left}.panel-length-editor+button{margin-top:5px;padding:2px 7px;font-size:.75rem}

.roof-fields label>select,.roof-fields label>.unit-input{margin-top:5px}.roof-fields select,.roof-fields input{height:42px}

#dimension-fields #high-eave-field{margin:0}#roof-derived:empty{display:none}
.length-input{height:42px;padding:9px 10px;font-size:.925rem;font-weight:400;font-variant-numeric:tabular-nums}input.length-input[readonly]{cursor:default}.panel-length-editor .length-input{margin-top:0}

#high-eave-value:disabled{opacity:.45;cursor:not-allowed}

.roof-shape-field{margin-bottom:14px}.roof-shape-field select{height:42px}