:root{--purple:#6d3df5;--purple2:#8c64ff;--ink:#172033;--muted:#667085;--line:#e5e7eb;--bg:#f5f7fb;--green:#159447;--red:#e5484d}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input,textarea,select{font:inherit}.app-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;margin-bottom:22px}.brand img{width:115px;height:42px;object-fit:contain;object-position:left}.brand span{font-size:12px;color:#39456b}.primary,.secondary{border:0;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}.primary{background:linear-gradient(135deg,var(--purple),var(--purple2));color:white}.secondary{background:white;border:1px solid #d8ddea;color:#344054}.full{width:100%;margin-bottom:18px}.sidebar nav{display:grid;gap:6px}.nav{border:0;background:transparent;text-align:left;padding:11px;border-radius:8px;color:#475467;cursor:pointer}.nav.active,.nav:hover{background:#f0ebff;color:var(--purple)}.nav span{margin-left:8px}.help{margin-top:auto;border:1px solid var(--line);padding:14px;border-radius:10px;text-align:center}.help small{display:block;color:var(--muted);margin-top:6px;line-height:1.4}main{min-width:0}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);padding:14px 22px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20}.topbar h1{font-size:20px;margin:0}.topbar p{font-size:12px;color:var(--muted);margin:4px 0 0}.top-actions{display:flex;gap:8px;align-items:center}.status{font-size:12px;color:var(--green);margin-right:8px}.workspace{padding:18px;display:grid;grid-template-columns:minmax(520px,1fr) minmax(480px,.9fr);gap:16px;align-items:start}.editor{display:grid;gap:14px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(16,24,40,.03)}.accent-card{border-color:#bca9ff;box-shadow:0 0 0 2px rgba(109,61,245,.05)}.section-title,.title-left{display:flex;align-items:center;gap:9px}.section-title{margin-bottom:14px}.section-title>span,.title-left>span{width:25px;height:25px;border-radius:7px;background:#f0ebff;color:var(--purple);display:grid;place-items:center;font-weight:800}.section-title h2{font-size:15px;margin:0}.between{justify-content:space-between}.title-left em{font-size:10px;font-style:normal;border:1px solid #bca9ff;color:var(--purple);padding:2px 5px;border-radius:5px}.green{font-size:11px;color:var(--green)}.company-grid{display:grid;grid-template-columns:220px 1fr;gap:16px}.logo-upload{border:1px solid var(--line);border-radius:9px;padding:12px;display:grid;gap:10px;align-content:center}.logo-upload img{width:100%;height:85px;object-fit:contain}.upload{display:block;text-align:center;cursor:pointer}.upload input{display:none}.form-grid{display:grid;gap:11px}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid.four{grid-template-columns:repeat(4,1fr)}label{font-size:11px;font-weight:700;color:#344054;display:grid;gap:5px}.span2{grid-column:span 2}input,textarea,select{border:1px solid #d8ddea;border-radius:7px;padding:9px 10px;background:#fff;color:#172033;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,61,245,.1)}textarea{min-height:65px;resize:vertical}.tall{min-height:230px}.calc-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;margin-top:13px}.calc-flow>div{border:1px solid #d9d0ff;background:#fbfaff;border-radius:8px;padding:12px;text-align:center;display:grid;gap:4px}.calc-flow .success{background:#effaf3;border-color:#a6dfb8}.calc-flow small{font-size:9px;color:var(--muted)}.calc-flow b{font-size:17px}.calc-flow span{font-size:10px;color:var(--muted)}.calc-flow i{color:#98a2b3;font-style:normal;font-size:20px}.calc-note{font-size:11px;color:#475467;margin-top:9px}.inline-actions{text-align:right;margin-top:10px}.items-list{display:grid;gap:10px}.item-row{display:grid;grid-template-columns:1.3fr 115px 115px 42px;gap:8px;border:1px solid var(--line);border-radius:9px;padding:10px;align-items:start}.item-row textarea{min-height:82px}.remove{border:0;background:#fff0f0;color:var(--red);border-radius:7px;height:38px;cursor:pointer;font-weight:900}.preview-panel{position:sticky;top:94px;height:calc(100vh - 110px);min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#eef1f6}.preview-head{height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.preview-head h2{font-size:14px;margin:0}.preview-tools{display:flex;align-items:center;gap:6px}.preview-tools button,.preview-tools select{height:30px;padding:4px 8px;border:1px solid #d8ddea;border-radius:6px;background:#fff;color:#344054;font-size:11px;font-weight:700;cursor:pointer}.preview-tools button:hover{border-color:var(--purple);color:var(--purple)}.preview-tools .page-count{font-size:11px;color:var(--muted);margin-left:4px}.preview-viewport{height:calc(100% - 48px);overflow:auto;padding:20px;background:#e7ebf1}.preview-pages{width:max-content;min-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:20px;transform-origin:top left}.paper{background:#fff;width:816px;height:1056px;flex:0 0 1056px;padding:38px;box-shadow:0 3px 18px rgba(16,24,40,.18);font-family:Arial,sans-serif;font-size:9pt;line-height:1.18;color:#111;overflow:hidden}.paper.second-page{margin-top:0}.doc-header{display:flex;justify-content:space-between;align-items:flex-start}.doc-logo{width:310px;max-height:72px;object-fit:contain;object-position:left}.doc-title{text-align:right}.doc-title h1{margin:0;font-size:21pt;line-height:1}.doc-title b{font-size:10pt}.doc-meta{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:34px}.doc-block{display:grid;grid-template-columns:auto 1fr;gap:2px 9px}.doc-block b{font-weight:700}.doc-contact{margin-top:12px;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1.5fr;gap:8px}.doc-intro{text-align:center;margin:15px 22px;line-height:1.28}.doc-table-head{display:flex;justify-content:space-between;border-bottom:1px solid #333;font-weight:700;font-size:10pt;padding-bottom:3px}.doc-item{display:grid;grid-template-columns:1fr auto;gap:14px;padding:5px 0;white-space:pre-wrap;line-height:1.16;break-inside:avoid}.doc-item .amount{font-weight:700;white-space:nowrap}.doc-notes{white-space:pre-wrap;font-weight:600;margin-top:7px;line-height:1.16;break-inside:avoid}.doc-totals{border-top:1px solid #333;display:grid;grid-template-columns:1fr auto auto;gap:12px;text-align:right;padding-top:4px;font-weight:700;line-height:1.2;break-inside:avoid}.doc-accept{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px;break-inside:avoid}.signature{border-bottom:1px solid #222;min-height:18px}.doc-terms{white-space:pre-wrap;line-height:1.28}.doc-terms h2{font-size:14pt}.preview-overflow-warning{display:none;position:sticky;left:12px;bottom:12px;width:max-content;background:#fff3cd;color:#7a5b00;border:1px solid #f1d47a;border-radius:7px;padding:7px 10px;font-size:11px;font-weight:700;z-index:6}.preview-overflow-warning.show{display:block}.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:100;display:grid;place-items:center}.modal[hidden]{display:none}.modal-box{width:min(650px,92vw);max-height:80vh;overflow:auto;background:#fff;border-radius:14px;padding:18px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head button{font-size:24px;border:0;background:none}.saved-entry{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:12px 0}.saved-entry small{display:block;color:var(--muted)}.internal-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border:1px solid #d9d0ff;background:#fbfaff;border-radius:9px;padding:12px}.internal-summary>div{display:grid;gap:4px}.internal-summary small{color:var(--muted);font-size:10px}.internal-summary b{font-size:16px}.internal-summary p{grid-column:1/-1;margin:2px 0 0;color:#7a5b00;font-size:10px;font-weight:600}@media(max-width:1150px){.workspace{grid-template-columns:1fr}.preview-panel{position:static;height:75vh;min-height:560px}}@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.topbar{height:auto;align-items:flex-start;gap:10px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.workspace{padding:10px}.company-grid{grid-template-columns:1fr}.form-grid.two,.form-grid.four{grid-template-columns:1fr}.span2{grid-column:auto}.calc-flow{grid-template-columns:1fr}.calc-flow i{transform:rotate(90deg);text-align:center}.item-row{grid-template-columns:1fr 1fr}.item-row textarea{grid-column:span 2}.preview-panel{height:72vh;min-height:500px}.preview-viewport{padding:12px}.internal-summary{grid-template-columns:1fr}}@media print{body{background:white}.sidebar,.topbar,.editor,.preview-head,.preview-overflow-warning{display:none!important}.app-shell,main,.workspace{display:block!important;padding:0!important}.preview-panel,.preview-viewport{position:static!important;height:auto!important;max-height:none!important;overflow:visible!important;border:0!important;background:#fff!important;padding:0!important}.preview-pages{display:block!important;width:auto!important;transform:none!important}.paper{box-shadow:none!important;width:8.5in!important;height:11in!important;min-height:11in!important;margin:0!important;padding:.4in!important;font-size:9pt!important;page-break-after:always!important;overflow:hidden!important}.paper:last-child{page-break-after:auto!important}.doc-table-head span:last-child,.doc-item .amount{display:none!important}.doc-item{grid-template-columns:1fr!important}.doc-table-head{justify-content:flex-start!important}}
.calc-inputs{align-items:end}.calc-inputs label:nth-child(5){grid-column:span 2}.calc-inputs label:nth-child(6){grid-column:span 2}.calc-flow-four{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}.calc-flow .oversize-box{background:#fff8e8;border-color:#f1cc75}.calc-flow .oversize-box b{color:#9a6700}@media(max-width:760px){.calc-inputs label:nth-child(5),.calc-inputs label:nth-child(6){grid-column:auto}.calc-flow-four{grid-template-columns:1fr}}
/* v6: Stage 3 per-item markup and tax */
.calc-inputs label:nth-child(7),.calc-inputs label:nth-child(8),.calc-inputs label:nth-child(9){grid-column:auto}
.calc-flow-seven{grid-template-columns:repeat(5,minmax(105px,1fr) auto) minmax(135px,1.15fr);overflow-x:auto;padding-bottom:4px}
.calc-flow .markup-box{background:#f5f0ff;border-color:#cbbcff}
.calc-flow .markup-box b{color:#5b34d6}
.calc-flow .tax-box{background:#eef7ff;border-color:#abd4f5}
.calc-flow .tax-box b{color:#1769aa}
.item-pricing-note{grid-template-columns:1fr}
@media(max-width:1100px){.calc-flow-seven{grid-template-columns:1fr auto 1fr auto 1fr}.calc-flow-seven .success{grid-column:1/-1}.calc-flow-seven i:nth-of-type(n+5){display:none}}
@media(max-width:760px){.calc-flow-seven{grid-template-columns:1fr}.calc-flow-seven i{display:block!important}.calc-flow-seven .success{grid-column:auto}}
/* v7: fully responsive workspace, calculator and navigation */
html,body{max-width:100%;overflow-x:hidden}
.topbar-title{display:flex;align-items:center;gap:10px;min-width:0}
.menu-toggle{display:none;width:40px;height:40px;border:1px solid #d8ddea;border-radius:8px;background:#fff;color:#344054;font-size:20px;cursor:pointer;flex:0 0 auto}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:49}
.sidebar-backdrop[hidden]{display:none}
.workspace>*{min-width:0}
.editor{min-width:0}
.card{min-width:0;overflow:hidden}
.form-grid.four.calc-inputs{grid-template-columns:repeat(3,minmax(0,1fr))}
.calc-inputs label{min-width:0}
.calc-inputs input,.calc-inputs select{width:100%;min-width:0}
.calc-flow-seven{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;padding:0}
.calc-flow-seven>div{min-width:0}
.calc-flow-seven>i{display:none}
.calc-flow-seven .success{grid-column:span 1}
.item-row>*{min-width:0}
.item-row input,.item-row select,.item-row textarea{width:100%;min-width:0}
.preview-panel{max-width:100%}
/* Move the actual-size preview below the form before the layout becomes cramped. */
@media(max-width:1500px){
.workspace{grid-template-columns:1fr}
.preview-panel{position:static;height:78vh;min-height:600px;width:100%}
.preview-viewport{max-width:100%}
.form-grid.four.calc-inputs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1050px){
.app-shell{grid-template-columns:190px minmax(0,1fr)}
.workspace{padding:14px}
.form-grid.four.calc-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-flow-seven{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-flow-seven .success{grid-column:1/-1}
.item-row{grid-template-columns:minmax(0,1fr) 110px 110px 42px}
}
@media(max-width:820px){
.app-shell{display:block}
.sidebar{display:flex;position:fixed;left:0;top:0;bottom:0;width:min(280px,86vw);height:100dvh;z-index:50;transform:translateX(-105%);transition:transform .2s ease;box-shadow:8px 0 30px rgba(16,24,40,.18)}
.sidebar.open{transform:translateX(0)}
.menu-toggle{display:grid;place-items:center}
.topbar{padding:12px 14px;flex-wrap:wrap;height:auto}
.topbar-title{flex:1 1 300px}
.topbar h1{font-size:18px}
.top-actions{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
.top-actions button{white-space:nowrap}
.status{white-space:nowrap}
.workspace{padding:10px}
.company-grid{grid-template-columns:1fr}
.form-grid.two{grid-template-columns:1fr}
.form-grid.four.calc-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
.span2{grid-column:auto}
.calc-flow-seven{grid-template-columns:repeat(2,minmax(0,1fr))}
.preview-panel{height:72vh;min-height:500px}
.preview-head{height:auto;min-height:48px;gap:8px;flex-wrap:wrap;padding:8px 10px}
.preview-tools{max-width:100%;overflow-x:auto}
.preview-viewport{height:calc(100% - 64px);padding:12px}
.item-row{grid-template-columns:minmax(0,1fr) minmax(100px,.45fr) 42px}
.item-row>label:first-child{grid-column:1/-1}
.item-row>label:nth-child(3){grid-column:1/3}
}
@media(max-width:560px){
.topbar-title p{display:none}
.top-actions .status{width:100%}
.top-actions button{flex:1 0 auto}
.card{padding:12px;border-radius:10px}
.section-title.between{align-items:flex-start;gap:8px}
.section-title.between>.secondary{padding:8px 10px;font-size:12px}
.form-grid.four.calc-inputs{grid-template-columns:1fr}
.calc-flow-seven{grid-template-columns:1fr}
.calc-flow-seven .success{grid-column:auto}
.inline-actions .primary{width:100%}
.item-row{grid-template-columns:1fr 42px}
.item-row>label:first-child,.item-row>label:nth-child(2),.item-row>label:nth-child(3){grid-column:1/-1}
.item-row .remove{grid-column:2;grid-row:1;z-index:1}
.internal-summary{grid-template-columns:1fr}
.preview-panel{min-height:460px;height:68vh}
.preview-head h2{width:100%}
}
label[hidden]{display:none!important}
/* v9: image paste/upload and automatic dimension detection */
.awning-image-detector{border:1px dashed #b9a8ff;background:#fbfaff;border-radius:12px;padding:14px;margin-bottom:16px;display:grid;gap:12px}
.detector-copy h3{margin:0 0 4px;font-size:15px}.detector-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.detector-actions{display:flex;flex-wrap:wrap;gap:8px}.detector-actions .upload{display:inline-flex;align-items:center;justify-content:center;margin:0}
.detector-workspace{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);gap:14px;align-items:start}
.detector-preview-wrap{background:#fff;border:1px solid var(--line);border-radius:10px;min-height:190px;display:grid;place-items:center;overflow:hidden;padding:8px}
.detector-preview-wrap img{display:block;max-width:100%;max-height:340px;object-fit:contain}
.detector-results{display:grid;gap:10px}.ocr-status{border-radius:8px;background:#eef4ff;color:#344054;padding:9px 10px;font-size:12px;font-weight:600}.ocr-status.working{background:#fff7df;color:#7a5b00}.ocr-status.success{background:#ecfdf3;color:#067647}.ocr-status.error{background:#fff1f0;color:#b42318}
.detected-grid{margin:0}.detector-result-actions{display:flex;justify-content:flex-end}.ocr-details{font-size:11px;color:var(--muted)}.ocr-details pre{white-space:pre-wrap;word-break:break-word;max-height:120px;overflow:auto;background:#fff;border:1px solid var(--line);padding:8px;border-radius:7px;color:#344054}
.paste-zone{border:1px dashed #c7cdd8;border-radius:9px;background:#fff;padding:10px;text-align:center;color:#667085;font-size:12px;outline:none}.paste-zone:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(111,66,255,.12)}
@media(max-width:760px){.detector-workspace{grid-template-columns:1fr}.detector-actions>*{flex:1 1 150px}.detector-result-actions .primary{width:100%}}
/* v11: manual dimension-label selection fallback */
.dimension-candidates{display:grid;gap:9px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px}
.dimension-candidates h4{margin:0;font-size:12px;color:#344054}
.dimension-candidate-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dimension-candidate{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;align-items:center;border:1px solid #e4e7ec;border-radius:8px;padding:7px;background:#fcfcfd}
.dimension-candidate.selected-length{border-color:#6941c6;background:#f9f5ff}.dimension-candidate.selected-height{border-color:#1570ef;background:#eff8ff}.dimension-candidate.ignored{opacity:.48}
.dimension-candidate img{width:84px;height:48px;object-fit:contain;background:#111;border-radius:5px;border:1px solid #d0d5dd}
.dimension-candidate strong{font-size:13px}.dimension-candidate small{display:block;color:#667085;font-size:10px;line-height:1.25;margin-top:2px}
.dimension-candidate-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.dimension-candidate-actions button{padding:5px 7px;font-size:10px;border-radius:5px;border:1px solid #d0d5dd;background:#fff;color:#344054;cursor:pointer}.dimension-candidate-actions button:hover{border-color:#7f56d9;color:#6941c6}
@media(max-width:600px){.dimension-candidate-list{grid-template-columns:1fr}.dimension-candidate{grid-template-columns:72px minmax(0,1fr)}.dimension-candidate img{width:72px}}
/* v12 crop-and-select measurement reader */
.crop-selector-wrap{position:relative;min-height:220px;background:#111827;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
#awningCropCanvas{display:block;max-width:100%;height:auto;touch-action:none;cursor:crosshair}
#awningCropCanvas.selecting{outline:2px solid rgba(124,58,237,.25)}
.crop-instructions{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(17,24,39,.86);color:#fff;padding:9px 12px;border-radius:8px;font-size:12px;pointer-events:none}
.crop-controls{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.crop-controls button.active{background:#ede9fe;border-color:#7c3aed;color:#5b21b6}
.selected-crop-previews{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.selected-crop-previews>div{border:1px solid #dbe1ea;border-radius:10px;padding:8px;background:#fff}
.selected-crop-previews span{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.selected-crop-previews canvas{display:block;width:100%;height:80px;object-fit:contain;background:#111827;border-radius:6px}
@media(max-width:700px){.selected-crop-previews{grid-template-columns:1fr}.crop-controls button{flex:1 1 45%}}
/* v13: improved full-image crop selector */
.crop-viewer-block{min-width:0;display:grid;gap:8px}
.crop-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#344054;font-size:12px;font-weight:700}
.crop-zoom-controls{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.crop-zoom-controls .compact{min-width:34px;padding:6px 9px}
#cropZoomLabel{min-width:42px;text-align:center;color:#667085;font-weight:700}
.crop-selector-wrap{min-height:420px;max-height:68vh;display:block;overflow:auto;padding:14px;background:#111827;overscroll-behavior:contain}
#awningCropCanvas{max-width:none;height:auto;margin:auto;touch-action:none;cursor:crosshair;transform-origin:top left}
#awningCropCanvas.selecting{outline:none}
.crop-instructions{display:none!important}
.selected-crop-previews[hidden]{display:none!important}
.selected-crop-previews canvas{height:110px;background:#f8fafc;border:1px solid #e4e7ec}
@media(max-width:1100px){.detector-workspace{grid-template-columns:1fr}.crop-selector-wrap{min-height:360px;max-height:60vh}}
@media(max-width:700px){.crop-viewer-toolbar{align-items:flex-start;flex-direction:column}.crop-selector-wrap{min-height:300px;padding:8px}.crop-zoom-controls{width:100%;justify-content:flex-end}}
/* v14 direct automatic measurement detector */
.direct-detector{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);gap:14px;align-items:start;margin-top:12px}
.direct-preview-card{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;min-width:0}
.direct-preview-card img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;border-radius:8px;background:#111827}
.measurements-found{border:1px solid #e4e7ec;border-radius:10px;padding:10px;background:#fff}
.measurements-found>strong{display:block;font-size:12px;margin-bottom:8px}
.measurement-chips{display:flex;flex-wrap:wrap;gap:8px}
.measurement-chip{border:1px solid #d0d5dd;background:#f8fafc;border-radius:9px;padding:7px 10px;display:flex;gap:7px;align-items:center;cursor:pointer}
.measurement-chip b{font-size:14px}.measurement-chip span{font-size:10px;color:#667085}
.measurement-chip.selected-length{border-color:#7c3aed;background:#f5f3ff}.measurement-chip.selected-height{border-color:#0ea5e9;background:#f0f9ff}
@media(max-width:1100px){.direct-detector{grid-template-columns:1fr}.direct-preview-card img{max-height:520px}}
@media(max-width:700px){.direct-detector{display:block}.direct-preview-card{margin-bottom:12px}.detector-actions>*{flex:1 1 45%}}
/* v16 working Settings panel */
.settings-box{width:min(760px,calc(100vw - 28px));max-height:90vh;overflow:auto}.modal-head>div p{margin:4px 0 0;color:#667085;font-size:13px}.settings-content{padding:20px}.settings-banner{padding:13px 15px;border:1px solid #d0d5dd;border-radius:10px;background:#f8fafc;margin-bottom:16px;font-weight:700}.settings-banner.success{background:#ecfdf3;border-color:#86efac;color:#166534}.settings-banner.warning{background:#fffbeb;border-color:#fcd34d;color:#92400e}.settings-banner.error{background:#fef2f2;border-color:#fca5a5;color:#991b1b}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.setting-row{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid #e4e7ec;border-radius:9px;background:#fff}.setting-row span{color:#667085}.setting-row b{font-size:13px;text-align:right}.setting-row b.ok{color:#15803d}.setting-row b.bad{color:#b91c1c}.setting-row b.warn{color:#a16207}.settings-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.settings-help{border-top:1px solid #eaecf0;padding-top:16px}.settings-help h3{margin:0 0 8px}.settings-help ol{margin:0;padding-left:22px;line-height:1.7}.settings-help code{background:#f2f4f7;padding:2px 5px;border-radius:4px}.settings-security{background:#f8fafc;border-left:4px solid #6d5dfc;padding:10px 12px}.settings-log{white-space:pre-wrap;word-break:break-word;background:#101828;color:#d1fadf;border-radius:9px;padding:12px;max-height:220px;overflow:auto;font-size:12px}.settings-modal[hidden]{display:none!important}@media(max-width:640px){.settings-grid{grid-template-columns:1fr}.setting-row{align-items:flex-start}.settings-actions>*{width:100%}}
.nav{text-decoration:none;display:block}.version-badge{font-size:10px;font-weight:800;color:#6d3df5;background:#f0ebff;border:1px solid #d9d0ff;padding:5px 7px;border-radius:999px;white-space:nowrap}
/* v20 Saved Proposals search */
.saved-modal-box{width:min(820px,94vw);max-height:88vh}
.saved-search-wrap{position:sticky;top:-18px;z-index:2;background:#fff;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.saved-search-wrap>label{font-size:12px;margin-bottom:6px}
.saved-search-row{display:flex;gap:8px}
.saved-search-row input{flex:1;min-width:0}
.saved-search-wrap small{display:block;min-height:16px;margin-top:6px;color:var(--muted)}
.saved-entry{align-items:center}
.saved-entry-copy{min-width:0;display:grid;gap:3px}
.saved-entry-copy span{color:#475467;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-entry-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.saved-no-results{text-align:center;padding:28px 12px;color:var(--muted);font-weight:700}
@media(max-width:620px){.saved-search-row{flex-direction:column}.saved-entry{align-items:flex-start;flex-direction:column}.saved-entry-actions{width:100%}.saved-entry-actions .secondary{flex:1}}
/* v20 Full-screen awning image viewer */
.direct-preview-card img[role="button"]{cursor:zoom-in;outline:none}
.direct-preview-card img[role="button"]:focus-visible{box-shadow:0 0 0 4px rgba(109,61,245,.25)}
.image-viewer[hidden]{display:none!important}
.image-viewer{position:fixed;inset:0;z-index:1000;background:rgba(3,7,18,.96);display:grid;grid-template-rows:auto 1fr;color:#fff}
.image-viewer-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:rgba(17,24,39,.98);border-bottom:1px solid rgba(255,255,255,.14)}
.image-viewer-title{font-weight:800}.image-viewer-title span{margin-left:8px;color:#c4b5fd;font-size:12px}
.image-viewer-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.image-viewer-actions button{border:1px solid rgba(255,255,255,.22);background:#fff;color:#111827;border-radius:7px;padding:8px 11px;font-weight:800;cursor:pointer}
.image-viewer-actions .image-viewer-close{background:#ef4444;color:#fff;border-color:#ef4444}
.image-viewer-stage{position:relative;min-height:0;overflow:hidden;display:grid;place-items:center;cursor:grab;touch-action:none;user-select:none}
.image-viewer-stage.dragging{cursor:grabbing}
.image-viewer-stage img{max-width:none;max-height:none;transform-origin:center center;will-change:transform;pointer-events:none;box-shadow:0 12px 40px rgba(0,0,0,.45)}
body.image-viewer-open{overflow:hidden}
@media(max-width:760px){.image-viewer-toolbar{align-items:flex-start;flex-direction:column}.image-viewer-actions{width:100%;justify-content:flex-start}.image-viewer-actions button{flex:1 1 auto;font-size:12px;padding:8px}.image-viewer-stage{min-height:0}}
@media print{.image-viewer{display:none!important}}
/* v21 proposal type chooser */
.proposal-type-box{width:min(900px,94vw);max-height:90vh}
.proposal-type-box .modal-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.proposal-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.proposal-type-grid button{display:grid;gap:5px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:11px;padding:15px;cursor:pointer;color:var(--ink);min-height:88px}
.proposal-type-grid button:hover,.proposal-type-grid button:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,61,245,.1);outline:none}
.proposal-type-grid b{font-size:14px}
.proposal-type-grid span{font-size:11px;line-height:1.35;color:var(--muted)}
#awningCalculatorCard[hidden]{display:none!important}
@media(max-width:760px){.proposal-type-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.proposal-type-grid{grid-template-columns:1fr}}
/* Remove browser print header/footer area and use the full Letter sheet. */
@page{size:Letter;margin:0}
@media print{html,body{margin:0!important;padding:0!important}.paper{margin:0!important}}
/* v22 Channel Letters height-based detector */
#channelLettersCalculatorCard[hidden]{display:none!important}
.channel-groups-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 10px}.channel-groups-head h3{margin:0 0 4px}.channel-groups-head p{margin:0;color:var(--muted);font-size:12px}.channel-groups-table-wrap{border:1px solid var(--line);border-radius:11px;overflow:auto;background:#fff}.channel-groups-table{width:100%;border-collapse:collapse;min-width:780px}.channel-groups-table th,.channel-groups-table td{padding:9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.channel-groups-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#667085;background:#f8fafc}.channel-groups-table td input,.channel-groups-table td select{width:100%;min-width:80px;box-sizing:border-box}.channel-panels-table{min-width:1120px}.channel-panels-table td:nth-child(2) select{min-width:150px}.channel-groups-table td:first-child input{min-width:230px}.channel-groups-table .group-amount{font-weight:800;white-space:nowrap}.channel-groups-table .remove-group{border:0;background:#fee2e2;color:#b91c1c;border-radius:7px;width:34px;height:34px;font-weight:900;cursor:pointer}.channel-empty{text-align:center;padding:24px;color:var(--muted);font-weight:700}.channel-summary{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:12px}.channel-summary span{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 12px;font-size:12px}.channel-summary b{margin-left:4px}.channel-detector .direct-preview-card img{cursor:zoom-in}@media(max-width:700px){.channel-groups-head{align-items:flex-start;flex-direction:column}.channel-groups-head button{width:100%}.channel-summary{justify-content:stretch}.channel-summary span{flex:1 1 100%}}
/* v23 overall Channel Letters markup */
.channel-overall-markup{margin-top:18px;padding:16px;border:1px solid #d7dee8;border-radius:12px;background:#f8fafc}
.channel-overall-markup .form-grid{margin:0}
.channel-overall-markup p{margin:10px 0 0;color:#64748b;font-size:13px;line-height:1.45}
.channel-summary{flex-wrap:wrap}
.channel-symbols-head{margin-top:22px}.channel-symbols-table td:first-child input{min-width:230px}
/* v33 login, users, and manager approval workflow */
.nav-count{margin-left:auto;background:#ef4444;color:#fff;border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;font-size:12px}
.sidebar-user{margin-top:auto;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:3px}.sidebar-user small{text-transform:capitalize;color:var(--muted)}.logout-link{margin-top:7px;color:#dc2626;text-decoration:none;font-weight:700;font-size:13px}
.proposal-status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;white-space:nowrap}.status-draft{background:#e5e7eb;color:#374151}.status-pending-approval{background:#fff3cd;color:#8a5a00}.status-approved{background:#dcfce7;color:#166534}.status-sent{background:#dbeafe;color:#1d4ed8}.status-rejected{background:#fee2e2;color:#991b1b}.status-revision-required{background:#ffedd5;color:#9a3412}
.decision-note{color:#9a3412!important;font-weight:700}.approval-modal-box{max-width:900px}.approval-review-box{max-width:720px}.approval-review-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:15px 0}.approval-review-summary>div{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:5px}.approval-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}.approval-reject{width:auto;height:auto;border-radius:8px;padding:10px 16px}
.user-create-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:end;margin-bottom:18px}.user-create-grid button{height:42px}.user-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0;gap:12px}.user-row>div{display:flex;align-items:center;gap:8px}.user-row>div:first-child{flex-direction:column;align-items:flex-start}.user-active{font-size:12px;font-weight:800;color:#991b1b}.user-active.active{color:#166534}
.login-page{min-height:100vh;display:grid;place-items:center;background:#f4f6fb;padding:20px}.login-card{width:min(430px,100%);background:#fff;border:1px solid #ddd6fe;border-radius:20px;padding:32px;box-shadow:0 18px 50px rgba(55,48,163,.14)}.login-card>img{width:190px;display:block;margin:0 auto 18px}.login-card h1{text-align:center;margin:0}.login-card>p{text-align:center;color:var(--muted);margin:5px 0 22px}.login-card form{display:flex;flex-direction:column;gap:14px}.login-error{background:#fee2e2;color:#991b1b;border-radius:9px;padding:10px;margin-bottom:12px}.first-login{margin-top:20px;background:#f5f3ff;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;font-size:12px}
/* Go-live readiness rows. The flag colour is the whole point: a FAIL has to be
impossible to skim past. */
.ready-area{margin:18px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#667085}
.ready-row{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid #e5e7eb;border-radius:9px;margin-bottom:6px;background:#fff}
.ready-row small{display:block;color:#475467;font-size:12px;margin-top:2px;line-height:1.45}
.ready-flag{flex:0 0 54px;text-align:center;font-size:10px;font-weight:800;letter-spacing:.05em;padding:3px 0;border-radius:5px;margin-top:1px}
.ready-pass .ready-flag{background:#dcfae6;color:#067647}
.ready-warn .ready-flag{background:#fef0c7;color:#b54708}
.ready-fail .ready-flag{background:#fee4e2;color:#b42318}
.ready-unknown .ready-flag{background:#eaecf0;color:#475467}
.ready-fail{border-color:#fda29b;background:#fffbfa}
.ready-warn{border-color:#fedf89;background:#fffcf5}
/* Why the sign-in form was reached from a redirect. Informational, not a failure. */
.login-notice{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;border-radius:9px;padding:10px;margin-bottom:12px;font-size:13px}
/* The Turnstile widget sizes itself; this only stops it hugging the left edge. */
.login-turnstile{display:flex;justify-content:center;min-height:65px}
.login-card .cf-turnstile{margin:0 auto}
@media(max-width:820px){.user-create-grid,.approval-review-summary{grid-template-columns:1fr}.user-row{align-items:flex-start;flex-direction:column}.user-row>div:last-child{flex-wrap:wrap}.top-actions{flex-wrap:wrap}}
/* v34 Admin user permissions and Approved Proposals */
.span-all{grid-column:1/-1}.permission-editor{border:1px solid var(--line);border-radius:12px;padding:14px;background:#f8fafc}.permission-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.permission-head span,.permission-actions{display:flex;gap:7px;flex-wrap:wrap}.compact{padding:7px 9px;font-size:11px}.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.permission-check{display:flex!important;align-items:center;gap:8px;border:1px solid #e4e7ec;border-radius:8px;padding:8px;background:#fff;font-size:12px;font-weight:600}.permission-check input{width:auto;margin:0}.user-row-expanded{display:block}.user-summary{display:flex!important;align-items:center;justify-content:space-between;gap:12px}.user-summary>div:first-child{display:flex;flex-direction:column;align-items:flex-start}.user-summary>div:last-child{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.user-permission-panel{margin-top:12px;border:1px solid #ddd6fe;background:#faf9ff;border-radius:12px;padding:14px}.user-permission-panel>label{display:inline-flex;vertical-align:top;width:calc(50% - 6px);margin-right:8px}.user-permission-panel .permission-grid{margin:14px 0}.permission-actions{justify-content:flex-end}.users-modal-box{width:min(1050px,95vw);max-height:90vh;overflow:auto}
@media(max-width:900px){.permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.permission-grid{grid-template-columns:1fr}.permission-head,.user-summary{align-items:flex-start;flex-direction:column}.user-permission-panel>label{width:100%;margin-right:0}.permission-actions>*{flex:1 1 45%}}
/* v35: manager proposal breakdown review */
.approval-breakdown-toggle{width:100%;margin:2px 0 12px}.approval-breakdown{border:1px solid var(--line);background:#f8fafc;border-radius:12px;padding:12px;margin-bottom:14px;max-height:330px;overflow:auto}.approval-breakdown-head,.approval-breakdown-row,.approval-breakdown-totals{display:flex;justify-content:space-between;gap:16px}.approval-breakdown-head{padding:2px 2px 10px;border-bottom:1px solid var(--line)}.approval-breakdown-head span{color:var(--muted);font-size:12px}.approval-breakdown-row{padding:11px 2px;border-bottom:1px solid var(--line);align-items:flex-start}.approval-breakdown-row>div{display:flex;flex-direction:column;gap:4px;min-width:0}.approval-breakdown-row b{white-space:normal}.approval-breakdown-row small{color:var(--muted)}.approval-breakdown-row strong{white-space:nowrap}.approval-breakdown-totals{padding:12px 2px 2px;justify-content:flex-end;flex-wrap:wrap}.approval-breakdown-totals span{min-width:170px;text-align:right}
/* v37: Manager internal cost summary */
.approval-breakdown-summary{margin-top:14px;padding:14px;border:1px solid #dbe2ee;border-radius:12px;background:#fff}
.approval-breakdown-summary>b{display:block;margin-bottom:8px}
.approval-breakdown-summary-row{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px dashed #e3e8f1}
.approval-breakdown-summary-row:last-child{border-bottom:0}
/* v42: Manager proposal artwork shown under Internal Cost Summary. */
.approval-artwork-card{margin-top:14px;padding:14px;border:1px solid #dbe2ee;border-radius:12px;background:#fff}
.approval-artwork-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.approval-artwork-head span{font-size:12px;color:var(--muted)}
.approval-artwork-button{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f8fafc;cursor:zoom-in}
.approval-artwork-button img{display:block;width:100%;max-height:420px;object-fit:contain;background:#f1f5f9}
.approval-artwork-button:focus-visible{outline:3px solid rgba(124,77,255,.28);outline-offset:2px}
@media(max-width:640px){.approval-artwork-head{align-items:flex-start;flex-direction:column}.approval-artwork-button img{max-height:300px}}
.channel-installation-card{margin-top:22px;padding:18px;border:1px solid #d9d3ff;border-radius:14px;background:#fbfaff}.channel-installation-card .channel-groups-head{margin:0 0 14px}.installation-status{margin-top:12px;padding:11px 13px;border-radius:10px;background:#edf9f1;color:#18794e;font-weight:700}.installation-status.warning{background:#fff7df;color:#9a6700}.channel-installation-card input:disabled{background:#f1f3f7;color:#8b93a5}
#cutoutMaterialRow[hidden]{display:none!important}
/* v79: compact, aligned Lightbox calculation cards */
.lightbox-result-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.lightbox-result-card{position:relative;min-width:0;min-height:112px;border:1px solid #d9d0ff;background:#fbfaff;border-radius:10px;padding:17px 14px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.lightbox-result-card .result-step{position:absolute;top:8px;left:9px;width:21px;height:21px;border-radius:999px;background:#eee9ff;color:#6941c6;display:grid;place-items:center;font-size:10px;font-weight:800}
.lightbox-result-card small{font-size:9px;color:var(--muted);letter-spacing:.02em}
.lightbox-result-card b{font-size:18px;line-height:1.15;overflow-wrap:anywhere}
.lightbox-result-card>span:last-child{font-size:10px;color:var(--muted);line-height:1.3}
.lightbox-result-card.markup-box{background:#f5f0ff;border-color:#cbbcff}
.lightbox-result-card.markup-box b{color:#5b34d6}
.lightbox-result-card.tax-box{background:#eef7ff;border-color:#abd4f5}
.lightbox-result-card.tax-box b{color:#1769aa}
.lightbox-result-card.success{background:#effaf3;border-color:#a6dfb8}
.lightbox-result-card.success b{color:#08783e}
@media(max-width:900px){.lightbox-result-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.lightbox-result-cards{grid-template-columns:1fr}.lightbox-result-card{min-height:102px}}
/* v89 permanent company logo controls */
.logo-upload{gap:10px}.logo-save-status{display:block;font-size:11px;line-height:1.35;color:#667085;text-align:center}.logo-save-status.saving{color:#8a5a00}.logo-save-status.saved{color:#18794e}.logo-save-status.error{color:#b42318}
/* v90 automatic client directory */
.clients-modal-box{max-width:980px}.client-entry{align-items:flex-start;flex-wrap:wrap}.client-proposals{width:100%;margin-top:10px;padding:10px;border-top:1px solid var(--border,#dde3ee);display:grid;gap:7px}.client-proposals>div{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(180px,1.5fr) auto;gap:10px;align-items:center;padding:7px 9px;background:#f8fafc;border-radius:8px}.client-proposals span,.client-proposals small{color:#64748b}@media(max-width:700px){.client-proposals>div{grid-template-columns:1fr}.client-entry .saved-entry-actions{width:100%;justify-content:flex-start}}
/* v91 clickable client proposal rows and proposal-number search */
.client-proposals .client-proposal-row{width:100%;border:0;background:#f8fafc;border-radius:8px;display:grid;grid-template-columns:minmax(120px,.7fr) minmax(180px,1.5fr) auto;gap:10px;align-items:center;padding:9px;text-align:left;color:inherit;cursor:pointer;font:inherit;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}
.client-proposals .client-proposal-row:hover{background:#eef2ff;box-shadow:0 0 0 1px #c7d2fe inset}
.client-proposals .client-proposal-row:focus-visible{outline:3px solid rgba(124,77,255,.28);outline-offset:2px;background:#eef2ff}
.client-proposals .client-proposal-row:active{transform:translateY(1px)}
.client-proposals .client-proposal-row span,.client-proposals .client-proposal-row small{color:#64748b}
.client-no-matching-proposals{margin:0;padding:8px;color:#64748b}
@media(max-width:700px){.client-proposals .client-proposal-row{grid-template-columns:1fr}}
/* v96 Universal / Multi-Sign Proposal */
.universal-builder-card{border:2px solid #7c4dff;background:linear-gradient(135deg,#fbfaff,#f4f0ff)}
.universal-help{margin:0 0 14px;color:#596579;line-height:1.55}
.universal-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);gap:16px;align-items:end}
.universal-toolbar label{font-weight:700;color:#263247}
.universal-toolbar select{margin-top:7px}
.universal-summary{min-height:48px;border:1px solid #d9cffd;border-radius:10px;background:#fff;padding:11px 14px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.universal-summary b{color:#5b34d6}.universal-summary span{font-size:12px;color:#667085}
.universal-doc-item>div:first-child{white-space:pre-wrap}.universal-doc-item .amount{font-weight:800}
@media(max-width:720px){.universal-toolbar{grid-template-columns:1fr}}
/* v96 robust universal visibility and controls */
#universalBuilderCard.is-active,#awningCalculatorCard.is-active,#vestibuleCalculatorCard.is-active,#lightboxCalculatorCard.is-active,#cloudboxCalculatorCard.is-active,#faceChangeCalculatorCard.is-active,#bladeSignCalculatorCard.is-active,#aluminumPanelCalculatorCard.is-active,#channelLettersCalculatorCard.is-active{display:block!important}
#universalBuilderCard[aria-hidden="true"],#awningCalculatorCard[aria-hidden="true"],#vestibuleCalculatorCard[aria-hidden="true"],#lightboxCalculatorCard[aria-hidden="true"],#cloudboxCalculatorCard[aria-hidden="true"],#faceChangeCalculatorCard[aria-hidden="true"],#bladeSignCalculatorCard[aria-hidden="true"],#aluminumPanelCalculatorCard[aria-hidden="true"],#channelLettersCalculatorCard[aria-hidden="true"]{display:none!important}
.universal-actions-panel{display:grid;gap:9px;align-items:stretch}
#activateUniversalModuleBtn{width:100%;min-height:44px}
@media(max-width:720px){.universal-actions-panel{width:100%}}
/* v99 Universal final-description editor */
.universal-description-editor[hidden]{display:none!important}
.universal-description-list{display:grid;gap:16px}
.universal-description-section{border:1px solid #ddd6fe;border-radius:14px;padding:16px;background:#faf9ff}
.universal-description-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.universal-description-head small{display:block;color:#7c3aed;font-weight:800;letter-spacing:.04em}
.universal-description-head h3{margin:2px 0 0;font-size:1rem;color:#172033}
.universal-description-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.universal-description-actions .compact{min-height:36px;padding:7px 10px;font-size:.82rem}
.universal-description-actions button:disabled{opacity:.45;cursor:not-allowed}
.universal-description-section textarea{width:100%;min-height:170px;resize:vertical;font:inherit;line-height:1.45}
.universal-description-state{margin-top:8px;color:#64748b;font-size:.82rem}
.universal-description-empty{padding:20px;border:1px dashed #c4b5fd;border-radius:12px;text-align:center;color:#64748b;background:#fff}
.remove-text{border:1px solid #fecaca;background:#fff;color:#b91c1c;border-radius:8px;font-weight:700}
@media(max-width:760px){.universal-description-head{display:block}.universal-description-actions{justify-content:flex-start;margin-top:10px}.universal-description-actions button{flex:1 1 44%}}
/* v99: reusable final-description editor for every individual proposal type. */
.individual-description-footer{margin-top:12px;align-items:center}
#individualDescriptionEditorCard textarea{min-height:210px;font-family:inherit;line-height:1.45}
#individualDescriptionEditorCard[hidden]{display:none!important}
/* v104 proposal numbering and desktop notifications */
#proposalNo[readonly]{background:#f8fafc;color:#344054;font-weight:800;cursor:not-allowed}.notification-toggle{position:relative}.notification-toggle #notificationBadge{position:absolute;right:-7px;top:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;line-height:18px;text-align:center}.notification-toggle.permission-granted{border-color:#16a34a;background:#f0fdf4}.notification-toggle.permission-denied{border-color:#dc2626;background:#fef2f2}
/* ==========================================================================
v108 - brand assets, 50/50 workspace, responsive pass
Appended last so these rules win over the earlier blocks by source order.
========================================================================== */
/* --- Logo -----------------------------------------------------------------
The v107 asset was a pre-clipped 455x160 crop, so the wordmark was cut off
mid-word wherever it appeared. v108 ships the full 900x238 lockup (3.78:1).
These boxes let it size by width and derive its own height, so no crop and
no distortion at any breakpoint. */
.brand{flex-wrap:wrap;gap:4px 8px}
.brand img{width:150px;max-width:100%;height:auto;object-fit:contain;object-position:left}
.logo-upload img{width:100%;height:auto;max-height:96px;object-fit:contain}
.doc-logo{height:auto}
img{max-width:100%}
/* --- Editor / Live Preview 50-50 ------------------------------------------
The left menu is a sibling of .workspace inside .app-shell, so it is
excluded from this split automatically.
minmax(0,1fr) rather than 1fr is required: the preview column contains a
fixed 816px page, and a bare 1fr floors at min-content, which would push
the grid wider than its container and break the 50/50. minmax(0,...) lets
the column shrink and scroll instead.
Threshold is 1024px, not the old 1500px, because the preview's Fit Width
zoom recalculates on resize, so the page scales down to whatever width the
column has. That gives laptops a side-by-side view they did not have. */
@media(min-width:1024px){
.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.preview-panel{position:sticky;top:94px;height:calc(100vh - 110px);height:calc(100dvh - 110px);min-height:520px;width:auto}
.preview-viewport{max-width:100%}
}
/* --- Viewport units -------------------------------------------------------
Mobile browser chrome makes 100vh taller than the visible area, which cut
off the bottom of the sidebar drawer. dvh tracks the actual visible
viewport; the vh line stays first as the fallback for engines without dvh.
The preview panel's height is set inside the two breakpoint blocks below,
so it is deliberately not restated here. */
.sidebar{height:100vh;height:100dvh}
/* --- Touch targets --------------------------------------------------------
Preview toolbar controls were 30px and the row-remove button 38px, both
under the 44px guideline. Only enlarge for touch pointers so mouse users
keep the compact toolbar. */
@media(pointer:coarse){
.preview-tools button,.preview-tools select{min-height:44px;padding:6px 12px}
.remove{height:44px}
.nav{padding:13px 11px}
.upload,.secondary,.primary{min-height:44px}
.item-row input,.item-row select{min-height:42px}
}
/* --- Tablet ---------------------------------------------------------------
820px already switches the sidebar to a drawer. This keeps the stacked
preview a sensible height and stops the toolbar from crowding. */
@media(max-width:1023px){
.workspace{grid-template-columns:minmax(0,1fr)}
.preview-panel{position:static;height:70vh;height:70dvh;min-height:520px;width:100%}
}
/* --- Phone ----------------------------------------------------------------
Below 560px the existing rules already collapse most grids. These close the
remaining gaps: the brand lockup, the preview height, and the page padding. */
@media(max-width:560px){
.brand img{width:130px}
.preview-panel{height:64vh;height:64dvh;min-height:400px}
.preview-viewport{padding:8px}
}
@media(max-width:420px){
.workspace{padding:8px}
.card{padding:10px}
.brand img{width:118px}
.topbar{padding:10px}
.modal-box{width:96vw;padding:14px}
}
/* --- Landscape phones -----------------------------------------------------
Short viewports: a 70dvh preview leaves almost nothing for the form. */
@media(max-height:520px) and (orientation:landscape){
.preview-panel{height:auto;min-height:340px}
.sidebar{overflow-y:auto}
}
/* Prevent iOS from auto-inflating text after an orientation change. */
body{-webkit-text-size-adjust:100%}
/* ==========================================================================
v109 - hidden-attribute fix, menu pane, editor-column overflow
========================================================================== */
/* --- The hidden attribute, globally ---------------------------------------
Any author rule that sets an explicit `display` beats the browser's
`[hidden]{display:none}`, so `hidden` silently stopped working on two
elements: `.nav` (display:block) and `.nav-count` (display:inline-flex).
Consequences: zero-count badges rendered as a red "0", and nav items the
JS hides by role - Proposal Trash, User Management - stayed visible to
Staff and Manager. The file already carried a one-off `label[hidden]`
patch for the same bug; this generalises it so no future rule reopens it.
Server-side role checks were never affected - this was display only. */
[hidden]{display:none!important}
/* --- Menu pane ------------------------------------------------------------
Was: `.nav{display:block}` with `.nav-count{margin-left:auto}`. margin-left
:auto does nothing outside a flex or grid container, so the badge flowed
inline right after the label and collided with it whenever the label
wrapped to a second line.
Now each row is a flex line: fixed icon slot, flexible label, badge pinned
right. 240px (was 220px) fits "Approved Proposals" and "Products /
Services" on one line at 13px, which is what removes the wrapping. */
.app-shell{grid-template-columns:240px minmax(0,1fr)}
.sidebar{padding:18px 12px}
.sidebar nav{display:grid;gap:2px}
.nav{
display:flex;align-items:center;gap:10px;
width:100%;padding:10px 12px;
border-radius:10px;position:relative;
font-size:13px;font-weight:600;line-height:1.3;
color:#475467;text-align:left;text-decoration:none;
transition:background .15s ease,color .15s ease;
}
.nav-ico{
flex:0 0 20px;width:20px;
font-style:normal;font-size:14px;line-height:1;
display:grid;place-items:center;opacity:.85;
}
.nav>span{flex:1 1 auto;min-width:0;margin-left:0}
.nav-count{
flex:0 0 auto;margin-left:auto;
min-width:20px;height:20px;padding:0 6px;
border-radius:999px;background:#ef4444;color:#fff;
font-size:11px;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;
}
.nav:hover{background:#f4f5f8;color:#1f2937}
.nav.active{background:#f0ebff;color:var(--purple);font-weight:700}
.nav.active .nav-ico{opacity:1}
/* Left accent bar marking the active item. */
.nav.active::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:3px;height:56%;border-radius:0 3px 3px 0;background:var(--purple);
}
.nav:focus-visible{outline:2px solid var(--purple);outline-offset:1px}
.sidebar-user{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
/* --- Editor-column overflow ------------------------------------------------
These grids declare hard pixel floors - .detector-workspace needs 534px,
.direct-detector 654px - which cannot shrink. v107 stacked the workspace
below 1500px so the editor column was always wide enough and the floors
never bound. v108 made the split 50/50 from 1024px up, which put the editor
column at roughly 490-590px between 1100px and 1500px, so these grids
pushed past their container and clipped their right-hand column.
auto-fit + minmax(min(100%,N),1fr) reflows on the container's own width
rather than the viewport's, so it collapses to one column exactly when the
space runs out, at any breakpoint, and can never overflow. */
.detector-workspace{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.direct-detector{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.universal-toolbar{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.client-proposal-row{grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr) auto}
.detector-preview-wrap{min-width:0}
.detector-workspace>*,.direct-detector>*,.universal-toolbar>*{min-width:0}
/* Nothing in the editor column may paint outside its card. */
.editor,.editor .card{min-width:0}
.editor .card{overflow-wrap:anywhere}
/* ==========================================================================
v112 - payment button, per-item deposit
========================================================================== */
/* The line-item row gained a Deposit % column, so it is now five children
rather than four. Widths stay explicit for type/amount/deposit and let the
description take the remaining space. */
.item-row{grid-template-columns:minmax(0,1.3fr) 115px 115px 92px 42px}
@media(max-width:1050px){ .item-row{grid-template-columns:minmax(0,1fr) 105px 105px 84px 42px} }
@media(max-width:820px){
.item-row{grid-template-columns:minmax(0,1fr) minmax(90px,.5fr) 42px}
.item-row>label:first-child{grid-column:1/-1}
}
@media(max-width:560px){
.item-row{grid-template-columns:1fr 42px}
.item-row>label{grid-column:1/-1}
.item-row .remove{grid-column:2;grid-row:1;z-index:1}
}
.field-hint{display:block;font-weight:500;color:var(--muted);font-size:10px;margin-top:3px;line-height:1.35}
/* Payment button on the printed proposal. Sits left of the totals block.
Print keeps it visible but flat - it is a link the client taps on screen. */
.doc-pay{display:flex;flex-direction:column;align-items:flex-start;gap:6px;justify-content:flex-start}
.doc-pay a{display:inline-block;background:#1c4ed8;color:#fff;text-decoration:none;font-weight:700;font-size:10pt;padding:9px 20px;border-radius:999px;white-space:nowrap}
.doc-pay .doc-pay-methods{font-size:7pt;color:#444;letter-spacing:.02em}
/* Deposit line under an individual product amount. */
.doc-item .deposit-note{display:block;font-size:7.5pt;font-weight:700;color:#7a2e0e;white-space:nowrap;margin-top:2px}
/* The highlighted "Deposit due to begin production" row beneath TOTAL. */
.doc-deposit-due{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:6px;padding:7px 10px;background:#fdf3e3;border:1px solid #e7c88a;border-radius:4px;font-weight:700;font-size:9.5pt;break-inside:avoid}
@media print{
.doc-pay a{background:#1c4ed8!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc-deposit-due{background:#fdf3e3!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ==========================================================================
v113 - mockup uploads and per-sheet signature pages
========================================================================== */
.mockups-box{width:min(820px,96vw);max-height:90vh;overflow:auto}
.mockup-upload{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 6px}
.mockup-upload .upload{margin:0}
.mockup-upload small{color:var(--muted);font-size:11px}
.mockup-status{margin:8px 0;padding:9px 11px;border-radius:8px;font-size:12px;font-weight:600}
.mockup-status.saving{background:#eef2ff;color:#3730a3}
.mockup-status.ok{background:#effaf3;color:#166534}
.mockup-status.error{background:#fef2f2;color:#b42318}
.mockup-list{display:grid;gap:10px;margin-top:10px}
.mockup-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px}
.mockup-thumb{width:64px;height:64px;border-radius:8px;background:#f4f5f8;display:grid;place-items:center;overflow:hidden}
.mockup-thumb img{width:100%;height:100%;object-fit:cover}
.mockup-ext{font-size:11px;font-weight:800;color:var(--muted)}
.mockup-meta{min-width:0;display:grid;gap:2px}
.mockup-meta b{overflow-wrap:anywhere}
.mockup-meta small{color:var(--muted);font-size:11px}
.mockup-meta .mockup-warn{color:#7a5b00}
.mockup-actions{display:flex;align-items:center;gap:6px}
.mockup-actions .secondary{padding:7px 11px;font-size:12px;text-decoration:none;display:inline-block}
.mockup-empty{color:var(--muted);text-align:center;padding:16px;font-size:13px}
@media(max-width:560px){
.mockup-row{grid-template-columns:48px minmax(0,1fr);grid-template-areas:'thumb meta' 'actions actions'}
.mockup-thumb{width:48px;height:48px;grid-area:thumb}
.mockup-meta{grid-area:meta}
.mockup-actions{grid-area:actions;justify-content:flex-end}
}
/* A mockup sheet is a full proposal page: artwork plus its own signature block,
so the client signs every sheet rather than only the last one. */
.mockup-page{display:flex;flex-direction:column}
.mockup-page-body{flex:1 1 auto;display:grid;place-items:center;min-height:0;overflow:hidden;margin:14px 0}
.mockup-page-image{max-width:100%;max-height:100%;object-fit:contain}
.mockup-page-placeholder{display:grid;gap:6px;justify-items:center;text-align:center;border:1px dashed #999;border-radius:8px;padding:26px 20px;color:#444}
.mockup-page-placeholder b{font-size:11pt;overflow-wrap:anywhere}
.mockup-page-placeholder span{font-size:8pt;color:#666}
.mockup-page-caption{font-size:8pt;color:#555;text-align:center;margin-bottom:8px;overflow-wrap:anywhere}
#mockupPages{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
#mockupPages:empty{display:none}
/* ==========================================================================
v114 - HighLevel contact lookup
========================================================================== */
.label-with-action{display:flex;gap:6px;align-items:stretch}
.label-with-action input{flex:1 1 auto;min-width:0}
.ghl-fetch-btn{flex:0 0 auto;white-space:nowrap;padding:8px 10px;font-size:11px}
.ghl-contact-box{width:min(620px,96vw);max-height:88vh;display:flex;flex-direction:column}
.ghl-contact-list{overflow:auto;display:grid;gap:8px;margin-top:12px}
.ghl-contact-row{display:grid;gap:2px;text-align:left;width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 12px;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s ease,background .15s ease}
.ghl-contact-row:hover{border-color:var(--purple);background:#faf8ff}
.ghl-contact-row b{font-size:13px}
.ghl-contact-row small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
@media(max-width:560px){ .ghl-fetch-btn{font-size:10px;padding:8px} }
/* Full Proposal viewer: read-only, both pages, reachable at every stage. */
.full-proposal-box{width:min(940px,96vw);max-height:92vh;display:flex;flex-direction:column;padding:14px}
.full-proposal-actions{display:flex;align-items:center;gap:8px}
.full-proposal-actions button:last-child{font-size:24px;border:0;background:none;line-height:1;cursor:pointer}
.full-proposal-body{overflow:auto;background:#e7ebf1;padding:16px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:16px}
.full-proposal-body .paper{flex:0 0 auto;max-width:100%}
@media(max-width:900px){
.full-proposal-body{padding:8px}
.full-proposal-body .paper{transform:scale(.62);transform-origin:top center;margin-bottom:-380px}
}
@media(max-width:560px){
.full-proposal-body .paper{transform:scale(.42);margin-bottom:-600px}
}
@media print{
/* Printing while the viewer is open must emit its pages only - never both it
and the live preview panel. */
body.full-proposal-open .preview-panel,
body.full-proposal-open .modal-head{display:none!important}
body.full-proposal-open #fullProposalModal{display:block!important;position:static!important;background:none!important;inset:auto!important}
body.full-proposal-open .full-proposal-box{width:auto!important;max-height:none!important;padding:0!important;border-radius:0!important;overflow:visible!important;display:block!important}
body.full-proposal-open .full-proposal-body{overflow:visible!important;background:#fff!important;padding:0!important;display:block!important}
body.full-proposal-open .full-proposal-body .paper{transform:none!important;margin:0!important;box-shadow:none!important;page-break-after:always!important}
body.full-proposal-open .full-proposal-body .paper:last-child{page-break-after:auto!important}
}
/* --- Sidebar on tablet / phone --------------------------------------------
The drawer keeps its own width; only the docked pane changed to 240px. */
@media(max-width:1050px){
.app-shell{grid-template-columns:210px minmax(0,1fr)}
.nav{padding:9px 10px;font-size:12.5px;gap:8px}
}
@media(max-width:820px){
.app-shell{grid-template-columns:none}
.nav{font-size:14px;padding:12px}
}
/* ==========================================================================
v116 - Client proposal view and e-signature
Loaded by sign.php, which is public. Nothing here may depend on the app
shell, because the signing page does not render one.
========================================================================== */
.sign-page{background:#f4f5f7;margin:0;min-height:100dvh}
.sign-header{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:14px 22px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:20}
.sign-logo{max-width:170px;height:auto;display:block}
.sign-header-actions{display:flex;gap:8px;flex-wrap:wrap}
.sign-shell{max-width:900px;margin:0 auto;padding:22px 16px 60px}
.sign-alert{background:#fff;border:1px solid #e5e7eb;border-left:4px solid #6d3df5;
border-radius:10px;padding:14px 16px;margin-bottom:18px;font-size:14px;line-height:1.55;color:#344054}
.sign-alert-done{border-left-color:#12b76a;background:#f6fef9}
.sign-alert-error{border-left-color:#d92d20;background:#fef3f2;color:#912018}
.sign-doc{display:flex;flex-direction:column;gap:18px}
/* Snapshot pages arrive as .paper blocks from the builder's own preview. */
.sign-doc .paper{background:#fff;border:1px solid #e5e7eb;border-radius:10px;
box-shadow:0 2px 12px rgba(16,24,40,.06);padding:26px;overflow-wrap:anywhere}
.sign-doc img{max-width:100%;height:auto}
.sign-doc table{width:100%;border-collapse:collapse}
.sign-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;
box-shadow:0 2px 12px rgba(16,24,40,.06);padding:24px;margin-top:22px}
.sign-card h2{margin:0 0 6px;font-size:20px}
.sign-card-narrow{max-width:460px;margin:60px auto;text-align:center}
.sign-muted{color:#667085;font-size:13px;margin:0 0 16px}
.sign-legal{margin:14px 0 0;font-size:12px}
.sign-field{display:block;margin-bottom:16px}
.sign-field>span{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:#344054}
.sign-field>span b{color:#d92d20}
.sign-field>span small{font-weight:400;color:#667085}
.sign-field input[type=text],.sign-field input[type=email]{width:100%;box-sizing:border-box;
padding:11px 12px;border:1px solid #d0d5dd;border-radius:8px;font-size:15px;background:#fff}
.sign-field input:focus{outline:2px solid #6d3df5;outline-offset:1px;border-color:#6d3df5}
.sign-pad-wrap{position:relative;border:2px dashed #d0d5dd;border-radius:10px;background:#fff;overflow:hidden}
#signPad{display:block;width:100%;height:200px;touch-action:none;cursor:crosshair}
.sign-pad-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
pointer-events:none;color:#98a2b3;font-size:15px}
.sign-clear{margin-top:10px}
.sign-consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0;
font-size:13px;line-height:1.55;color:#344054;cursor:pointer}
.sign-consent input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
.sign-submit{width:100%;padding:14px;font-size:16px}
/* The executed signature, stamped onto every page of the document. */
.sign-stamp{margin-top:26px;padding-top:16px;border-top:2px solid #101828}
.sign-stamp-title{font-size:11px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:#667085;margin-bottom:10px}
.sign-stamp-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:18px;align-items:end}
.sign-stamp-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.sign-stamp-label{font-size:10px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:#98a2b3}
.sign-stamp-value{font-size:14px;color:#101828;border-bottom:1px solid #101828;
padding-bottom:4px;min-height:26px;overflow-wrap:anywhere}
.sign-stamp-img{max-height:56px;width:auto;max-width:100%;
border-bottom:1px solid #101828;padding-bottom:2px}
@media(max-width:640px){
.sign-shell{padding:14px 10px 40px}
.sign-doc .paper{padding:16px}
.sign-card{padding:18px}
.sign-stamp-grid{grid-template-columns:1fr;gap:14px}
}
@media(pointer:coarse){
.sign-header-actions button,.sign-clear{min-height:44px}
#signPad{height:240px}
}
@media print{
.sign-page{background:#fff}
.sign-header,#signPanel,.sign-alert{display:none!important}
.sign-shell{max-width:none;padding:0}
.sign-doc{gap:0}
.sign-doc .paper{border:0;border-radius:0;box-shadow:none;padding:0;
page-break-after:always;break-after:page}
.sign-doc .paper:last-child{page-break-after:auto;break-after:auto}
}
/* Staff-side: the "Send to Client" dialog. */
.share-row{display:flex;gap:8px;align-items:center;margin-top:10px}
.share-row input{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.share-list{margin-top:16px;border-top:1px solid #e5e7eb;padding-top:12px}
.share-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
padding:10px 0;border-bottom:1px solid #f2f4f7;font-size:13px}
.share-item:last-child{border-bottom:0}
.share-item-meta{color:#667085;font-size:12px;margin-top:2px}
.share-badge{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap}
.share-badge-signed{background:#d1fadf;color:#054f31}
.share-badge-live{background:#e0eaff;color:#00359e}
.share-badge-dead{background:#f2f4f7;color:#667085}
/* ==========================================================================
v120 - Company block on the document, and a tidier top toolbar
========================================================================== */
/* Logo and company details form the left column of every page header. */
.doc-brand{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:58%}
.doc-company{font-size:8pt;line-height:1.5;color:#444;margin-top:7px;overflow-wrap:anywhere}
.doc-company b{color:#222}
/* Two deliberate rows instead of an accidental wrap: status badges on top,
every action button together on the row beneath. Previously the buttons
filled the first row and Save Proposal spilled onto the second on its own,
leaving a band of empty white space beside it. */
.top-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.top-status{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.top-buttons{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.top-actions button{white-space:nowrap;font-size:12px;padding:8px 12px;line-height:1.2}
.top-actions .version-badge{font-size:9px;padding:4px 7px}
.top-actions .proposal-status-badge{font-size:10px;padding:4px 8px}
.top-actions .status{font-size:11px;white-space:nowrap}
.top-actions .notification-toggle{padding:7px 9px}
@media(max-width:1100px){
.top-actions button{font-size:11px;padding:7px 10px}
}
@media(max-width:900px){
/* Stacked layout: let both rows start from the left with the page title. */
.top-actions{align-items:stretch;width:100%}
.top-status,.top-buttons{justify-content:flex-start}
}
@media print{
.doc-brand{max-width:60%}
}
/* ==========================================================================
v121 - Proposal meta block alignment
The Project/Client details were two independent grids sitting side by side,
so each sized its own label column and its own rows and nothing lined up
across the gap. One grid in row-major order fixes both axes at once.
========================================================================== */
.doc-meta{
margin-top:18px;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
column-gap:10px;
row-gap:5px;
align-items:start;
}
/* Breathing room between the left pair and the right pair, without a gap that
would also push the label away from its own value. */
.doc-meta>:nth-child(4n+3){padding-left:30px}
.doc-meta b{font-weight:700;white-space:nowrap}
/* Empty values must still occupy their row, or the two sides drift apart. */
.doc-meta span{min-height:1.15em}
/* Contact runs across the remaining columns on its own row. */
.doc-meta .doc-meta-wide{grid-column:2/-1;padding-left:0}
@media(max-width:640px){
.doc-meta{grid-template-columns:auto minmax(0,1fr)}
.doc-meta>:nth-child(4n+3){padding-left:0}
.doc-meta .doc-meta-wide{grid-column:2/-1}
}
/* ==========================================================================
v124 - Payment panel, single-page acceptance
========================================================================== */
/* The pay block sat as a bare button with a run-on line of plain text under
it. It is now a contained panel with real card marks. */
.doc-pay{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
padding:12px 14px;border:1px solid #dfe3ea;border-radius:10px;background:#f8f9fc}
.doc-pay a{display:inline-flex;align-items:center;gap:7px;background:#1c4ed8;color:#fff;
text-decoration:none;font-weight:700;font-size:9.5pt;padding:9px 18px;
border-radius:8px;white-space:nowrap;letter-spacing:.01em}
.doc-pay a::before{content:"";width:11px;height:12px;flex:0 0 auto;
background:currentColor;
/* Padlock, drawn with a mask so it inherits the button's text colour. */
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.doc-pay .doc-pay-methods{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:0}
.pay-ico{height:21px;width:auto;display:block;border-radius:3.5px;
box-shadow:0 0 0 1px rgba(16,24,40,.09)}
/* Acceptance now happens once, on the final page. */
.doc-authorize{margin-top:7%;padding:11px 13px;border:1px solid #d7dbe3;
border-radius:8px;background:#fbfbfd;break-inside:avoid}
.doc-authorize b{display:block;font-size:9pt;margin-bottom:4px}
.doc-authorize p{margin:0;font-size:8pt;line-height:1.55;color:#333}
.doc-accept-final{margin-top:22px}
.doc-accept-final small{display:block;margin-top:3px;font-size:7pt;color:#666}
@media print{
.doc-pay{background:#f8f9fc!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pay-ico{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc-authorize{background:#fbfbfd!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ==========================================================================
v125 - Two-party sign-off
Buyer and seller sign independently, from separate links, so each party
gets its own column with its own signature, name and date slots.
========================================================================== */
.doc-signoff{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:6%;break-inside:avoid}
.doc-sign-col{display:flex;flex-direction:column;min-width:0}
.doc-sign-head{font-size:9.5pt;font-weight:700;margin-bottom:7px}
.doc-sign-note{font-size:7.5pt;color:#555;margin-bottom:10px;min-height:1.2em}
.doc-signoff .doc-authorize{margin-top:0;margin-bottom:12px;padding:9px 11px}
.doc-signoff .doc-authorize p{font-size:7.5pt}
.doc-sign-field{margin-top:14px}
.doc-sign-field small{display:block;margin-top:3px;font-size:7pt;color:#666}
/* Tall enough to hold a drawn signature without shifting the layout. */
.doc-sign-slot{min-height:34px;display:flex;align-items:flex-end}
.doc-sign-slot img{max-height:32px;width:auto;max-width:100%}
/* The seller column has no authorization paragraph, so its fields would sit
higher than the buyer's. This keeps the two baselines level. */
.doc-sign-col[data-role="seller"] .doc-sign-note{margin-bottom:auto}
@media(max-width:640px){
.doc-signoff{grid-template-columns:1fr;gap:20px}
}
/* Newly minted links, one per signing party. */
.share-new{margin-top:12px}
.share-new-label{font-size:12px;font-weight:700;color:#344054;margin-bottom:4px}
/* ==========================================================================
v126 - Signed Documents (staff record of executed contracts)
========================================================================== */
.signed-page{background:#f4f5f7;margin:0;min-height:100dvh}
.signed-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:16px 24px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.signed-head h1{margin:0;font-size:21px}
.signed-head p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.signed-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.signed-head-actions a{text-decoration:none;display:inline-flex;align-items:center}
.signed-shell{max-width:960px;margin:0 auto;padding:22px 16px 60px}
.signed-item{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.signed-item-main{min-width:0}
.signed-item-title{font-size:14px;margin-bottom:6px}
.signed-item-meta{font-size:12px;color:var(--muted);line-height:1.6}
.signed-item a{text-decoration:none;white-space:nowrap;align-self:center}
.signed-audit{background:#fff;border:1px solid var(--line);border-radius:12px;
padding:16px 18px;margin-bottom:18px}
.signed-audit h2{margin:0 0 10px;font-size:16px}
.signed-table{width:100%;border-collapse:collapse}
.signed-table th,.signed-table td{padding:8px 10px;border-bottom:1px solid #f2f4f7;
text-align:left;font-size:12px;vertical-align:top}
.signed-table th{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.signed-hash{margin:12px 0 0;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.signed-hash code{font-size:10px}
.signed-doc .paper{background:#fff;border:1px solid var(--line);border-radius:10px;
box-shadow:0 2px 12px rgba(16,24,40,.06);padding:26px}
@media(max-width:640px){
.signed-item{flex-direction:column}
.signed-item a{align-self:stretch;text-align:center}
.signed-table th:nth-child(5),.signed-table td:nth-child(5){display:none}
}
@media print{
.signed-head,.signed-audit,.signed-head-actions{display:none!important}
.signed-page{background:#fff}
.signed-shell{max-width:none;padding:0}
.signed-doc .paper{border:0;border-radius:0;box-shadow:none;padding:0;
page-break-after:always;break-after:page}
.signed-doc .paper:last-child{page-break-after:auto;break-after:auto}
}