.template-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:18px;align-items:start}
.colour-pickers{display:grid;gap:10px}.colour-picker{display:grid;grid-template-columns:1fr 44px 70px;align-items:center;gap:9px;font-size:14px;font-weight:600}.colour-picker input{width:44px;height:30px;padding:2px;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer}.colour-picker code{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
.quote-sheet{color:var(--quote-text,#17201a)}.quote-sheet .quote-header{border-bottom-color:var(--quote-accent,#8fd14f)}.quote-sheet .quote-table th,.quote-sheet .additional-table th,.quote-sheet .terms h3,.quote-sheet .quote-grand-total{background:var(--quote-accent,#8fd14f);color:var(--quote-accent-text,#17201a)}.quote-sheet .quote-group-heading td{background:color-mix(in srgb,var(--quote-accent,#8fd14f) 20%,white);color:var(--quote-text,#17201a)}.quote-sheet .quote-group-subtotal td{background:color-mix(in srgb,var(--quote-accent,#8fd14f) 10%,white);color:var(--quote-text,#17201a)}.quote-sheet .eco-wordmark span{color:var(--quote-accent,#8fd14f)}
.estimate-table select[data-field="method"]{min-width:145px}.estimate-table select[data-field="category"]{min-width:140px}.estimate-table select[data-field="materialId"]{min-width:260px}
.additional-switch{display:flex;align-items:center;gap:8px;position:relative;cursor:pointer;font-size:14px;white-space:nowrap}.additional-switch input{position:absolute;width:42px;height:24px;opacity:0;margin:0}.switch-track{width:42px;height:24px;border-radius:14px;background:#839087;position:relative;flex-shrink:0}.switch-track:after{content:'';position:absolute;width:18px;height:18px;top:3px;left:3px;border-radius:50%;background:white}.additional-switch input:checked+.switch-track{background:#4f8728}.additional-switch input:checked+.switch-track:after{left:21px}.additional-switch input:focus-visible+.switch-track{outline:3px solid #17201a;outline-offset:3px}.quote-header{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(210px,1fr);gap:32px;align-items:start;padding-bottom:18px}.quote-company-block{min-width:0}.quote-reference-block{display:grid;justify-items:end;gap:13px;text-align:right}.quote-reference-block .quote-badge{font-size:24px;line-height:1}.quote-reference-details{display:grid;gap:7px;width:100%}.quote-reference-details>div{display:grid;grid-template-columns:78px minmax(0,1fr);justify-content:end;gap:14px;align-items:baseline}.quote-reference-details span{text-align:right}.quote-reference-details strong{min-width:0;font-size:13px;text-align:right}.quote-reference-details span,.quote-fao-details span{font-size:11px;font-weight:800;letter-spacing:.05em}.quote-client-meta{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(210px,1fr);gap:32px;padding:20px 0 24px;border-bottom:1px solid var(--line)}.quote-client-meta>.quote-client-details{display:flex;flex-direction:column;gap:7px}.quote-fao-details{display:grid;grid-template-columns:auto auto;justify-content:end;gap:14px;align-content:start;align-items:baseline;text-align:right}.quote-client-details #qClient{font-size:16px}.quote-client-details #qProject,.quote-client-details #qLocation{font-size:14px;font-weight:400;letter-spacing:0;overflow-wrap:anywhere}.job-strip{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:650px){.job-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.additional-editor .section-heading{flex-wrap:wrap}.quote-header,.quote-client-meta{grid-template-columns:1fr;gap:16px}.quote-reference-block,.quote-fao-details{justify-items:start;justify-content:start;text-align:left}.quote-client-meta{padding:18px 0}.quote-reference-details>div{justify-content:start}.quote-reference-details span,.quote-reference-details strong{text-align:left}}
#qAdditional{width:82%;font-size:11px;line-height:1.2;margin:12px 0}#qAdditional th,#qAdditional td{padding:4px 6px}#qAdditional th:first-child{text-align:left}#qAdditional td:first-child{width:68%}#qAdditional td:nth-child(n+2){white-space:nowrap}#qAdditional tr{break-inside:avoid}
.template-panel.additional-editor{margin-top:14px;padding:12px;max-width:none;font-size:14px}.additional-editor .section-heading{padding:0 0 8px;gap:10px;align-items:center}.additional-editor .section-heading h3{margin:0;font-size:16px}.additional-editor .section-heading p{margin:4px 0 0;font-size:14px}.additional-editor .btn{padding:6px 9px;font-size:14px;white-space:nowrap}.additional-editor td:first-child{min-width:210px;width:65%}.additional-editor td:first-child input{max-width:none}.additional-editor td:nth-child(2){width:80px;min-width:70px}.additional-editor td:nth-child(3){width:105px;min-width:95px}.additional-editor .rate-table td{padding:4px}.additional-editor .rate-table th{padding:6px 4px;font-size:14px;letter-spacing:0}.additional-editor .rate-table input{padding:5px 7px;font-size:14px;line-height:1.25}.additional-editor .icon-btn{width:26px;height:26px}
.template-panel{padding:20px;font-size:16px}.template-panel h3{margin-top:0}.template-panel h3:not(:first-child){margin-top:24px}
.quote-edit-fields{display:grid;gap:16px}.quote-edit-fields label,.logo-picker{display:grid;gap:7px;font-size:14px;font-weight:600}
.quote-edit-fields input,.quote-edit-fields textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;font:inherit;line-height:1.5;resize:vertical;background:#fff;color:var(--ink)}
.quote-edit-fields fieldset{border:1px solid var(--line);display:grid;gap:12px;border-radius:8px}.quote-edit-fields legend{font-weight:700}
.template-checks{display:grid;gap:13px;font-size:14px}.template-checks input{margin-right:7px}.logo-picker{margin:18px 0}.logo-picker input{max-width:100%}
.template-logo{max-width:220px;max-height:110px;object-fit:contain;display:block;margin-bottom:12px}
.quote-job-editor,.template-preview-notice{max-width:980px;margin:0 auto 18px}.quote-job-editor summary{cursor:pointer;font-weight:700}.quote-job-editor button{margin-top:18px}
.quote-text{white-space:pre-wrap;overflow-wrap:anywhere}.quote-grand-total{display:flex;justify-content:flex-end;gap:40px;padding:14px;background:var(--green);break-inside:avoid}.quote-subtotal-value{float:right;margin-left:16px}
[hidden]{display:none!important}.quote-sheet td{overflow-wrap:anywhere}.template-panel p{line-height:1.5}
@media(max-width:800px){.template-layout{grid-template-columns:1fr}.sidebar nav{grid-template-columns:repeat(5,auto)}}
@media print{.quote-header{break-inside:avoid}.quote-grand-total{print-color-adjust:exact}.quote-text{font-size:12px}}

.quote-client-details #qClientAddress{font-size:14px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;font-weight:400}.quote-client-details #qClientAddress:not([hidden])+#qProject{margin-top:7px}

/* Client quotation: deliberately light, document-led and easy to print. */
.quote-sheet{max-width:900px;min-height:0;padding:42px 50px 46px;box-shadow:0 10px 28px rgba(18,37,23,.08)}
.quote-sheet .quote-header{grid-template-columns:minmax(0,1.8fr) minmax(215px,1fr);gap:38px;padding-bottom:20px;border-bottom:3px solid var(--quote-accent,#8fd14f)}
.quote-sheet .eco-wordmark{font-size:25px;letter-spacing:.055em;line-height:1.15}
.quote-sheet .quote-header p{margin:7px 0 0;color:var(--quote-text,#17201a);font-size:11px;line-height:1.55;opacity:.78}
.quote-sheet .quote-reference-block{gap:10px}
.quote-sheet .quote-reference-block .quote-badge{font-size:17px;font-weight:850;letter-spacing:.14em;color:var(--quote-text,#17201a)}
.quote-sheet .quote-reference-details{gap:5px}
.quote-sheet .quote-reference-details>div{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:2px 0}
.quote-sheet .quote-reference-details span,.quote-sheet .quote-fao-details span{font-size:10px;letter-spacing:.1em;color:var(--quote-text,#17201a);opacity:.62}
.quote-sheet .quote-reference-details strong{font-size:12px;font-weight:750}
.quote-sheet .quote-client-meta{grid-template-columns:minmax(0,1.8fr) minmax(215px,1fr);gap:38px;padding:18px 0 20px;border-bottom:1px solid #d7dfd8}
.quote-sheet .quote-client-meta>.quote-client-details{gap:4px}
.quote-sheet .quote-client-details #qClient{font-size:15px;font-weight:800;letter-spacing:.01em}
.quote-sheet .quote-client-details #qProject{margin-top:7px;font-size:15px;font-weight:700}
.quote-sheet .quote-client-details #qLocation,.quote-sheet .quote-client-details #qClientAddress{font-size:12px;line-height:1.45}
.quote-sheet .quote-fao-details{gap:11px;padding-top:1px}
.quote-sheet #qIntro{margin:22px 0 16px;font-size:13px;line-height:1.55}

.quote-sheet .quote-table{border-top:1px solid #cfd9d0;border-bottom:1px solid #cfd9d0}
.quote-sheet .quote-table tbody{height:auto;vertical-align:top}
.quote-sheet .quote-table th{padding:8px 0;background:transparent;color:var(--quote-text,#17201a);border:0;border-bottom:2px solid var(--quote-accent,#8fd14f);font-size:10px;font-weight:850;letter-spacing:.08em}
.quote-sheet .quote-table td{padding:7px 0;border:0;border-bottom:1px solid #e1e7e2;font-size:12px;line-height:1.3}
.quote-sheet .quote-table th:first-child,.quote-sheet .quote-table td:first-child{padding-right:18px}
.quote-sheet .quote-table th:nth-child(n+2),.quote-sheet .quote-table td:nth-child(n+2){padding-left:12px;white-space:nowrap}
.quote-sheet .quote-table tr:last-child td{border-bottom:0}
.quote-sheet .quote-group-heading td{padding:19px 0 7px!important;background:transparent;color:var(--quote-text,#17201a);border-bottom:1px solid color-mix(in srgb,var(--quote-accent,#8fd14f) 62%,#dce5dd)!important;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.quote-sheet .quote-group-heading:first-child td{padding-top:13px!important}
.quote-sheet .quote-table small{display:inline-block;margin-top:2px;color:var(--quote-text,#17201a);font-size:10px;line-height:1.3;opacity:.7}

.quote-sheet .quote-grand-total{width:min(100%,310px);margin:16px 0 0 auto;padding:12px 0;background:transparent!important;color:var(--quote-text,#17201a)!important;border-top:3px solid var(--quote-accent,#8fd14f);border-bottom:1px solid var(--quote-accent,#8fd14f);gap:20px;font-size:14px}
.quote-sheet .quote-grand-total strong:last-child{font-size:18px}
.quote-sheet #qPayment{margin:18px 0 0;font-size:12px;line-height:1.5}
.quote-sheet .quote-note{margin:14px 0 18px;padding:9px 12px;border-left:3px solid var(--quote-accent,#8fd14f);background:#f6f8f5;font-size:11px;line-height:1.55}
.quote-sheet #qAdditional{width:100%;margin:18px 0 0;font-size:11px;line-height:1.35;border-top:1px solid #cfd9d0;border-bottom:1px solid #cfd9d0}
.quote-sheet #qAdditional th,.quote-sheet #qAdditional td{padding:7px 0;border:0;border-bottom:1px solid #e1e7e2;background:transparent;color:var(--quote-text,#17201a)}
.quote-sheet #qAdditional th{border-bottom:2px solid var(--quote-accent,#8fd14f);font-size:10px;font-weight:850;letter-spacing:.07em}
.quote-sheet #qAdditional th:first-child,.quote-sheet #qAdditional td:first-child{padding-right:14px}
.quote-sheet #qAdditional th:nth-child(n+2),.quote-sheet #qAdditional td:nth-child(n+2){padding-left:10px}
.quote-sheet #qAdditional tr:last-child td{border-bottom:0}
.quote-sheet .terms{margin-top:22px}
.quote-sheet .terms h3{margin:0;padding:7px 0;background:transparent;color:var(--quote-text,#17201a);border-bottom:2px solid var(--quote-accent,#8fd14f);font-size:10px;font-weight:850;letter-spacing:.08em}
.quote-sheet .terms ol{margin:10px 0 0;padding-left:18px;font-size:10.5px;line-height:1.5}
.quote-sheet .terms li{margin:4px 0}

@media(max-width:650px){.quote-sheet{padding:30px 24px}.quote-sheet .quote-header,.quote-sheet .quote-client-meta{grid-template-columns:1fr;gap:15px}.quote-sheet .quote-reference-block,.quote-sheet .quote-fao-details{justify-items:start;justify-content:start;text-align:left}.quote-sheet .quote-reference-details>div{justify-content:start}.quote-sheet .quote-reference-details span,.quote-sheet .quote-reference-details strong{text-align:left}}
@media print{.quote-sheet{padding:0;box-shadow:none}.quote-sheet .quote-table th{print-color-adjust:exact}.quote-sheet .quote-grand-total{break-inside:avoid}.quote-sheet .terms{break-inside:avoid;page-break-inside:avoid;margin-top:18px}.quote-sheet .terms h3{break-after:avoid-page;page-break-after:avoid}.quote-sheet .terms ol{break-before:avoid-page;page-break-before:avoid}.quote-sheet .terms li{break-inside:avoid;page-break-inside:avoid}}

.template-logo-options{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.template-logo-options label{display:grid;gap:6px;font-size:14px;font-weight:600;flex:1;min-width:120px}.template-logo-options select{font:inherit;padding:8px;border:1px solid var(--line);border-radius:5px;background:#fff}
.quote-sheet #qLogo .template-logo{max-width:min(100%,var(--quote-logo-width,220px));max-height:var(--quote-logo-height,110px)}
.quote-sheet .quote-header>#qLogo{grid-column:1 / -1;display:flex;margin-bottom:-20px}
.quote-sheet[data-logo-position="centre"] .quote-header>#qLogo{justify-content:center}
.quote-sheet[data-logo-position="right"] .quote-header>#qLogo{justify-content:flex-end}

/* Enquiry controls span the page while the quotation keeps its standard layout. */
#quoteJobEditor{width:100%;max-width:none;grid-column:1 / -1;min-width:0}
#quoteJobEditor #jobQuoteFields{grid-template-columns:repeat(3,minmax(0,1fr))}
#quoteJobEditor .job-quote-conditions{grid-column:1 / -1;min-width:0}
#quoteJobEditor .job-quote-switch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 20px;width:100%}
#quoteJobEditor .condition-row{display:grid;grid-template-columns:24px minmax(0,1fr) 30px;align-items:center}
#quoteJobEditor .condition-row button{margin:0}
#jobAdditionalSwitch{max-width:420px;margin-bottom:16px}
#quoteJobEditor [hidden]{display:none!important}
@media(max-width:800px){#quoteJobEditor #jobQuoteFields{grid-template-columns:1fr}}
#jobQuoteAdditional{max-width:760px}
#jobQuoteAdditional .rate-table{width:100%;min-width:0;table-layout:fixed}
#jobQuoteAdditional .rate-table th,#jobQuoteAdditional .rate-table td{padding:4px 6px}
#jobQuoteAdditional .rate-table th:nth-child(2){width:76px}
#jobQuoteAdditional .rate-table th:nth-child(3){width:100px}
#jobQuoteAdditional .rate-table th:last-child{width:40px}
#jobQuoteAdditional .rate-table input{width:100%;min-width:0;max-width:none;padding:5px 7px;height:30px;font-size:14px;font-weight:400}
#quoteJobEditor #jobQuoteAdditional .icon-btn{margin:0;width:28px;height:28px;min-height:28px;padding:0}
#quoteJobEditor #jobAddAdditional{margin-top:8px;padding:6px 12px}

/* Optional visit grouping preserves the compact work-area detail underneath. */
.quote-sheet .quote-table .quote-visit-heading td{padding:16px 0 5px!important;background:transparent!important;color:var(--quote-text,#17201a);border-top:2px solid var(--quote-accent,#8fd14f)!important;border-bottom:0!important;font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.quote-sheet .quote-table .quote-visit-heading:first-child td{padding-top:13px!important;border-top:0!important}
.quote-sheet .quote-table .quote-visit-heading+.quote-group-heading td{padding-top:10px!important}
.quote-sheet .quote-table .quote-visit-subtotal td{padding:7px 0 13px;background:transparent!important;border-top:1px solid color-mix(in srgb,var(--quote-accent,#8fd14f) 34%,#dce5dd)!important;border-bottom:0!important;font-weight:700;break-before:avoid}
.quote-sheet .quote-table .quote-visit-subtotal td:first-child{font-size:10px;letter-spacing:.04em;text-transform:uppercase}

/* Simple company-level appearance editor. Document rules also load in print windows. */
.quote-appearance-workspace{display:grid;grid-template-columns:minmax(280px,350px) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:18px}
.quote-appearance-controls,.quote-appearance-preview-panel{padding:18px;min-width:0}
.quote-appearance-controls h3,.quote-appearance-preview-panel h3{margin:0 0 8px}
.quote-appearance-controls>p{font-size:14px;line-height:1.5;margin:0 0 14px}
.quote-appearance-state{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.quote-appearance-state strong{font-size:14px}
.quote-appearance-controls fieldset{margin:16px 0 0;padding:0;border:0;min-width:0}
.quote-appearance-controls legend{font-size:14px;font-weight:750;margin-bottom:10px}
.quote-appearance-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.quote-appearance-controls label{display:grid;gap:5px;min-width:0;font-size:14px;font-weight:500}
.quote-appearance-controls select,.quote-appearance-controls input{width:100%;min-width:0;padding:8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#202630;font:inherit;min-height:36px}
.quote-size-control{display:flex;gap:6px;align-items:center}.quote-size-control>span{font-size:12px;color:var(--muted)}
.quote-appearance-preview-panel .section-heading{display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 0 12px;gap:8px}
.quote-appearance-preview-panel .section-heading h3{margin:0}
.quote-appearance-preview-panel .section-heading span{font-size:13px}
.quote-preview-scroll{overflow:hidden;background:#edf0f3;border:1px solid var(--line);border-radius:6px;padding:12px}
.quote-preview-page{position:relative;width:min(100%,560px);aspect-ratio:210/297;margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 2px 12px #17201a14}
#quoteAppearancePreview{position:absolute;inset:0;width:210mm;height:297mm;border:0;transform-origin:top left;background:white;pointer-events:none}
@media(max-width:1050px){.quote-appearance-workspace{grid-template-columns:minmax(250px,310px) minmax(0,1fr)}}
@media(max-width:800px){.quote-appearance-workspace{grid-template-columns:1fr}.quote-appearance-controls,.quote-appearance-preview-panel{padding:14px}}
.quote-sheet[data-appearance="custom"]{font-family:var(--quote-font,Inter,Arial,sans-serif)}
.quote-sheet[data-appearance="custom"] .eco-wordmark{font-size:var(--quote-heading-size,25px)}
.quote-sheet[data-appearance="custom"] .quote-reference-block .quote-badge{font-size:var(--quote-title-size,17px);overflow-wrap:anywhere}
.quote-sheet[data-appearance="custom"] .quote-table td,.quote-sheet[data-appearance="custom"] #qAdditional td,.quote-sheet[data-appearance="custom"] #qIntro,.quote-sheet[data-appearance="custom"] #qPayment,.quote-sheet[data-appearance="custom"] #qNote,.quote-sheet[data-appearance="custom"] .quote-header p,.quote-sheet[data-appearance="custom"] .quote-reference-details strong,.quote-sheet[data-appearance="custom"] .quote-client-details #qClientAddress,.quote-sheet[data-appearance="custom"] .quote-client-details #qLocation{font-size:var(--quote-body-size,12px)}
.quote-sheet[data-appearance="custom"] .quote-client-details #qClient,.quote-sheet[data-appearance="custom"] .quote-client-details #qProject{font-size:calc(var(--quote-body-size,12px) + 3px)}
.quote-sheet[data-appearance="custom"] .quote-table th,.quote-sheet[data-appearance="custom"] .quote-table small,.quote-sheet[data-appearance="custom"] #qAdditional th{font-size:calc(var(--quote-body-size,12px) - 2px)}
.quote-sheet[data-appearance="custom"] .terms ol,.quote-sheet[data-appearance="custom"] .terms h3{font-size:var(--quote-terms-size,10.5px)}
.quote-sheet[data-appearance="custom"] .quote-grand-total{font-size:calc(var(--quote-body-size,12px) + 2px)}
.quote-sheet[data-appearance="custom"] .quote-grand-total strong:last-child{font-size:calc(var(--quote-body-size,12px) + 6px)}
.quote-sheet[data-company-position="right"] .quote-header{grid-template-columns:minmax(215px,1fr) minmax(0,1.8fr)}
.quote-sheet[data-company-position="right"] .quote-company-block{grid-column:2;grid-row:var(--quote-header-row,1);text-align:right}
.quote-sheet[data-company-position="right"] .quote-header>.quote-reference-block{grid-column:1;grid-row:var(--quote-header-row,1);text-align:left;justify-items:start}
.quote-sheet[data-company-position="right"] .quote-header>.quote-reference-block .quote-reference-details :is(span,strong){text-align:left}
.quote-sheet[data-company-position="centre"] .quote-company-block{grid-column:1/-1;text-align:center}
.quote-sheet[data-company-position="centre"] .quote-header>.quote-reference-block{grid-column:1/-1}
.quote-sheet[data-logo-detached="true"] .quote-header>#qLogo{margin-bottom:0}
.quote-sheet[data-logo-position="left"] .quote-header>#qLogo{justify-content:flex-start}
.quote-sheet[data-reference-position="client"] .quote-header .quote-company-block{grid-column:1/-1;grid-row:auto}
.quote-sheet[data-reference-position="client"] .quote-client-meta{align-items:start}
.quote-sheet[data-reference-position="client"] .quote-client-meta>.quote-reference-block{grid-column:2;grid-row:1}
.quote-sheet[data-reference-position="client"] .quote-client-meta>.quote-fao-details{grid-column:1;justify-content:start;text-align:left}
.quote-sheet[data-client-position="right"] .quote-client-meta{grid-template-columns:minmax(215px,1fr) minmax(0,1.8fr)}
.quote-sheet[data-client-position="right"] .quote-client-details{grid-column:2;grid-row:1;text-align:right}
.quote-sheet[data-client-position="right"] .quote-client-meta>.quote-reference-block{grid-column:1;grid-row:1;justify-items:start;text-align:left}
.quote-sheet[data-client-position="right"] .quote-client-meta>.quote-reference-block .quote-reference-details :is(span,strong){text-align:left}
.quote-sheet[data-client-position="right"] .quote-client-meta>.quote-fao-details{grid-column:1;grid-row:1;justify-content:start;text-align:left}
.quote-sheet[data-client-position="right"][data-reference-position="client"] .quote-client-meta>.quote-fao-details{grid-column:2;grid-row:2;justify-content:end;text-align:right}
.quote-sheet[data-total-position="left"] .quote-grand-total{margin-left:0;margin-right:auto}
.quote-sheet[data-terms-position="new-page"] #qTerms{break-before:page;page-break-before:always}
@media screen{.quote-sheet[data-terms-position="new-page"] #qTerms{border-top:1px dashed #9aa3ad;padding-top:24px;margin-top:40px}}

.quote-sheet[data-company-position="right"] .quote-header>#qLogo{grid-row:1}
.quote-sheet[data-appearance="custom"] .quote-table td:nth-child(n+2){white-space:normal;overflow-wrap:anywhere}
@media screen and (max-width:650px){
 .quote-sheet[data-company-position] .quote-header,.quote-sheet[data-client-position] .quote-client-meta{grid-template-columns:minmax(0,1fr);gap:16px}
 .quote-sheet[data-company-position] .quote-header>.quote-company-block,.quote-sheet[data-company-position] .quote-header>.quote-reference-block,.quote-sheet[data-client-position] .quote-client-meta>.quote-client-details,.quote-sheet[data-client-position] .quote-client-meta>.quote-reference-block,.quote-sheet[data-client-position] .quote-client-meta>.quote-fao-details{grid-column:1;grid-row:auto}
}

/* Keep the live preview frame close to the portrait sheet. */
#quoteTemplateView .quote-appearance-preview-panel{justify-self:start;width:min(100%,620px);max-width:100%}
#quoteTemplateView .quote-preview-scroll{padding:4px;background:transparent}

/* Template editor: settings and document share the available page width. */
@media screen {
 #quoteTemplateView .quote-appearance-workspace.quote-template-editor{grid-template-columns:minmax(360px,1fr) minmax(360px,1.1fr);gap:18px;align-items:start;margin:0}
 #quoteTemplateView .quote-template-settings{min-width:0}
 #quoteTemplateView .quote-template-save-note{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.5}
 #quoteTemplateView .quote-template-settings-grid{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(270px,1fr);gap:12px;align-items:start}
 #quoteTemplateView .quote-template-options{display:grid;gap:12px;min-width:0}
 #quoteTemplateView .quote-template-editor .quote-appearance-preview-panel{width:100%;max-width:none;justify-self:stretch;position:sticky;top:80px;padding:12px}
 #quoteTemplateView .quote-template-editor .quote-appearance-preview-panel>.section-heading{padding:0 0 10px;align-items:center;flex-wrap:wrap}
 #quoteTemplateView .quote-template-editor .quote-preview-scroll{padding:4px;background:transparent;border:0}
 #quoteTemplateView .quote-preview-page{outline:1px solid #e3e6ea;box-shadow:0 2px 8px #17201a0a}
 #quoteTemplateView .quote-template-editor .template-panel{margin:0;min-width:0}
 #quoteTemplateView .template-panel>summary{font-size:14px;font-weight:650;cursor:pointer;padding:2px 0}
 #quoteTemplateView .template-panel[open]>summary{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
 #quoteTemplateView .identity-panel .panel-title-row{justify-content:flex-start;margin:0;padding:0!important}
 #quoteTemplateView .identity-summary{margin-bottom:0}
 #quoteTemplateView .template-switch-list{grid-template-columns:1fr;gap:5px}
 #quoteTemplateView .template-checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:13px}
 #quoteTemplateView .template-checks>label:first-child{grid-column:1/-1}
 #quoteTemplateView .template-panel p{font-size:12px;margin:8px 0 0}
 #quoteTemplateView .quote-template-editor .additional-editor{margin-top:12px}
 #quoteTemplateView .additional-editor>.section-heading{flex-wrap:wrap}
 body:has(#quoteTemplateView.active) .topbar .estimate-actions{display:none}
 @media(max-width:1350px){
  #quoteTemplateView .quote-appearance-workspace.quote-template-editor{grid-template-columns:minmax(300px,1fr) minmax(340px,1fr);gap:14px}
  #quoteTemplateView .quote-template-settings-grid{grid-template-columns:1fr}
 }
 @media(max-width:800px){
  #quoteTemplateView .quote-appearance-workspace.quote-template-editor{grid-template-columns:minmax(0,1fr)}
  #quoteTemplateView .quote-template-editor .quote-appearance-preview-panel{position:static;grid-row:auto}
 }
}


/* Focused template studio; quotation output styles remain independent. */
#quoteTemplateView .template-studio-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
#quoteTemplateView .template-studio-heading h2{font-size:20px;margin:0 0 5px}
#quoteTemplateView .template-studio-heading p{font-size:13px;color:var(--muted);margin:0}
#quoteTemplateView .template-active-design{font-size:12px;padding:7px 10px;border:1px solid #f3d5bc;border-radius:20px;background:#fff8f2;white-space:nowrap}
#quoteTemplateView .template-studio-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#fff}
#quoteTemplateView .template-studio-tabs button{flex:1 0 auto;border:0;border-radius:8px;padding:9px 10px;background:transparent;font:inherit;font-size:12px;color:#59616a;cursor:pointer}
#quoteTemplateView .template-studio-tabs button[aria-selected=true]{background:#fff0e5;color:#8e461d;font-weight:650}
#quoteTemplateView .template-studio-panel[hidden]{display:none!important}
#quoteTemplateView .template-studio-panel{padding:16px}
#quoteTemplateView .template-studio-panel h3{font-size:15px;margin:0 0 8px}
#quoteTemplateView .template-studio-panel p{line-height:1.5;margin-bottom:14px}
#quoteTemplateView #templateStatus:empty{display:none}
#quoteTemplateView #templateStatus{font-size:12px;margin:0 0 10px;color:var(--muted)}
#quoteTemplateView .quote-design-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#quoteTemplateView .quote-design-card{text-align:left;display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid #e7e8ea;border-radius:12px;background:white;color:#292f36;font:inherit;cursor:pointer;min-width:0}
#quoteTemplateView .quote-design-card:hover{border-color:#e9b68f}
#quoteTemplateView .quote-design-card[aria-pressed=true]{border-color:#ed9b60;box-shadow:0 0 0 2px #ffeadb;background:#fffaf6}
#quoteTemplateView .quote-design-card strong{font-size:13px}
#quoteTemplateView .quote-design-card small{font-size:11px;color:#697078;line-height:1.4}
#quoteTemplateView .design-selection{font-size:10px;color:#8e461d;margin-top:auto;padding-top:3px}
#quoteTemplateView .quote-design-thumbnail{height:92px;display:flex;flex-direction:column;gap:5px;width:100%;padding:10px 14px;border:1px solid #ececec;border-radius:5px;background:white;box-sizing:border-box}
#quoteTemplateView .quote-design-thumbnail i{display:block;border-radius:1px}
#quoteTemplateView .design-brand{width:43%;height:6px;background:#68717b}
#quoteTemplateView .design-address{width:32%;height:9px;background:repeating-linear-gradient(to bottom,#d9dce0 0 2px,transparent 2px 4px)}
#quoteTemplateView [data-alignment=centre] .design-brand,#quoteTemplateView [data-alignment=centre] .design-address{align-self:center}
#quoteTemplateView [data-alignment=right] .design-brand,#quoteTemplateView [data-alignment=right] .design-address{align-self:flex-end}
#quoteTemplateView .design-rule{height:8px;background:var(--design-colour);margin-top:3px}
#quoteTemplateView .design-lines{height:20px;background:repeating-linear-gradient(to bottom,#eceef0 0 1px,transparent 1px 6px)}
#quoteTemplateView .design-total{height:6px;width:30%;align-self:flex-end;background:var(--design-colour)}
#quoteTemplateView .template-identity{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
#quoteTemplateView .template-identity summary{cursor:pointer;font-size:13px;font-weight:600;margin-bottom:10px}
#quoteTemplateView .template-studio-panel .colour-pickers{margin:12px 0}
#quoteTemplateView .template-studio-panel textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:70px;font:inherit;line-height:1.5}
#quoteTemplateView .template-studio button:focus-visible{outline:2px solid #c16a2b;outline-offset:3px}
@media(max-width:550px){#quoteTemplateView .template-studio-heading{align-items:flex-start;flex-direction:column}#quoteTemplateView .template-studio-panel{padding:12px}}