/* Quick Quote — Mattermake design system tokens (from the design handoff). */
@font-face{font-family:"Suisse Intl";src:url("assets/SuisseIntl-Book.otf") format("opentype");font-weight:400 500;font-display:swap}
:root{
  --black:#000;--white:#fff;--g100:#EDEDED;--g200:#D2D2D2;--g300:#CCCCCC;--g500:#8A8A8A;--g700:#3A3A3A;
  --terracotta:#D76545;--khaki:#91927C;--slate:#738683;--rust:#7C494C;
  --font:"Suisse Intl","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--fast:120ms;--base:200ms;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-weight:450;font-size:13px;color:var(--black);background:var(--white);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;cursor:pointer}
a:hover{color:var(--terracotta)}
.num{font-variant-numeric:tabular-nums}
.r{text-align:right}
.muted{color:var(--g500)}
.sec{color:var(--g700)}
.err-t{color:var(--terracotta)}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:1px}

/* ---------- top bar */
#app{display:flex;flex-direction:column;height:100vh;min-width:1280px}
.topbar{height:48px;flex:none;display:flex;align-items:center;gap:16px;padding:0 16px;border-bottom:1px solid var(--black);background:var(--white);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:13px;display:block}
.brand span{font-size:14px}
.crumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--black);white-space:nowrap;min-width:0;overflow:hidden}
.crumb>span:nth-child(3){overflow:hidden;text-overflow:ellipsis;max-width:340px}
.crumb .sep{color:var(--g500)}
.topbar .centre{display:flex;gap:22px;height:48px;align-items:stretch;margin-left:28px}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:12px}
.toptab{display:flex;align-items:center;font-size:14px;color:var(--g500);cursor:pointer;border-bottom:2px solid transparent;padding-top:2px}
.toptab.on{color:var(--black);border-color:var(--black)}
.toptab:hover{color:var(--terracotta)}
.sq{display:inline-block;width:8px;height:8px;border:1px solid var(--black);vertical-align:middle}
.sq.slate{background:var(--slate)}.sq.khaki{background:var(--khaki)}.sq.terra{background:var(--terracotta)}.sq.white{background:#fff}.sq.grey{background:var(--g200)}

/* ---------- buttons, inputs */
.btn{border:1px solid var(--black);background:var(--white);padding:0 14px;height:32px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.btn:hover{background:var(--black);color:var(--white)}
.btn.primary{background:var(--black);color:var(--white)}
.btn.primary:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--black)}
.btn.ghost{border-color:transparent}
.btn.ghost:hover{background:var(--g100);color:var(--black)}
.btn.sm{height:26px;padding:0 10px;font-size:12px}
.btn:disabled{opacity:.4;cursor:default}
.chip{border:1px solid var(--black);background:#fff;font-size:12px;height:24px;padding:0 8px;cursor:pointer;white-space:nowrap}
.chip:hover{background:var(--black);color:#fff}
.chip.grey{border-color:var(--g300);color:var(--g700)}
.uinput{border:none;border-bottom:1px solid var(--black);background:transparent;height:30px;padding:0 2px;outline:none;min-width:0}
.uinput:focus{border-bottom:2px solid var(--black)}
.field{display:flex;flex-direction:column;gap:4px}
.lbl{font-size:11px;color:var(--g500)}
.box{border:1px solid var(--black);background:#fff;height:28px;padding:0 6px;outline:none;min-width:0}
.box:focus{border-width:2px;padding:0 5px}
select.box{padding-right:2px}
.seg{display:inline-flex;border:1px solid var(--black)}
.seg button{border:none;background:#fff;height:26px;padding:0 10px;cursor:pointer;font-size:12px;white-space:nowrap}
.seg button+button{border-left:1px solid var(--black)}
.seg button.on{background:var(--black);color:#fff}
.seg button:not(.on):hover{color:var(--terracotta)}
.switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;user-select:none}
.switch i{width:26px;height:14px;border:1px solid var(--black);position:relative;background:#fff;transition:background var(--fast)}
.switch i:after{content:"";position:absolute;top:1px;left:1px;width:10px;height:10px;background:var(--black);transition:left var(--fast) var(--ease)}
.switch.on i{background:var(--black)}.switch.on i:after{left:13px;background:#fff}
.radio{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;padding:3px 0}
.radio i{width:12px;height:12px;border:1px solid var(--black);border-radius:50%;display:inline-block;position:relative}
.radio.on i:after{content:"";position:absolute;inset:2px;background:var(--black);border-radius:50%}
.tag{display:inline-block;font-size:11px;padding:2px 6px;border:1px solid var(--black);line-height:1.2}
.tag.Draft{background:#fff}.tag.Sent{background:#000;color:#fff}.tag.Won{background:var(--slate)}.tag.Lost{background:var(--g200);border-color:var(--g200)}
.tag.auto{border-color:var(--g300);color:var(--g500);font-size:10px;padding:1px 4px}
.sw{display:inline-block;width:12px;height:12px;border:1px solid var(--black);flex:none;vertical-align:middle}
h1,h2,h3{font-weight:450;margin:0}
.h40{font-size:40px;letter-spacing:-.02em;line-height:1.05}
.h28{font-size:28px;letter-spacing:-.01em;line-height:1.1}
.h20{font-size:20px;letter-spacing:-.01em;line-height:1.2}
.h16{font-size:16px}

/* ---------- tables */
table.t{border-collapse:collapse;width:100%}
.t th{font-size:11px;color:var(--g500);font-weight:450;text-align:left;height:28px;border-bottom:1px solid var(--black);padding:0 8px;white-space:nowrap;user-select:none}
.t th.sort{cursor:pointer}.t th.sort:hover{color:var(--black)}
.t td{height:30px;border-bottom:1px solid var(--g100);padding:0 8px;white-space:nowrap}
.t tr.issue td{background:var(--g100)}
.t tr.issueline td{height:24px;font-size:12px;border-bottom:1px solid var(--g300);background:var(--g100)}
.t tr.click{cursor:pointer}.t tr.click:hover td{background:var(--g100)}
.t td.num,.t th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- pages */
.page{flex:1;overflow:auto;padding:32px 40px}
.page-head{display:flex;align-items:flex-end;gap:24px;margin-bottom:24px}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--g300);margin-bottom:8px}
.tabs .tb{padding:8px 0;cursor:pointer;color:var(--g500);border-bottom:2px solid transparent;margin-bottom:-1px;font-size:14px}
.tabs .tb.on{color:#000;border-color:#000}
.tabs .tb:hover{color:var(--terracotta)}

/* libraries */
.libs{flex:1;display:flex;min-height:0}
.libnav{width:240px;flex:none;border-right:1px solid var(--black);padding:16px 0}
.libnav .it{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;font-size:14px}
.libnav .it.on{background:var(--g100)}
.libnav .it:hover{color:var(--terracotta)}
.libnav .cnt{display:flex;gap:6px;font-size:11px;align-items:center}
.libmain{flex:1;overflow:auto;padding:24px 32px}
.libhead{display:flex;gap:32px;align-items:flex-end;border-bottom:1px solid var(--black);padding-bottom:16px;margin-bottom:12px}
.kv{display:flex;flex-direction:column;gap:4px}
.kv b{font-weight:450;font-size:14px}

/* ---------- builder */
.builder{flex:1;display:flex;flex-direction:column;min-height:0}
.panes{flex:1;display:flex;min-height:0}
.grid{width:380px;flex:none;border-right:1px solid var(--black);display:flex;flex-direction:column;min-height:0}
.viewport{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.inspector{width:320px;flex:none;border-left:1px solid var(--black);overflow:auto;padding:14px 16px 32px}
.runtabs{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:4px;padding:12px 16px 0;border-bottom:1px solid var(--g300);flex:none;align-items:flex-end}
.runtabs .tb.add{flex:none;color:#000}
.walltabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 16px 0;flex:none}
.walltabs .lbl{margin-right:2px}
.walltabs .wt{font-size:12px;padding:3px 8px;border:1px solid var(--g300);cursor:pointer;white-space:nowrap}
.walltabs .wt.on{border-color:#000}
.walltabs .wt:hover{border-color:var(--terracotta)}
.wgrid{flex:none;border-top:1px solid var(--g300);padding:8px 12px 8px;max-height:240px;overflow:auto;font-size:13px}
.wgrid.off{padding:8px 12px;font-size:12px}
.wgrid .wg-head{display:flex;align-items:center;margin-bottom:2px}
.wgrid .wrow{display:grid;grid-template-columns:36px 64px 1fr 14px 14px 12px;gap:4px;align-items:center;height:28px}
.wgrid .wrow.sel{background:var(--g100)}
.wgrid .wrow .cell{border:1px solid var(--g300);height:24px;padding:0 6px;font:inherit;background:#fff}
.wgrid .wrow .x{cursor:pointer;color:var(--g500)}
.runtabs .tb{padding-bottom:8px;cursor:pointer;color:var(--g500);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-size:14px}
.runtabs .tb.on{color:#000;border-color:#000}
.runtabs .tb:hover{color:var(--terracotta)}
.quick{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;flex:none}
.gtable{flex:1;overflow:auto}
.grow{display:grid;grid-template-columns:12px 18px 40px 52px 1fr 26px 16px 12px;align-items:center;height:30px;border-bottom:1px solid var(--g100);padding:0 8px 0 10px;gap:4px;position:relative}
.grow.head{height:28px;font-size:11px;color:var(--g500);border-bottom:1px solid var(--black);position:sticky;top:0;background:#fff;z-index:1}
.grow.sel{background:var(--g100)}
.grow.sel .c-code{color:var(--terracotta)}
.grow.drop-above{box-shadow:inset 0 2px 0 var(--black)}
.grow .hd{cursor:grab;color:var(--g300);font-size:10px;letter-spacing:-2px;user-select:none}
.grow .hd:hover{color:var(--black)}
.grow .ix{color:var(--g500);font-size:12px}
.cell{border:1px solid transparent;background:transparent;height:26px;padding:0 4px;outline:none;width:100%;font-size:13px;min-width:0}
.cell:focus{border:2px solid var(--black);background:#fff;padding:0 3px}
.cell.num{text-align:right;font-variant-numeric:tabular-nums}
.cell.bad{border:1px solid var(--terracotta);color:var(--terracotta)}
.kindwrap{position:relative;display:flex;align-items:center}
.kindwrap .caret{position:absolute;right:4px;color:var(--g500);pointer-events:none;font-size:11px}
.grow .del{opacity:0;cursor:pointer;color:var(--g500);text-align:center}
.grow:hover .del{opacity:1}
.grow .del:hover{color:var(--terracotta)}
.gmsg{font-size:11px;color:var(--terracotta);padding:2px 10px 4px 84px;border-bottom:1px solid var(--g100)}
.badge{width:14px;height:14px;border:1px solid var(--black);font-size:10px;display:flex;align-items:center;justify-content:center;line-height:1}
.badge.error{background:var(--terracotta)}.badge.warning{background:var(--khaki)}
.gfoot{border-top:1px solid var(--black);padding:12px 16px;flex:none;display:flex;flex-direction:column;gap:8px}
.gfoot .row{display:flex;align-items:center;gap:10px;white-space:nowrap}
.fit{font-size:12px;padding:3px 8px;border:1px solid var(--black);white-space:nowrap}
.fit.ok{background:var(--slate)}.fit.over{background:var(--terracotta)}.fit.none{background:#fff;color:var(--g500);border-color:var(--g300)}
.khint{font-size:11px;color:var(--g500);line-height:1.5}
.dd{position:absolute;z-index:20;background:#fff;border:1px solid var(--black);min-width:220px;max-height:300px;overflow:auto}
.dd .opt{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;cursor:pointer;font-size:13px}
.dd .opt.on,.dd .opt:hover{background:var(--g100)}
.dd .opt .hint{margin-left:auto;color:var(--g500);font-size:11px}
.empty-grid{padding:24px 16px;color:var(--g700);line-height:1.6}

.vbar{min-height:40px;flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:6px 12px;border-bottom:1px solid var(--g300)}
.vbar #scale-lbl{white-space:nowrap}
.vbar .right{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 10px}
.progress{position:absolute;left:0;right:0;top:40px;height:2px;background:var(--terracotta);transform-origin:left;animation:prog 1s var(--ease) infinite;z-index:3}
@keyframes prog{0%{transform:scaleX(0)}100%{transform:scaleX(1);opacity:.2}}
.recalc-chip{position:absolute;top:50px;left:12px;font-size:11px;background:#fff;border:1px solid var(--black);padding:3px 8px;z-index:3}
.vcanvas{flex:1;position:relative;overflow:hidden;min-height:0}
.vcanvas svg{display:block;width:100%;height:100%}
.tip{position:absolute;pointer-events:none;background:#000;color:#fff;font-size:12px;width:220px;padding:8px 10px;line-height:1.45;z-index:6}
.banner{height:44px;flex:none;background:var(--khaki);border-bottom:1px solid var(--black);display:flex;align-items:center;gap:16px;padding:0 16px;font-size:13px}
.banner .right{margin-left:auto;display:flex;gap:8px}

/* inspector */
.crumbs{font-size:11px;color:var(--g500);margin-bottom:6px}
.ititle{font-size:20px;letter-spacing:-.01em;margin-bottom:2px}
.isub{font-size:12px;color:var(--g700);margin-bottom:16px}
.isec{margin-top:18px}
.isec>.lbl{display:block;margin-bottom:6px}
.irow{display:flex;align-items:center;justify-content:space-between;min-height:28px;gap:8px;border-bottom:1px solid var(--g100);font-size:13px}
.irow .v{display:flex;align-items:center;gap:6px}
.irow input.box{width:110px;text-align:right}
.irow select.box{width:170px}
.lgrid{display:grid;grid-template-columns:minmax(0,1fr) 50px 54px 70px 12px;gap:3px 6px;align-items:center;font-size:13px}
.lgrid .hd{font-size:10px;color:var(--g500);text-align:right}
.lgrid input.box{width:100%;height:26px;text-align:right;font-variant-numeric:tabular-nums}
.lgrid input.box.desc{text-align:left}
.lgrid .tl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgrid .tot{text-align:right;color:var(--g500);font-variant-numeric:tabular-nums;font-size:12px}
.lgrid .r{display:block;text-align:right}
.lgrid .x{cursor:pointer;color:var(--g500);text-align:center}
.lgrid .sum{border-top:1px solid var(--black);padding-top:4px;margin-top:2px;align-self:stretch}
.ftable{display:grid;grid-template-columns:1fr 76px;gap:10px;align-items:start}
.frows .fr{display:grid;grid-template-columns:70px 46px 28px 1fr 12px;gap:3px;align-items:center;height:28px;font-size:12px}
.frows .fr.head{color:var(--g500);font-size:11px;height:20px}
.frows select,.frows input{height:24px;border:1px solid var(--g300);background:#fff;font-size:12px;padding:0 3px;min-width:0;width:100%}
.frows select:focus,.frows input:focus{border:1px solid var(--black);outline:none}
.frows .x{cursor:pointer;color:var(--g500)}.frows .x:hover{color:var(--terracotta)}
.presets{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.ovr{display:inline-block;width:6px;height:6px;background:var(--terracotta)}
.ierr{background:var(--terracotta);padding:10px 12px;margin-bottom:12px;font-size:12px;line-height:1.4}
.slotlist .sl{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--g100);cursor:pointer}
.slotlist .sl:hover{background:var(--g100)}

/* strip */
.strip{flex:none;border-top:1px solid var(--black);background:#fff;position:relative}
.strip .row1{height:72px;display:flex;align-items:stretch}
.strip .blk{width:164px;flex:none;padding:10px 14px;border-right:1px solid var(--g300);display:flex;flex-direction:column;justify-content:center;gap:2px}
.strip .blk .top{font-size:11px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .big{font-size:28px;letter-spacing:-.02em;line-height:1}
.strip .big small{font-size:12px;letter-spacing:0;color:var(--g700)}
.strip .smalls{display:flex;gap:24px;padding:0 20px;align-items:center;border-right:1px solid var(--g300)}
.strip .smalls .lbl{display:block}
.strip .smalls b{font-weight:450;font-size:16px}
.strip .total{margin-left:auto;padding:0 20px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.strip .total b{font-weight:450;font-size:32px;letter-spacing:-.02em;line-height:1}
.strip .acts{display:flex;align-items:center;gap:8px;padding-right:12px}
.strip.recalc .big,.strip.recalc .smalls b,.strip.recalc .total b{color:var(--g500)}
.strip .status{cursor:default}
.strip .status.click{cursor:pointer}
.strip .status.click:hover .top{color:var(--terracotta)}
.strip .exp{height:248px;border-bottom:1px solid var(--g300);display:grid;grid-template-columns:1fr 340px;overflow:hidden}
.strip .exp>div{overflow:auto;padding:12px 16px}
.strip .exp>div+div{border-left:1px solid var(--g300)}
.roll .irow{min-height:24px}
.roll .irow.tot{border-bottom:1px solid var(--black);font-size:14px}

.pop{position:absolute;bottom:80px;left:12px;width:460px;background:#fff;border:1px solid var(--black);z-index:30;padding:14px 16px}
.pop .w{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--g100);font-size:13px}

/* extras */
.extras{flex:1;display:flex;min-height:0}
.extras .main{flex:1;overflow:auto;padding:20px 24px}
.extras .side{width:320px;flex:none;border-left:1px solid var(--black);padding:16px;overflow:auto}
.et td{padding:0 4px}
.et input,.et select{height:26px;border:1px solid transparent;background:transparent;width:100%;padding:0 4px;outline:none;min-width:0}
.et input:focus,.et select:focus{border:2px solid var(--black);background:#fff}
.et input.num{text-align:right;font-variant-numeric:tabular-nums}

/* nest */
.nest{flex:1;display:flex;min-height:0}
.nest .main{flex:1;overflow:auto;padding:20px 24px}
.nest .side{width:300px;flex:none;border-left:1px solid var(--black);padding:16px;overflow:auto}
.ngroup{margin-bottom:28px;transition:opacity var(--base)}
.ngroup.dim{opacity:.5}
.nhead{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--black);padding-bottom:8px;margin-bottom:12px;font-size:14px}
.sheets{display:flex;flex-wrap:wrap;gap:14px}
.sheet{width:170px;cursor:pointer}
.sheet:hover .cap{color:var(--terracotta)}
.sheet .cap{font-size:11px;margin-top:4px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border:1px solid var(--black);padding:24px 28px;max-height:92vh;overflow:auto}
/* save to library */
.modal.libform{width:600px;max-width:calc(100vw - 32px)}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.lf-field{display:flex;flex-direction:column;gap:4px;min-width:0;grid-column:span 2}
.lf-field.short{grid-column:span 1}
.lf-lbl{font-size:12px;color:var(--g700)}
.lf-ctl{display:flex;align-items:center;gap:6px}
.lf-ctl .box{flex:1;height:30px}
.lf-help{font-size:11px;color:var(--g500);line-height:1.35}
.lf-err{font-size:12px;color:var(--terracotta);min-height:0}
.lf-err:empty{display:none}
.lf-err.big{margin-top:10px}
.lf-warn{margin-top:12px;padding:10px 12px;background:var(--g100);border-left:2px solid var(--terracotta);font-size:13px;line-height:1.45}
.lf-acts{display:flex;align-items:center;gap:8px;margin-top:16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--black);color:var(--white);padding:10px 16px;font-size:13px;z-index:60;max-width:calc(100vw - 32px)}
.newline td{background:#FBF3EF;font-size:12px}
/* sign-in, the person menu, admin (platform phase 1) */
.signin-page{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:var(--g100)}
.signin{width:400px;max-width:100%;background:#fff;border:1px solid var(--black);padding:36px 36px 28px}
.signin .people{display:flex;flex-direction:column;gap:8px}
.signin .person{display:flex;justify-content:space-between;align-items:center;height:42px;padding:0 14px;border:1px solid var(--black);background:#fff;cursor:pointer;font:inherit;text-align:left}
.signin .person:hover{background:var(--black);color:#fff}.signin .person:hover .muted{color:var(--g300)}
.mechip{position:relative;display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;outline:none}
.mechip .tier{font-size:10px;border:1px solid var(--black);padding:1px 5px}
.mechip .memenu{display:none;position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--black);min-width:220px;padding:6px 0;z-index:20}
.mechip:hover .memenu,.mechip:focus-within .memenu{display:block}
.mechip .memenu a{display:block;padding:7px 10px;text-decoration:none}.mechip .memenu a:hover{background:var(--g100)}
.mechip .memenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.admin .sechead{margin:36px 0 6px}.admin .note{font-size:13px;margin:0 0 12px}
.admin tr.off td{color:var(--g500)}
.admin .chk{display:inline-flex;align-items:center;gap:6px}
.admin .addperson{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.admin .tierabout{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 24px;margin:0 0 16px;font-size:13px}
.admin .tierabout div{display:flex;flex-direction:column;gap:2px;line-height:1.4}
.admin .usage{margin-bottom:14px}.admin .usage tr.tot td{font-weight:500;border-top:1px solid var(--black)}
.admin .tiers td.c{text-align:center;width:90px}.admin .tiers th{text-align:center}.admin .tiers th:first-child{text-align:left}
.topbar .brand,.topbar .toptab,.topbar .right>*{white-space:nowrap}
/* Quick Quote <-> Grasshopper (platform phase 3) */
.parity .sechead{margin:32px 0 6px}.parity .note{font-size:13px;margin:0 0 12px}
.parity .pcounts{display:flex;gap:40px;margin:8px 0 8px}.parity .pcounts div{display:flex;align-items:center;gap:10px}
.parity .pcounts .big{font-size:40px;letter-spacing:-.02em}
.ptag{display:inline-block;font-size:11px;padding:2px 6px;border:1px solid var(--black)}
.ptag.both{background:var(--black);color:#fff}.ptag.qq{background:#fff}.ptag.gh{background:var(--slate)}
.parity .pbuilder{border-top:1px solid var(--g300);padding:10px 0}
.parity .pbh{font-size:14px;margin-bottom:6px}
.parity .pkinds{display:flex;flex-wrap:wrap;gap:6px}
.parity .pkind{font-size:12px;padding:3px 8px;border:1px solid var(--black)}
.parity .pkind.both{background:var(--black);color:#fff}.parity .pkind.qq{background:#fff;border-style:dashed}
/* presets in the quick add (platform phase 2) */
.chip.preset{border-style:dashed}.chip.preset.waiting{border-color:var(--terracotta)}
/* final approval and the change log (platform phase 2) */
.changes .sechead{margin:36px 0 6px}.changes .note{font-size:13px;margin:0 0 12px}
.changes .acts{display:inline-flex;gap:6px}
.tag.waiting{background:#FBF3EF;border-color:var(--terracotta)}.tag.approved{background:var(--slate)}.tag.removed{background:var(--g200);border-color:var(--g200)}
/* Ask Claude (platform phase 2) */
.claude{position:fixed;top:48px;right:0;bottom:0;width:400px;max-width:100vw;background:#fff;border-left:1px solid var(--black);z-index:40;display:flex;flex-direction:column}
.claude .cl-head{display:flex;align-items:center;gap:6px;height:44px;padding:0 10px 0 16px;border-bottom:1px solid var(--g300);flex:none;font-size:13px}
.claude .cl-msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.5}
.claude .cl-user{align-self:flex-end;max-width:85%;background:var(--g100);padding:8px 12px;white-space:pre-wrap}
.claude .cl-claude p{margin:0 0 8px}
.claude .cl-claude ul,.claude .cl-claude ol{margin:0 0 8px;padding-left:20px}
.claude .cl-claude li{margin:2px 0}
.claude .cl-changes{border:1px solid var(--g300);padding:10px 12px;margin-top:6px;display:flex;flex-direction:column;gap:6px}
.claude .cl-changes ul{margin:0;padding-left:18px}
.claude .cl-acts{display:flex;gap:8px;align-items:center}
.claude .cl-done{font-size:12px;color:var(--g700)}
.claude .cl-busy{color:var(--g500);font-style:italic}
.claude .cl-hint ul{padding-left:18px;margin:6px 0 10px}.claude .cl-hint li{margin:3px 0}
.claude .cl-foot{border-top:1px solid var(--g300);padding:10px 12px;display:flex;gap:8px;align-items:flex-end;flex:none}
.claude .cl-input{flex:1;resize:none;border:1px solid var(--black);padding:8px;font:inherit;font-size:13px}
.claude .cl-off{border-top:1px solid var(--g300);padding:14px 16px;font-size:13px;line-height:1.5;color:var(--g700)}
/* view only (the viewer tier): nothing in a quote can be changed */
body.ro .grid input,body.ro .grid select,body.ro .grid button,body.ro .inspector input,body.ro .inspector select,
body.ro .inspector button,body.ro .inspector a,body.ro .extras input,body.ro .extras select,body.ro .extras button{pointer-events:none;opacity:.55}
.newline .acts{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle}

/* review */
.review{flex:1;display:flex;min-height:0}
.desk{flex:1;overflow:auto;background:var(--g100);padding:32px}
.doc{width:760px;margin:0 auto;background:#fff;border:1px solid var(--black);padding:48px 56px;min-height:1000px}
.doc table td,.doc table th{height:26px}
.doc .grp td{padding-top:14px;font-size:11px;color:var(--g500);border-bottom:1px solid var(--g300)}
.doc .sumrow td{border-top:1px solid var(--black);border-bottom:none}
.doc .totrow td{border-top:2px solid var(--black);font-size:18px;height:40px}
.review .side{width:360px;flex:none;border-left:1px solid var(--black);padding:20px;overflow:auto;display:flex;flex-direction:column;gap:20px}

/* 3d */
.three-help{position:absolute;bottom:10px;left:12px;font-size:11px;color:var(--g500);background:rgba(255,255,255,.8);padding:2px 6px}

.pack-sec{break-inside:avoid}
.pack-elev{border:1px solid var(--g300);margin:6px 0 10px}
.pack-elev svg{display:block;width:100%;height:auto}
textarea.box{font:inherit;font-size:13px}
@media print{
  body{overflow:visible}
  #app{display:block;height:auto;min-width:0}
  .topbar,.review .side,.banner{display:none!important}
  .review,.desk{display:block;overflow:visible;background:#fff;padding:0}
  .doc{border:none;width:auto;min-height:0;padding:0}
}

/* builder picker (Add joinery) */
.bopt{padding:9px 12px;cursor:pointer;border-top:1px solid var(--g100)}
.bopt:hover{background:var(--g100)}
.bopt-t{font-size:14px;display:flex;align-items:center;gap:8px}
.bopt-d{font-size:12px;color:var(--g700);margin-top:2px;line-height:1.35}
.tag.ph{border-color:var(--khaki);background:var(--khaki);color:#000;font-size:10px;padding:1px 5px}
.tag.beta{border-color:var(--g300);background:#fff;color:var(--g500);font-size:10px;padding:1px 5px}
.bcards{display:flex;flex-direction:column;border:1px solid var(--black);margin:0 16px}