@font-face{font-family:"Work Sans";src:url("assets/WorkSans-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
[hidden]{display:none!important}
:root{--orange:#ff6700;--burnt:#a54000;--tint:#fff3e7;--ink:#1a1a1a;--body:#3d3d3d;--muted:#6b6b6b;--line:#e2e2de;--wash:#f6f6f3;--paper:#fff;
--ok:#1f7a4d;--ok-bg:#e8f5ee;--warn:#8a5a00;--warn-bg:#fff6df;--bad:#b42318;--bad-bg:#fdecea;--info:#24548f;--info-bg:#e9f0fa;
--r:6px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--t-xs:12px;--t-sm:13px;--t-base:14px;--t-lg:17px;--t-xl:22px}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:"Work Sans",system-ui,sans-serif;font-size:var(--t-base);color:var(--body);background:var(--wash);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);margin:0;font-weight:600;letter-spacing:-.01em}h1{font-size:var(--t-xl)}h2{font-size:var(--t-lg)}h3{font-size:var(--t-base)}
.muted{color:var(--muted)}.err{color:var(--bad);min-height:1.2em;font-size:var(--t-sm);margin:0}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:7px 9px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--orange);outline-offset:-1px;border-color:transparent}
textarea{resize:vertical;min-height:70px;line-height:1.45}
label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-xs);color:var(--muted);font-weight:500}
label.check{flex-direction:row;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--body)}label.check input{width:auto}
.btn{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:8px 14px;cursor:pointer;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:#bbb}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--orange)}.btn.primary:hover{background:#000}
.btn.accent{background:var(--orange);border-color:var(--orange);color:#1a1a1a}.btn.sm{padding:4px 9px;font-size:var(--t-sm)}
.btn.danger{color:var(--bad)}.link{background:none;border:0;padding:0;color:var(--burnt);cursor:pointer;text-decoration:underline;font-size:var(--t-sm)}
/* login */
.login{min-height:100%;display:grid;place-items:center;padding:var(--s5)}
.login-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:var(--s6);width:100%;max-width:380px;display:flex;flex-direction:column;gap:var(--s3);box-shadow:0 1px 0 rgba(0,0,0,.03)}
.login-logo{height:34px;width:auto;align-self:flex-start;margin-bottom:var(--s2)}
/* shell */
.app{display:grid;grid-template-columns:208px 1fr;min-height:100%}
.side{background:var(--ink);color:#d9d9d9;display:flex;flex-direction:column;padding:var(--s4) var(--s3);position:sticky;top:0;height:100vh}
.brand{display:flex;flex-direction:column;gap:6px;padding:0 var(--s2) var(--s5)}.brand img{height:26px;width:auto;align-self:flex-start;background:#fff;padding:3px 6px;border-radius:4px}
.brand span{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:#a8a8a8}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{color:#d9d9d9;text-decoration:none;padding:8px 10px;border-radius:var(--r);font-weight:500}
.side nav a:hover{background:#2a2a2a}.side nav a.on{background:#2f2f2f;color:#fff;box-shadow:inset 3px 0 0 var(--orange)}
.who{margin-top:auto;padding:var(--s3) var(--s2);border-top:1px solid #333;font-size:var(--t-sm)}.who .link{color:#ffb27f;margin-top:6px}
.view{padding:var(--s5) var(--s6);min-width:0}
.head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}
.head .sub{color:var(--muted);font-size:var(--t-sm);margin-top:3px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px}
.card-pad{padding:var(--s4)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:var(--t-sm);cursor:pointer}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* tables */
table.t{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.t th{text-align:left;font-weight:500;color:var(--muted);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;padding:10px 12px;border-bottom:1px solid var(--line);background:#fafaf8;position:sticky;top:0}
.t td:first-child{white-space:nowrap}
.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr.click{cursor:pointer}.t tr.click:hover td{background:#fbfaf6}
.t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t input,.t select{padding:5px 7px}
.tw{overflow:auto;max-height:calc(100vh - 170px)}
/* badges */
.b{display:inline-block;border-radius:999px;padding:2px 9px;font-size:var(--t-xs);font-weight:600;white-space:nowrap}
.b.draft{background:#eee;color:#555}.b.review{background:var(--info-bg);color:var(--info)}.b.approved{background:var(--ok-bg);color:var(--ok)}
.b.sent{background:var(--tint);color:var(--burnt)}.b.won{background:var(--ok);color:#fff}.b.lost,.b.archived{background:#f1f1f1;color:#888}
.b.ok{background:var(--ok-bg);color:var(--ok)}.b.warn{background:var(--warn-bg);color:var(--warn)}.b.bad{background:var(--bad-bg);color:var(--bad)}.b.dnd{background:var(--bad-bg);color:var(--bad)}
/* editor */
.ed{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s5);align-items:start}
.ed-main{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 var(--s4)}
.tab{background:none;border:0;padding:12px 14px;cursor:pointer;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--ink);border-bottom-color:var(--orange)}
.presets{display:flex;flex-wrap:wrap;gap:8px;align-items:end;padding:var(--s3);background:var(--wash);border-radius:var(--r);margin-bottom:var(--s3)}
.presets label{width:auto}.presets input,.presets select{width:86px}
.items td.qty input{width:70px}.items td.cost input{width:96px}.items td.hrs input{width:64px}
.items td.name input{min-width:220px}
.items .src{font-size:var(--t-xs);color:var(--muted)}
.miss{color:var(--bad);font-weight:600}
.side-panel{position:sticky;top:var(--s5);display:flex;flex-direction:column;gap:var(--s3);max-height:calc(100vh - 48px);overflow:auto}
.opt-sum{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}.opt-sum:last-child{border-bottom:0}
.opt-sum .tot{font-size:var(--t-xl);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.kv{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-sm);padding:2px 0;font-variant-numeric:tabular-nums}.kv span:first-child{color:var(--muted)}
.list{margin:0;padding-left:18px;font-size:var(--t-sm)}.list li{margin:3px 0}
.alert{border-radius:var(--r);padding:10px 12px;font-size:var(--t-sm)}.alert.bad{background:var(--bad-bg);color:var(--bad)}.alert.warn{background:var(--warn-bg);color:var(--warn)}.alert.ok{background:var(--ok-bg);color:var(--ok)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.saving{font-size:var(--t-xs);color:var(--muted)}
.copybox{background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:10px;font-size:var(--t-sm);white-space:pre-wrap;word-break:break-word}
/* modal / toast */
.modal{position:fixed;inset:0;background:rgba(20,20,20,.5);display:grid;place-items:center;z-index:50;padding:var(--s4)}
.modal-card{background:#fff;border-radius:10px;width:min(560px,100%);max-height:92vh;overflow:auto;padding:var(--s5);position:relative}
.modal-card.wide{width:min(1180px,100%);height:92vh;padding:0;display:flex;flex-direction:column}
.modal-card.wide iframe{border:0;flex:1;width:100%}
.modal-x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:24px;cursor:pointer;color:var(--muted);z-index:2}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);font-size:var(--t-sm);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.toast.on{opacity:1}
.skel{height:14px;background:linear-gradient(90deg,#eee,#f6f6f6,#eee);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:4px;margin:10px 0}
@keyframes sk{to{background-position:-200% 0}}
.empty{padding:var(--s6);text-align:center;color:var(--muted)}
@media(max-width:1100px){.ed{grid-template-columns:1fr}.side-panel{position:static;max-height:none}}
@media(max-width:760px){.app{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;padding:10px}
.brand{padding:0 8px 0 0}.side nav{flex-direction:row;flex-wrap:wrap}.who{margin:0 0 0 auto;border:0;padding:0;display:flex;gap:8px;align-items:center}.who .link{margin:0}
.view{padding:var(--s4)}.grid2,.grid3,.grid4{grid-template-columns:1fr 1fr}}
a.btn{text-decoration:none;color:var(--ink)}a.btn.primary{color:#fff}
.items tr.grp td{background:#fafaf8}.items tr.grp .link{color:var(--ink);text-decoration:none;font-size:var(--t-sm)}

.live{display:inline-block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:#e8f5ec;color:#1e7a3c;border-radius:3px;padding:1px 4px;vertical-align:middle}

/* roof lookup */
.roof-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.roof-kpis>div{background:var(--wash);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.roof-kpis span{font-size:12px;color:var(--muted)}.roof-kpis b{font-size:18px}.roof-kpis em{font-style:normal;font-size:12px;color:var(--muted)}
.roof-t td.n,.roof-t th.n{text-align:right}
.roof-fit{display:flex;flex-direction:column;gap:4px}
.roof-warn{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:12px;display:flex;flex-direction:column;gap:4px}
.roof-actions{margin-top:12px}.roof-xy{margin-top:10px}
@media (max-width:900px){.roof-kpis{grid-template-columns:1fr 1fr}.roof-grid{grid-template-columns:1fr}}
.roof-img{margin-top:14px}.roof-img img{display:block;width:100%;max-width:560px;height:auto;border-radius:8px;background:var(--wash)}
.roof-img-cap{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:12px;margin-top:6px}
.roof-legend{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}.roof-legend i{display:block;width:90px;height:8px;border-radius:4px;background:linear-gradient(90deg,#34125c,#7a1e6e,#da4830,#faa01e,#fff6aa)}
.roof-match{margin-top:10px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.45}.roof-match.ok{background:#eef6ee;color:#1e5a2a}.roof-match.need{background:#fff4e8;color:#7a3a00}.roof-match.need b{display:block;margin-bottom:2px}

/* Review Oct 24, 2026 */
input::placeholder,textarea::placeholder{color:#a3a39c;font-style:italic;opacity:1}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.listbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.listbar input{max-width:320px}
.searchrow{display:flex;gap:8px;margin-bottom:12px;max-width:560px}.searchrow input{flex:1}
.hasq{font-size:12px;margin-top:4px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}.hasq a{color:var(--burnt)}
.tscroll{overflow-x:auto;max-width:100%}
.saving{font-size:var(--t-xs);font-weight:600;border-radius:999px;padding:4px 10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.saving.ok{background:var(--ok-bg);color:var(--ok)}.saving.busy{background:#eee;color:#555}.saving.warn{background:var(--warn-bg);color:var(--warn)}.saving.bad{background:var(--bad-bg);color:var(--bad);white-space:normal}
.nextstep{margin-top:6px;font-size:var(--t-sm);color:var(--ink);background:var(--tint);border-left:3px solid var(--orange);padding:5px 10px;border-radius:0 var(--r) var(--r) 0;display:inline-block}
.alert.stale{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.ed-title{overflow-wrap:anywhere}
.kv.cust-sees{background:var(--tint);margin:4px -6px 2px;padding:4px 6px;border-radius:4px}.kv.cust-sees span:first-child{color:var(--burnt)}
.pv-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 52px 8px 16px;border-bottom:1px solid var(--line);font-size:13px}
.seg{display:inline-flex;gap:4px}.seg .btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pv-wrap{flex:1;display:flex;justify-content:center;background:var(--wash);min-height:0}.pv-wrap iframe{border:0;flex:1;width:100%;background:#fff;transition:max-width .15s}
.mbar{display:none}
@media(max-width:1100px){
 .mbar{display:flex;position:sticky;bottom:0;z-index:20;gap:8px;align-items:center;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.06);padding:10px var(--s4);margin:var(--s4) calc(-1 * var(--s6)) calc(-1 * var(--s5))}
 .mbar-sum{flex:1;min-width:0;font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:760px){
 .mbar{margin:var(--s4) calc(-1 * var(--s4)) calc(-1 * var(--s4))}
 .btn{min-height:40px}.btn.sm{min-height:36px;padding:6px 12px}.chip{padding:8px 14px}.tab{padding:12px 12px}
 input,select,textarea{font-size:16px}  /* no iOS zoom on focus */
 .listbar input{max-width:none}
 .head{align-items:flex-start}
 table.qlist thead{display:none}table.qlist,table.qlist tbody{display:block}
 table.qlist tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px;border-bottom:1px solid var(--line)}
 table.qlist td{display:block;border:0;padding:0;white-space:normal!important;text-align:left}
 table.qlist td[data-l=Quote]{grid-column:1}table.qlist td[data-l=Status]{grid-column:2;grid-row:1;text-align:right}
 table.qlist td.cust{grid-column:1/-1;font-weight:500;color:var(--ink)}
 table.qlist td[data-l=Product]{grid-column:1;font-size:12px;color:var(--muted)}table.qlist td[data-l=Margin]{grid-column:2;grid-row:3;text-align:right}
 table.qlist td[data-l=Options]{grid-column:1;font-size:12px}table.qlist td[data-l=Updated]{grid-column:2;text-align:right;font-size:12px}
 table.qlist td[data-l=Owner]{display:none}
 .modal{padding:8px;align-items:end}.modal-card{max-height:96vh}.modal-card.wide{height:96vh}
}