:root{--ink:#22313F;--ink2:#4A5866;--mute:#7A8794;--line:#D9DEE3;--paper:#F6F3EE;--card:#fff;--acc:#C8553D;--acc2:#A8432E;--cream:#FFF6D6;--ok:#2F6B4F;--bad:#9B1C1C;
--sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
*{box-sizing:border-box}html,body{margin:0}body{font:15px/1.5 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--acc2)}h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0 0 .4em}
.num,td.n,input[type=number]{font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.top{background:var(--ink);color:#fff}.top .wrap{display:flex;align-items:center;gap:24px;height:60px}
.logo{display:flex;align-items:center;gap:var(--space-2);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.02em}
.logo i{width:22px;height:22px;background:linear-gradient(135deg,var(--acc) 0 50%,#fff 50% 100%);border-radius:3px;display:inline-block}
.top nav{margin-left:auto;display:flex;gap:var(--space-4);align-items:center}.top nav a{color:#D7DEE5;text-decoration:none;font-size:14px}.top nav a:hover{color:#fff}.top nav a:not(.btn){padding-block:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;padding:var(--space-3) var(--space-4);min-height:44px;font:600 14px var(--sans);cursor:pointer;text-decoration:none;background:var(--acc);color:#fff}
.btn:hover{background:var(--acc2)}.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.btn.ghost:hover{background:#fff}
.btn.sm{padding:var(--space-2) var(--space-3);min-height:44px;font-size:13px}.btn.dark{background:var(--ink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:var(--space-6)}
label{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin:0 0 4px;text-transform:uppercase;letter-spacing:.04em}
input,select{font:14px var(--sans);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:var(--space-2) var(--space-3);background:#fff;width:100%}
input:focus,select:focus{outline:2px solid #1D5BB566;border-color:var(--acc)}
input.in,select.in{background:var(--cream)}
table{border-collapse:collapse;width:100%}th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);text-align:left;font-weight:600;padding:8px 6px;border-bottom:1px solid var(--line)}
td{padding:var(--space-2) var(--space-1);border-bottom:1px solid #EEF1F4;vertical-align:middle}td.n,th.n{text-align:right}
.kpi{font-family:var(--serif);font-size:40px;font-weight:600;color:var(--acc);line-height:1}
.muted{color:var(--mute)}.small{font-size:13px}.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:#EEF1F4;color:var(--ink2)}
.tag.Won,.tag.Done{background:#E3F0E8;color:var(--ok)}.tag.Lost{background:#F6E1DC;color:var(--bad)}.tag.Sent{background:#FFF1CC;color:#7A5A00}
.warn{background:#F6E1DC;color:var(--bad);border-radius:6px;padding:8px 12px;font-size:13px;font-weight:600}
.grid{display:grid;gap:16px}.row{display:flex;gap:12px;align-items:center}
footer.site{border-top:1px solid var(--line);margin-top:var(--space-16);padding:var(--space-6) 0;color:var(--mute);font-size:13px}
@media print{.noprint{display:none!important}body{background:#fff}}
.top nav a.btn{color:#fff}td.n{white-space:nowrap}
/* ---- First-principles pass (2026-10-16). Soft-grid tokens; no side accent bars. */
:root{--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem}
.gate{display:block;background:var(--cream);color:#6b4e00;border:1px solid #ecd9a0;border-radius:6px;padding:var(--space-3) var(--space-4);font-size:14px;text-decoration:none}
.gate b{color:var(--ink)}
.quick{display:grid;gap:var(--space-2);padding:var(--space-4)}.quick p{margin:0}
.quick-row{display:flex;gap:var(--space-2)}.quick-row input{font-size:16px;min-height:44px}.quick-row .btn{min-height:44px;white-space:nowrap}
.scope-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);align-items:stretch}
.scope3d{position:relative;margin:0;padding:0;min-height:13rem;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#fbf7f1,#eef0f2)}
.scope3d-c{position:absolute;inset:0;width:100%;height:100%;display:block}
.scope3d figcaption{position:absolute;inset-inline:var(--space-3);inset-block-end:var(--space-3);background:#ffffffd9;border-radius:6px;padding:var(--space-1) var(--space-2)}
.scope3d:not(.live) figcaption{position:static;margin:var(--space-4)}
.flags{background:#fff;border:1px solid var(--line);border-radius:10px;padding:var(--space-4);font-size:14px}
.flags ul{margin:var(--space-2) 0 0;padding-inline-start:var(--space-4)}.flags li{margin-block:var(--space-1)}
#flags:empty{display:none}.scope-row:has(#flags:empty){grid-template-columns:1fr}
.floorcard{margin-block-start:var(--space-4)}
.ladder{position:relative;height:5.5rem;margin:var(--space-4) var(--space-2) var(--space-2);border-radius:6px;background:linear-gradient(90deg,#e3f0e8,#cfe5d7)}
.ladder .zone{position:absolute;inset-block:0;inset-inline-start:0}.ladder .zone.loss{background:#f6e1dc;border-radius:6px 0 0 6px}.ladder .zone.thin{background:#fff1cc}
.pin{position:absolute;inset-block:0;transform:translateX(-1px)}.pin i{position:absolute;inset-block:0;width:2px;background:var(--ink)}
.pin span{position:absolute;inset-block-start:var(--space-2);inset-inline-start:var(--space-2);font-size:11px;line-height:1.2;white-space:nowrap;color:var(--ink2)}
.pin span b{display:block;font:600 15px var(--serif);color:var(--ink)}
.pin.fl span{inset-block-start:auto;inset-block-end:var(--space-2)}.pin.you i{width:3px;background:var(--acc)}.pin.you span b{color:var(--acc)}
.pin.flip span{inset-inline-start:auto;inset-inline-end:var(--space-2);text-align:end}
#headroom{margin-block:var(--space-3) 0}#headroom.bad{color:var(--bad)}
.qbar{margin-block-end:var(--space-3);flex-wrap:wrap}.qbar .sp{flex:1}.opt{display:inline-flex;gap:var(--space-2);align-items:center;margin:0;font-size:13px;min-height:44px;padding-block:var(--space-3);text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink)}.opt input{width:22px;height:22px;flex-shrink:0}
.opts td{padding:var(--space-3) var(--space-2)}.opts .box{font-size:20px;width:2rem}.opts .big2{font:600 20px var(--serif);color:var(--ink)}
.quote{position:relative}.draftmark{position:absolute;inset-block-start:var(--space-4);inset-inline-start:50%;translate:-50% 0;border:2px solid var(--bad);color:var(--bad);font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:var(--space-1) var(--space-2);border-radius:4px;transform:rotate(-4deg)}
.confirm,.calib{display:flex;gap:var(--space-4);align-items:center;justify-content:space-between;flex-wrap:wrap}
.confirm .ok{color:var(--ok);font-weight:700;font-size:14px}.calib{margin-block-end:var(--space-4);background:#fbf7f1}
@media(max-width:860px){.scope-row{grid-template-columns:1fr}.quick-row .btn{padding-inline:var(--space-3)}.quote{padding:var(--space-6) var(--space-4)}.opts .n:nth-child(3){display:none}}
@media print{.draftmark{display:block}.gate{display:none}}
/* grid audit: grid children must be allowed to shrink; wide editors scroll inside their card, not the page */
.shell>*{min-width:0}.card:has(> .ed),.card:has(> table.ed){overflow-x:auto}.head{flex-wrap:wrap}
@media(max-width:860px){.kpis .card{padding:var(--space-3)}.card:has(.ed:not(.rooms)){overflow-x:auto}.ed:not(.rooms){display:block}}
/* ===== Brand pass 2026-10-16: painter's spec sheet. Fonts self-hosted (../fonts, OFL). ===== */
@font-face{font-family:"Barlow Condensed";src:url(../fonts/BarlowCondensed-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/BarlowCondensed-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Source Serif Pro";src:url(../fonts/SourceSerifPro-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif Pro";src:url(../fonts/SourceSerifPro-Semibold.woff) format("woff");font-weight:600;font-display:swap}
:root{--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;
--primer:#F7F5EF;--canvas:#E7DFCF;--tape:#DCC794;--ink:#24211D;--ink2:#47423B;--mute:#6A6257;--line:#CFC4AE;--paper:var(--canvas);--card:var(--primer);
--acc:#1D5BB5;--acc2:#174A94;--cream:#FFFDF7;
--sans:"Barlow Condensed","Arial Narrow",sans-serif;--serif:"Source Serif Pro",Georgia,serif;
--ticks:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 64px)}
body{font-family:var(--serif)}
h1,h2,h3,.kpi,.btn,label,th,.tag,.logo,nav a{font-family:var(--sans)}
h1,h2{font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
h3{font-weight:600;letter-spacing:.01em}
th,label{font-size:.8125rem;letter-spacing:.06em}
.kpi{font-weight:700}
.card,.btn,input,select,.tag,.warn,.toast,.quote,.ladder,.ladder .zone.loss,.draftmark{border-radius:0}
.card{background:var(--primer);box-shadow:none}
.btn{letter-spacing:.04em;font-size:1rem}
.btn.ghost{box-shadow:none;border:1px dashed var(--ink);color:var(--ink)}
.tag{background:var(--canvas);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}
.tag.Sent{background:var(--tape);color:var(--ink)}
.logo{font-size:1.5rem;letter-spacing:.08em;gap:var(--space-2)}
.logo i{display:inline-block;width:var(--space-4);height:var(--space-6);border-radius:0;background:linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.6) 38% 50%,transparent 50% 100%),var(--acc)}
.top{position:relative;padding-block-end:var(--space-2)}
.top::after{content:"";position:absolute;inset-inline:0;bottom:0;height:var(--space-2);color:#ffffff;opacity:.35;background:var(--ticks);background-size:auto 4px,auto 8px;background-repeat:repeat-x}
.ladder{background:#DDE7F4}.ladder .zone.thin{background:#F3E7C2}
.tapelabel{display:inline-block;background:var(--tape);color:var(--ink);font:700 .875rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-1) var(--space-3);transform:rotate(-1deg)}
.scope3d{background:var(--primer)}.scope3d figcaption,.flags,.gate{border-radius:0}.scope3d figcaption{background:var(--primer)}
.flags{background:var(--primer)}
@media(max-width:860px){.shell{grid-template-rows:auto 1fr;align-content:start}.nav{min-width:0;max-width:100vw}.card:has(> table.list){overflow-x:auto}}

/* ===== QA padding fix 2026-10-16: fluid quote table, 44px tap targets, token snap ===== */
table.list th:first-child,table.list td:first-child{padding-inline-start:var(--space-4)!important}

table.tot{width:100%!important;margin-block-start:var(--space-4)!important;margin-inline-start:auto}
table.tot td.n,table.tot .big,td.n.big{overflow-wrap:anywhere}
input.in,select.in{min-height:44px}
label.cb{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:0;text-transform:none;letter-spacing:0;font-size:0;cursor:pointer}
label.cb input[type=checkbox]{width:22px;height:22px;margin:0}
@media(max-width:860px){
  .btn,.btn.sm,#new{min-height:44px}
  .head .btn{padding:var(--space-2) var(--space-3);min-height:44px}
  a.btn.sm{min-height:44px;padding:var(--space-2) var(--space-3)}
}

/* ===== Send quote panel 2026-10-26 (customer link) ===== */
#sendpanel{margin-block-end:var(--space-4)}
.sendcard{display:grid;gap:var(--space-3)}.sendcard p{margin:0}.sendcard h3{margin:0}
.sendhead{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:end;justify-content:space-between}
.langsel{display:grid;gap:var(--space-1);margin:0}.langsel select{min-width:10rem}
.linkrow{display:flex;gap:var(--space-2)}.linkrow input{flex:1;min-width:0;min-height:44px;font:14px ui-monospace,Menlo,Consolas,monospace}
.shares{display:flex;flex-wrap:wrap;gap:var(--space-2)}
@media(max-width:860px){.linkrow{flex-direction:column}.shares .btn{flex:1 1 8rem}}

/* ===== Round 2 2026-10-26: setup, quick draft, colors on file, offline. 8pt spacing, 12/6 grid. ===== */
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4)}
.g12>*{min-width:0}.s12{grid-column:1/-1}.s7{grid-column:span 7}.s6{grid-column:span 6}.s5{grid-column:span 5}
@media(max-width:860px){.g12{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2)}.s7,.s6,.s5{grid-column:1/-1}}
.opt-l{font-weight:400;text-transform:none;letter-spacing:0;color:var(--mute)}
/* draft stamp sits in the flow above the letterhead, so it can never sit on the company name */
.quote .draftmark{position:static;display:table;translate:none;margin:0 auto var(--space-4);transform:rotate(-2deg)}
.qlogo{display:block;max-width:10rem;max-height:4rem;width:auto;height:auto;margin-block-end:var(--space-2);object-fit:contain}
.qhead{flex-wrap:wrap}
/* setup */
body.onb-on .nav{display:none}body.onb-on .shell{grid-template-columns:1fr}
.onb{max-width:48rem;margin:0 auto;display:grid;gap:var(--space-4)}
.onb h1{font-size:2rem;margin:0}.onb h1:focus{outline:none}.onb-lede{margin:0;max-width:36rem}
.onb-kick{margin:0;font:700 .875rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.onb-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:0;padding:0;font:600 .875rem var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.onb-steps li{display:flex;align-items:center;gap:var(--space-2);padding-block-start:var(--space-2);border-top:4px solid var(--line)}
.onb-steps li span{display:inline-grid;place-items:center;width:var(--space-6);height:var(--space-6);background:var(--line);color:var(--ink)}
.onb-steps li.done,.onb-steps li[aria-current]{color:var(--ink);border-top-color:var(--acc)}
.onb-steps li[aria-current] span,.onb-steps li.done span{background:var(--acc);color:#fff}
.onb-form{align-items:start}.onb-form input.in{font-size:1rem}
.onb-logo-row{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}.onb-logo-row input{min-height:44px;background:transparent;border-style:dashed;max-width:20rem}
.onb-logo-row img{max-height:3rem;width:auto}
.onb-actions,.onb-next{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.onb-rate{display:grid;gap:var(--space-1);background:var(--primer);border:1px solid var(--line);padding:var(--space-4)}
.onb-rate p{margin:0}.onb-rate label{margin:0}
.onb-in{display:flex;gap:var(--space-2);align-items:center}.onb-in input{max-width:8rem;font-size:1.25rem!important;font-variant-numeric:tabular-nums}
.onb-in .unit{font:600 1rem var(--sans);color:var(--ink2)}
.tag.def{background:var(--canvas)}.tag.mine{background:var(--tape);color:var(--ink)}
.onb-live{margin:0;font-size:1rem}.onb-live b{font-family:var(--sans);font-size:1.25rem}
.onb-linkcard,.onb-paint{display:grid;gap:var(--space-2)}.onb-paint p{margin:0}
/* quick draft */
.draftv{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.dform{display:grid;gap:var(--space-2)}.dform textarea{width:100%;font:1rem/1.5 var(--serif);padding:var(--space-2) var(--space-3);border:1px solid var(--line);color:var(--ink);resize:vertical;min-height:8rem}
.dform textarea:focus{outline:2px solid #1D5BB566;border-color:var(--acc)}.dform p{margin:0}
.dact{flex-wrap:wrap;gap:var(--space-2)}#mic[aria-pressed=true]{background:var(--tape)}
.dheard h2{font-size:1.5rem}.dheard h2:focus{outline:none}.dheard h3{font-size:1rem;margin:var(--space-4) 0 var(--space-1)}
.dheard ul{margin:0;padding-inline-start:var(--space-6)}.heard li{font-size:1rem}
.dmake{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:end;justify-content:space-between}.dclient{flex:1 1 12rem}
/* colors on file */
.cof{align-items:start}.cof-side{display:grid;gap:var(--space-4)}.cof-date{max-width:12rem;margin-block-end:var(--space-4)}
.cof-t td input,.cof-t td select{min-height:44px;width:100%}.cof-rev{margin-block-start:var(--space-4)}.cof-rev p{margin:var(--space-1) 0 0}
.oncard{background:#fff;border:1px solid var(--ink);padding:var(--space-6) var(--space-4);display:grid;gap:var(--space-2)}
.oncard h3{font-size:1.5rem;margin:0}.oncard p{margin:0}.oncard .tapelabel{justify-self:start}
.oncard-l{margin:0;display:grid}.oncard-l div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.oncard-l dt{font:600 1rem var(--sans)}.oncard-l dt span{color:var(--mute);font-weight:600}.oncard-l dd{margin:0}
.cof-lock{max-width:40rem;display:grid;gap:var(--space-2)}.cof-lock p{margin:0}
@media(max-width:860px){.cof-t thead{display:none}.cof-t,.cof-t tbody,.cof-t tr{display:block}.cof-t tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.cof-t td{border:0;padding:0;grid-column:span 3}.cof-t td:nth-child(3){grid-column:span 4}.cof-t td:nth-child(4){grid-column:span 2}
.cof-t td::before{content:attr(data-l);display:block;font:600 .625rem var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}}
@media print{body.print-card .noprint,body.print-card .nav,body.print-card .head,body.print-card .tabs{display:none!important}body.print-card .cof{display:block}body.print-card .oncard{border:0}}
/* offline pill */
.net{margin:var(--space-2) 0 0;padding:var(--space-1) var(--space-2);background:var(--tape);color:var(--ink);font:700 .75rem var(--sans);letter-spacing:.06em;text-transform:uppercase}
.net[hidden]{display:none}
@media(max-width:860px){.net{margin:0;align-self:center;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
h2.h3{font-size:1.25rem;font-weight:600;text-transform:none;letter-spacing:.01em;line-height:1.2;margin:0 0 var(--space-2)}
.ed input.in,.ed select.in{min-height:44px}
@media(max-width:860px){.tabs{flex-wrap:wrap}.tabs a{padding:var(--space-2) var(--space-3)}}
@media(max-width:860px){.ed.prods,.ed.prods tbody{display:block;width:100%}.ed.prods thead{display:none}
.ed.prods tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.ed.prods td{border:0;padding:0;grid-column:span 2;display:flex;flex-direction:column;gap:var(--space-1)}.ed.prods td:first-child{grid-column:1/-1;width:auto}
.ed.prods td::before{content:attr(data-l);font:600 .625rem var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.ed.prods td input{width:100%!important}}
#onbody{display:grid;gap:var(--space-4)}#onbody>*{margin:0}
#dout{display:grid;gap:var(--space-4)}#dout:empty{display:none}
@media(max-width:860px){.net{position:fixed;inset-inline-start:var(--space-2);inset-block-end:var(--space-2);z-index:5;padding:var(--space-2) var(--space-3);box-shadow:0 0 0 1px var(--ink)}}
/* v21 2026-10-26: visually hidden text (table headers for icon-only columns) */
.vh{position:absolute;inset-block-start:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
th:has(> .vh){position:relative}