/* Quote editor (b8): one design system. Spec: proto/b8/DESIGN.md.
   Every value is a --qe-* token that resolves to the console's --ds-* token (with the same literal as a fallback,
   so ds.html renders outside the console). Components use tokens only; verify/sweep.mjs (R7) rejects anything else. */

/* ───────────── 1. Tokens ───────────── */
.qe2-root, .qe2-layer, .qe2-toast, .qe2-scrim, .qe2-ds, .lbody:has(.qe2-root) {
  /* colour, by role */
  --qe-ink: var(--ds-ink, #0b1d36);
  --qe-ink-2: var(--ds-ink-2, #39475b);
  --qe-ink-3: var(--ds-ink-3, #505c6d);
  --qe-icon: var(--ds-icon, #626d7c);
  --qe-surface: var(--ds-surface, #ffffff);
  --qe-canvas: var(--ds-canvas, #f5f6f8);
  --qe-hover: color-mix(in srgb, var(--qe-ink) 4%, var(--qe-surface));
  --qe-highlight: color-mix(in srgb, var(--qe-ink) 7%, var(--qe-surface));
  --qe-tag: color-mix(in srgb, var(--qe-ink) 8%, var(--qe-surface));
  --qe-hair: var(--ds-hair, #e9eaed);
  --qe-line: var(--ds-line, #dcdee2);
  --qe-field: var(--ds-field);
  --qe-action: var(--ds-action, #0b1d36);
  --qe-action-hover: var(--ds-action-hover, #1a3257);
  --qe-action-press: var(--ds-action-press, #050f1e);
  --qe-on-action: var(--ds-action-fg, #ffffff);
  --qe-on-action-2: var(--ds-chrome-fg-2, #b4c1d5);
  --qe-focus: var(--ds-focus, #3d6fc4);
  --qe-link: var(--ds-st-site-ink, #1f4a82);
  --qe-ok: var(--ds-st-done, #3a7a58);   --qe-ok-ink: var(--ds-st-done-ink, #2b6446);   --qe-ok-bg: var(--ds-st-done-bg, #e6f0ea);
  --qe-warn: var(--ds-st-route, #b0721a); --qe-warn-ink: var(--ds-st-route-ink, #774a08); --qe-warn-bg: var(--ds-st-route-bg, #f7eedc);
  --qe-bad: var(--ds-st-late, #b93a2e);  --qe-bad-ink: var(--ds-st-late-ink, #9c2f24);  --qe-bad-bg: var(--ds-st-late-bg, #f9e9e6);
  --qe-info: var(--ds-st-site, #2f6cb8); --qe-info-ink: var(--ds-st-site-ink, #1f4a82); --qe-info-bg: var(--ds-st-site-bg, #e7edf5);
  --qe-scrim: color-mix(in srgb, var(--qe-ink) 24%, transparent);
  /* type: 11 caps · 12 meta · 13 body · 14 row · 18 sheet · 20 title · 28 display */
  --qe-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --qe-font: var(--ds-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --qe-t-caps: 11px;  --qe-l-caps: 16px;
  --qe-t-meta: 12px;  --qe-l-meta: 16px;
  --qe-t-body: 13px;  --qe-l-body: 20px;
  --qe-t-row: 14px;   --qe-l-row: 20px;
  --qe-t-sheet: 18px; --qe-l-sheet: 24px;
  --qe-t-title: 20px; --qe-l-title: 28px;
  --qe-t-display: 28px; --qe-l-display: 32px;
  /* spacing (4-pt) */
  --qe-s-1: 4px; --qe-s-2: 8px; --qe-s-3: 12px; --qe-s-4: 16px; --qe-s-5: 20px; --qe-s-6: 24px; --qe-s-8: 32px;
  --qe-gutter: 24px;
  /* radii: exactly two */
  --qe-r-1: 6px;
  --qe-r-2: 8px;
  /* shadows: exactly two */
  --qe-shadow-pop: var(--ds-e-pop, 0 0 0 0.5px rgba(11, 29, 54, 0.18), 0 1px 2px rgba(11, 29, 54, 0.06), 0 12px 28px -6px rgba(11, 29, 54, 0.20));
  --qe-shadow-sheet: 0 0 0 0.5px rgba(11, 29, 54, 0.18), 0 24px 56px -16px rgba(11, 29, 54, 0.34);
  /* heights */
  --qe-h-row: 48px; --qe-h-control: 32px; --qe-h-bar: 40px; --qe-h-menu: 32px; --qe-h-tag: 20px; --qe-h-head: 32px;
  --qe-h-touch: 44px;
  --qe-rail: 280px;
  --qe-ease: cubic-bezier(.2, 0, 0, 1); --qe-fast: 120ms;
  --qe-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
  --qe-warn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.5 20h19L12 4Z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.1'/%3E%3C/svg%3E");
}

/* ───────────── 2. Host: the console shell around the editor (locked; only integration) ───────────── */
.qe2-host { min-width: 0; width: 100%; padding: 0 !important; margin: 0 !important; }
.qe2-original { display: none !important; }
.qe2-editor-ancestor { overflow: visible !important; height: auto !important; min-height: 0 !important; }
.quote-expansion:has(.qe2-root) { padding: 0 !important; }
/* F3: the console's mode bar stays: Customer email (the live send flow), Save Updates to Simpro, Simpro status,
   Convert to job and PCSP are the live editor's own controls. */
.quotes-queue:has(.qe2-root) > .queue-foot { display: none; }
/* The console dims inert content; the editor behind a popover keeps its colours (Send never greys out). */
.quotes-queue .qe2-root[inert], .qe2-root[inert], .qe2-bottom-bar[inert], .qe2-layer[inert] { opacity: 1 !important; }
.qe2-row-draft { display: block; margin-top: 2px; color: var(--ds-ink-3); font-size: var(--ds-text-sm, 12px); font-weight: 400; }
@media (max-width: 699px) {
  .lbody:has(.qe2-root) [data-qrow][aria-expanded="true"] *:not(svg):not(path) { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; -webkit-line-clamp: unset !important; }
}

/* ───────────── 3. Base ───────────── */
.qe2-root, .qe2-layer, .qe2-toast, .qe2-ds {
  color: var(--qe-ink); font-family: var(--ds-font); font-size: var(--qe-t-body); line-height: var(--qe-l-body);
  font-weight: 400; letter-spacing: -0.003em; font-feature-settings: 'cv11', 'ss01'; text-align: left;
  font-variant-numeric: normal;
}
.qe2-root *, .qe2-layer *, .qe2-toast *, .qe2-ds * { box-sizing: border-box; }
.qe2-root { width: 100%; min-width: 0; background: var(--qe-surface); container: qe / inline-size; }
.qe2-root [hidden], .qe2-layer [hidden] { display: none !important; }
.qe2-root button, .qe2-layer button, .qe2-toast button, .qe2-ds button { font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }
.qe2-root input, .qe2-root textarea, .qe2-layer input, .qe2-layer textarea, .qe2-ds input { font: inherit; color: var(--qe-ink); letter-spacing: inherit; min-width: 0; accent-color: var(--qe-action); }
.qe2-root h1, .qe2-root h2, .qe2-root p, .qe2-layer h1, .qe2-layer h2, .qe2-layer p, .qe2-root dl, .qe2-layer dl { margin: 0; }
.qe2-root h2, .qe2-layer h2 { font-size: var(--qe-t-row); line-height: var(--qe-l-row); font-weight: 600; }
.qe2-root strong, .qe2-layer strong, .qe2-root b, .qe2-layer b { font-weight: 600; }
.qe2-root :focus-visible, .qe2-layer :focus-visible, .qe2-toast :focus-visible, .qe2-ds :focus-visible { outline: 2px solid var(--qe-focus); outline-offset: 2px; }
.qe2-root :focus:not(:focus-visible), .qe2-layer :focus:not(:focus-visible) { outline: none; }
/* Fields: the ring replaces the edge instead of drawing a second line outside it. */
.qe2-input:focus, .qe2-field input:focus, .qe2-field textarea:focus, .qe2-tax-filter:focus,  .qe2-book-mount .pb-search:focus { outline: 2px solid var(--qe-focus); outline-offset: -1px; }
.qe2-icon { width: 16px; height: 16px; flex: 0 0 16px; vertical-align: middle; }
.qe2-chev { width: 12px; height: 12px; flex: 0 0 12px; transition: transform var(--qe-fast) var(--qe-ease); }
.qe2-chev-up { transform: rotate(180deg); }
.qe2-chev-right { transform: rotate(-90deg); }
.qe2-chev-left { transform: rotate(90deg); }
.qe2-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.qe2-nowrap { white-space: nowrap; }
.qe2-spacer { flex: 1; }
.qe2-muted { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-empty { margin: 0; padding: var(--qe-s-2); color: var(--qe-ink-3); }

/* ───────────── 4. Components ───────────── */
/* 4.1 Button: primary, secondary, ghost, danger; 32 high, 8 radius. */
.qe2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--qe-s-2);
  min-height: var(--qe-h-control); padding: 0 var(--qe-s-3); border: 1px solid var(--qe-field); border-radius: var(--qe-r-1);
  background: var(--qe-surface); color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 500; white-space: nowrap;
  transition: background var(--qe-fast), color var(--qe-fast);
}
.qe2-btn.qe2-primary { background: var(--qe-action); border-color: var(--qe-action); color: var(--qe-on-action); font-weight: 600; }
.qe2-btn.qe2-primary > .qe2-icon { order: 2; }
.qe2-btn.qe2-primary:active { background: var(--qe-action-press); }
.qe2-btn.qe2-text { border-color: transparent; background: transparent; color: var(--qe-ink-2); padding: 0 var(--qe-s-2); }
.qe2-btn.qe2-danger { color: var(--qe-bad-ink); }
.qe2-btn.qe2-icon-btn { width: var(--qe-h-control); min-width: var(--qe-h-control); padding: 0; }
.qe2-btn:not(.qe2-primary):active:not(:disabled) { background: var(--qe-highlight); }
.qe2-btn:disabled { color: var(--qe-ink-3); border-color: var(--qe-line); cursor: default; }
.qe2-btn.qe2-primary:disabled { background: var(--qe-tag); border-color: var(--qe-tag); color: var(--qe-ink-3); }
.qe2-btn.qe2-text:disabled { border-color: transparent; }
.qe2-root kbd, .qe2-layer kbd, .qe2-ds kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--qe-s-1);
  border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink-3);
  font-family: var(--ds-font); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 500;
}

/* 4.2 Text trigger: 13 ink-2, chevron inside, no fill at rest, text sits on its column edge. */
.qe2-choice, .qe2-tax-trigger, .qe2-more-toggle, .qe2-more-trigger, .qe2-scope-edit, .qe2-book-toggle {
  display: inline-flex; align-items: center; gap: var(--qe-s-1); min-height: 24px; padding: 0 6px; margin: 0 -6px;
  border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2);
  font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 400; white-space: nowrap;
}
.qe2-choice .qe2-chev, .qe2-tax-trigger .qe2-chev, .qe2-more-toggle .qe2-chev, .qe2-book-toggle .qe2-chev { color: var(--qe-icon); }
.qe2-choice:disabled { color: var(--qe-ink-3); cursor: default; }

/* 4.3 Tag / status chip: one component. 20 high (24 when it is a button), 4 radius, 12/500. */
.qe2-tag {
  display: inline-flex; align-items: center; gap: var(--qe-s-1); height: var(--qe-h-tag); padding: 0 var(--qe-s-2);
  border: 0; border-radius: var(--qe-r-1); background: var(--qe-tag); color: var(--qe-ink-2);
  font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 500; white-space: nowrap; vertical-align: middle; flex: none;
}
/* An interactive tag is a transparent hit wrapper (24 desktop, 44 phone) around the one tag face. */
.qe2-tag-btn { display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; border-radius: var(--qe-r-1); background: transparent; flex: none; }
.qe2-tag-btn > .qe2-tag { height: 24px; }
.qe2-tag-btn .qe2-chev { color: var(--qe-icon); }
.qe2-tag .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; }
.qe2-tag-info { background: var(--qe-tag); color: var(--qe-ink-2); }
/* Three pill tiers only (round 10).
   Status: a coloured dot and the label, no fill (the Simpro status, approved, the scope flag).
   Metadata: the grey fill (other quotes, details, optional, saved, kit, on quote ×N @ $X, Cc addresses).
   Action: white with a 1px edge (the unit's parts book, quick add, +N). */
.qe2-tag-status, .qe2-tag-ok, .qe2-tag-warn, .qe2-tag-bad { gap: 6px; padding: 0 var(--qe-s-2) 0 6px; background: transparent; color: var(--qe-ink); }
.qe2-dot { flex: none; width: 8px; height: 8px; border-radius: var(--qe-r-2); background: var(--qe-status-bg, var(--qe-icon)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-ink) 16%, transparent); }
.qe2-dot-ok { background: var(--qe-ok); } .qe2-dot-warn { background: var(--qe-ink-3); } .qe2-dot-bad { background: var(--qe-bad); }
.qe2-mi-ico > .qe2-dot { margin: 4px; }
.qe2-link-pill { background: var(--qe-tag); color: var(--qe-ink-2); }
.qe2-tag.qe2-action-chip { background: var(--qe-surface); color: var(--qe-ink); box-shadow: inset 0 0 0 1px var(--qe-line); }
.qe2-tag.qe2-action-chip .qe2-icon { color: var(--qe-icon); }

/* 4.4 Chip: quick add and filter chips (the same component, pressed state for filters). */
.qe2-chip {
  display: inline-flex; align-items: baseline; gap: var(--qe-s-2); height: var(--qe-h-control); padding: 6px var(--qe-s-3);
  border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink);
  font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 500; white-space: nowrap; flex: none;
}
.qe2-chip > strong { font-weight: 500; color: var(--qe-ink-3); font-variant-numeric: tabular-nums; }
.qe2-chip:active:not(:disabled) { background: var(--qe-highlight); }
.qe2-chip:disabled { color: var(--qe-ink-3); border-color: var(--qe-hair); cursor: default; }
.qe2-tag-btn:disabled > .qe2-tag { color: var(--qe-ink-3); }
.qe2-input[aria-invalid="true"], .qe2-field input[aria-invalid="true"] { border-color: var(--qe-bad); }
/* One selected style everywhere (tabs, segments, % | $, parts-book filters): the white raised segment on the grey track. */
.qe2-option.qe2-active, .qe2-seg button[aria-checked="true"], .qe2-seg-mini > button[aria-checked="true"], .qe2-chip[aria-pressed="true"], .qe2-chip.pb-active,
.qe2-book-mount .pb-chip.qe2-chip.pb-active, .qe2-book-mount .pb-chip.qe2-chip[aria-pressed="true"] {
  background: var(--qe-surface); border-color: var(--qe-line); color: var(--qe-ink); font-weight: 500; box-shadow: none;
}

/* 4.5 Inputs, select, switch, checkbox rows, segmented control. */
.qe2-input, .qe2-field input, .qe2-field textarea, .qe2-tax-filter {
  display: block; width: 100%; height: var(--qe-h-control); padding: 0 var(--qe-s-3); border: 1px solid var(--qe-field); border-radius: var(--qe-r-1);
  background: var(--qe-surface); color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body);
}
.qe2-field textarea { height: auto; padding: 6px var(--qe-s-3); resize: vertical; }
.qe2-root input::placeholder, .qe2-layer input::placeholder, .qe2-layer textarea::placeholder { color: var(--qe-ink-3); opacity: 1; }
.qe2-field { display: flex; flex-direction: column; gap: var(--qe-s-1); margin: 0 0 var(--qe-s-4); color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 500; }
.qe2-field > span:first-child { color: var(--qe-ink-2); }
.qe2-affix-input {
  display: inline-flex; align-items: center; gap: var(--qe-s-1); height: var(--qe-h-control); padding: 0 var(--qe-s-3) 0 0;
  border: 1px solid var(--qe-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink-3); font-size: var(--qe-t-body);
}
.qe2-affix-input input { width: 64px; height: 100%; padding: 0 0 0 var(--qe-s-3); border: 0; background: transparent; text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.qe2-affix-input:focus-within { outline: 2px solid var(--qe-focus); outline-offset: -1px; }
.qe2-affix-input input:focus-visible, .qe2-money-field input:focus-visible, .qe2-affix-field input:focus-visible { outline: none; }
.qe2-field .qe2-affix-input { width: 100%; }
.qe2-field .qe2-affix-input input { width: 100%; text-align: left; }
.qe2-select {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); min-width: 160px; max-width: 100%; height: var(--qe-h-control);
  padding: 0 var(--qe-s-3); border: 1px solid var(--qe-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink);
  font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 400; text-align: left;
}
.qe2-select > span { min-width: 0; overflow-wrap: anywhere; }
.qe2-select .qe2-chev { color: var(--qe-icon); }
.qe2-root .qe2-switch, .qe2-layer .qe2-switch, .qe2-ds .qe2-switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 28px; height: 16px; margin: 0;
  border: 0; border-radius: var(--qe-r-1); background: var(--qe-line); cursor: pointer; transition: background var(--qe-fast);
}
.qe2-root .qe2-switch::before, .qe2-layer .qe2-switch::before, .qe2-ds .qe2-switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: var(--qe-r-2); background: var(--qe-surface); transition: transform var(--qe-fast) var(--qe-ease); }
.qe2-root .qe2-switch:checked, .qe2-layer .qe2-switch:checked, .qe2-ds .qe2-switch:checked { background: var(--qe-action); }
.qe2-root .qe2-switch:checked::before, .qe2-layer .qe2-switch:checked::before, .qe2-ds .qe2-switch:checked::before { transform: translateX(12px); }
.qe2-check-row { display: flex; align-items: center; gap: var(--qe-s-2); min-height: var(--qe-h-control); color: var(--qe-ink); font-size: var(--qe-t-body); cursor: pointer; }
.qe2-check-row > span { flex: 1; min-width: 0; }
.qe2-check-row small { display: block; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-check-row input[type="checkbox"]:not(.qe2-switch), .qe2-radio-row input { width: 16px; height: 16px; margin: 0; flex: none; }
.qe2-switch-row { justify-content: space-between; }
.qe2-seg { display: inline-flex; flex-wrap: wrap; gap: 0; padding: var(--qe-s-1); border-radius: var(--qe-r-2); background: var(--qe-canvas); max-width: 100%; }
.qe2-seg button { min-height: 28px; padding: 0 var(--qe-s-3); border: 1px solid transparent; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2); font-size: var(--qe-t-body); white-space: nowrap; }


/* 4.6 Menu and menu item: 16px leading slot, one trailing tick column, one highlight for pointer and keys. */
.qe2-menu-list { position: relative; display: flex; flex-direction: column; padding: var(--qe-s-1); min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.qe2-menu-list > * { flex: none; }
.qe2-mi {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: var(--qe-s-2);
  width: 100%; min-height: var(--qe-h-menu); padding: 6px var(--qe-s-2); border: 0; border-radius: var(--qe-r-1);
  background: transparent; color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body); text-align: left; white-space: nowrap; cursor: pointer;
}
.qe2-mi:focus, .qe2-mi.qe2-hover { background: var(--qe-highlight); outline: none; }
.qe2-mi-ico { display: inline-flex; width: 16px; height: 16px; color: var(--qe-icon); }
.qe2-mi-ico .qe2-icon { width: 16px; height: 16px; }
.qe2-mi-text { display: flex; flex-direction: column; min-width: 0; white-space: normal; }
.qe2-mi-text > strong { font-weight: 500; }
.qe2-mi-text > small { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-mi-text > .qe2-tag { align-self: flex-start; }
.qe2-mi-trail { display: inline-flex; align-items: center; gap: var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-mi-trail > small { font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-mi-trail > b { color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 500; font-variant-numeric: tabular-nums; }
.qe2-mi-tick { display: inline-flex; width: 16px; height: 16px; color: var(--qe-ink); }
.qe2-mi-tick .qe2-icon { width: 16px; height: 16px; }
.qe2-mi-label { padding: var(--qe-s-2) var(--qe-s-2) var(--qe-s-1); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: normal; }
.qe2-mi-sep { height: 1px; margin: var(--qe-s-1) 0; background: var(--qe-hair); }
.qe2-mi-danger, .qe2-mi-danger .qe2-mi-ico { color: var(--qe-bad-ink); }
.qe2-mi:disabled { color: var(--qe-ink-3); cursor: default; }
.qe2-mi:disabled .qe2-mi-ico { color: var(--qe-ink-3); }
.qe2-mi-toggle { cursor: pointer; }
.qe2-start-row .qe2-enter { display: none; }
.qe2-start-row:focus .qe2-enter { display: inline-flex; }

/* 4.7 Layers: popover, dialog, side sheet, phone sheet with scrim. */
.qe2-layer { position: fixed; inset: 0; z-index: 12000; }
.qe2-sub-layer { z-index: 12100; }
.qe2-backdrop { position: absolute; inset: 0; background: var(--qe-scrim); animation: qe2-fade var(--qe-fast) ease-out; }
.qe2-popover-layer > .qe2-backdrop { background: transparent; animation: none; }
.qe2-layer.qe2-no-anim > .qe2-backdrop, .qe2-layer.qe2-no-anim > .qe2-sheet { animation: none; }
.qe2-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column;
  background: var(--qe-surface); box-shadow: var(--qe-shadow-sheet); animation: qe2-sheet-in 160ms var(--qe-ease);
}
.qe2-sheet:focus { outline: none; }
.qe2-preview-sheet { width: min(640px, 100%); }
.qe2-book-sheet { width: min(960px, 100%); }
.qe2-sheet-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-3); padding: var(--qe-s-4) var(--qe-s-6); border-bottom: 1px solid var(--qe-hair); }
.qe2-sheet-header h2 { font-size: var(--qe-t-sheet); line-height: var(--qe-l-sheet); font-weight: 600; letter-spacing: -0.01em; }
.qe2-eyebrow { display: block; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-sheet-header > .qe2-btn:not(.pb-pdf) { width: var(--qe-h-control); padding: 0; border-color: transparent; background: transparent; color: var(--qe-ink-2); }
.qe2-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--qe-s-6); overscroll-behavior: contain; }
.qe2-dialog {
  top: 12vh; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); width: min(480px, calc(100% - 32px)); max-height: 76dvh;
  border-radius: var(--qe-r-2); animation: qe2-fade var(--qe-fast) ease-out; overflow: hidden;
}
.qe2-layer .qe2-sheet.qe2-popover {
  position: fixed; top: 0; left: 0; right: auto; bottom: auto; transform: none; margin: 0; padding: 0; width: auto;
  border-radius: var(--qe-r-2); box-shadow: var(--qe-shadow-pop); overflow: hidden; animation: qe2-fade var(--qe-fast) ease-out;
}
.qe2-popover > .qe2-sheet-header { display: none; }
.qe2-popover > .qe2-sheet-body { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.qe2-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--qe-s-2); margin-top: var(--qe-s-5); }
.qe2-dialog-footer, .qe2-send-pinned { flex: none; margin-top: auto; padding: var(--qe-s-3) var(--qe-s-6); border-top: 1px solid var(--qe-line); background: var(--qe-surface); }
.qe2-dialog-footer { display: flex; justify-content: flex-end; gap: var(--qe-s-2); }
@keyframes qe2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qe2-sheet-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qe2-sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 4.8 Toast, banner, inline error. */
.qe2-toast {
  position: fixed; z-index: 13000; left: 50%; bottom: 64px; transform: translateX(-50%); max-width: calc(100vw - 24px); white-space: nowrap;
  display: flex; align-items: center; gap: var(--qe-s-3); padding: var(--qe-s-2) var(--qe-s-2) var(--qe-s-2) var(--qe-s-4);
  border-radius: var(--qe-r-2); background: var(--qe-action); color: var(--qe-on-action); box-shadow: var(--qe-shadow-pop); animation: qe2-fade var(--qe-fast) ease-out;
}
.qe2-toast button { min-height: 24px; padding: 0 var(--qe-s-2); border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-on-action-2); font-weight: 600; }
.qe2-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2); padding: 2px 0; margin: 2px 0;
  border-radius: 0; background: transparent; color: var(--qe-ink-3); font-size: var(--qe-t-body);
}
.qe2-banner { flex-wrap: nowrap; }
.qe2-banner > span { flex: 1; min-width: 0; }
.qe2-banner > .qe2-icon { align-self: flex-start; margin-top: 2px; }
.qe2-banner .qe2-btn { min-height: 28px; flex: none; }
.qe2-banner .qe2-btn.qe2-text { color: var(--qe-link); }
.qe2-banner-info { background: var(--qe-info-bg); color: var(--qe-info-ink); }
.qe2-cell-error, .qe2-form-error {
  display: flex; align-items: center; gap: var(--qe-s-1); color: var(--qe-bad-ink); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 400;
}
.qe2-cell-error::before, .qe2-form-error::before { content: ''; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--qe-warn-glyph) center / 12px no-repeat; mask: var(--qe-warn-glyph) center / 12px no-repeat; }

/* ───────────── 5. Editor ───────────── */
.qe2-canvas { padding: var(--qe-s-4) var(--qe-gutter) calc(var(--qe-s-6) + var(--qe2-bottom-space, 0px)); }

/* 5.1 Header: no second title (the list row above carries it). One first row: status · other quotes · details · unit · site · save state; actions on the right. */
.qe2-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--qe-s-4); row-gap: var(--qe-s-1); margin-bottom: var(--qe-s-4); }
.qe2-heading { display: contents; }
.qe2-title-row { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2) var(--qe-s-3); min-width: 0; min-height: var(--qe-h-control); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); color: var(--qe-ink-3); }
.qe2-title-row > .qe2-sync { margin-left: auto; }
.qe2-header-chips { display: contents; }
/* The status menu: a colour dot and the label (the full Simpro colour lives on the one badge). */

/* Rename edits the title in the list row's own slot. */
.qe2-title-input { width: min(100%, 560px); height: 32px; margin: -4px 0 -4px -6px; padding: 0 6px; border: 0; border-radius: var(--qe-r-1); outline: 2px solid var(--qe-focus); background: var(--qe-surface); color: inherit; font: inherit; letter-spacing: inherit; }
/* The list row above carries the shell's 20/600 title; the editor's editable title sits one step below it at 18/600. */
.qe2-header h1 {
  margin: 0 0 0 -4px; padding: 0 4px; border-radius: var(--qe-r-1); min-width: 0;
  font-size: var(--qe-t-sheet); line-height: var(--qe-l-title); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.qe2-title-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2) var(--qe-s-3); }
.qe2-overlap-short, .qe2-unit-short { display: none; }
/* 1000–1279: the header stays one row: short labels, Start from as its icon (the label stays its accessible name). */
@media (min-width: 1000px) and (max-width: 1279px) {
  .qe2-overlap-long, .qe2-unit-long { display: none; }
  .qe2-overlap-short, .qe2-unit-short { display: inline; }
  .qe2-actionrow > [data-action="start"] .qe2-action-label { display: none; }
  .qe2-actionrow > [data-action="start"] { width: var(--qe-h-control); padding: 0; }
}
.qe2-header-actions { grid-column: 2; grid-row: 1; align-self: start; }
.qe2-actionrow { display: flex; align-items: center; gap: var(--qe-s-2); }
.qe2-header-meta {
  grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-1) var(--qe-s-3); min-height: 24px;
  color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta);
}
.qe2-quote-no { color: var(--qe-ink-3); font-variant-numeric: tabular-nums; }
.qe2-meta-site { display: inline-flex; align-items: center; min-height: 24px; color: var(--qe-ink-2); text-decoration: none; }
.qe2-timeline { color: var(--qe-ok-ink); }
.qe2-timeline.qe2-timeline-warn { color: var(--qe-ink-3); }
.qe2-sync { margin-left: auto; color: var(--qe-ink-3); white-space: nowrap; }
.qe2-sync.qe2-sync-stale { color: var(--qe-ink-3); font-weight: 500; white-space: normal; text-align: right; }
.qe2-restored { color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; text-decoration: none; cursor: default; }
.qe2-version-note, .qe2-reminders { color: var(--qe-ink-3); }

/* 5.2 Option row: segmented tab list, + Option, comparison, option meta. */
.qe2-option-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2) var(--qe-s-3); margin-bottom: var(--qe-s-4); }
.qe2-options { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; padding: var(--qe-s-1); border-radius: var(--qe-r-2); background: var(--qe-canvas); min-width: 0; max-width: 100%; }
.qe2-option {
  display: inline-flex; align-items: center; gap: var(--qe-s-2); min-height: var(--qe-h-control); padding: 0 var(--qe-s-3);
  border: 1px solid transparent; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2);
  font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 500; white-space: nowrap; text-align: left;
}
.qe2-option > strong { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--qe-ink-3); }

.qe2-option.qe2-active > strong { color: var(--qe-ink); font-weight: 600; }
.qe2-option-excluded .qe2-option-name { color: var(--qe-ink-3); }
.qe2-option-name { display: inline-flex; align-items: center; gap: 6px; }
.qe2-option-name .qe2-icon, .qe2-mi-ico .qe2-icon[data-star] { width: 14px; height: 14px; flex-basis: 14px; color: var(--qe-ink-2); fill: currentColor; }
.qe2-addoption .qe2-icon { width: 14px; height: 14px; flex-basis: 14px; }
.qe2-option-picker { display: none; }
.qe2-comparison { flex: 1 1 0; min-width: 120px; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-comparison:empty { display: none; }
.qe2-option-meta { display: flex; align-items: center; gap: var(--qe-s-4); margin-left: auto; }
.qe2-option-meta > .qe2-icon-btn { margin: 0 0 0 -8px; }

/* 5.3 Scope: a one-line summary that opens the editor; draft as a diff. */
.qe2-scope-section { margin-bottom: var(--qe-s-2); }
.qe2-scope-summary { display: flex; align-items: baseline; gap: var(--qe-s-3); color: var(--qe-ink-2); }
.qe2-scope-summary > p { flex: 1; min-width: 0; font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
.qe2-scope-summary > .qe2-scope-edit { flex: none; margin-right: 0; }
.qe2-summary-part { white-space: normal; }
.qe2-scope-warn { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: var(--qe-s-2); margin-top: var(--qe-s-1); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-scope-warn > .qe2-choice { margin: 0 -6px 0 0; justify-self: end; }
.qe2-scope-warn > .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; }
.qe2-scope-warn > .qe2-choice { color: var(--qe-link); font-size: var(--qe-t-meta); }
.qe2-scope-body { border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); overflow: hidden; }
.qe2-scope-body:focus-within { border-color: var(--qe-field); }
.qe2-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); margin-bottom: var(--qe-s-2); }
.qe2-scope-body > .qe2-section-head { margin: 0; padding: var(--qe-s-2) var(--qe-s-3) var(--qe-s-2) var(--qe-s-4); border-bottom: 1px solid var(--qe-hair); }
.qe2-scope-body > .qe2-section-head > strong { margin-right: auto; font-size: var(--qe-t-row); }
.qe2-format { display: flex; gap: 2px; padding: var(--qe-s-1) var(--qe-s-2); border-bottom: 1px solid var(--qe-hair); }
.qe2-format button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2); }
.qe2-scope { min-height: 96px; max-height: none; overflow-y: visible; padding: var(--qe-s-3) var(--qe-s-4); color: var(--qe-ink); overflow-wrap: anywhere; outline: none; }
.qe2-scope div + div, .qe2-doc-scope div + div, .qe2-scope p + p, .qe2-doc-scope p + p { margin-top: var(--qe-s-2); }
.qe2-draft { margin-top: var(--qe-s-3); padding: var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); }
.qe2-draft-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); }
.qe2-label { color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 600; }
.qe2-diff-count { font-size: var(--qe-t-meta); font-variant-numeric: tabular-nums; }
.qe2-diff-add { color: var(--qe-ok-ink); }
.qe2-diff-del { color: var(--qe-bad-ink); }
.qe2-diff { margin: var(--qe-s-2) 0; max-height: 280px; overflow: auto; border: 1px solid var(--qe-hair); border-radius: var(--qe-r-1); }
.qe2-diff > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); padding: 2px var(--qe-s-2) 2px 0; }
.qe2-diff-words { padding: var(--qe-s-2) var(--qe-s-3); color: var(--qe-ink-2); line-height: 22px; }
.qe2-diff-words ins { text-decoration: none; background: var(--qe-ok-bg); color: var(--qe-ink); padding: 0 2px; }
.qe2-diff-words del { background: var(--qe-bad-bg); color: var(--qe-bad-ink); padding: 0 2px; }
.qe2-diff-words ins.qe2-diff-nl { background: none; padding: 0; }
.qe2-diff-fold { color: var(--qe-ink-3); }
.qe2-draft-source { display: flex; align-items: center; gap: 6px; margin: var(--qe-s-1) 0 0; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-draft-source .qe2-icon { width: 12px; height: 12px; flex: 0 0 12px; }
.qe2-diff-mark { text-align: center; color: var(--qe-ink-3); }
.qe2-diff > .qe2-diff-add { background: var(--qe-ok-bg); color: var(--qe-ink); }
.qe2-diff > .qe2-diff-add .qe2-diff-mark { color: var(--qe-ok-ink); }
.qe2-diff > .qe2-diff-del { background: var(--qe-bad-bg); color: var(--qe-ink-2); text-decoration: line-through; }
.qe2-diff > .qe2-diff-del .qe2-diff-mark { color: var(--qe-bad-ink); text-decoration: none; }
.qe2-diff > .qe2-diff-same { color: var(--qe-ink-3); }
.qe2-tidy { margin: var(--qe-s-2) 0; color: var(--qe-ink-2); }
.qe2-draft-actions { display: flex; justify-content: flex-end; gap: var(--qe-s-2); margin-top: var(--qe-s-2); }
.qe2-draft-photos, .qe2-suggestions { display: grid; gap: var(--qe-s-1); margin: var(--qe-s-2) 0; }
/* In the drawer the draft is the sheet's own content: no card inside the sheet, and the diff runs at full height. */
.qe2-layer .qe2-draft { margin: 0; padding: 0; border: 0; }
.qe2-layer .qe2-draft .qe2-diff { max-height: none; overflow: visible; }
.qe2-layer .qe2-draft .qe2-draft-source { margin: 0 0 var(--qe-s-3); }
.qe2-sugg-price { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }

/* 5.4 The add bar and its results. */
/* The add bar pins under the list header while the builder is in view; a hairline shows once it is stuck. */
.qe2-command { position: sticky; top: var(--qe2-sticky-actions-h, 0px); z-index: 30; margin: 0 calc(-1 * var(--qe-gutter)); padding: var(--qe-s-2) var(--qe-gutter); background: var(--qe-surface); }
.qe2-command.qe2-stuck { box-shadow: 0 1px 0 var(--qe-line); }
.qe2-command.qe2-unstick { position: relative; }
/* Rows scrolling under the stuck add bar fade out instead of showing as a cut-off sliver of chips. */
.qe2-command.qe2-stuck::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 20px; background: linear-gradient(to bottom, var(--qe-surface) 0, var(--qe-surface) 10px, transparent 100%); pointer-events: none; }
.qe2-layer .qe2-menu-list.qe2-past-list { max-height: none !important; overflow: visible; }
.qe2-search-wrap {
  display: flex; align-items: center; gap: var(--qe-s-2); height: var(--qe-h-bar); padding: 0 var(--qe-s-2) 0 var(--qe-s-3);
  border: 1px solid var(--qe-field); border-radius: var(--qe-r-1); background: var(--qe-surface);
}
.qe2-search-wrap:focus-within { outline: 2px solid var(--qe-focus); outline-offset: -1px; }
.qe2-search-wrap > .qe2-icon { color: var(--qe-icon); }
.qe2-root .qe2-search { flex: 1; min-width: 0; height: calc(100% + 2px); margin: -1px 0; padding: 0; border: 0; background: transparent; font-size: var(--qe-t-row); line-height: var(--qe-l-row); outline: none; }
.qe2-root .qe2-search:focus-visible { outline: none; }
.qe2-ghost { flex: none; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap; }
.qe2-chip-mode .qe2-icon { width: 12px; height: 12px; }
.qe2-results {
  position: absolute; z-index: 40; top: calc(100% - 4px); left: var(--qe-gutter); right: var(--qe-gutter); width: auto; max-height: 440px; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--qe-s-1); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); box-shadow: var(--qe-shadow-pop);
}
.qe2-result-hint { min-height: 40px; color: var(--qe-ink-2); cursor: default; }
.qe2-result-hint .qe2-result-name { color: var(--qe-ink-2); }
.qe2-result-caption { display: flex; justify-content: space-between; gap: var(--qe-s-3); padding: var(--qe-s-1) var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-result-group { padding: var(--qe-s-2) var(--qe-s-2) var(--qe-s-1) 28px; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 600; }
.qe2-result {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 52px; padding: 6px var(--qe-s-2);
  border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink); text-align: left;
}
.qe2-result.qe2-highlighted { background: var(--qe-highlight); }
.qe2-result-line1, .qe2-result-line2 { display: flex; width: 100%; min-width: 0; }
.qe2-result-line1 { align-items: baseline; font-size: var(--qe-t-row); line-height: var(--qe-l-row); }
.qe2-result-line2 { align-items: center; flex-wrap: wrap; gap: 0 var(--qe-s-3); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-lead { flex: 0 0 12px; width: 12px; margin-right: var(--qe-s-2); display: inline-flex; align-self: center; color: var(--qe-icon); }
.qe2-result-line2 > .qe2-lead { margin-right: calc(var(--qe-s-2) - var(--qe-s-3)); }
.qe2-lead .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; }
.qe2-result-name { min-width: 0; overflow-wrap: anywhere; }
.qe2-result-name b, .qe2-result-pn b { font-weight: 600; }
.qe2-result-name > .qe2-tag { margin-left: var(--qe-s-2); }
.qe2-result-pn { flex: none; margin-left: var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
.qe2-result-pn2 { display: none; }
.qe2-result-price { flex: none; margin-left: auto; padding-left: var(--qe-s-3); font-size: var(--qe-t-body); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qe2-onquote { font-variant-numeric: tabular-nums; }

/* 5.5 Quick add: ten chips under the bar; they wrap (desktop) or scroll by whole chips (phone). */
/* Quick add: ten chips, all visible. ≥1280 one row; 600–1279 two even rows of five; under 600 compact chips wrap. */
.qe2-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--qe-s-2); margin-top: 0; }
/* Two even rows of five: each chip stacks its name over its price. */
.qe2-quick-button.qe2-chip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-width: 0; height: auto; min-height: 40px; padding: 2px var(--qe-s-3); }
.qe2-quick-button > span, .qe2-quick-button > strong { font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap; }
.qe2-quick-button > span { color: var(--qe-ink); font-weight: 500; }

/* 5.6 Bulk bar. */
.qe2-bulk { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 88px; width: fit-content; max-width: calc(100% - 32px); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-3); margin: 0 auto; padding: var(--qe-s-2) var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); box-shadow: var(--qe-shadow-pop); }
.qe2-bulk > span { font-weight: 600; }
.qe2-bulk-field { display: inline-flex; align-items: center; gap: var(--qe-s-2); color: var(--qe-ink-2); }
.qe2-bulk-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2) var(--qe-s-3); }
.qe2-bulk-markup { display: inline-flex; align-items: center; gap: var(--qe-s-2); }
.qe2-bulk-preview { flex-basis: 100%; color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-bulk-preview:empty { display: none; }

/* 5.7 Lines: sticky column header, group labels, one 48px row, every amount on the money edge. */
.qe2-builder { margin-top: 0; }
.qe2-root {
  --qe2-gut: 16px;
  --qe2-columns: var(--qe2-gut) minmax(160px, 1fr) 56px 92px 84px 92px 104px 32px;
  --qe2-colgap: 8px;
}
.qe2-table-head, .qe2-line { display: grid; grid-template-columns: var(--qe2-columns); column-gap: var(--qe2-colgap); }
/* One left edge in the main column: the select/drag gutter hangs in the page margin, so the scope line, the chips, the add bar,
   the column head and every line name start on the same x. */
.qe2-table-head, .qe2-line { margin-left: calc(-1 * (var(--qe2-gut) + var(--qe2-colgap))); }
.qe2-table-head {
  position: sticky; top: calc(var(--qe2-sticky-actions-h, 0px) + var(--qe2-cmd-h, 56px)); z-index: 4; align-items: center; height: var(--qe-h-head); margin-top: var(--qe-s-4);
  border-bottom: 1px solid var(--qe-line); background: var(--qe-surface);
  color: var(--qe-ink-3); font-size: var(--qe-t-caps); line-height: var(--qe-l-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.qe2-table-head > span:nth-child(n+3):nth-child(-n+6) { text-align: right; padding-right: 7px; }
.qe2-table-head > .qe2-th-total { text-align: right; }
.qe2-group-head {
  display: flex; align-items: flex-end; justify-content: space-between; height: var(--qe-h-head); padding: 0 calc(32px + var(--qe2-colgap)) var(--qe-s-1) 0;
  border-bottom: 1px solid var(--qe-hair); color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta);
}
.qe2-group-head > strong { font-weight: 600; }
.qe2-group-head > span { color: var(--qe-ink-3); font-variant-numeric: tabular-nums; }
.qe2-cc-section { margin-top: var(--qe-s-3); }
.qe2-cc-head { display: flex; align-items: center; gap: var(--qe-s-2); min-height: var(--qe-h-control); padding: 0 calc(32px + var(--qe2-colgap)) 0 0; }
.qe2-cc-name { min-height: 24px; padding: 0 6px; margin-left: -6px; border: 0; border-radius: var(--qe-r-1); background: transparent; font-size: var(--qe-t-row); font-weight: 600; color: var(--qe-ink-2); }
.qe2-cc-active .qe2-cc-name { color: var(--qe-ink); }
.qe2-cc-head > strong { font-variant-numeric: tabular-nums; }
.qe2-line {
  position: relative; align-items: start; align-content: center; min-height: var(--qe-h-row); padding: 6px 0;
  border-bottom: 1px solid var(--qe-hair); background: var(--qe-surface); outline-offset: -2px;
}
.qe2-line.qe2-selected { background: var(--qe-highlight); }
.qe2-line.qe2-flash { animation: qe2-flash 700ms steps(1, end); }
@keyframes qe2-flash { from { background: var(--qe-info-bg); } to { background: var(--qe-surface); } }
.qe2-row-controls { grid-column: 1; grid-row: 1; display: flex; align-items: center; height: 20px; }
.qe2-tick { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -4px; cursor: pointer; opacity: 0; }
.qe2-tick input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.qe2-drag {
  position: absolute; left: 0; top: 10px; display: inline-flex; align-items: center; justify-content: center; width: var(--qe2-gut); height: 28px; padding: 0;
  border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-icon); cursor: grab; opacity: 0;
}
.qe2-line:focus-within .qe2-tick, .qe2-selected .qe2-tick, .qe2-has-gutter .qe2-tick { opacity: 1; }
.qe2-drag { pointer-events: none; }
/* The gutter is one control: click selects, drag reorders. The grip shows on hover until the tick is in play. */
.qe2-line:focus-within .qe2-drag, .qe2-selected .qe2-drag, .qe2-has-gutter .qe2-drag { opacity: 0; }
.qe2-type-pick { display: inline-flex; align-items: center; gap: 2px; min-height: 24px; margin: -4px -4px; padding: 0 4px; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 400; }
.qe2-type-pick .qe2-icon { width: 12px; height: 12px; }
.qe2-muted { color: var(--qe-ink-3); }
.qe2-dup-tag { margin-left: 2px; }
.qe2-line-name { grid-column: 2; grid-row: 1; min-width: 0; }
.qe2-line-name > strong { display: block; font-size: var(--qe-t-row); line-height: var(--qe-l-row); font-weight: 500; overflow-wrap: anywhere; }
.qe2-partno { display: block; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); overflow-wrap: anywhere; }
.qe2-mobile-book-hint { display: none; }
.qe2-optional-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-1) var(--qe-s-3); margin-top: var(--qe-s-1); }
.qe2-optional-chip { margin: var(--qe-s-1) var(--qe-s-1) 0 0; }
.qe2-optional-row .qe2-optional-chip { margin: 0; }
.qe2-include { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--qe-ink-2); font-size: var(--qe-t-meta); cursor: pointer; }
.qe2-include input { width: 16px; height: 16px; margin: 0; }
.qe2-cell { position: relative; display: block; min-width: 0; height: 20px; text-align: right; }
.qe2-cell-qty { grid-column: 3; } .qe2-cell-cost { grid-column: 4; } .qe2-cell-markup { grid-column: 5; } .qe2-cell-sell { grid-column: 6; }
.qe2-cell { grid-row: 1; }
.qe2-cell > span { display: none; }
/* One number field (round 10): the line-cell model. Borderless at rest, a box on hover, a ring on focus, tabular and right-aligned.
   Line cells, the discount, the reserve, the deposit and the follow-up days all use it. */
.qe2-cell input, .qe2-num-input {
  display: block; width: 100%; height: 28px; margin: -4px 0; padding: 0 6px; border: 1px solid transparent; border-radius: var(--qe-r-1);
  background: transparent; color: var(--qe-ink); text-align: right; font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-variant-numeric: tabular-nums;
}
.qe2-root .qe2-num-input, .qe2-layer .qe2-num-input { width: auto; min-width: 56px; field-sizing: content; margin: 0; flex: none; font-variant-numeric: tabular-nums; }
.qe2-root .qe2-chip, .qe2-layer .qe2-chip { font-weight: 500; }
.qe2-cell input:focus, .qe2-root .qe2-num-input:focus, .qe2-layer .qe2-num-input:focus { background: var(--qe-surface); outline: 2px solid var(--qe-focus); outline-offset: 0; }
.qe2-negative input, .qe2-negative input:focus { color: var(--qe-ink-3); font-weight: 500; }
.qe2-book-hint, .qe2-price-needed, .qe2-cell-error {
  position: absolute; top: 25px; right: 7px; margin: 0; white-space: nowrap; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); text-align: right;
}
.qe2-book-hint { color: var(--qe-ink-3); }
.qe2-book-hint button, .qe2-mobile-book-hint button { min-height: 24px; margin: -4px -4px; padding: 0 4px; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-link); font-size: inherit; font-weight: 500; }
.qe2-price-needed, .qe2-below-cost { color: var(--qe-ink-3); }
.qe2-below-cost { position: absolute; top: 25px; right: 7px; white-space: nowrap; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-cell:has(.qe2-cell-error) .qe2-book-hint, .qe2-cell:has(.qe2-cell-error) .qe2-price-needed { display: none; }

.qe2-needs-price .qe2-cell-sell input { border-color: var(--qe-field); background: var(--qe-surface); }
.qe2-line-total { grid-column: 7; grid-row: 1; text-align: right; font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qe2-opt-off .qe2-line-name > strong, .qe2-opt-off .qe2-cell input, .qe2-opt-off .qe2-partno { color: var(--qe-ink-3); }
.qe2-opt-off .qe2-line-total { color: var(--qe-ink-3); font-weight: 400; text-decoration: line-through; }
.qe2-row-menu-anchor { grid-column: 8; grid-row: 1; display: flex; justify-content: flex-end; height: 20px; align-items: center; }
.qe2-delete { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-icon); }
.qe2-internal-toggle { display: none; }
.qe2-no-cost { height: 20px; }
.qe2-empty-lines { padding: var(--qe-s-4) 0; color: var(--qe-ink-3); }
.qe2-addline-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-4); min-height: 40px; padding: var(--qe-s-1) 0; }
.qe2-addline-footer .qe2-btn.qe2-text { padding: 0 6px; margin: 0 -7px; min-height: 24px; }

/* 5.8 Site photos: a wrapping grid of whole tiles; a ticked tile has a navy ring and badge. */
.qe2-photos-section { margin-top: var(--qe-s-6); }
.qe2-photos-section > .qe2-section-head .qe2-btn.qe2-text { margin-right: -8px; }
.qe2-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--qe-s-2); }
.qe2-photo { position: relative; display: block; min-width: 0; cursor: pointer; }
.qe2-photo-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--qe-r-1); background: var(--qe-canvas); }
.qe2-photo-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qe2-photo-image input { position: absolute; top: 0; right: 0; z-index: 2; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.qe2-photo-image::after {
  content: ''; position: absolute; top: 8px; right: 8px; z-index: 1; width: 20px; height: 20px; border-radius: var(--qe-r-1);
  background: var(--qe-surface); box-shadow: inset 0 0 0 1px var(--qe-field); pointer-events: none;
}
.qe2-photo-image:has(input:checked) { outline: 2px solid var(--qe-action); outline-offset: -2px; }
.qe2-photo-image:has(input:checked)::after { background: var(--qe-action); box-shadow: none; }
.qe2-photo-image:has(input:checked)::before {
  content: ''; position: absolute; top: 11px; right: 11px; z-index: 2; width: 14px; height: 14px; pointer-events: none;
  background: var(--qe-on-action); -webkit-mask: var(--qe-check) center / 14px no-repeat; mask: var(--qe-check) center / 14px no-repeat;
}
.qe2-photo-image:has(input:focus-visible) { outline: 2px solid var(--qe-focus); outline-offset: 2px; }
.qe2-photo-source { margin-top: var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }

/* 5.9 Workspace and summary rail (≥1100). */
.qe2-workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--qe-rail); grid-template-rows: auto 1fr; column-gap: var(--qe-s-6); align-items: start; }
.qe2-main { min-width: 0; grid-column: 1; grid-row: 1; }
.qe2-workspace > .qe2-photos-section { grid-column: 1; grid-row: 2; }
.qe2-totals { min-width: 0; }
.qe2-workspace > .qe2-totals {
  grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--qe-s-4); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface);
}
/* Taller than the view: the rail scrolls with the page (no inner scroller) and only its total block sticks to the bottom edge. */
.qe2-workspace > .qe2-totals.qe2-rail-tall { position: relative; top: auto; }
.qe2-workspace > .qe2-totals.qe2-rail-tall .qe2-summary-pinned { position: sticky; bottom: 0; z-index: 2; border-radius: 0 0 var(--qe-r-2) var(--qe-r-2); box-shadow: 0 -1px 0 var(--qe-line); }
.qe2-mobile-summary { display: none; }
.qe2-totals-body { display: flex; flex-direction: column; min-height: 0; }
.qe2-summary-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); min-height: 44px; padding: 0 var(--qe-s-2) 0 var(--qe-s-4); border-bottom: 1px solid var(--qe-hair); }
/* The breakdown is always shown in full: no inner scroller. */
.qe2-summary-scroll { position: relative; flex: none; padding: var(--qe-s-2) var(--qe-s-4); }
/* Scroll regions fade at the bottom while more is below. */
.qe2-results::after { content: ''; position: sticky; bottom: -4px; display: block; height: 28px; margin: -28px -4px 0; background: linear-gradient(to bottom, transparent, var(--qe-surface) 85%); pointer-events: none; opacity: 0; transition: opacity var(--qe-fast); }
.qe2-results.qe2-more-below::after { opacity: 1; }
.qe2-sheet-body.qe2-more-below, .qe2-menu-list.qe2-more-below, .qe2-dock-doc.qe2-more-below, .qe2-diff.qe2-more-below, .qe2-summary-scroll.qe2-more-below { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
/* A summary that has scrolled says there is more above it too (the phone and tablet sheet scrolls to More; the desktop rail keeps its own snapping). */
.qe2-bottom-bar .qe2-summary-scroll.qe2-more-above { -webkit-mask-image: linear-gradient(transparent, #000 48px); mask-image: linear-gradient(transparent, #000 48px); }
.qe2-bottom-bar .qe2-summary-scroll.qe2-more-above.qe2-more-below { -webkit-mask-image: linear-gradient(transparent, #000 48px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(transparent, #000 48px, #000 calc(100% - 24px), transparent); }
.qe2-total-row { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); min-height: var(--qe-h-control); white-space: nowrap; }
.qe2-total-label { color: var(--qe-ink-2); font-size: var(--qe-t-body); font-weight: 400; }
.qe2-total-value { color: var(--qe-ink); font-variant-numeric: tabular-nums; }
.qe2-total-row > .qe2-tax-trigger { margin-right: 0; }
.qe2-tax-note { display: block; margin: -6px 0 var(--qe-s-1); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
/* Editable money fields: a straight 1px underline at rest (radius 0) that ends exactly on the money edge; a box on hover and a ring on focus.
   One style for discount, reserve and every summary amount; the whole field is the hit area. */
.qe2-money-field, .qe2-affix-field {
  display: inline-flex; align-items: center; justify-content: flex-end; min-width: 72px; height: 28px; padding: 0;
  border: 0; border-radius: 0; background-image: linear-gradient(var(--qe-field), var(--qe-field)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  color: var(--qe-ink); font-variant-numeric: tabular-nums; cursor: text;
}
.qe2-money-field:focus-within, .qe2-affix-field:focus-within { background-image: none; border-radius: var(--qe-r-1); }
.qe2-money-field input { width: auto; min-width: 1ch; height: 100%; field-sizing: content; padding: 0; border: 0; background: transparent; text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.qe2-money-field:focus-within { outline: 2px solid var(--qe-focus); outline-offset: 2px; }
.qe2-money-sign, .qe2-affix { color: var(--qe-ink); }
.qe2-pct-field .qe2-affix { padding-left: 0; }
.qe2-summary-more { padding-top: var(--qe-s-1); border-top: 1px solid var(--qe-hair); }
.qe2-summary-more > .qe2-more-toggle { margin: var(--qe-s-1) -6px; }
.qe2-more-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; }
.qe2-more-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: var(--qe-h-control); }
.qe2-more-label { grid-column: 1; color: var(--qe-ink-2); white-space: nowrap; }
.qe2-more-control { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; white-space: nowrap; }
.qe2-more-control > .qe2-choice { margin-right: -6px; }
.qe2-affix-field { padding: 0; }
.qe2-affix-field input { width: 36px; height: 100%; padding: 0 2px 0 0; border: 0; background: transparent; text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.qe2-affix-field:focus-within { outline: 2px solid var(--qe-focus); outline-offset: 2px; }
.qe2-affix-choice { display: inline-flex; align-items: center; gap: 2px; height: 100%; padding: 0 6px; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2); }
.qe2-discount-fields { display: inline-flex; align-items: center; gap: var(--qe-s-1); margin-right: -7px; }
.qe2-discount-fields > .qe2-discount-alt:last-child { margin-right: 7px; }
.qe2-more-control { gap: var(--qe-s-2); }
.qe2-more-control > .qe2-num-input:last-child { margin-right: -7px; }
.qe2-more-control > .qe2-seg-mini { margin-right: var(--qe-s-1); }
.qe2-deposit-sum:empty { display: none; }
.qe2-more-control > .qe2-alt-slot { min-width: 64px; text-align: right; }
.qe2-more-control > .qe2-alt-slot:last-child { margin-right: 0; }
/* The other value is shown muted: "5% · −$82.80". */
.qe2-discount-alt { color: var(--qe-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qe2-discount-row .qe2-total-label { display: inline-flex; align-items: center; gap: var(--qe-s-2); }
/* The discount's mode: a small segmented toggle (% | $). */
.qe2-seg-mini { display: inline-flex; padding: 2px; border-radius: var(--qe-r-2); background: var(--qe-canvas); }
.qe2-seg-mini > button { min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: 16px; font-weight: 500; }

.qe2-field-error-slot:empty { display: none; }
.qe2-field-error-slot { display: flex; justify-content: flex-end; padding: 0 0 var(--qe-s-1); }
.qe2-layer .qe2-field-error-slot { justify-content: flex-start; padding: var(--qe-s-1) 0 0; }
.qe2-below-cost-warn { display: flex; align-items: center; gap: 6px; margin: var(--qe-s-1) 0 0; color: var(--qe-bad-ink); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 500; }
.qe2-below-cost-warn .qe2-icon, .qe2-form-error .qe2-icon { width: 12px; height: 12px; flex: 0 0 12px; }
.qe2-margin.qe2-margin-neg > strong { color: var(--qe-bad-ink); }
.qe2-ms-margin.qe2-neg { color: var(--qe-bad-ink); font-weight: 500; }
.qe2-summary-pinned { flex: none; padding: var(--qe-s-1) var(--qe-s-4) var(--qe-s-4); border-top: 1px solid var(--qe-line); background: var(--qe-surface); }
/* The desktop summary card carries a compact primary in its header, so Send never scrolls away. */
.qe2-summary-header > .qe2-compact-primary { min-height: 28px; padding: 0 var(--qe-s-3); margin-right: 0; }
.qe2-summary-sums { margin-bottom: var(--qe-s-2); padding-bottom: var(--qe-s-1); border-bottom: 1px solid var(--qe-hair); }
.qe2-grand { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-3); }
.qe2-grand > span { display: flex; flex-direction: column; font-weight: 600; }
.qe2-grand small { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 400; }
.qe2-ifadded { display: flex; align-items: baseline; gap: var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-ifadded:empty { display: none; }
.qe2-ifadded > span { flex: 1 1 auto; min-width: 0; }
.qe2-ifadded > small { font-size: inherit; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qe2-ifadded > strong { color: var(--qe-ink-2, var(--qe-ink)); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qe2-grand > strong { font-size: var(--qe-t-title); line-height: var(--qe-l-title); letter-spacing: -0.014em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qe2-margin { display: flex; justify-content: space-between; gap: var(--qe-s-2); margin-top: var(--qe-s-1); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap; }
.qe2-margin > span { color: var(--qe-ink-3); }
.qe2-margin > strong { color: var(--qe-ok-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.qe2-margin-note { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }

/* 5.10 Below 1100: the floating total bar and its summary sheet (with scrim). */
/* Below 1000 the total bar is docked flush to the bottom of the list (full editor width), never floating over a row. */
.qe2-bottom-bar { position: fixed; z-index: 90; bottom: 0; background: transparent; line-height: 0; }
.qe2-bottom-bar[hidden], .qe2-bottom-bar.qe2-bar-past { display: none !important; }
.qe2-bottom-bar > .qe2-totals { line-height: var(--qe-l-body); border-radius: 0; background: var(--qe-surface); box-shadow: 0 -1px 0 var(--qe-line); overflow: hidden; }
.qe2-bottom-bar > .qe2-totals.qe2-expanded { border-radius: var(--qe-r-2) var(--qe-r-2) 0 0; box-shadow: var(--qe-shadow-sheet); }
.qe2-bar-row { display: flex; align-items: center; gap: var(--qe-s-2); }
.qe2-bar-row > .qe2-bar-primary { flex: none; margin-right: var(--qe-s-3); min-height: 36px; }
@media (max-width: 699px) { .qe2-bar-row > .qe2-bar-primary { min-height: var(--qe-h-touch); } .qe2-bottom-bar .qe2-seg-mini > button { min-width: var(--qe-h-touch); min-height: var(--qe-h-touch); } }
.qe2-bottom-bar .qe2-expanded .qe2-bar-row { display: none; }
.qe2-bottom-bar .qe2-mobile-summary {
  display: flex; align-items: center; gap: var(--qe-s-3); flex: 1 1 auto; min-width: 0; width: 100%; height: 44px; padding: 0 var(--qe-s-4);
  border: 0; background: transparent; color: var(--qe-ink-3); font-size: var(--qe-t-body); text-align: left;
}
.qe2-ms-total { display: inline-flex; align-items: baseline; gap: var(--qe-s-2); }
.qe2-ms-total > strong { color: var(--qe-ink); font-size: var(--qe-t-row); font-variant-numeric: tabular-nums; }
.qe2-ms-margin { margin-left: auto; font-size: var(--qe-t-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qe2-mobile-summary .qe2-chev { color: var(--qe-icon); }
.qe2-bottom-bar .qe2-totals-body { display: none; }
.qe2-bottom-bar .qe2-expanded .qe2-mobile-summary { display: none; }
.qe2-bottom-bar .qe2-expanded .qe2-totals-body { display: flex; max-height: var(--qe2-sheet-height, calc(100dvh - 32px)); }
/* In a sheet the breakdown is the scroller and Subtotal / Tax / Total stay pinned: the total never leaves the screen. */
/* From 700 up the open summary is a 560px sheet on the right, the width of every other side sheet, not a full-width slab. */
@media (min-width: 700px) { .qe2-bottom-bar .qe2-totals.qe2-expanded { width: min(560px, 100%); margin-left: auto; } }
.qe2-bottom-bar .qe2-summary-scroll, .qe2-dock-summary .qe2-summary-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.qe2-scrim { position: fixed; inset: 0; z-index: 89; background: var(--qe-scrim); animation: qe2-fade var(--qe-fast) ease-out; }

/* 5.11 Customer preview docked beside the builder (≥1280). */
.qe2-docked-preview { display: none; }

/* ───────────── 6. Panels ───────────── */
/* Send. */
.qe2-send-intro { display: flex; align-items: center; gap: var(--qe-s-3); padding-bottom: var(--qe-s-4); margin-bottom: var(--qe-s-4); border-bottom: 1px solid var(--qe-hair); }
.qe2-send-intro > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qe2-send-intro > div > span { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); overflow-wrap: anywhere; }
.qe2-recipient-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--qe-r-2); background: var(--qe-tag); color: var(--qe-ink-2); font-size: var(--qe-t-meta); font-weight: 600; }
.qe2-send-settings { margin: var(--qe-s-4) 0; border-top: 1px solid var(--qe-hair); }
.qe2-send-settings > .qe2-check-row { justify-content: space-between; min-height: 40px; border-bottom: 1px solid var(--qe-hair); }
.qe2-send-settings > div.qe2-check-row > strong { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.qe2-followups { margin-bottom: var(--qe-s-4); }
.qe2-reminder-row { display: flex; align-items: center; gap: var(--qe-s-2); min-height: 40px; color: var(--qe-ink-2); }
.qe2-reminder-row .qe2-num-input { min-width: 40px; }
.qe2-reminder-row .qe2-delete { margin-left: auto; }
.qe2-reminder-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qe-s-2) var(--qe-s-3); margin-top: var(--qe-s-1); }
.qe2-reminder-foot .qe2-btn.qe2-text { margin-left: -8px; }
.qe2-reminder-limit { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-followup-stopped { color: var(--qe-ink-2); padding: var(--qe-s-1) 0; }
.qe2-pdf { display: flex; align-items: center; gap: var(--qe-s-3); margin-bottom: var(--qe-s-4); padding: var(--qe-s-3) var(--qe-s-4); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); }
.qe2-pdf > .qe2-icon:first-child { width: 20px; height: 20px; flex-basis: 20px; color: var(--qe-icon); }
.qe2-pdf > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qe2-pdf > div > span { display: block; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); overflow-wrap: anywhere; }
.qe2-sent-options > h2 { margin-bottom: var(--qe-s-1); }
.qe2-send-option { display: flex; align-items: center; gap: var(--qe-s-2); min-height: 40px; border-bottom: 1px solid var(--qe-hair); cursor: pointer; }
.qe2-send-option input { width: 16px; height: 16px; margin: 0; }
.qe2-send-option > span { flex: 1; display: inline-flex; align-items: center; gap: 6px; }
.qe2-send-option > span .qe2-icon { width: 14px; height: 14px; fill: currentColor; color: var(--qe-ink-2); }
.qe2-send-option > strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.qe2-send-feedback { margin-top: var(--qe-s-3); color: var(--qe-ink-2); }
.qe2-send-block { display: flex; align-items: center; gap: var(--qe-s-2); margin-bottom: var(--qe-s-2); padding: 2px 0; border-radius: 0; background: transparent; color: var(--qe-bad-ink);border:0;min-height:0;margin:2px 0 }
.qe2-send-block > span { flex: 1; min-width: 0; }
.qe2-send-block .qe2-btn.qe2-text { color: var(--qe-link); }
.qe2-send-totals { display: grid; gap: 2px; margin-bottom: var(--qe-s-2); }
.qe2-send-totals .qe2-send-total > span { display: inline-flex; align-items: center; gap: 6px; }
.qe2-send-totals .qe2-send-total > span .qe2-icon { width: 14px; height: 14px; fill: currentColor; }
.qe2-send-totals .qe2-send-total > strong { font-size: var(--qe-t-row); line-height: var(--qe-l-row); }
.qe2-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: var(--qe-s-3); }
.qe2-field-row .qe2-select { width: 100%; }
.qe2-sms { margin: 0; padding: var(--qe-s-3); border-radius: var(--qe-r-2); background: var(--qe-canvas); color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 400; }
.qe2-sigpad { display: block; width: 100%; height: 120px; border-radius: var(--qe-r-1); box-shadow: inset 0 0 0 1px var(--qe-field); background: var(--qe-surface); color: var(--qe-ink); touch-action: none; cursor: crosshair; }
.qe2-sig-foot { display: flex; align-items: center; justify-content: space-between; color: var(--qe-ink-3); font-weight: 400; }
.qe2-send-feedback:empty { display: none; }
.qe2-send-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--qe-s-3); }
.qe2-send-total > span { color: var(--qe-ink-2); }
.qe2-send-total > strong { font-size: var(--qe-t-title); line-height: var(--qe-l-title); font-variant-numeric: tabular-nums; }
.qe2-send-pinned .qe2-send-total { margin-bottom: var(--qe-s-2); }
.qe2-send-buttons { display: flex; justify-content: flex-end; gap: var(--qe-s-2); flex: none; }
/* The send footer is one line: what goes out ("2 options · up to $1,657.60") or what blocks it, then the buttons. */
.qe2-send-pinned { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qe-s-2) var(--qe-s-3); }
.qe2-send-sum { flex: 1 1 auto; min-width: 0; color: var(--qe-ink-2); font-variant-numeric: tabular-nums; }
.qe2-send-sum.qe2-send-blocked { display: inline-flex; align-items: center; gap: 6px; color: var(--qe-bad-ink); font-weight: 500; }
.qe2-send-sum .qe2-icon, .qe2-fix .qe2-icon { width: 14px; height: 14px; flex: 0 0 14px; }
/* Cc: address chips with validation and site-contact suggestions. */
.qe2-chipfield { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-1); min-height: var(--qe-h-control); padding: 3px 6px; box-sizing: border-box; border: 1px solid var(--qe-field); border-radius: var(--qe-r-1); background: var(--qe-surface); }
.qe2-chipfield:focus-within { outline: 2px solid var(--qe-focus); outline-offset: -1px; }
.qe2-layer .qe2-chipfield input { flex: 1 1 120px; min-width: 96px; height: 24px; min-height: 0; padding: 0 2px; border: 0; background: transparent; outline: none; font-size: var(--qe-t-body); }
.qe2-cc-chip { display: inline-flex; align-items: center; gap: 2px; padding-right: 0; }
.qe2-cc-chip > button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-icon); }
.qe2-cc-chip .qe2-icon { width: 12px; height: 12px; }
.qe2-cc-suggest { display: flex; flex-wrap: wrap; gap: var(--qe-s-1); margin-top: var(--qe-s-1); }
.qe2-sms-optout { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 400; }
.qe2-layer textarea { resize: vertical; overflow: hidden; }
.qe2-layer .qe2-send-total + .qe2-field { margin-top: var(--qe-s-4); }
.qe2-layer > .qe2-sheet .qe2-sheet-body > .qe2-send-total { margin: var(--qe-s-1) 0 var(--qe-s-4); padding: var(--qe-s-3) 0; border-top: 1px solid var(--qe-hair); border-bottom: 1px solid var(--qe-hair); }

/* Customer preview document. */
.qe2-preview-sheet .qe2-sheet-body { padding: 0; background: var(--qe-canvas); }
.qe2-preview-tools {
  position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qe-s-2) var(--qe-s-3);
  min-height: 44px; padding: 0 var(--qe-s-4); border-bottom: 1px solid var(--qe-hair); background: var(--qe-surface); color: var(--qe-ink-3); font-size: var(--qe-t-meta);
}
.qe2-preview-tools .qe2-check-row { font-size: var(--qe-t-meta); color: var(--qe-ink-2); }
.qe2-document { margin: var(--qe-s-4); padding: var(--qe-s-8); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); }
.qe2-doc-header { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-4); padding-bottom: var(--qe-s-4); border-bottom: 2px solid var(--qe-ink); }
.qe2-logo img { display: block; width: 140px; max-width: 100%; height: auto; }
.qe2-doc-header > div:last-child { text-align: right; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-doc-header > div:last-child > strong { display: block; color: var(--qe-ink); font-size: var(--qe-t-row); line-height: var(--qe-l-row); font-variant-numeric: tabular-nums; }
.qe2-doc-address { margin: var(--qe-s-5) 0; color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-doc-address > span { display: block; margin-bottom: var(--qe-s-1); color: var(--qe-ink-3); }
.qe2-doc-address > strong { display: block; color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
.qe2-document h1 { margin: 0 0 var(--qe-s-1); font-size: var(--qe-t-display); line-height: var(--qe-l-display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.qe2-document h2 { margin: var(--qe-s-6) 0 var(--qe-s-2); }
.qe2-doc-unit { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-doc-scope { color: var(--qe-ink-2); overflow-wrap: anywhere; }
.qe2-doc-approval { margin-top: var(--qe-s-6); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-doc-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qe-s-2); margin: var(--qe-s-2) 0 var(--qe-s-6); }
.qe2-doc-options button { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); text-align: left; }
.qe2-doc-options button.qe2-picked { border-color: var(--qe-ink); background: var(--qe-highlight); }
.qe2-doc-options span { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-doc-options strong { overflow-wrap: anywhere; }
.qe2-doc-options b { font-size: var(--qe-t-row); font-weight: 600; font-variant-numeric: tabular-nums; }
.qe2-doc-lines > div, .qe2-doc-price, .qe2-doc-optional { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--qe-s-4); padding: var(--qe-s-3) 0; border-bottom: 1px solid var(--qe-hair); }
.qe2-doc-lines > div > span { min-width: 0; overflow-wrap: anywhere; }
.qe2-doc-lines small { display: block; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-doc-lines strong, .qe2-doc-price strong { white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
.qe2-doc-optional small { display: block; margin-left: 24px; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-doc-off strong { color: var(--qe-ink-3); }
.qe2-line-photo { display: flex !important; align-items: center; gap: var(--qe-s-1); }
.qe2-line-photo .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; }
.qe2-doc-totals { max-width: 300px; margin: var(--qe-s-4) 0 var(--qe-s-6) auto; }
.qe2-doc-totals > div { display: flex; justify-content: space-between; gap: var(--qe-s-4); padding: 2px 0; color: var(--qe-ink-2); font-variant-numeric: tabular-nums; }
.qe2-doc-totals > .qe2-doc-grand { margin-top: var(--qe-s-2); padding-top: var(--qe-s-2); border-top: 1px solid var(--qe-line); color: var(--qe-ink); font-size: var(--qe-t-row); line-height: var(--qe-l-row); }
.qe2-photos-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--qe-s-4); }
.qe2-photos-preview .qe2-photo { cursor: default; }
.qe2-photos-preview .qe2-photo-image::after, .qe2-photos-preview .qe2-photo-image::before { content: none; display: none; }
.qe2-photos-preview figcaption { margin-top: var(--qe-s-1); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-doc-sign { display: flex; flex-direction: column; align-items: stretch; gap: var(--qe-s-2); margin-top: var(--qe-s-6); text-align: center; }
.qe2-doc-sign .qe2-btn { min-height: 40px; }
.qe2-doc-sign > span { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }

/* Keys, details, calendar, tax, start rows, gallery, approve, convert, sites. */
.qe2-key-list { display: grid; gap: 2px; }
.qe2-key-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-4); min-height: var(--qe-h-control); }
.qe2-keys { display: inline-flex; gap: var(--qe-s-1); }
.qe2-key-list > .qe2-key-syntax { flex-direction: column; align-items: flex-start; gap: var(--qe-s-2); margin-top: var(--qe-s-3); padding-top: var(--qe-s-3); border-top: 1px solid var(--qe-hair); }
.qe2-syntax { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.qe2-syntax code { padding: 0 6px; border-radius: var(--qe-r-1); background: var(--qe-tag); color: var(--qe-ink-2); font-family: var(--ds-font); font-size: var(--qe-t-meta); line-height: var(--qe-l-body); font-weight: 500; white-space: nowrap; }
.qe2-layer[data-panel="context"] .qe2-sheet-body { padding: var(--qe-s-3); }
.qe2-context-list { display: grid; gap: var(--qe-s-1); }
.qe2-context-list > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--qe-s-2); align-items: center; min-height: 24px; }
.qe2-context-list dt { color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.qe2-context-list dd { margin: 0; overflow-wrap: anywhere; }
.qe2-context-list a { display: inline-flex; align-items: center; min-height: 24px; color: var(--qe-ink); text-decoration: none; }
.qe2-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); padding: var(--qe-s-2) var(--qe-s-2) 0; }
.qe2-calendar-head > strong { font-weight: 600; }
.qe2-cal-nav { width: 32px; min-width: 32px; padding: 0; border-color: transparent; background: transparent; color: var(--qe-ink-2); }
.qe2-cal-nav .qe2-chev { width: 16px; height: 16px; flex-basis: 16px; }
.qe2-calendar-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 2px; padding: var(--qe-s-1) var(--qe-s-2) var(--qe-s-2); text-align: center; }
.qe2-calendar-grid > span { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: 24px; }
.qe2-calendar-grid button { position: relative; height: 32px; padding: 0; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink); font-variant-numeric: tabular-nums; }
.qe2-calendar-grid button[aria-pressed="true"] { background: var(--qe-action); color: var(--qe-on-action); font-weight: 600; }
.qe2-calendar-grid button[aria-current="date"]::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--qe-r-1); background: var(--qe-focus); }
.qe2-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); margin: 0 var(--qe-s-2) var(--qe-s-2); padding-top: var(--qe-s-2); border-top: 1px solid var(--qe-hair); color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.qe2-cal-foot .qe2-btn.qe2-text { color: var(--qe-link); min-height: 28px; margin-right: -8px; }
.qe2-layer .qe2-popover .qe2-tax-filter { flex: none; width: auto; margin: var(--qe-s-2) var(--qe-s-2) var(--qe-s-1); }
.qe2-tax-list { max-height: 296px; }
.qe2-tax-rate { min-width: 48px; text-align: right; }
.qe2-start-row.qe2-mi { min-height: 48px; }
.qe2-start-row .qe2-mi-trail kbd { min-width: 20px; }
.qe2-past-row:disabled .qe2-mi-text { color: var(--qe-ink-3); }
.qe2-layer .qe2-sheet-body > .qe2-field + .qe2-menu-list { margin: -8px -4px 0; }
.qe2-gallery-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qe-s-2) var(--qe-s-4); margin-bottom: var(--qe-s-3); color: var(--qe-ink-3); }
.qe2-inline-field { display: inline-flex; align-items: center; gap: var(--qe-s-2); color: var(--qe-ink-2); }
.qe2-gallery-grid .qe2-photos { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.qe2-layer[data-panel="photos"] .qe2-dialog { width: min(640px, calc(100% - 32px)); display: flex; flex-direction: column; }
.qe2-approve-options { display: grid; gap: var(--qe-s-2); margin: 0 0 var(--qe-s-4); padding: 0; border: 0; }
.qe2-approve-options legend { padding: 0 0 var(--qe-s-2); color: var(--qe-ink-2); font-size: var(--qe-t-meta); font-weight: 500; }
.qe2-radio-row { display: flex; align-items: center; gap: var(--qe-s-2); min-height: 40px; padding: 0 var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); cursor: pointer; }
.qe2-radio-row:has(input:checked) { border-color: var(--qe-ink); background: var(--qe-highlight); }
.qe2-radio-row > span { flex: 1; min-width: 0; }
.qe2-radio-row > strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.qe2-convert-summary { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--qe-s-2); }
.qe2-convert-summary > strong { font-size: var(--qe-t-row); }
.qe2-convert-summary > span { color: var(--qe-ink-2); font-variant-numeric: tabular-nums; }
.qe2-layer .qe2-past-list, .qe2-layer [data-template-list] { max-height: min(400px, 52dvh); }
.qe2-site-list { max-height: 240px; margin: -8px 0 var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); }
.qe2-layer [data-panel-feedback]:not(:empty), .qe2-layer [data-send-feedback]:not(:empty) { margin-top: var(--qe-s-3); color: var(--qe-ink-2); }

/* Parts book drawer: one inset, no nested borders, the editor's chips and buttons, one "Add" verb. */
.qe2-book-unit { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--qe-s-1) var(--qe-s-3); margin-bottom: var(--qe-s-4); }
.qe2-book-unit > span { color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.qe2-book-kits:empty { display: none; }
.qe2-book-kits { margin-bottom: var(--qe-s-6); }
.qe2-book-kits-head { display: flex; align-items: center; gap: var(--qe-s-2); min-height: 32px; padding-bottom: var(--qe-s-1); cursor: pointer; list-style: none; }
.qe2-book-kits-head::-webkit-details-marker { display: none; }
.qe2-book-kits-head .qe2-chev { color: var(--qe-icon); margin-left: auto; }
.qe2-book-kits-fold[open] .qe2-book-kits-head .qe2-chev { transform: rotate(180deg); }
/* "+N" is the chip component (white, 1px edge), not a tag. */
.qe2-chip-count { display: inline-flex; flex: none; align-items: center; justify-content: center; height: var(--qe-h-control); min-width: 40px; padding: 0 var(--qe-s-2); border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 500; }
.qe2-chip-count[hidden] { display: none; }
.qe2-sheet-header > .pb-pdf { margin-left: auto; min-height: 32px; text-decoration: none; }
.qe2-book-kits-head span { color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.qe2-kit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--qe-s-4); min-height: var(--qe-h-row); padding: 6px var(--qe-s-2) 6px 0; border-top: 1px solid var(--qe-hair); }
.qe2-kit-row:last-child { border-bottom: 1px solid var(--qe-hair); }
.qe2-kit-text { display: flex; flex-direction: column; min-width: 0; }
.qe2-kit-text strong { font-weight: 500; }
.qe2-kit-text small { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-kit-row > b { font-weight: 500; font-variant-numeric: tabular-nums; }
.qe2-book-add { min-height: 28px; }
.qe2-book-mount { min-width: 0; }
.qe2-book-mount .pb-book { padding: 0; background: transparent; color: var(--qe-ink); font-family: var(--ds-font); font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
.qe2-book-mount .pb-book-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--qe-s-2) var(--qe-s-4); margin-bottom: var(--qe-s-4); }
.qe2-book-mount .pb-title { margin: 0; font-family: var(--ds-font); font-size: var(--qe-t-row); line-height: var(--qe-l-row); font-weight: 600; letter-spacing: normal; color: var(--qe-ink); }
.qe2-book-mount .pb-meta { margin: 0; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-book-mount .pb-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 var(--qe-s-3); border: 1px solid var(--qe-field); border-radius: var(--qe-r-1);
  background: var(--qe-surface); color: var(--qe-ink); font-family: var(--ds-font); font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.qe2-book-mount .pb-button:disabled { color: var(--qe-ink-3); background: var(--qe-surface); }
.qe2-book-mount .pb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2); }
/* Search, filters and the column head stay on screen while the parts scroll. */
/* Only the search (56px band) and the column head (32px) stay pinned: 88px, not the whole filter block. The filters and the
   "Showing…" line scroll away with the parts. The search box sits before the toolbar (moved in polishBook) so it can stick for the whole book. */
.qe2-book-mount .pb-toolbar { margin-top: var(--qe-s-2); }
.qe2-book-mount .pb-table thead th { position: sticky; top: calc(var(--qe2-pb-tool, 56px) - var(--qe-s-6)); z-index: 2; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--qe-line); }
.qe2-pb-search { position: sticky; top: calc(-1 * var(--qe-s-6)); z-index: 3; display: flex; align-items: center; margin: 0 calc(-1 * var(--qe-s-6)); padding: var(--qe-s-2) var(--qe-s-6); background: var(--qe-surface); }
.qe2-pb-search > .pb-search { flex: 1 1 auto; width: auto; }
.qe2-pb-search > .qe2-icon { position: absolute; left: calc(var(--qe-s-6) + var(--qe-s-3)); color: var(--qe-icon); pointer-events: none; }
.qe2-book-mount .qe2-pb-search .pb-search { height: var(--qe-h-bar); padding-left: 36px; font-size: var(--qe-t-row); }
.qe2-book-mount .qe2-th-narrow { width: 1%; }

.qe2-more-hint { position: sticky; bottom: calc(-1 * var(--qe-s-6)); display: flex; justify-content: center; margin: 0 calc(-1 * var(--qe-s-6)) calc(-1 * var(--qe-s-6)); padding: var(--qe-s-2); border-top: 1px solid var(--qe-hair); background: var(--qe-surface); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-price-note { color: var(--qe-ink-2); }
.qe2-book-mount .pb-search { flex: 1 1 100%; width: 100%; height: var(--qe-h-control); padding: 0 var(--qe-s-3); border: 1px solid var(--qe-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink); font-size: var(--qe-t-body); }
.qe2-book-mount .pb-search::placeholder { color: var(--qe-ink-3); }
/* The filters are one segmented track: the selected class is the white raised segment. */
.qe2-book-mount .pb-chips { display: flex; flex-wrap: wrap; gap: 0; padding: var(--qe-s-1); border-radius: var(--qe-r-2); background: var(--qe-canvas); }
.qe2-book-mount .pb-chip.qe2-chip { min-height: 0; height: 28px; padding: 4px var(--qe-s-3); border: 1px solid transparent; border-radius: var(--qe-r-1); font-size: var(--qe-t-body); line-height: var(--qe-l-body); background: transparent; color: var(--qe-ink-2); font-weight: 500; }

.qe2-book-mount .qe2-book-toggle { margin-left: 0; padding: 0; border: 0; background: transparent; color: var(--qe-link); font-weight: 500; }
.qe2-book-mount .pb-match, .qe2-book-mount .pb-add-error { margin: var(--qe-s-3) 0 0; color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-book-mount .pb-add-error { color: var(--qe-bad-ink); }
.qe2-book-mount .pb-table-scroll { margin-top: var(--qe-s-4); overflow: visible; }
.qe2-book-mount .pb-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: auto; }
.qe2-book-mount .pb-table thead th {
  height: var(--qe-h-head); padding: 0 var(--qe-s-2); border-bottom: 1px solid var(--qe-line); background: var(--qe-surface); color: var(--qe-ink-3);
  font-size: var(--qe-t-caps); line-height: var(--qe-l-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; text-align: left;
}
.qe2-book-mount .pb-table thead th.pb-number, .qe2-book-mount .pb-table .pb-number { text-align: right; }
.qe2-book-mount .pb-table thead th small, .qe2-book-mount .pb-table thead th .pb-sr-only { display: none; }
.qe2-book-mount .pb-table td { padding: var(--qe-s-2); border-bottom: 1px solid var(--qe-hair); color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body); vertical-align: middle; }
.qe2-book-mount .pb-table .pb-section th { height: 40px; padding: var(--qe-s-3) var(--qe-s-2) var(--qe-s-1); border-bottom: 1px solid var(--qe-hair); background: transparent; color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 600; vertical-align: bottom; }
.qe2-book-mount .pb-section span { margin-left: var(--qe-s-1); color: var(--qe-ink-3); font-weight: 400; }
.qe2-book-mount .pb-call { color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
.qe2-book-mount .pb-description { min-width: 180px; width: 30%; }
.qe2-book-mount .pb-catalogue-name { display: block; margin: 0; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-book-mount .pb-part-no { font-family: var(--ds-font); color: var(--qe-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qe2-book-mount .pb-fits { color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-book-mount .pb-link { color: var(--qe-link); text-decoration: none; }
.qe2-book-mount .pb-or, .qe2-book-mount .pb-muted { color: var(--qe-ink-3); }
.qe2-book-mount .pb-sell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.qe2-book-mount td:nth-child(5) { font-variant-numeric: tabular-nums; color: var(--qe-ink-2); }
.qe2-book-mount .pb-row-action { width: 1%; white-space: nowrap; text-align: right; }
.qe2-book-mount .pb-quote-tag.qe2-tag, .qe2-book-mount .pb-tag.qe2-tag { display: inline-flex; margin: var(--qe-s-1) var(--qe-s-1) 0 0; }
/* "On quote ×N @ $X" sits on its own line under the part's name, never against it. */
.qe2-book-mount .pb-quote-tag.qe2-tag { display: flex; width: max-content; max-width: 100%; margin: var(--qe-s-1) 0 0; }
.qe2-book-mount .pb-row.pb-highlight { background: var(--qe-highlight); box-shadow: none; }
.qe2-book-fits summary { display: inline-flex; align-items: center; gap: var(--qe-s-1); min-height: 24px; cursor: pointer; list-style: none; color: var(--qe-ink-2); }
.qe2-book-fits summary::-webkit-details-marker { display: none; }
.qe2-book-fits[open] summary .qe2-chev { transform: rotate(180deg); }
.qe2-book-fits > div { display: grid; gap: 2px; padding-top: var(--qe-s-1); }
.qe2-book-fits a { display: inline-flex; align-items: center; min-height: 24px; }

/* ───────────── 7. Hover (pointer devices only) ───────────── */
@media (hover: hover) {
  .qe2-btn:hover:not(:disabled) { background: var(--qe-hover); }
  .qe2-btn.qe2-primary:hover:not(:disabled) { background: var(--qe-action-hover); }
  .qe2-btn.qe2-text:hover:not(:disabled) { color: var(--qe-ink); }
  .qe2-choice:hover:not(:disabled), .qe2-tax-trigger:hover, .qe2-more-toggle:hover, .qe2-more-trigger:hover, .qe2-scope-edit:hover, .qe2-book-toggle:hover,
  .qe2-cc-name:hover, .qe2-format button:hover, .qe2-delete:hover, .qe2-drag:hover, .qe2-affix-choice:hover, .qe2-cal-nav:hover { background: var(--qe-hover); color: var(--qe-ink); }
  .qe2-tag-btn:hover > .qe2-tag { box-shadow: inset 0 0 0 1px var(--qe-line); color: var(--qe-ink); }
  .qe2-chip:hover:not([aria-pressed="true"]):not(.pb-active) { background: var(--qe-hover); }
  .qe2-option:not(.qe2-active):hover { background: var(--qe-tag); color: var(--qe-ink); }
  .qe2-line:hover { background: var(--qe-hover); }
  .qe2-line.qe2-selected:hover { background: var(--qe-highlight); }
  .qe2-line:hover .qe2-drag { opacity: 1; }
  .qe2-row-controls:hover .qe2-tick { opacity: 1; }
  .qe2-row-controls:hover .qe2-drag { opacity: 0; }
  .qe2-line:hover .qe2-cell input:not(:focus), .qe2-num-input:hover:not(:focus) { border-color: var(--qe-line); background: var(--qe-surface); }
  .qe2-header h1:hover { background: var(--qe-hover); }
  .qe2-select:hover { background: var(--qe-hover); }
  .qe2-seg button:hover:not([aria-checked="true"]) { color: var(--qe-ink); }
  .qe2-calendar-grid button:hover:not([aria-pressed="true"]) { background: var(--qe-hover); }
  .qe2-doc-options button:hover:not(.qe2-picked) { background: var(--qe-hover); }
  .qe2-radio-row:hover:not(:has(input:checked)) { background: var(--qe-hover); }
  .qe2-toast button:hover { color: var(--qe-on-action); }
  .qe2-book-hint button:hover, .qe2-mobile-book-hint button:hover, .qe2-context-list a:hover, .qe2-meta-site:hover, .qe2-book-mount .pb-link:hover { text-decoration: underline; }
  .qe2-book-mount .pb-button:hover:not(:disabled) { background: var(--qe-hover); }
  .qe2-book-mount .pb-openable:hover { background: var(--qe-hover); }
  .qe2-mobile-summary:hover { background: var(--qe-hover); }
  .qe2-photo:hover .qe2-photo-image::after { box-shadow: inset 0 0 0 1px var(--qe-ink); }
}

/* ───────────── 8. Widths ───────────── */
/* ≥1000: the customer preview docks beside the builder (the editor narrows); the summary folds into the preview column. */
@media (min-width: 1000px) {
  .qe2-root.qe2-show-preview .qe2-canvas { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 42%, 600px); column-gap: var(--qe-s-6); align-items: start; }
  .qe2-root.qe2-show-preview .qe2-canvas > :not(.qe2-workspace):not(.qe2-docked-preview) { grid-column: 1 / -1; }
  .qe2-root.qe2-show-preview .qe2-workspace { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
  .qe2-root.qe2-show-preview .qe2-workspace > .qe2-totals { display: none; }
  .qe2-root.qe2-show-preview .qe2-docked-preview {
    grid-column: 2; display: flex; flex-direction: column; gap: var(--qe-s-2); position: sticky; top: var(--qe-s-4);
    max-height: calc(var(--qe2-scroller-height, 100dvh) - 32px); min-height: 0;
  }
  .qe2-root.qe2-show-preview { --qe2-columns: var(--qe2-gut) minmax(140px, 1fr) 48px 84px 84px 84px 96px 32px; --qe2-colgap: 6px; }
  .qe2-dock-summary { flex: none; overflow: hidden; border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); }
  .qe2-dock-summary .qe2-mobile-summary { display: flex; align-items: center; gap: var(--qe-s-3); width: 100%; height: 44px; padding: 0 var(--qe-s-4); border: 0; background: transparent; color: var(--qe-ink-3); text-align: left; }
  .qe2-dock-summary .qe2-totals-body { display: none; }
  .qe2-dock-summary.qe2-expanded .qe2-mobile-summary { display: none; }
  .qe2-dock-summary.qe2-expanded .qe2-totals-body { display: flex; max-height: min(480px, calc(var(--qe2-scroller-height, 100dvh) - 160px)); }
  .qe2-dock-doc { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; border-radius: var(--qe-r-2); background: var(--qe-canvas); }
  .qe2-dock-doc .qe2-document { margin: var(--qe-s-3); padding: var(--qe-s-6); }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .qe2-root.qe2-show-preview { --qe2-columns: var(--qe2-gut) minmax(100px, 1fr) 40px 70px 66px 74px 84px 28px; --qe2-colgap: 4px; }
  .qe2-root.qe2-show-preview .qe2-dock-doc .qe2-document { margin: var(--qe-s-2); padding: var(--qe-s-4); }
}
/* Quick add widths: two even rows of five (inline at ≥1280, name over price below); compact wrapping chips under 600. */
@media (min-width: 1280px) {
  /* Ten chips at their real names and prices need ~1,320px; beside the rail at 1280 there are 928, so they sit in two even rows of five. */
  .qe2-root:not(.qe2-show-preview) .qe2-quick-button.qe2-chip { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 6px; min-height: 0; height: var(--qe-h-control); padding: 6px var(--qe-s-3); }
  .qe2-root:not(.qe2-show-preview) .qe2-quick-button > span, .qe2-root:not(.qe2-show-preview) .qe2-quick-button > strong { line-height: var(--qe-l-body); }
  .qe2-root:not(.qe2-show-preview) .qe2-quick-button > span { font-weight: 400; }
}
.qe2-quick-wrap { position: relative; }
.qe2-quick-more, .qe2-quick-book, .qe2-summary-short { display: none; }
/* Under 600: one horizontal row that scrolls (wheel too), a half-chip peek and an edge fade, and a "+N" chip that opens all ten in a sheet. */
@media (max-width: 599px) {
  .qe2-quick-wrap { display: flex; align-items: center; gap: var(--qe-s-1); margin: var(--qe-s-1) 0 var(--qe-s-2); }
  .qe2-quick-wrap > .qe2-quick { display: flex; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; margin: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .qe2-quick-wrap > .qe2-quick::-webkit-scrollbar { display: none; }
  .qe2-quick-wrap > .qe2-quick.qe2-more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .qe2-quick-wrap > .qe2-quick > .qe2-quick-button.qe2-chip { flex: 0 0 auto; scroll-snap-align: start; }
  .qe2-quick-wrap > .qe2-quick { scroll-snap-type: x mandatory; }
  .qe2-quick-button.qe2-peek { pointer-events: none; }
  /* The unit's parts book leads the phone row (the header keeps status and other quotes on one line). */
  .qe2-quick-book { display: inline-flex; flex: none; align-items: center; gap: 6px; height: var(--qe-h-touch); padding: 0 var(--qe-s-2); font-size: var(--qe-t-meta); font-weight: 500; }
  .qe2-quick-book .qe2-icon { width: 14px; height: 14px; }
  .qe2-header .qe2-unit { display: none; }
  .qe2-scope-summary > p:not(.qe2-summary-short) { display: none; }
  .qe2-scope-summary > .qe2-summary-short { display: block; }
  .qe2-quick-more:not([hidden]) { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: var(--qe-h-touch); height: var(--qe-h-touch); padding: 0 var(--qe-s-2); font-weight: 500; color: var(--qe-ink); }
}
/* Short screens (≤800 tall, rail showing): tighter vertical rhythm so the first open shows every line of the reference quote. */
@media (max-height: 800px) and (min-width: 1000px) {
  .qe2-canvas { padding-top: var(--qe-s-1); }
  .qe2-header { margin-bottom: var(--qe-s-2); row-gap: 0; }
  .qe2-quick { margin-top: 0; }
  .qe2-option-row { margin-bottom: var(--qe-s-2); }
  .qe2-scope-section { margin-bottom: 0; }
  .qe2-table-head { margin-top: var(--qe-s-1); }
  /* The rail already lists Parts, Labour and Fees; on short screens the groups are separated by a rule instead of a label row. */
  .qe2-group-head { display: none; }
  .qe2-group + .qe2-group { border-top: 1px solid var(--qe-line); }
  .qe2-builder { margin-top: 0; }
  .qe2-command { padding-top: var(--qe-s-1); padding-bottom: var(--qe-s-1); }
  /* The summary card is whole on first open at 1440×700: its rows, header and total block take a little less height. */
  .qe2-workspace > .qe2-totals .qe2-summary-header { min-height: 36px; }
  .qe2-workspace > .qe2-totals .qe2-summary-scroll { padding-top: var(--qe-s-1); padding-bottom: var(--qe-s-1); }
  .qe2-workspace > .qe2-totals .qe2-total-row, .qe2-workspace > .qe2-totals .qe2-money-row { min-height: 28px; }
  .qe2-workspace > .qe2-totals .qe2-summary-pinned { padding-bottom: var(--qe-s-3); }
}
/* <1000: the rail becomes the docked total bar; the editor clears it. 1000–1279 keeps the rail with compact columns. */
@media (max-width: 1279px) {
  .qe2-root { --qe2-columns: var(--qe2-gut) minmax(150px, 1fr) 48px 88px 84px 88px 96px 32px; --qe2-colgap: 6px; }
  .qe2-root { --qe-rail: 264px; }
}
@media (max-width: 999px) {
  .qe2-workspace { grid-template-columns: minmax(0, 1fr); }
  .qe2-workspace > .qe2-totals { display: none; }
  .qe2-meta-site { display: none; }
}
/* <1100: the option meta (approval, client view, cost centre) folds into the option ⋯ menu, so the option row is one line. */
@media (max-width: 1099px) {
  .qe2-option-meta > .qe2-choice { display: none; }
}
@container qe (max-width: 799px) {
  .qe2-header { grid-template-columns: minmax(0, 1fr); }
  .qe2-header-actions { grid-column: 1; grid-row: 3; }
}

/* <700 (phone and narrow panel): one compact header, the option picker, chips by whole chip, line cards, 44px targets. */
@container qe (max-width: 699px) {
  .qe2-canvas { --qe-gutter: 16px; padding-top: var(--qe-s-3); }
  /* Phone header: status and the actions on one line, then other quotes · details · unit on the next. */
  .qe2-header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; column-gap: var(--qe-s-2); margin-bottom: var(--qe-s-1); }
  .qe2-title-row { display: contents; }
  .qe2-title-row { display: flex; grid-column: 1; grid-row: 1; flex-wrap: wrap; gap: 0 var(--qe-s-2); }
  .qe2-header-chips { display: contents; }
/* The status menu: a colour dot and the label (the full Simpro colour lives on the one badge). */

  .qe2-header-chips > .qe2-tag-btn { min-height: var(--qe-h-touch); }
  .qe2-header-chips > .qe2-timeline, .qe2-header-chips > .qe2-reminders, .qe2-header-chips > .qe2-version-note { flex-basis: 100%; }
  .qe2-title-row > .qe2-sync, .qe2-title-row > .qe2-restored { display: none; }
  .qe2-title-row > .qe2-sync.qe2-sync-stale { display: block; flex-basis: 100%; margin-left: 0; text-align: left; }
  .qe2-header-actions { grid-column: 2; grid-row: 1; }
  .qe2-actionrow { gap: var(--qe-s-1); }
  .qe2-actionrow > [data-action="start"], .qe2-actionrow > [data-action="preview"], .qe2-actionrow > [data-primary] { display: none; }
  .qe2-actionrow .qe2-btn { min-height: var(--qe-h-touch); }
  .qe2-actionrow .qe2-menu-anchor > .qe2-btn { width: var(--qe-h-touch); padding: 0; border-color: transparent; }
  .qe2-search-wrap > .qe2-tag-btn, .qe2-title-row > .qe2-tag-btn { min-height: var(--qe-h-touch); }
  .qe2-overlap-long { display: none; }
  .qe2-overlap-short { display: inline; }
  .qe2-option-row { flex-wrap: nowrap; gap: var(--qe-s-2); margin-bottom: var(--qe-s-2); }
  .qe2-options, .qe2-addoption { display: none; }
  .qe2-option-picker {
    flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--qe-s-2);
    min-height: var(--qe-h-touch); padding: 3px var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); text-align: left;
  }
  .qe2-option-picker > .qe2-option-name { grid-column: 1; grid-row: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
  .qe2-picker-meta { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
  .qe2-picker-meta > strong { color: var(--qe-ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
  .qe2-option-picker > .qe2-chev { grid-column: 2; grid-row: 1 / 3; color: var(--qe-icon); }
  .qe2-comparison { display: none; }
  .qe2-option-meta { flex: none; margin-left: 0; }
  .qe2-option-meta > .qe2-icon-btn { width: var(--qe-h-touch); height: var(--qe-h-touch); margin: 0; }
  .qe2-scope-section { margin-bottom: var(--qe-s-2); }
  .qe2-scope-summary { align-items: center; }
  .qe2-scope-summary > p { font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
  .qe2-scope-summary > .qe2-scope-edit, .qe2-scope-warn > .qe2-choice { min-height: var(--qe-h-touch); margin-top: -6px; margin-bottom: -6px; }
  .qe2-scope-body > .qe2-section-head .qe2-btn, .qe2-format button, .qe2-draft .qe2-btn, .qe2-banner .qe2-btn, .qe2-bulk .qe2-btn { min-height: var(--qe-h-touch); min-width: var(--qe-h-touch); }
  .qe2-bulk .qe2-affix-input { height: var(--qe-h-touch); }
  .qe2-bulk { flex-wrap: nowrap; gap: var(--qe-s-2); padding: var(--qe-s-1) var(--qe-s-2); flex-wrap: wrap; }
  .qe2-bulk-actions { flex-wrap: nowrap; gap: 0; }
  .qe2-bulk .qe2-btn-label { display: none; }
  .qe2-bulk-actions .qe2-btn.qe2-text { width: var(--qe-h-touch); padding: 0; }
  .qe2-bulk .qe2-affix-input input { width: 44px; height: calc(100% + 2px); margin: -1px 0; }
  /* On a phone the scope editor opens as a full sheet on a scrim. */
  .qe2-scope-body { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500; max-height: 88dvh; display: flex; flex-direction: column; border: 0; border-radius: var(--qe-r-2) var(--qe-r-2) 0 0; background: var(--qe-surface); box-shadow: 0 0 0 100vmax var(--qe-scrim), var(--qe-shadow-sheet); }
  .qe2-scope-body > .qe2-scope { flex: 1 1 auto; overflow-y: auto; min-height: 120px; }
  .qe2-search-wrap { height: var(--qe-h-touch); }
  .qe2-ghost { display: none; }
  .qe2-results { max-height: 55dvh; }
  .qe2-result-line1 { flex-wrap: nowrap; font-size: var(--qe-t-body); }
  .qe2-result-line1 > .qe2-result-pn { display: none; }
  .qe2-result-pn2 { display: inline; white-space: nowrap; }
  .qe2-quick { gap: var(--qe-s-1); margin: var(--qe-s-1) 0 var(--qe-s-2); }
  .qe2-quick-button.qe2-chip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: var(--qe-h-touch); padding: 0 var(--qe-s-2); white-space: normal; }
  .qe2-quick-button > span, .qe2-quick-button > strong { font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap; }
  .qe2-quick-button > span { color: var(--qe-ink); font-weight: 500; }
  .qe2-builder { margin-top: 0; }
  .qe2-table-head { display: none; }
  .qe2-group-head { display: none; }
  .qe2-cc-head { padding-right: 0; }
  .qe2-line {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) 44px; grid-template-rows: auto auto; row-gap: 0; column-gap: var(--qe-s-2);
    min-height: 0; margin: 0 0 var(--qe-s-2); padding: var(--qe-s-2) var(--qe-s-1) var(--qe-s-3) var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2);
  }
  /* Cards: no hanging gutter (the card edge is the column edge). */
  .qe2-line { margin-left: 0; }
  .qe2-line.qe2-selected, .qe2-line.qe2-selected:hover { box-shadow: none; }
  .qe2-line.qe2-has-gutter { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) 44px; padding-left: 0; }
  .qe2-line.qe2-internal-open { grid-template-rows: auto auto auto; }
  .qe2-row-controls { display: none; }
  .qe2-has-gutter .qe2-row-controls { display: flex; grid-column: 1; grid-row: 1; height: 44px; justify-content: center; }
  .qe2-has-gutter .qe2-drag { display: none; }
  .qe2-tick { width: 44px; height: 44px; margin: 0; opacity: 1; }
  .qe2-tick input { width: 20px; height: 20px; }
  .qe2-line-name { grid-column: 1 / 4; grid-row: 1; padding: 0; }
  .qe2-has-gutter .qe2-line-name { grid-column: 2 / 5; }
  .qe2-row-menu-anchor { grid-column: -2 / -1; grid-row: 1; height: 36px; align-items: flex-start; }
  .qe2-row-menu-anchor > .qe2-delete { margin-top: -8px; }
  .qe2-delete { width: 44px; height: 44px; }
  .qe2-mobile-book-hint { display: inline; }
  .qe2-mobile-book-hint .qe2-mobile-use { min-height: 44px; margin: -14px -4px; }
  .qe2-cell { height: 36px; text-align: left; }
  .qe2-cell input { height: 44px; margin: -4px 0; text-align: right; border-color: transparent; padding: 0 var(--qe-s-2); }
  .qe2-cell-qty { grid-column: 1; grid-row: 2; } .qe2-cell-sell { grid-column: 2; grid-row: 2; }
  .qe2-has-gutter .qe2-cell-qty { grid-column: 2; } .qe2-has-gutter .qe2-cell-sell { grid-column: 3; }
  .qe2-cell-qty input { margin-left: -8px; width: calc(100% + 8px); }
  /* Qty and sell sit 8px apart with the "×" in its own 16px column. */
  .qe2-cell-sell { padding-left: 16px; }
  .qe2-needs-price .qe2-cell-sell input { height: 36px; margin-top: 0; margin-bottom: 0;border-color:var(--qe-field);background:var(--qe-surface) }
  .qe2-cell-qty input::after { content: none; }
  .qe2-cell-sell::before { content: '×'; position: absolute; left: 0; width: 16px; top: 8px; text-align: center; color: var(--qe-ink-3); }
  .qe2-cell-sell .qe2-book-hint, .qe2-cell-sell .qe2-price-needed { display: none; }
  .qe2-cell-error, .qe2-price-needed { position: static; grid-column: 1 / -1; text-align: left; }
  .qe2-cell:has(.qe2-cell-error) { height: auto; }
  .qe2-line-total { grid-column: 3; grid-row: 2; align-self: center; padding-right: 0; }
  .qe2-has-gutter .qe2-line-total { grid-column: 4; }
  .qe2-line-total::before { content: '= '; color: var(--qe-ink-3); font-weight: 400; }
  .qe2-internal-toggle {
    grid-column: 4; grid-row: 2; display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 44px; height: 44px; margin: -4px 0; padding: 0;
    border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-3); font-size: var(--qe-t-meta);
  }
  .qe2-has-gutter .qe2-internal-toggle { grid-column: 5; }
  .qe2-has-neg .qe2-internal-toggle { color: var(--qe-ink-3); }
  .qe2-cell-cost, .qe2-cell-markup { display: none; grid-row: 3; align-items: center; gap: var(--qe-s-2); }
  .qe2-internal-open .qe2-cell-cost, .qe2-internal-open .qe2-cell-markup { display: flex; }
  .qe2-cell-cost { grid-column: 1 / 3; } .qe2-cell-markup { grid-column: 3 / 5; }
  .qe2-has-gutter .qe2-cell-cost { grid-column: 2 / 4; } .qe2-has-gutter .qe2-cell-markup { grid-column: 4 / 6; }
  .qe2-cell-cost > span, .qe2-cell-markup > span { display: block; flex: none; color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
  .qe2-cell-cost input, .qe2-cell-markup input { flex: 1 1 auto; border-color: var(--qe-line); }
  .qe2-neg-icon { left: auto; right: 8px; top: 14px; }
  .qe2-no-cost { display: none !important; }
  .qe2-mobile-use { display: inline-flex; align-items: center; min-height: 24px; margin: -4px -4px; padding: 0 4px; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-link); font-size: inherit; font-weight: 500; }
  .qe2-line { row-gap: var(--qe-s-1); }
  .qe2-line-name > strong { font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
  .qe2-row-menu-anchor > .qe2-delete { margin: -8px 0 0; }
  .qe2-command { padding-top: var(--qe-s-1); padding-bottom: var(--qe-s-1); }
  .qe2-cell-qty input, .qe2-cell-sell input { border-color: var(--qe-line); }
  .qe2-include { min-height: 44px; margin: -10px 0; }
  .qe2-include input { width: 20px; height: 20px; }
  .qe2-addline-footer { gap: 0 var(--qe-s-3); padding-left: 0; }
  .qe2-addline-footer .qe2-btn.qe2-text { min-height: var(--qe-h-touch); }
  .qe2-cc-name { min-height: var(--qe-h-touch); }
  .qe2-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qe2-photos-section > .qe2-section-head .qe2-btn { min-height: var(--qe-h-touch); }
  .qe2-check-row { min-height: var(--qe-h-touch); }
  .qe2-check-row input[type="checkbox"]:not(.qe2-switch) { width: 20px; height: 20px; }
}
/* 560–699 (the 600 panel): a line card is one row — name, qty, × sell, = total, Cost, ⋯ — so three or more show on open. */
@container qe (min-width: 560px) and (max-width: 699px) {
  .qe2-line { grid-template-columns: minmax(0, 1fr) 44px 92px 88px 44px 44px; grid-template-rows: auto; align-items: center; column-gap: var(--qe-s-2); padding: 4px 4px 4px var(--qe-s-3); }
  .qe2-line.qe2-internal-open { grid-template-rows: auto auto; }
  .qe2-line.qe2-has-gutter { grid-template-columns: 44px minmax(0, 1fr) 44px 92px 88px 44px 44px; }
  .qe2-line-name, .qe2-has-gutter .qe2-line-name { grid-column: 1; grid-row: 1; }
  .qe2-has-gutter .qe2-line-name { grid-column: 2; }
  .qe2-cell-qty { grid-column: 2; grid-row: 1; } .qe2-cell-sell { grid-column: 3; grid-row: 1; }
  .qe2-has-gutter .qe2-cell-qty { grid-column: 3; } .qe2-has-gutter .qe2-cell-sell { grid-column: 4; }
  .qe2-cell { height: 36px; }
  .qe2-cell-qty input { margin-left: 0; width: 100%; }
  .qe2-line-total { grid-column: 4; grid-row: 1; text-align: right; }
  .qe2-has-gutter .qe2-line-total { grid-column: 5; }
  .qe2-internal-toggle { grid-column: 5; grid-row: 1; margin: 0; }
  .qe2-has-gutter .qe2-internal-toggle { grid-column: 6; }
  .qe2-row-menu-anchor { grid-column: 6; grid-row: 1; height: 44px; align-items: center; }
  .qe2-has-gutter .qe2-row-menu-anchor { grid-column: 7; }
  .qe2-row-menu-anchor > .qe2-delete { margin: 0; }
  .qe2-cell-cost, .qe2-cell-markup { grid-row: 2; }
  .qe2-cell-cost { grid-column: 1 / 3; } .qe2-cell-markup { grid-column: 3 / 7; }
  .qe2-has-gutter .qe2-cell-cost { grid-column: 2 / 4; } .qe2-has-gutter .qe2-cell-markup { grid-column: 4 / 8; }
}
/* Phone layers: every dialog and sheet is a bottom sheet with a scrim; 48px menu rows; 44px controls. */
@media (max-width: 699px) {
  /* Menus too: a bottom sheet sized to its content, with its title and a close button. */
  .qe2-layer .qe2-sheet.qe2-popover.qe2-psheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88dvh; border-radius: var(--qe-r-2) var(--qe-r-2) 0 0; box-shadow: var(--qe-shadow-sheet); animation: qe2-sheet-up 160ms var(--qe-ease); }
  .qe2-psheet-layer > .qe2-backdrop { background: var(--qe-scrim); }
  .qe2-psheet > .qe2-sheet-header { display: flex; padding: var(--qe-s-2) var(--qe-s-2) var(--qe-s-2) var(--qe-s-4); }
  .qe2-psheet > .qe2-sheet-body { padding: var(--qe-s-1) 0 var(--qe-s-2); }
  .qe2-psheet .qe2-menu-list { overflow-y: auto; overscroll-behavior: contain; }
  .qe2-psheet .qe2-tax-filter { margin: var(--qe-s-2) var(--qe-s-4); width: calc(100% - 2 * var(--qe-s-4)); }
  .qe2-layer .qe2-sheet:not(.qe2-popover), .qe2-layer .qe2-bottom-sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88dvh; transform: none; border-radius: var(--qe-r-2) var(--qe-r-2) 0 0; animation: qe2-sheet-up 160ms var(--qe-ease);
  }
  .qe2-layer .qe2-book-sheet:not(.qe2-popover), .qe2-layer .qe2-preview-sheet:not(.qe2-popover), .qe2-layer[data-panel="send"] .qe2-sheet { top: 0; max-height: none; border-radius: 0; }
  .qe2-sheet-header { padding: var(--qe-s-2) var(--qe-s-2) var(--qe-s-2) var(--qe-s-4); }
  .qe2-sheet-body { padding: var(--qe-s-4); }
  .qe2-dialog-footer, .qe2-send-pinned { padding: var(--qe-s-3) var(--qe-s-4); }
  .qe2-sheet-header > .qe2-btn:not(.pb-pdf), .qe2-layer .qe2-icon-btn, .qe2-cal-nav { width: var(--qe-h-touch); min-width: var(--qe-h-touch); min-height: var(--qe-h-touch); }
  .qe2-layer .qe2-btn, .qe2-layer .qe2-select, .qe2-layer .qe2-input, .qe2-layer .qe2-field input, .qe2-layer .qe2-tax-filter, .qe2-layer .qe2-affix-input,
  .qe2-layer .qe2-reminder-row input, .qe2-layer .qe2-delete, .qe2-layer .qe2-seg button, .qe2-layer .qe2-book-mount .pb-button, .qe2-layer .qe2-book-mount .pb-search,
  .qe2-layer .qe2-book-mount .pb-chip.qe2-chip, .qe2-layer .qe2-choice, .qe2-layer .qe2-book-fits summary, .qe2-layer .qe2-book-fits a, .qe2-layer .qe2-context-list a,
  .qe2-layer .qe2-toast button { min-height: var(--qe-h-touch); }
  .qe2-layer .qe2-book-mount .pb-chip.qe2-chip, .qe2-layer .qe2-reminder-row input, .qe2-layer .qe2-input, .qe2-layer .qe2-tax-filter { height: var(--qe-h-touch); }
  .qe2-layer .qe2-delete { width: var(--qe-h-touch); }
  .qe2-layer .qe2-btn { min-width: var(--qe-h-touch); }
  .qe2-layer .qe2-mi, .qe2-layer .qe2-start-row.qe2-mi { min-height: 48px; }
  .qe2-layer .qe2-check-row, .qe2-layer .qe2-radio-row, .qe2-layer .qe2-send-option, .qe2-layer .qe2-send-settings > .qe2-check-row { min-height: var(--qe-h-touch); }
  .qe2-layer .qe2-check-row input[type="checkbox"]:not(.qe2-switch), .qe2-layer .qe2-radio-row input, .qe2-layer .qe2-send-option input { width: 20px; height: 20px; }
  .qe2-layer .qe2-calendar-grid { grid-template-columns: repeat(7, 44px); }
  .qe2-layer .qe2-calendar-grid button { height: 44px; }
  .qe2-layer .qe2-context-list a { margin: -10px 0; }
  .qe2-layer .qe2-photo-image input { width: 44px; height: 44px; }
  .qe2-layer .qe2-doc-sign .qe2-btn, .qe2-layer .qe2-pdf .qe2-btn, .qe2-layer .qe2-preview-tools .qe2-btn, .qe2-layer .qe2-preview-tools .qe2-check-row { min-height: var(--qe-h-touch); }
  .qe2-layer .qe2-kit-row { gap: var(--qe-s-3); }
  .qe2-layer .qe2-book-kits-head { min-height: var(--qe-h-touch); }
  .qe2-book-mount .pb-toolbar { flex-wrap: nowrap; }
  .qe2-book-mount .pb-search { flex: 0 0 auto; width: 100%; }
  .qe2-book-mount .qe2-pb-search { top: calc(-1 * var(--qe-s-4)); margin: 0 calc(-1 * var(--qe-s-4)); padding: var(--qe-s-2) var(--qe-s-4); }
  .qe2-book-mount .qe2-pb-search > .qe2-icon { left: calc(var(--qe-s-4) + var(--qe-s-3)); }
  .qe2-book-mount .qe2-pb-search .pb-search { height: var(--qe-h-touch); }
  .qe2-more-hint { bottom: calc(-1 * var(--qe-s-4)); margin: 0 calc(-1 * var(--qe-s-4)) calc(-1 * var(--qe-s-4)); }
  .qe2-book-mount .pb-toolbar { flex-wrap: wrap; }
  .qe2-book-mount .pb-chips { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .qe2-book-mount .pb-chips::-webkit-scrollbar { display: none; }
  .qe2-book-mount .pb-chips > * { flex: none; scroll-snap-align: start; }
  .qe2-book-mount .pb-chips.qe2-more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .qe2-book-mount .pb-book-head { margin-bottom: var(--qe-s-2); }
  .qe2-book-unit { margin-bottom: var(--qe-s-2); }
  .qe2-book-kits { margin-bottom: var(--qe-s-3); }
  .qe2-sheet-header > .pb-pdf { min-height: var(--qe-h-touch); }
  .qe2-book-mount .qe2-book-toggle { flex-basis: 100%; justify-content: flex-start; min-height: var(--qe-h-touch); }
  .qe2-document { margin: var(--qe-s-2); padding: var(--qe-s-4); }
  .qe2-doc-options { grid-template-columns: 1fr; }
  .qe2-bottom-bar .qe2-mobile-summary { height: 44px; }
  .qe2-bottom-bar .qe2-total-row, .qe2-bottom-bar .qe2-more-row { min-height: var(--qe-h-touch); }
  .qe2-bottom-bar .qe2-choice, .qe2-bottom-bar .qe2-tax-trigger, .qe2-bottom-bar .qe2-more-toggle, .qe2-bottom-bar .qe2-money-field, .qe2-bottom-bar .qe2-affix-field,
  .qe2-bottom-bar .qe2-summary-header .qe2-btn { min-height: var(--qe-h-touch); }
  .qe2-bottom-bar .qe2-summary-header .qe2-btn { width: var(--qe-h-touch); }
  .qe2-bottom-bar .qe2-affix-field { height: var(--qe-h-touch); }
  .qe2-bottom-bar .qe2-money-field { min-width: var(--qe-h-touch); height: var(--qe-h-touch); }
  .qe2-bottom-bar .qe2-money-field input { height: 100%; min-width: var(--qe-h-touch); }
  .qe2-bottom-bar .qe2-affix-field > input, .qe2-bottom-bar .qe2-affix-field > button { height: calc(100% + 2px); margin: -1px 0; min-width: var(--qe-h-touch); }
  /* Phone number fields: the same field with a quiet outline (no hover on touch), 44 high. */
  .qe2-bottom-bar .qe2-num-input, .qe2-layer .qe2-num-input { height: var(--qe-h-touch); min-width: 64px; border-color: var(--qe-line); }
  .qe2-layer .qe2-chipfield { min-height: var(--qe-h-touch); padding: 9px 6px; }
  .qe2-layer .qe2-chipfield input { min-height: 0; height: 24px; }
}
/* Parts book below 900: rows become cards. */
@media (max-width: 899px) {
  .qe2-book-mount .pb-table, .qe2-book-mount .pb-table tbody { display: block; width: 100%; }
  .qe2-book-mount .pb-table thead { display: none; }
  .qe2-book-mount .pb-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--qe-s-3); padding: var(--qe-s-3) 0; border-bottom: 1px solid var(--qe-hair); }
  .qe2-book-mount .pb-table td, .qe2-book-mount .pb-table th { display: block; min-width: 0; width: auto; padding: 0; border: 0; }
  .qe2-book-mount .pb-description { grid-column: 1 / -1; grid-row: 1; }
  .qe2-book-mount .pb-part-no { grid-column: 1; grid-row: 2; }
  .qe2-book-mount .pb-fits { grid-column: 1; grid-row: 3; }
  .qe2-book-mount .pb-sell { grid-column: 2; grid-row: 2; text-align: right; }
  .qe2-book-mount .pb-call { grid-column: 1; grid-row: 4; }
  .qe2-book-mount td:nth-child(5) { grid-column: 1; grid-row: 5; text-align: left; }
  .qe2-book-mount td:nth-child(5):not(:empty)::after { content: ' quoted · 12 mo'; color: var(--qe-ink-3); }
  .qe2-book-mount .pb-row-action { grid-column: 2; grid-row: 3 / 6; align-self: end; width: auto; }
  .qe2-book-mount .pb-table .pb-section { display: block; padding: var(--qe-s-3) 0 0; border-bottom: 0; }
  .qe2-book-mount .pb-table .pb-section th { height: auto; padding: 0; }
  .qe2-book-mount .pb-table td[colspan] { grid-column: 1 / -1; }
}

/* Parts book under 700: two-line rows; the added row's tint has inner padding. */
@media (max-width: 699px) {
  .qe2-book-mount .pb-table tr:not(.pb-section) { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--qe-s-2); padding: var(--qe-s-2) 64px var(--qe-s-2) var(--qe-s-2); }
  .qe2-book-mount .pb-table tr:not(.pb-section)::after { content: ''; order: 5; flex-basis: 100%; height: 0; }
  .qe2-book-mount .pb-call { order: 1; }
  .qe2-book-mount .pb-description { order: 2; flex: 1 1 0; min-width: 0; width: auto; }
  .qe2-book-mount .pb-sell { order: 3; text-align: right; }
  .qe2-book-mount .pb-part-no { order: 6; font-size: var(--qe-t-meta); }
  .qe2-book-mount .pb-fits { order: 7; }
  .qe2-book-mount td:nth-child(5) { order: 8; font-size: var(--qe-t-meta); }
  .qe2-book-mount td:nth-child(5):empty { display: none; }
  .qe2-book-mount .pb-row-action { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .qe2-book-mount .pb-catalogue-name { display: none; }
  .qe2-book-mount .pb-row.pb-highlight { border-radius: var(--qe-r-1); }
}

/* ───────────── 9. Motion and print ───────────── */
@media (prefers-reduced-motion: reduce) {
  .qe2-root *, .qe2-layer *, .qe2-toast, .qe2-scrim { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body:has(.qe2-layer[data-panel="pdf"]) > * { visibility: hidden; }
  body:has(.qe2-layer[data-panel="pdf"]) .qe2-layer[data-panel="pdf"], .qe2-layer[data-panel="pdf"] * { visibility: visible; }
  .qe2-layer[data-panel="pdf"] { position: absolute; inset: 0; display: block; background: var(--qe-surface); }
  .qe2-layer[data-panel="pdf"] .qe2-sheet { position: static; width: 100%; height: auto; max-height: none; transform: none; overflow: visible; box-shadow: none; }
  .qe2-layer[data-panel="pdf"] .qe2-sheet-body { overflow: visible; padding: 0; }
  .qe2-layer[data-panel="pdf"] .qe2-document { margin: 0; padding: 0; border: 0; }
  .qe2-layer[data-panel="pdf"] .qe2-backdrop, .qe2-layer[data-panel="pdf"] .qe2-sheet-header, .qe2-layer[data-panel="pdf"] .qe2-preview-tools, .qe2-layer[data-panel="pdf"] button { display: none; }
}

/* ───────────── Round 11 ───────────── */
/* Save state: one slot, the derived note (may wrap) then "Draft saved · just now" (never wraps). */
.qe2-sync { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 var(--qe-s-2); }
.qe2-sync.qe2-sync-stale { white-space: normal; color: var(--qe-ink-3); font-weight: 400; }
.qe2-sync-note { color: var(--qe-ink-2); font-weight: 500; }
.qe2-sync-note.qe2-sync-warn { color: var(--qe-ink-3); }
.qe2-sync-save { white-space: nowrap; }
/* The quote's identity: shown whenever the list row is not on the first screen (and always on a phone). */
.qe2-identity { display: none; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--qe-s-3); margin: 0 0 var(--qe-s-2); font-size: var(--qe-t-body); line-height: var(--qe-l-body); color: var(--qe-ink); }
.qe2-identity-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.qe2-identity > .qe2-sync-id { display: none; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); color: var(--qe-ink-3); }
.qe2-root.qe2-id-on .qe2-identity { display: flex; }
@container qe (max-width: 699px) {
  .qe2-identity { display: flex; margin-bottom: 0; }
  .qe2-identity > .qe2-sync-id { display: inline-flex; }
  .qe2-title-row > .qe2-sync, .qe2-title-row > .qe2-sync.qe2-sync-stale { display: none; }
  .qe2-details-word { display: none; }
}
.qe2-form-note { display: block; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); color: var(--qe-ink-3); }
.qe2-deposit-msg:empty { display: none; }
/* Money rows: label | % $ | value | amount, one grid for the discount, reserve and deposit (summary, sheet and Send). */
.qe2-money-row, .qe2-more-rows > .qe2-money-row, .qe2-deposit-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 52px 80px; grid-template-areas: "label seg value amount";
  align-items: center; column-gap: var(--qe-s-1); min-height: var(--qe-h-control); white-space: nowrap;
}
.qe2-more-rows > .qe2-money-row { grid-column: 1 / -1; }
.qe2-more-rows > .qe2-field-error-slot { grid-column: 1 / -1; }
:is(.qe2-money-row, .qe2-deposit-row) > .qe2-mr-label { grid-area: label; min-width: 0; color: var(--qe-ink-2); }
:is(.qe2-money-row, .qe2-deposit-row) > .qe2-seg-mini { grid-area: seg; justify-self: start; margin: 0; }
:is(.qe2-money-row, .qe2-deposit-row) > .qe2-mr-value { grid-area: value; justify-self: end; text-align: right; }
:is(.qe2-money-row, .qe2-deposit-row) > .qe2-mr-amount { grid-area: amount; justify-self: end; text-align: right; }
.qe2-mr-input { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 0; }
.qe2-root .qe2-mr-input > .qe2-num-input, .qe2-layer .qe2-mr-input > .qe2-num-input { margin-right: -7px; min-width: 48px; }
.qe2-mr-sign { color: var(--qe-ink); margin-right: 1px; }
.qe2-deposit-row > .qe2-deposit-sum { color: var(--qe-ink); font-weight: 600; }
.qe2-deposit-row > .qe2-mr-value.qe2-deposit-sum { color: var(--qe-ink-3); font-weight: 400; }
.qe2-layer .qe2-deposit-row { grid-template-columns: minmax(0, 1fr) auto 64px 96px; padding: 0; }
/* Valid until and Payment: the chevron ends on the money edge, never past it. */
.qe2-more-control > .qe2-choice { margin-right: 0; }
@container qe (max-width: 699px) {
  .qe2-money-row, .qe2-more-rows > .qe2-money-row { min-height: var(--qe-h-touch); grid-template-columns: minmax(0, 1fr) auto 64px 88px; }
}
@media (max-width: 699px) {
  .qe2-layer .qe2-deposit-row { min-height: var(--qe-h-touch); }
  .qe2-layer .qe2-deposit-row .qe2-seg-mini > button { min-width: var(--qe-h-touch); min-height: var(--qe-h-touch); }
}
@media (max-width: 419px) {
  .qe2-layer .qe2-deposit-row { grid-template-columns: auto minmax(0, 1fr) 96px; grid-template-areas: "label label label" "seg value amount"; row-gap: var(--qe-s-1); padding-bottom: var(--qe-s-2); }
}
.qe2-star-slot { display: inline-flex; flex: none; width: 16px; margin-right: var(--qe-s-1); vertical-align: -3px; }
.qe2-star-slot > .qe2-icon { width: 14px; height: 14px; }
.qe2-banner > span { text-wrap: pretty; }
/* The phone quick-add row ends on a whole chip and "+N" is its cue: no fade over a chip's price. */
@media (max-width: 599px) {
  .qe2-quick-wrap > .qe2-quick.qe2-more-r { -webkit-mask-image: none; mask-image: none; }
}
.qe2-sync-bar { display: none; }
@media (max-width: 699px) {
  /* Phone bar: "Total $X" over "Margin 29.0% · Draft saved · just now", so the save state is always on screen. */
  .qe2-bottom-bar .qe2-mobile-summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: 20px 16px; align-content: center; column-gap: var(--qe-s-2); row-gap: 2px; padding: 0 var(--qe-s-3) 0 var(--qe-s-4); }
  .qe2-bottom-bar .qe2-ms-total { grid-column: 1 / 4; grid-row: 1; }
  .qe2-bottom-bar .qe2-ms-margin { grid-column: 1; grid-row: 2; margin: 0; line-height: 16px; }
  .qe2-bottom-bar .qe2-sync-bar { display: inline-flex; grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; gap: 0 var(--qe-s-2); margin: 0; font-size: var(--qe-t-meta); line-height: 16px; color: var(--qe-ink-3); white-space: nowrap; overflow: visible; }
  .qe2-bottom-bar .qe2-sync-bar::before { content: '·'; }
  .qe2-bottom-bar .qe2-sync-bar > .qe2-sync-note { display: none; }
  .qe2-bottom-bar .qe2-mobile-summary > .qe2-chev { grid-column: 4; grid-row: 1 / 3; }
}
/* Phone first screen: the identity line, then status · other quotes · details, the option picker (with the scope summary),
   the add bar, quick add, and line cards of about 84px — three full cards above the bar. */
@container qe (max-width: 699px) {
  .qe2-canvas { padding-top: var(--qe-s-2); }
  .qe2-identity { min-height: 20px; margin-bottom: 2px; }
  .qe2-header { margin-bottom: var(--qe-s-1); }
  .qe2-scope-summary { display: none; }
  .qe2-picker-meta { flex-wrap: wrap; column-gap: var(--qe-s-2); row-gap: 0; }
  .qe2-picker-meta > .qe2-picker-count { display: none; }
  .qe2-picker-meta > .qe2-picker-scope::before, .qe2-picker-meta > .qe2-scope-flag::before { content: none; }
  .qe2-scope-flag:not([hidden]) ~ .qe2-picker-scope { display: none; }
  .qe2-picker-meta > .qe2-scope-flag { height: 16px; padding: 0; }
  .qe2-scope-section { margin-bottom: 0; }
  .qe2-scope-warn-slot:not(:empty) { margin-bottom: var(--qe-s-1); }
  .qe2-quick-wrap { margin: var(--qe-s-2) 0; }
  .qe2-line { padding: 4px 4px 4px var(--qe-s-3); row-gap: 2px; margin-bottom: var(--qe-s-2); }
  .qe2-line-name > strong { line-height: 18px; }
  .qe2-partno { line-height: 16px; }
  .qe2-cell { height: 36px; }
  .qe2-cell input { margin: -4px 0; }
  .qe2-row-menu-anchor { height: 32px; }
  .qe2-row-menu-anchor > .qe2-delete { margin: -6px 0 0; }
}
@container qe (max-width: 559px) {
  /* The scope warning on a phone lives in the option picker ("Scope differs") and its ⋯ menu ("Review scope update"). */
  [data-scope-warn] { display: none; }
}
@container qe (max-width: 699px) { .qe2-line { min-height: var(--qe2-card-min, 0px); align-content: start; } }
/* Every rule in the editor starts at the content edge (24): the table head and line rules are drawn from there, while the row's
   hover and selected fills stay full-bleed under the hanging gutter. The select tick sits inside the gutter. */
.qe2-table-head, .qe2-line { border-bottom: 0; }
.qe2-table-head::after, .qe2-line::after { content: ''; position: absolute; left: calc(var(--qe2-gut) + var(--qe2-colgap)); right: 0; bottom: 0; height: 1px; background: var(--qe-hair); pointer-events: none; }
.qe2-table-head::after { background: var(--qe-line); }
.qe2-tick { margin: -2px 0; width: calc(var(--qe2-gut) + var(--qe2-colgap)); justify-content: flex-start; padding-left: 0; }
.qe2-row-controls { width: calc(var(--qe2-gut) + var(--qe2-colgap)); }
@container qe (max-width: 699px) { .qe2-line::after { content: none; } .qe2-tick { width: 44px; justify-content: center; } .qe2-row-controls { width: auto; } }
/* One fixed label column, so every % | $ control starts on the same x ("Surcharge" is the longest label). */
.qe2-money-row, .qe2-more-rows > .qe2-money-row { grid-template-columns: 66px auto minmax(0, 1fr) 72px; }
@container qe (max-width: 699px) { .qe2-money-row, .qe2-more-rows > .qe2-money-row { grid-template-columns: 72px auto minmax(0, 1fr) 88px; } }
.qe2-root .qe2-mr-input > .qe2-num-input, .qe2-layer .qe2-mr-input > .qe2-num-input { min-width: 32px; }
.qe2-tick { width: 24px; margin-left: calc(var(--qe2-gut) + var(--qe2-colgap) - 24px); }
@container qe (max-width: 699px) {
  .qe2-more-trigger { min-width: var(--qe-h-touch); justify-content: center; }
  .qe2-line { row-gap: 4px; }
  .qe2-tick { margin: 0; width: 44px; }
}
@container qe (max-width: 559px) {
  .qe2-line { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 1.15fr) 44px; }
  .qe2-line.qe2-has-gutter { grid-template-columns: 44px minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 1.15fr) 44px; }
}
/* Short laptops (the rail taller than the view): the rail stays pinned with its header and action on top and Subtotal / Tax /
   Total at the bottom; only the breakdown between them scrolls, ending between rows with a fade while more is below. */
@media (min-width: 1000px) {
  .qe2-workspace > .qe2-totals.qe2-rail-tall { position: sticky; top: var(--qe-s-4); display: flex; flex-direction: column; max-height: calc(var(--qe2-scroller-height, 100dvh) - 40px); overflow: hidden; }
  .qe2-workspace > .qe2-totals.qe2-rail-tall > .qe2-totals-body { flex: 1 1 auto; min-height: 0; }
  .qe2-workspace > .qe2-totals.qe2-rail-tall .qe2-summary-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .qe2-workspace > .qe2-totals.qe2-rail-tall .qe2-summary-pinned { position: static; box-shadow: none; }
}
/* Phone: the derived note shows under the identity; the save state lives in the bar. */
.qe2-identity > .qe2-sync-id > .qe2-sync-save { display: none; }
.qe2-identity > .qe2-sync-id:not(.qe2-sync-stale) { display: none !important; }
@container qe (max-width: 699px) { .qe2-identity > .qe2-sync-id.qe2-sync-stale { display: inline-flex; flex-basis: 100%; justify-content: flex-start; } }
/* A long tax name wraps; the amount stays on the money edge. */
.qe2-total-row[data-total="tax"] { white-space: normal; align-items: flex-start; }
.qe2-total-row[data-total="tax"] > .qe2-tax-trigger { min-width: 0; text-align: left; white-space: normal; }
.qe2-total-row[data-total="tax"] > .qe2-total-value { flex: none; }
.qe2-root .qe2-link-btn, .qe2-layer .qe2-link-btn { display: inline-flex; align-items: center; min-height: 24px; margin: -4px 0; padding: 0; border: 0; background: transparent; color: var(--qe-link); }
/* The "N more below" line sits after the list (the fade is the cue), so it never covers a row. */
.qe2-more-hint { position: static; }
@media (max-width: 599px) { .qe2-book-mount .pb-chips.qe2-more-r { -webkit-mask-image: none; mask-image: none; } }
@container qe (max-width: 699px) { .qe2-root .qe2-mr-input > .qe2-num-input { min-width: 48px; } }
@media (max-width: 699px) { .qe2-bottom-bar .qe2-mr-input > .qe2-num-input { min-width: 48px; } }
@container qe (max-width: 559px) {
  .qe2-line { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.45fr) minmax(0, 1.1fr) 44px; }
  .qe2-line.qe2-has-gutter { grid-template-columns: 44px minmax(0, 0.7fr) minmax(0, 1.45fr) minmax(0, 1.1fr) 44px; }
}

/* B13 layout A1: the open quote owns its identity, actions and working space. */
.lbody:has(.qe2-root) [data-qrow][aria-expanded="true"],
.quotes-queue:has(.qe2-root) > .quote-listhead { display: none !important; }
.qe2-root :is(h1, h2, h3), .qe2-layer :is(h1, h2, h3) { font-family: var(--ds-font); }
.qe2-part-code, .qe2-result-pn, .qe2-result-pn2 { font-family: var(--ds-mono); color: var(--qe-ink-3); }
.qe2-root .qe2-identity { display: flex; align-items: center; gap: var(--qe-s-2); margin-bottom: var(--qe-s-2); }
.qe2-identity-title { flex: 1 1 auto; font-size: var(--qe-t-sheet); line-height: var(--qe-l-sheet); }
.qe2-identity-total { flex: none; color: var(--qe-ink-3); font-size: var(--qe-t-body); }
.qe2-identity-total strong { color: var(--qe-ink); font-variant-numeric: tabular-nums; }
.qe2-root .qe2-identity > .qe2-sync-id { display: inline-flex !important; }
.qe2-identity > .qe2-sync-id > .qe2-sync-save { display: inline; }
.qe2-back { display: inline-flex; align-items: center; justify-content: center; width: var(--qe-h-control); height: var(--qe-h-control); padding: 0; }
.qe2-phone-send { display: none; }
.qe2-root .qe2-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2); margin-bottom: var(--qe-s-2); }
.qe2-header > .qe2-option-row { flex: 1 1 auto; min-width: 0; margin: 0; gap: var(--qe-s-1); }
.qe2-header > .qe2-heading { flex: 0 1 auto; min-width: 0; }
.qe2-header .qe2-title-row { gap: var(--qe-s-1); }
.qe2-header .qe2-title-row > .qe2-sync { display: none; }
.qe2-header .qe2-option-meta { margin-left: 0; }
.qe2-header .qe2-option-meta > .qe2-choice { display: none; }
.qe2-header-actions { align-self: center; }
.qe2-header .qe2-option { padding: 0 var(--qe-s-2); }
.qe2-header .qe2-option-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.qe2-header .qe2-overlap-long { display: none; }
.qe2-header .qe2-overlap-short { display: inline; }
.qe2-header .qe2-details-word { display: none; }
.qe2-header .qe2-actionrow > [data-action="start"] { width: var(--qe-h-control); padding: 0; }
.qe2-header [data-action="start"] .qe2-action-label { display: none; }
.qe2-header .qe2-comparison { flex-basis: 100%; }
.qe2-root .qe2-quick-wrap { display: flex; align-items: center; gap: var(--qe-s-2); margin: var(--qe-s-2) 0; }
.qe2-root .qe2-quick-wrap > .qe2-quick { flex: 1 1 auto; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Round 2: recover space above the lines while retaining full control heights. */
@media (min-width: 600px) {
  .qe2-root .qe2-identity, .qe2-root .qe2-header { margin-bottom: var(--qe-s-1); }
  .qe2-root .qe2-quick-wrap { margin: var(--qe-s-1) 0; }
  .qe2-root .qe2-table-head { height: var(--qe-s-6); margin-top: var(--qe-s-1); }
}
.qe2-quick-more:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: var(--qe-h-control); height: var(--qe-h-control); padding: 0 var(--qe-s-2); }
.qe2-dock-tabs { display: flex; align-items: center; gap: var(--qe-s-1); padding: var(--qe-s-1); background: var(--qe-canvas); border-radius: var(--qe-r-2); }
.qe2-dock-tabs .qe2-btn { border-color: transparent; background: transparent; }
.qe2-dock-tabs .qe2-active { border-color: var(--qe-line); background: var(--qe-surface); color: var(--qe-ink); font-weight: 500; }
.qe2-dock-tabs > :last-child { margin-left: auto; }
.qe2-tech-notes { padding: var(--qe-s-4); background: var(--qe-surface); }
.qe2-tech-notes > * + * { margin-top: var(--qe-s-3); }
.qe2-tech-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.qe2-tech-notes .qe2-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qe2-tech-notes .qe2-photo-image { aspect-ratio: 4 / 3; }
@media (min-width: 1000px) {
  .qe2-header .qe2-title-row > .qe2-unit { display: inline-flex; }
  .qe2-header .qe2-unit-long { display: none; }
  .qe2-header .qe2-unit-short { display: inline; }
  .qe2-header .qe2-actionrow > [data-action="preview"], .qe2-header .qe2-actionrow > [data-action="technotes"] { width: var(--qe-h-control); padding: 0; }
  .qe2-header [data-action="preview"] .qe2-action-label, .qe2-header [data-action="technotes"] .qe2-action-label { display: none; }
}
@media (max-width: 999px) and (min-width: 600px) {
  .qe2-header > .qe2-option-row { flex-basis: 100%; }
}
@media (max-width: 599px) {
  /* The list scroller becomes the phone workspace; closing removes every scoped shell override. */
  body:has(.qe2-root) .top,
  .quotes-queue:has(.qe2-root) > :not(.lbody):not(.q375-scrim):not(.q375-dialog):not(.q375-sheet):not(.q375-toast) { display: none !important; }
  .quotes-queue .lbody:has(.qe2-root) { position: fixed !important; inset: 0 !important; z-index: 80; width: 100%; height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: auto !important; background: var(--qe-surface); }
  .lbody:has(.qe2-root) > :not(:has(.qe2-root)) { display: none !important; }
  .lbody:has(.qe2-root) .quote-page { margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
  .qe2-root .qe2-canvas { padding-top: var(--qe-s-1); }
  .qe2-root .qe2-identity { flex-wrap: nowrap; gap: var(--qe-s-1); margin-bottom: 0; }
  .qe2-root .qe2-back { display: inline-flex; width: var(--qe-h-touch); min-width: var(--qe-h-touch); height: var(--qe-h-touch); padding: 0; justify-content: center; }
  .qe2-identity-title { font-size: var(--qe-t-row); line-height: var(--qe-l-row); }
  .qe2-identity-total, .qe2-root .qe2-identity > .qe2-sync-id { display: none !important; }
  .qe2-root .qe2-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--qe-s-1); margin-bottom: var(--qe-s-1); }
  .qe2-header > .qe2-heading { grid-column: 1; grid-row: 1; }
  .qe2-header > .qe2-header-actions { grid-column: 2; grid-row: 1; }
  .qe2-header > .qe2-option-row { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .qe2-header .qe2-title-row { flex-wrap: wrap; gap: 0; }
  .qe2-header .qe2-overlap-chip { display: none; }
  .qe2-header .qe2-actionrow > [data-action="preview"], .qe2-header .qe2-phone-send { display: inline-flex; align-items: center; justify-content: center; width: var(--qe-h-touch); height: var(--qe-h-touch); padding: 0; border-color: transparent; }
  .qe2-header .qe2-actionrow > [data-action="technotes"] { display: none; }
  .qe2-header [data-action="preview"] .qe2-action-label { display: none; }
  .qe2-header .qe2-option-picker { padding-top: 0; padding-bottom: 0; }
  .qe2-header .qe2-option-picker .qe2-option-name { max-width: none; }
  .qe2-header .qe2-picker-meta { flex-wrap: nowrap; }
  .qe2-root .qe2-quick-wrap { gap: var(--qe-s-1); margin: var(--qe-s-1) 0 var(--qe-s-2); }
  .qe2-root .qe2-quick-more:not([hidden]) { min-width: var(--qe-h-touch); height: var(--qe-h-touch); }
  .qe2-root .qe2-line { margin-bottom: var(--qe-s-1); }
}

@media (min-width: 700px) {
  .qe2-scope-summary > p:not(.qe2-summary-short) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .qe2-command { padding-top: var(--qe-s-1); padding-bottom: var(--qe-s-1); }
  .qe2-table-head { margin-top: var(--qe-s-2); }
}

@media (min-width: 700px) and (max-width: 1279px) {
  .qe2-root { --qe2-columns: var(--qe2-gut) minmax(100px, 1fr) 40px 70px 66px 74px 84px 28px; --qe2-colgap: 4px; }
}
@media (max-width: 599px) {
  .qe2-root .qe2-identity:has(.qe2-sync-stale) { flex-wrap: wrap; }
  .qe2-root .qe2-identity > .qe2-sync-id.qe2-sync-stale { display: inline-flex !important; flex-basis: 100%; justify-content: flex-start; }
  .qe2-identity > .qe2-sync-id > .qe2-sync-save { display: none; }
}


/* C · Pricing details stay with the line and the payment split stays under Total. */
.qe2-line-warning {
  grid-column: 2 / -1; grid-row: 2; margin-top: var(--qe-s-2); color: var(--qe-ink-3);
  font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); overflow-wrap: anywhere;
}
.qe2-line-warning[hidden] { display: none; }
.qe2-line-warning .qe2-link-btn { border-radius: var(--qe-r-1); font: inherit; }
.qe2-line-margin {
  display: block; margin-top: var(--qe-s-2); padding-right: var(--qe-s-2); color: var(--qe-ink-3);
  font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap;
}
.qe2-cell-markup:has(.qe2-line-margin) { height: auto; min-height: 40px; }
.qe2-cell-margin { color: var(--qe-ink-3); font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-variant-numeric: tabular-nums; }
.qe2-cell-margin small { font: inherit; }
.qe2-cell-sell > .qe2-price-source {
  position: absolute; left: var(--qe-s-1); top: var(--qe-s-1); display: inline-flex; color: var(--qe-ink-3);
  border-radius: var(--qe-r-1);
}
.qe2-price-source .qe2-icon { width: 12px; height: 12px; flex: 0 0 12px; }
.qe2-cell-sell:has(.qe2-price-source) input { padding-left: var(--qe-s-5); }
.qe2-deposit-sums:empty { display: none; }
.qe2-deposit-sums { margin: var(--qe-s-2) 0; }
.qe2-deposit-sums .qe2-total-row { align-items: baseline; white-space: normal; gap: var(--qe-s-2); }
.qe2-deposit-sums .qe2-total-label { font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-deposit-sums .qe2-total-value { flex: none; font-size: var(--qe-t-body); }
@container qe (min-width: 700px) {
  .qe2-show-margin .qe2-builder { --qe2-colgap: var(--qe-s-1); }
  .qe2-show-margin .qe2-table-head, .qe2-show-margin .qe2-line {
    grid-template-columns: var(--qe2-gut) minmax(0, 1fr) 40px 72px 64px 76px 88px 96px 32px;
    column-gap: var(--qe-s-1);
  }
  .qe2-show-margin .qe2-cell-margin { grid-column: 6; padding-right: var(--qe-s-2); }
  .qe2-show-margin .qe2-cell-sell { grid-column: 7; }
  .qe2-show-margin .qe2-line-total { grid-column: 8; }
  .qe2-show-margin .qe2-row-menu-anchor { grid-column: 9; }
  .qe2-show-margin .qe2-th-sell, .qe2-show-margin .qe2-th-margin { text-align: right; padding-right: var(--qe-s-2); }
}
@media (max-width: 1279px) {
  @container qe (min-width: 700px) {
    .qe2-show-margin .qe2-table-head, .qe2-show-margin .qe2-line {
      grid-template-columns: var(--qe2-gut) minmax(0, 1fr) 36px 64px 58px 72px 76px 84px 32px;
    }
  }
}
@container qe (max-width: 699px) {
  .qe2-line-warning { grid-column: 1 / -1; grid-row: 5; margin: 0; padding-right: var(--qe-s-2); }
  .qe2-line-warning .qe2-link-btn { min-height: var(--qe-h-touch); }
  .qe2-cell-sell .qe2-price-source { left: var(--qe-s-5); top: var(--qe-s-3); }
  .qe2-cell-sell:has(.qe2-price-source) input { padding-left: var(--qe-s-5); }
  .qe2-cell-markup:has(.qe2-line-margin) { flex-wrap: wrap; }
  .qe2-cell-markup .qe2-line-margin { flex: 1 0 100%; margin-top: 0; text-align: right; }
  .qe2-cell-margin { grid-column: 1 / -1; grid-row: 4; display: flex; justify-content: space-between; padding-right: var(--qe-s-2); height: auto; }
  .qe2-cell-margin > span { display: inline; font-size: var(--qe-t-meta); }
}
@media (max-width: 767px) {
  .qe2-root .qe2-shortcut, .qe2-layer .qe2-shortcut { display: none; }
}


/* A1: customer decisions come before the full scope; PDF keeps its document layout. */
.qe2-screen-document { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--qe-s-4); }
.qe2-customer-heading, .qe2-customer-options, .qe2-customer-detail { min-width: 0; }
.qe2-customer-heading .qe2-doc-unit { margin-bottom: 0; }
.qe2-customer-options h2 { margin: 0; }
.qe2-customer-options .qe2-doc-options { margin-bottom: 0; }
.qe2-customer-options .qe2-doc-options button { gap: var(--qe-s-1); border-radius: var(--qe-r-2); }
.qe2-customer-options .qe2-doc-options b { font-size: var(--qe-t-title); line-height: var(--qe-l-title); }
.qe2-customer-description { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe2-doc-options .qe2-customer-recommended { color: var(--qe-ok-ink); font-weight: 600; }
.qe2-customer-decision { display: flex; flex-direction: column; gap: var(--qe-s-4); min-width: 0; padding: var(--qe-s-4); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); }
.qe2-customer-amount { display: flex; flex-direction: column; gap: var(--qe-s-1); color: var(--qe-ink-2); }
.qe2-customer-amount > strong { font-size: var(--qe-t-display); line-height: var(--qe-l-display); font-weight: 600; color: var(--qe-ink); font-variant-numeric: tabular-nums; }
.qe2-customer-amount b { color: var(--qe-ink); font-weight: 600; white-space: nowrap; }
.qe2-customer-actions { display: flex; flex-direction: column; gap: var(--qe-s-2); }
.qe2-customer-actions .qe2-btn { min-height: var(--qe-h-touch); white-space: normal; }
.qe2-customer-request { display: flex; flex-direction: column; gap: var(--qe-s-2); }
.qe2-customer-request textarea { box-sizing: border-box; width: 100%; min-height: 80px; padding: var(--qe-s-2); border: 1px solid var(--qe-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink); font: inherit; resize: vertical; }
.qe2-customer-request > div { display: flex; justify-content: flex-end; gap: var(--qe-s-2); }
.qe2-customer-request [data-request-feedback]:empty { display: none; }
.qe2-customer-scope { margin-bottom: var(--qe-s-4); }
.qe2-customer-scope summary { padding: var(--qe-s-3) 0; min-height: var(--qe-h-touch); box-sizing: border-box; color: var(--qe-link); cursor: pointer; }
.qe2-customer-scope .qe2-doc-scope { padding-top: var(--qe-s-2); }
.qe2-screen-document .qe2-doc-optional label { min-width: 0; display: block; cursor: pointer; }
.qe2-screen-document .qe2-doc-optional input { margin: 0 var(--qe-s-2) 0 0; accent-color: var(--qe-action); }
.qe2-screen-document .qe2-doc-optional small { margin-left: 0; }
.qe2-layer[data-panel="customer"] .qe2-sheet { inset: 0; width: 100%; max-width: none; max-height: none; border-radius: 0; transform: none; }
.qe2-layer[data-panel="customer"] .qe2-sheet-body { padding: var(--qe-s-6); }
.qe2-layer[data-panel="customer"] .qe2-screen-document { max-width: 1120px; margin: 0 auto; }
@media (min-width: 1024px) {
  .qe2-layer[data-panel="customer"] .qe2-screen-document { grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--qe-s-8); align-items: start; }
  .qe2-layer[data-panel="customer"] :is(.qe2-customer-heading, .qe2-customer-options, .qe2-customer-detail) { grid-column: 1; }
  .qe2-layer[data-panel="customer"] .qe2-customer-decision { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 0; }
}
@media (max-width: 1023px) {
  /* A transformed sheet becomes the fixed bar's containing block. Fade without moving it. */
  .qe2-layer:is([data-panel="customer"], [data-panel="preview"]):not(.qe2-no-anim) > .qe2-preview-sheet { animation: qe2-fade 160ms var(--qe-ease); }
  .qe2-layer:is([data-panel="customer"], [data-panel="preview"]) .qe2-sheet-body { padding-bottom: 240px; }
  .qe2-layer:is([data-panel="customer"], [data-panel="preview"]) .qe2-customer-decision { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2; border-radius: 0; border-width: 1px 0 0; box-shadow: var(--qe-shadow-sheet); gap: var(--qe-s-2); max-height: 60dvh; overflow-y: auto; padding-bottom: calc(var(--qe-s-4) + env(safe-area-inset-bottom, 0px)); }
  .qe2-layer:is([data-panel="customer"], [data-panel="preview"]) .qe2-customer-amount { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--qe-s-1) var(--qe-s-2); }
  .qe2-layer:is([data-panel="customer"], [data-panel="preview"]) .qe2-customer-amount > strong { font-size: var(--qe-t-title); line-height: var(--qe-l-title); }
  .qe2-layer:is([data-panel="customer"], [data-panel="preview"]) .qe2-customer-amount > span:last-child:not(:first-child) { flex-basis: 100%; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
  .qe2-layer:is([data-panel="customer"], [data-panel="preview"]) .qe2-customer-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .qe2-layer:is([data-panel="customer"], [data-panel="preview"]):has(.qe2-customer-request) .qe2-sheet-body { padding-bottom: 420px; }
}
@media (max-width: 767px) {
  .qe2-screen-document .qe2-doc-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .qe2-layer[data-panel="customer"] .qe2-sheet-body { padding: var(--qe-s-2) var(--qe-s-2) 240px; }
  .qe2-screen-document { padding: var(--qe-s-4); }
  .qe2-customer-options .qe2-doc-options button { min-height: var(--qe-h-touch); }
  .qe2-screen-document .qe2-doc-optional label { min-height: var(--qe-h-touch); }
  .qe2-screen-document .qe2-doc-optional input { width: 20px; height: 20px; vertical-align: middle; }
}

/* fix1 · item 1: the line margin ("48.5% margin") and the price-book / rate-card hint share the row's second line without
   touching. The margin ends under the markup's right edge (running left under the empty cost column when the column is narrow);
   the hint starts at the sell column's left edge and runs on under the total (the total and row menu sit on the first line). */
@container qe (min-width: 700px) {
  .qe2-cell-markup:not(.qe2-no-cost) > .qe2-line-margin { position: absolute; top: 25px; right: var(--qe-s-1); margin: 0; padding: 0; text-align: right; }
  .qe2-cell-sell > .qe2-book-hint { left: 6px; right: auto; text-align: left; z-index: 1; }
}

/* fix1 · item 2: an icon-only button carries its key in its tooltip (title "Preview · P") and the shortcut sheet, never as a
   squashed keycap box beside the icon. Keycaps stay on labelled buttons. */
@media (max-width: 599px) {
  .qe2-header .qe2-actionrow > [data-action="preview"] .qe2-shortcut { display: none; }
}

/* fix1 · item 4: "Summary · Option A" stays on one line. The card's compact action drops its keycap (the header's primary
   and the shortcut sheet carry ⌘↵) and the heading never wraps. */
.qe2-summary-header > h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qe2-summary-header > .qe2-summary-action { flex: none; }
.qe2-summary-header > .qe2-summary-action .qe2-shortcut { display: none; }

/* fix1 · item 5: the option tab shows its full name wherever the row has room (the 160px cap is gone); when it truly cannot
   fit, the name ends in an ellipsis inside its own box, the total never covers it, and the tab's tooltip has the full name. */
.qe2-header .qe2-options { flex: 0 1 auto; }
.qe2-header .qe2-option { min-width: 0; max-width: 100%; }
.qe2-header .qe2-option-name { max-width: none; min-width: 0; flex: 0 1 auto; }
.qe2-header .qe2-option > strong, .qe2-header .qe2-option > .qe2-tag { flex: none; }

/* fix1 · items 6 and 7: the price-source mark never takes room from the sell box. On the table (700+) it sits on the row's
   second line at the sell column's left edge, ahead of any price-book hint; on a card (under 700) it reads as words in the
   line's meta. It is decoration (aria-hidden, not focusable); the sell input's description carries "Price from …". */
.qe2-src-meta { display: none; }
@container qe (min-width: 700px) {
  .qe2-cell-sell > .qe2-price-source { top: 27px; left: 6px; }
  .qe2-cell-sell:has(.qe2-price-source) { height: auto; min-height: 40px; }
  .qe2-cell-sell:has(.qe2-price-source) input { padding-left: 6px; }
  .qe2-cell-sell:has(.qe2-price-source) > .qe2-book-hint { left: 22px; }
  .qe2-partno-src { display: none; }
}
@container qe (max-width: 699px) {
  .qe2-cell-sell > .qe2-price-source { display: none; }
  .qe2-cell-sell:has(.qe2-price-source) input { padding-left: var(--qe-s-2); }
  .qe2-src-meta { display: inline; color: var(--qe-ink-3); }
  .qe2-src-meta .qe2-icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
  .qe2-partno-src > .qe2-src-meta > .qe2-src-sep { display: none; }
}

/* fix1 · item 8: renaming edits the header title in place; "#3661 ·" stays on the same line as the input. */
.qe2-identity-title:has([data-title-input]) { display: flex; align-items: center; gap: var(--qe-s-1); min-width: 0; white-space: nowrap; }
.qe2-identity-name:has([data-title-input]) { display: flex; flex: 1 1 auto; min-width: 0; max-width: 560px; }
.qe2-identity-name > .qe2-title-input { flex: 1 1 auto; width: auto; min-width: 0; margin: -4px 0; }

/* fix1 · item 10 (600–699, the narrow panel): touch targets are 44 like a phone, and the header loses two rows so the first
   open shows whole line cards (four on #3661, three with a banner). Tech notes becomes an icon button beside the status (its
   name is its tooltip and accessible name), the unit chip uses its short name, and the save state lives in the bottom bar
   (it is already there) instead of a line of its own under the title. */
@media (min-width: 600px) and (max-width: 699px) {
  .qe2-root .qe2-back { width: var(--qe-h-touch); min-width: var(--qe-h-touch); height: var(--qe-h-touch); }
  .qe2-root .qe2-quick-more:not([hidden]) { min-width: var(--qe-h-touch); height: var(--qe-h-touch); }
  .qe2-root .qe2-identity > .qe2-sync-id { display: none !important; }
  .qe2-root .qe2-identity:has(.qe2-sync-stale) { flex-wrap: wrap; }
  .qe2-root .qe2-identity > .qe2-sync-id.qe2-sync-stale { display: inline-flex !important; flex-basis: 100%; justify-content: flex-start; }
  .qe2-header .qe2-actionrow > [data-action="technotes"] { width: var(--qe-h-touch); height: var(--qe-h-touch); padding: 0; justify-content: center; }
  .qe2-header [data-action="technotes"] .qe2-action-label { display: none; }
  .qe2-header .qe2-unit-long { display: none; }
  .qe2-header .qe2-unit-short { display: inline; }
}

/* fix1 · customer page: option descriptions wrap instead of being cut (the customer reads them in full), and below 1024 a
   toast moves above the sheet header area so it never covers Approve / Request changes in the fixed decision bar. */
.qe2-customer-description { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  /* fix2 · P2-2: the toast is positioned above the fixed decision bar in positionToast() (one line, normal height). */
  /* fix2 · P2-1: the scroller's "more below" fade never reaches the fixed decision bar (it faded Approve). */
  .qe2-layer:is([data-panel="customer"], [data-panel="preview"]) .qe2-sheet-body.qe2-more-below { -webkit-mask-image: none; mask-image: none; }
}

/* fix1 · numbers never clip at 700–1279 (and with the preview docked): the narrowed b13 columns cut "−100.0%" markups,
   "$8,600.00" / "$11,180.00" sells from a past quote, $1,000+ costs from the parts book, and the Margin % column's cost and markup. The description column
   gives up the room (it keeps at least 100px). */
@media (min-width: 700px) and (max-width: 1279px) {
  .qe2-root { --qe2-columns: var(--qe2-gut) minmax(100px, 1fr) 40px 80px 72px 88px 84px 28px; }
  @container qe (min-width: 700px) {
    .qe2-show-margin .qe2-table-head, .qe2-show-margin .qe2-line { grid-template-columns: var(--qe2-gut) minmax(0, 1fr) 36px 76px 64px 72px 84px 84px 28px; }
  }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .qe2-root.qe2-show-preview { --qe2-columns: var(--qe2-gut) minmax(100px, 1fr) 40px 80px 72px 88px 84px 28px; }
}
.qe2-identity-name > .qe2-title-input { height: 32px; }
@media (max-width: 699px) { .qe2-identity-name > .qe2-title-input { height: var(--qe-h-touch); margin: 0; } }

/* fix1 · the send sheet on a phone (now reachable from the header's Send icon): the Cc field's input fills the 44px box with
   its text on the same edge as To and Subject, From uses the field text size, and the deposit percent is a 44px target. */
.qe2-layer[data-panel="send"] .qe2-select { font-size: var(--qe-t-body); }
.qe2-layer .qe2-chipfield { padding-left: 10px; }
@media (max-width: 699px) {
  .qe2-layer .qe2-chipfield { padding: 0 4px 0 10px; }
  .qe2-layer .qe2-chipfield input { height: 44px; margin: -1px 0; padding: 0 2px; }
  .qe2-layer .qe2-chipfield:has(.qe2-cc-chip) { padding-top: 4px; padding-bottom: 4px; }
  .qe2-layer [data-send-deposit] .qe2-num-input { min-width: var(--qe-h-touch); }
}

/* fix2 · P0: a part added at a book price with no known cost says so on its line (a note, not a block). */
.qe2-nocost-note { color: var(--qe-ink-3); font-weight: 500; }

/* ───────────── fix2 · header: working details back, one band that keeps its shape ─────────────
   Identity: Back · "#3661 · title" · site (with "(contract client)") · customer · created · age · Total · save state.
   Band (700+): status and context chips on the left, labelled actions on the right (Start from… S, Preview P, Tech notes,
   the primary, More). Options row: the tabs, + Option, ⋯, then the visible option settings (Customer picks one / several,
   Client view, Cost centre). Long status text (sent, reminders, signed-and-changed) ends in an ellipsis with the full text
   in its tooltip, so the actions never drop to their own row. */
.qe2-identity-meta { min-width: 0; color: var(--qe-ink-3); font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
.qe2-contract-tag { color: var(--qe-ink-2); font-weight: 500; }
.qe2-root .qe2-identity { flex-wrap: wrap; row-gap: 0; justify-content: flex-start; }
/* The details sit beside the title when the row has room, else on the next line (with the total and save state after them). */
.qe2-root .qe2-identity-title { flex: 0 1 auto; min-width: 0; }
.qe2-identity-meta { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe2-root .qe2-identity-total { margin-left: auto; }
@media (max-width: 699px) {
  .qe2-identity-meta { order: 10; flex: 1 0 100%; padding-left: calc(var(--qe-h-touch) + var(--qe-s-1)); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: normal; }
  .qe2-root .qe2-identity { flex-wrap: wrap !important; }
}
@media (min-width: 700px) {
  .qe2-root .qe2-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "heading actions" "options options"; column-gap: var(--qe-s-4); row-gap: var(--qe-s-1); align-items: center; }
  .qe2-root .qe2-header > .qe2-heading, .qe2-root .qe2-header > .qe2-heading > .qe2-title-row { grid-area: heading; min-width: 0; }
  .qe2-root .qe2-header > .qe2-header-actions { grid-area: actions; justify-self: end; }
  .qe2-root .qe2-header > .qe2-option-row { grid-area: options; min-width: 0; flex-wrap: wrap; }
  .qe2-header .qe2-title-row { flex-wrap: nowrap; min-width: 0; gap: var(--qe-s-2); }
  .qe2-header .qe2-title-row > * { flex: none; }
  .qe2-header .qe2-header-chips { display: contents; }
  .qe2-header .qe2-title-row :is(.qe2-timeline, .qe2-reminders, .qe2-restored) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qe2-header .qe2-actionrow { flex-wrap: nowrap; }
  .qe2-header .qe2-actionrow > [data-action="start"], .qe2-header .qe2-actionrow > [data-action="preview"], .qe2-header .qe2-actionrow > [data-action="technotes"] { width: auto; padding: 0 var(--qe-s-3); }
  .qe2-header .qe2-actionrow > [data-action="start"] { padding: 0 var(--qe-s-2); }
  .qe2-header [data-action="start"] .qe2-action-label, .qe2-header [data-action="preview"] .qe2-action-label, .qe2-header [data-action="technotes"] .qe2-action-label { display: inline; }
  .qe2-header .qe2-option-meta { margin-left: auto; }
  .qe2-header .qe2-option-meta > .qe2-choice { display: inline-flex; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .qe2-root .qe2-header { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "actions" "options"; }
}

/* fix2 · P2-6 / P3: on a card the below-cost sentence sits right under the numbers (its link keeps a 44px target without
   growing the line), and the card does not offer "Use rate card $200" twice: the meta line already has it. */
@container qe (max-width: 699px) {
  .qe2-line-warning .qe2-link-btn { display: inline-flex; align-items: center; min-height: var(--qe-h-touch); margin: -14px 0; vertical-align: middle; }
  .qe2-line:has(.qe2-mobile-book-hint) .qe2-warn-use { display: none; }
}
@media (min-width: 600px) and (max-width: 699px) { .qe2-root .qe2-line:not(.qe2-internal-open) > .qe2-line-warning { grid-row: 2; } }
@media (max-width: 599px) { .qe2-root .qe2-line:not(.qe2-internal-open) > .qe2-line-warning { grid-row: 3; } }

/* fix2 · P2-5: the option menu shows the customer line it will send, under "Customer line…". */
.qe2-mi-text > .qe2-mi-sub { display: block; max-width: 280px; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: normal; overflow-wrap: anywhere; }
.qe2-layer [data-customer-line] { width: 100%; min-height: 72px; padding: var(--qe-s-2); border: 1px solid var(--qe-field); border-radius: var(--qe-r-1); font: inherit; resize: vertical; }

/* fix2 · density at 1280+: the header gained the details line and the visible option settings (working details are kept);
   these trims give the room back so the first line still starts near 450px at 1440×1000. */
@media (min-width: 1280px) {
  .qe2-root .qe2-canvas { padding-top: var(--qe-s-2); }
  .qe2-root .qe2-header .qe2-options { padding-top: 2px; padding-bottom: 2px; }
  .qe2-root .qe2-scope-section { margin-bottom: var(--qe-s-1); }
  .qe2-root .qe2-command { padding-top: 2px; padding-bottom: 2px; }
  .qe2-root .qe2-quick-wrap { margin-top: 2px; margin-bottom: 2px; }
  .qe2-root .qe2-table-head { margin-top: 0; }
  .qe2-root .qe2-group-head { height: 24px; min-height: 24px; padding-bottom: 2px; }
}

/* fix2 · P3: the fee row's "no margin" dash sits on the row's text line (it read as an underscore below it), and the
   margin note never breaks inside "(no cost)". */
@container qe (min-width: 700px) {
  .qe2-cell-markup.qe2-no-cost > .qe2-line-margin { margin-top: 0; padding-right: var(--qe-s-2); font-size: var(--qe-t-body); line-height: var(--qe-l-body); text-align: right; }
}
.qe2-nowrap { white-space: nowrap; }
/* fix2 · 700–1279: when the actions grow (Send new version ⌘↵), the status chips wrap inside their own column instead of
   running under the actions. */
@media (min-width: 700px) and (max-width: 1279px) {
  .qe2-header .qe2-title-row { flex-wrap: wrap; row-gap: var(--qe-s-1); }
}

/* fix2 · P2-3: the quote's status text (sent, viewed, signed and changed, reminders) lives on the details line under the
   title, in full, so the band keeps one row and its actions stay right-aligned. */
.qe2-identity-status { display: inline-flex; flex: 0 1 auto; flex-wrap: wrap; gap: 0 var(--qe-s-2); min-width: 0; color: var(--qe-ink-3); font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
.qe2-identity-status > * { white-space: nowrap; }
@media (max-width: 699px) {
  .qe2-identity-status { order: 11; flex: 1 0 100%; padding-left: calc(var(--qe-h-touch) + var(--qe-s-1)); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
  .qe2-identity-status > * { white-space: normal; }
}
/* fix2 · the labour card keeps the below-cost sentence's "Use rate card" and drops the same offer from its meta line. */
@container qe (max-width: 699px) {
  .qe2-line:has(.qe2-mobile-book-hint) .qe2-warn-use { display: inline; }
  .qe2-line:has(.qe2-warn-use:not([hidden])) .qe2-mobile-book-hint { display: none; }
}
/* fix2 · the details sheet's rows are 44px touch targets on a phone. */
@media (max-width: 599px) {
  .qe2-context-list > div { min-height: var(--qe-h-touch); }
  .qe2-context-list .qe2-link-btn, .qe2-context-list a { display: inline-flex; align-items: center; min-height: var(--qe-h-touch); }
}
/* fix2 · renaming takes the whole title width so the current title shows in full. */
.qe2-root .qe2-identity-title:has([data-title-input]) { flex: 1 1 auto; }
.qe2-identity-name:has([data-title-input]) { max-width: none; }
/* fix2 · 560–699 card: the sell box fits $1,000+ prices (the name column gives up the room). */
@container qe (min-width: 560px) and (max-width: 699px) {
  .qe2-line { grid-template-columns: minmax(0, 1fr) 44px 104px 88px 44px 44px; }
  .qe2-line.qe2-has-gutter { grid-template-columns: 44px minmax(0, 1fr) 44px 104px 88px 44px 44px; }
}

/* fix3 · N1: a line with no real price says so on the line at every width (a note, never a block). */
.qe2-needs-note { color: var(--qe-ink-3); font-weight: 500; }

/* fix3 · P2-4 / P3: on a phone the header shows "5 other quotes" (as b12 did) and drops its bare → Send icon: the bottom
   bar's labelled primary (Send, Convert, …) is the one primary action. */
@media (max-width: 599px) {
  .qe2-root .qe2-header .qe2-phone-send { display: none !important; }
  .qe2-root .qe2-header .qe2-overlap-chip { display: inline-flex; }
  .qe2-root .qe2-header .qe2-overlap-long { display: none; }
  .qe2-root .qe2-header .qe2-overlap-short { display: inline; }
}
@media (max-width: 599px) {
  /* Preview is in More (with its P key) on a phone, which leaves the status row room for the chips. */
  .qe2-root .qe2-header .qe2-actionrow > [data-action="preview"] { display: none !important; }
  .qe2-root .qe2-header .qe2-title-row { flex-wrap: wrap; row-gap: var(--qe-s-1); }
}
/* fix3 · P3: chips never touch. */
.qe2-root .qe2-header .qe2-title-row { column-gap: var(--qe-s-2); }
.qe2-root .qe2-header .qe2-header-chips { display: contents; }

/* ───────────── fix3 · header rows (N2, N3, N4) ─────────────
   Title line: Back · title · (details, 1400+) · Total and save state, right-aligned. Details and any status text go on the
   next line (a zero-height break keeps Total on the title line whatever their length).
   700–1023 (N3): four rows like b12 — title, details, chips with the option settings, tabs; the actions (Preview P, the
   primary, More) sit on the title line, Start from… (S) and Tech notes (N) are in More, and Total with the save state is in
   the bottom bar. */
.qe2-root .qe2-identity::before { content: ''; order: 9; flex: 0 0 100%; height: 0; }
.qe2-root .qe2-identity > .qe2-back { order: 0; }
.qe2-root .qe2-identity > .qe2-identity-title { order: 1; }
.qe2-root .qe2-identity > .qe2-identity-total { order: 3; margin-left: auto; }
.qe2-root .qe2-identity > .qe2-sync-id { order: 4; margin-left: 0; }
.qe2-root .qe2-identity > .qe2-identity-meta { order: 10; }
.qe2-root .qe2-identity > .qe2-identity-status { order: 11; }
@media (min-width: 700px) {
  .qe2-root .qe2-identity { flex-wrap: wrap; column-gap: var(--qe-s-2); row-gap: 0; }
  .qe2-root .qe2-identity > .qe2-identity-meta { padding-left: calc(var(--qe-h-control) + var(--qe-s-2)); }
  .qe2-root .qe2-identity > .qe2-identity-meta + .qe2-identity-status::before { content: '·'; margin-right: var(--qe-s-2); }
  .qe2-root .qe2-identity > .qe2-identity-status { flex: 0 1 auto; }
}
@media (min-width: 1400px) {
  .qe2-root .qe2-identity > .qe2-identity-meta { order: 2; padding-left: 0; }
  .qe2-root .qe2-identity > .qe2-identity-status { padding-left: calc(var(--qe-h-control) + var(--qe-s-2)); }
  .qe2-root .qe2-identity > .qe2-identity-meta + .qe2-identity-status::before { content: none; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .qe2-root .qe2-identity > .qe2-identity-total, .qe2-root .qe2-identity > .qe2-sync-id { display: none !important; }
  .qe2-bottom-bar .qe2-sync-bar { display: inline-flex; gap: 0 var(--qe-s-2); margin-left: var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
  .qe2-bottom-bar .qe2-sync-bar::before { content: '·'; }
  .qe2-bottom-bar .qe2-sync-bar > .qe2-sync-note { display: none; }
  .qe2-root .qe2-identity > .qe2-identity-title { flex: 1 1 auto; }
  /* The actions join the title line. */
  .qe2-root .qe2-canvas { position: relative; }
  .qe2-root .qe2-header { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "options"; }
  .qe2-root .qe2-header > .qe2-header-actions { position: absolute; top: var(--qe-s-2); right: var(--qe-s-6); }
  .qe2-header .qe2-actionrow > [data-action="start"], .qe2-header .qe2-actionrow > [data-action="technotes"] { display: none !important; }
  .qe2-root .qe2-identity-title { padding-right: calc(var(--qe2-actions-w, 280px) + var(--qe-s-2)); }
  .qe2-header .qe2-unit-long { display: none; }
  .qe2-header .qe2-unit-short { display: inline; }
  .qe2-header .qe2-title-row { flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .qe2-header .qe2-unit-long { display: none; }
  .qe2-header .qe2-unit-short { display: inline; }
}
/* Density at 700+: the same small trims as 1280+. */
@media (min-width: 700px) {
  .qe2-root .qe2-canvas { padding-top: var(--qe-s-2); }
  .qe2-root .qe2-header .qe2-options { padding-top: 2px; padding-bottom: 2px; }
  .qe2-root .qe2-scope-section { margin-bottom: var(--qe-s-1); }
  .qe2-root .qe2-group-head { height: 24px; min-height: 24px; padding-bottom: 2px; }
}
/* 700–1279 keep the add bar and quick-add spacing of b13 (the optional-item chip is 44px there). */
@media (min-width: 700px) and (max-width: 1279px) { .qe2-root .qe2-command { padding-top: var(--qe-s-1); padding-bottom: var(--qe-s-1); } .qe2-root .qe2-quick-wrap { margin-top: var(--qe-s-1); margin-bottom: var(--qe-s-1); } .qe2-root .qe2-table-head { margin-top: var(--qe-s-1); } }

.qe2-choice-short { display: none; }
/* fix3 · N4: at 1024–1279 the chips keep one row beside the labelled actions (tighter gaps). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .qe2-root .qe2-header { column-gap: var(--qe-s-2); }
  .qe2-root .qe2-header .qe2-actionrow { gap: var(--qe-s-1); }
  .qe2-root .qe2-header .qe2-title-row { flex-wrap: wrap; column-gap: 6px; }
}
/* fix3 · P3: Columns and Shortcuts stay together on the footer's last line (never one orphaned button). */
.qe2-footer-end { display: inline-flex; flex: none; align-items: center; gap: inherit; margin-left: auto; }
/* fix3 · N7: "Created 2026-10-21" never breaks inside the date. */
.qe2-identity-meta .qe2-nowrap { white-space: nowrap; }
/* fix3 · P3: the "+4" details chip keeps the same gap as its neighbours (its text-button margin pulled them together). */
.qe2-root .qe2-header .qe2-title-row .qe2-more-trigger { margin: 0; padding: 0; }
/* fix3 · N2: the derived-state note moves to the details line at 700+ (Total and "Draft saved" stay together on the right). */
.qe2-root .qe2-identity > .qe2-identity-note { order: 12; }
.qe2-identity-note:empty { display: none; }
@media (min-width: 700px) {
  .qe2-root .qe2-identity > .qe2-sync-id > .qe2-sync-note { display: none; }
  .qe2-root .qe2-identity > .qe2-sync-id { white-space: nowrap; }
  .qe2-identity-note { font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
  .qe2-root .qe2-identity > .qe2-identity-status + .qe2-identity-note::before, .qe2-root .qe2-identity > .qe2-identity-meta + .qe2-identity-note::before { content: '·'; margin-right: var(--qe-s-2); color: var(--qe-ink-3); }
}
@media (min-width: 1400px) {
  .qe2-root .qe2-identity > .qe2-identity-meta + .qe2-identity-note::before { content: none; }
  .qe2-root .qe2-identity > .qe2-identity-meta + .qe2-identity-note { padding-left: calc(var(--qe-h-control) + var(--qe-s-2)); }
}
@media (max-width: 699px) { .qe2-identity-note { display: none; } }

/* Owner rule (2026-11-02): the findings and scope stay open and editable by default at every width.
   1280 and wider: a column beside the lines with the live editor's draggable divider (psm.quotes.editor.leftWidth).
   Narrower: open above the lines. Phones: an open "Findings & scope" section above the line cards (never a sheet). */
.qe2-root .qe2-scope-summary { display: none; }
.qe2-root .qe2-split { display: none; }
@container qe (max-width: 699px) {
  .qe2-root .qe2-scope-body { position: static; z-index: auto; max-height: none; display: block; border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); box-shadow: none; }
  .qe2-root .qe2-scope-body > .qe2-scope { min-height: 96px; overflow-y: visible; }
  .qe2-root .qe2-scope-section { margin-bottom: var(--qe-s-3); }
}
@media (min-width: 1280px) {
  .qe2-root .qe2-main.qe2-split-on { display: grid; grid-template-columns: max(200px, min(var(--qe-left-w, 330px), calc(100% - 656px))) var(--qe-s-4) minmax(640px, 1fr); align-items: start; }
  .qe2-root .qe2-main.qe2-split-on > .qe2-scope-section { grid-column: 1; grid-row: 1; min-width: 0; margin-bottom: 0; }
  .qe2-root .qe2-main.qe2-split-on > .qe2-split { grid-column: 2; grid-row: 1; display: block; align-self: stretch; position: relative; min-height: 120px; cursor: col-resize; touch-action: none; outline: none; }
  .qe2-root .qe2-main.qe2-split-on > .qe2-split::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--qe-line); }
  .qe2-root .qe2-main.qe2-split-on > .qe2-split:hover::before, .qe2-root .qe2-main.qe2-split-on > .qe2-split:focus-visible::before { width: 2px; background: var(--qe-field); }
  .qe2-root .qe2-main.qe2-split-on > .qe2-builder { grid-column: 3; grid-row: 1; min-width: 0; }
}
/* The scope is open below the option picker, so the picker does not repeat a summary of it. */
.qe2-root .qe2-picker-meta > .qe2-picker-scope { display: none; }
/* A centre whose full scope the route did not send is read-only (F3): one plain line says so. */
.qe2-root .qe2-scope-note { margin: 0; padding: var(--qe-s-2) var(--qe-s-4); border-bottom: 1px solid var(--qe-hair); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
/* Add-ons ride on top of the main quote: "+$141.82" on the tab, and the all-taken total beside the main total. */
.qe2-root .qe2-addon-plus { color: var(--qe-ink-3); }
.qe2-root .qe2-if-all { color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
/* F4: a quote with no cost centre yet; the expired note above Send; centre delete; internal notes. */
.qe2-root .qe2-empty-centre { display: flex; align-items: center; gap: var(--qe-s-3); padding: var(--qe-s-3) 0; color: var(--qe-ink-3); }
.qe2-layer .qe2-expired-note { display: flex; align-items: center; gap: var(--qe-s-2); margin: 0 0 var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-root .qe2-cc-delete { margin-left: var(--qe-s-1); color: var(--qe-icon); }
.qe2-root .qe2-notes-section { margin-top: var(--qe-s-3); }
.qe2-root .qe2-notes-section textarea { width: 100%; min-height: 72px; padding: var(--qe-s-2) var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); color: var(--qe-ink); font: inherit; resize: vertical; }
.qe2-root .qe2-photos .qe2-photo-image img { cursor: zoom-in; }
/* F5: bands fold as in the live editor; each centre's head and footing rows; common parts; the loading line. */
.qe2-root .qe2-band-toggle { display: inline-flex; align-items: center; gap: var(--qe-s-1); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.qe2-root .qe2-band-head, .qe2-root .qe2-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); }
.qe2-root .qe2-band-head { padding: var(--qe-s-1) 0; color: var(--qe-ink-2); font-size: var(--qe-t-meta); }
.qe2-root .qe2-band-meta, .qe2-root .qe2-cc-meta { color: var(--qe-ink-3); font-size: var(--qe-t-meta); font-weight: 400; margin-left: var(--qe-s-2); }
.qe2-root .qe2-cc-foot { margin-top: var(--qe-s-2); border-top: 1px solid var(--qe-hair); }
.qe2-root .qe2-foot-row { display: flex; justify-content: space-between; padding: var(--qe-s-1) 0; color: var(--qe-ink-2); font-size: var(--qe-t-meta); font-variant-numeric: tabular-nums; }
.qe2-root .qe2-foot-row.qe2-foot-sub { color: var(--qe-ink); font-size: var(--qe-t-body); }
.qe2-root .qe2-desc-section { margin-top: var(--qe-s-3); }
.qe2-root .qe2-quote-desc { border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); }
.qe2-root .qe2-loading { padding: var(--qe-s-3) 0; color: var(--qe-ink-3); }
.qe2-layer .qe2-common-sizes { display: flex; flex-wrap: wrap; gap: var(--qe-s-1); margin: var(--qe-s-2) 0; }
.qe2-layer .qe2-common-kind { display: grid; gap: var(--qe-s-1); margin-bottom: var(--qe-s-3); }
.qe2-layer .qe2-common-items { display: flex; flex-wrap: wrap; gap: var(--qe-s-1); }
.qe2-layer .qe2-common-btn strong { margin-left: var(--qe-s-1); color: var(--qe-ink-2); font-weight: 500; }
.qe2-layer .qe2-common-n { margin-left: var(--qe-s-1); color: var(--qe-ink-3); }
.qe2-layer .qe2-tax-county { margin-top: var(--qe-s-2); }
/* F5 phone: the console mode bar collapses to one row (Save / Discard and Collapse); Simpro status, Convert and PCSP
   stay reachable from the editor's own status chip and menu. The open scope keeps a bounded height so line cards show. */
@media (max-width: 699px) {
  .quote-page:has(.qe2-root) .quote-modebar { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: var(--ds-s-2, 8px); min-height: 0 !important; padding-top: var(--ds-s-1, 4px) !important; padding-bottom: var(--ds-s-1, 4px) !important; overflow-x: auto; }
  .quote-page:has(.qe2-root) .quote-modebar .inline-quote-id,
  .quote-page:has(.qe2-root) .quote-modebar .inline-tabs,
  .quote-page:has(.qe2-root) .quote-modebar .qstatus,
  .quote-page:has(.qe2-root) .quote-modebar .pcsp-open,
  .quote-page:has(.qe2-root) .quote-modebar .qconv-btn,
  .quote-page:has(.qe2-root) .quote-modebar .qconv { display: none !important; }
  .quote-page:has(.qe2-root) .quote-modebar .inline-actions,
  .quote-page:has(.qe2-root) .quote-modebar .dh-cells { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: var(--ds-s-2, 8px); margin: 0 !important; width: auto !important; }
}
@container qe (max-width: 699px) {
  .qe2-root .qe2-scope-body > .qe2-scope { max-height: 22dvh; overflow-y: auto; overscroll-behavior: contain; }
}
@container qe (max-width: 699px) {
  /* Phone: the scope stays open and editable in a short window; its toolbar shows while it is being edited. */
  .qe2-root .qe2-scope-body > .qe2-scope { max-height: 15dvh; }
  .qe2-root .qe2-scope-body:not(:focus-within) > .qe2-format { display: none; }
  .qe2-root .qe2-scope-body > .qe2-section-head { padding-top: var(--qe-s-1); padding-bottom: var(--qe-s-1); }
  .qe2-root .qe2-banner-scopecut { display: none; }
  .qe2-root .qe2-notes-section { margin-top: var(--qe-s-2); }
  .qe2-root .qe2-notes-section textarea { min-height: 36px; height: 36px; }
  .qe2-root .qe2-notes-section textarea:focus { height: 96px; }
  /* One centre: its count and margin are in the summary bar; the centre head returns with a second centre. */
  .qe2-root .qe2-cc-single > .qe2-cc-head { display: none; }
}
/* Internal notes: beside the scope at tablet and desktop, after the lines on a phone. */
.qe2-root .qe2-notes-phone { display: none; }
@container qe (max-width: 699px) {
  .qe2-root .qe2-notes-wide { display: none; }
  .qe2-root .qe2-notes-phone { display: block; }
  .qe2-root .qe2-scope-body > .qe2-scope-note { display: none; }
  .qe2-root .qe2-scope-body > .qe2-scope { max-height: 12dvh; }
}
.qe2-root .qe2-readonly-tag { color: var(--qe-ink-3); font-weight: 400; }
@media (max-width: 699px) {
  /* Phone: the editor's bottom bar carries Save; its menu carries Discard; the back arrow collapses the quote. */
  .quote-page:has(.qe2-root) .quote-modebar { display: none !important; }
}
@container qe (max-width: 699px) {
  /* Phone first screen: the open scope is a three-line window under a one-line head (icon buttons). */
  /* Review 1 (P1-5): the heading and the first ~6 lines show on open; a tap (focus) opens the whole editor. */
  .qe2-root .qe2-scope-body > .qe2-scope { max-height: 9.5em; min-height: 0; padding-top: var(--qe-s-2); padding-bottom: var(--qe-s-2); }
  .qe2-root .qe2-scope-body:focus-within > .qe2-scope { max-height: none; overflow-y: visible; }
  .qe2-root .qe2-scope-body > .qe2-section-head { flex-wrap: nowrap; }
  .qe2-root .qe2-scope-body > .qe2-section-head > strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .qe2-root .qe2-scope-body > .qe2-section-head .qe2-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Review 1: the one-time discount note; quick-add chips never cut their price. */
.qe2-root .qe2-freeze-note { margin: 0 0 var(--qe-s-2); color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-root .qe2-quick-wrap > .qe2-quick { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.qe2-root .qe2-quick-wrap > .qe2-quick > .qe2-quick-button.qe2-chip { flex: 0 0 auto; min-width: max-content; }
.qe2-root .qe2-quick-button > strong { flex: none; }
/* Review 1 (P1-10): one header. The editor's own identity, status chip, Save (its primary), Discard (its menu), PCSP and
   Convert stand in for the console mode bar's; the bar keeps only its tabs, presence and Collapse. */
.quote-page:has(.qe2-root) .quote-modebar .inline-quote-id,
.quote-page:has(.qe2-root) .quote-modebar .dh-save,
.quote-page:has(.qe2-root) .quote-modebar .qstatus,
.quote-page:has(.qe2-root) .quote-modebar .pcsp-open,
.quote-page:has(.qe2-root) .quote-modebar .qconv-btn[data-qconv="ask"] { display: none !important; }
/* The console mode bar gives way to the editor's own header in Scope & pricing (presence moves to the identity line;
   Customer email is Send or the menu; Collapse is the back arrow). Customer email keeps the bar and its tabs. */
.quote-page:has(.qe2-root) .quote-modebar { display: none !important; }
.qe2-root .qe2-identity-presence:empty { display: none; }
/* Tablet (scope open above the lines): a 14-line window that opens fully on focus, so the lines start on the first screen. */
@media (min-width: 700px) and (max-width: 1279px) {
  .qe2-root .qe2-scope-body > .qe2-scope { max-height: 22em; overflow-y: auto; overscroll-behavior: contain; }
  .qe2-root .qe2-scope-body:focus-within > .qe2-scope { max-height: none; overflow-y: visible; }
}
/* The cut-scope notice is said once, in the scope's own head and note (no second banner above the editor). */
.qe2-root .qe2-banner-scopecut { display: none; }
/* Review 2 (N7): a narrow scope column (1280 with the summary docked) puts its buttons on a second row under the
   heading, so "Findings & scope" and "Draft from lines" are both whole. The scope column sits beside the lines, so
   this never pushes the first line down. */
.qe2-root .qe2-scope-body { container-type: inline-size; container-name: qe2scope; }
@container qe2scope (max-width: 310px) {
  .qe2-root .qe2-scope-body > .qe2-section-head { flex-wrap: wrap; row-gap: 0; }
  .qe2-root .qe2-scope-body > .qe2-section-head > strong { flex: 1 0 100%; }
  .qe2-root .qe2-scope-body > .qe2-section-head > .qe2-btn:first-of-type { margin-left: calc(-1 * var(--qe-s-2)); }
}
/* Review 2: with a mouse, the centre head is a compact 24px row right under the column heads (first line ≤450 at 1440). */
@media (pointer: fine) {
  .qe2-root .qe2-cc-section { margin-top: var(--qe-s-1); }
  .qe2-root .qe2-cc-head { min-height: 24px; }
}
/* Review 2 (N3): outside the test mode a photo is a plain button that opens the lightbox (no attach tick). */
.qe2-root button.qe2-photo { width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; border-radius: var(--qe-r-1); }
.qe2-root button.qe2-photo:focus-visible { outline: 2px solid var(--qe-focus, currentColor); outline-offset: 2px; }

/* ═══ Clean editor (owner review 2026-11-02: "cluttered; cost, markup and sell don't look like fields") ═══════════════
   Outside the test mode the root carries .qe2-clean. One fixed column grid for lines, band heads, centre heads and
   footing rows; editable numbers are boxed like the live editor's fields (.qe-in.num: field border at rest, 7px radius,
   right-aligned tabular figures); read-only numbers are plain text with the reason as a tooltip; status is a marker. */
.qe2-root.qe2-clean { --qe2-field-h: 30px; --qe2-field-pad: 8px; }
/* Lines: one row height, everything centred on the field line. */
.qe2-clean .qe2-line { align-items: center; align-content: center; min-height: 44px; padding: 7px 0; }
.qe2-clean .qe2-line-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--qe-s-2); row-gap: 0; align-self: center; }
.qe2-clean .qe2-line-name > strong { display: inline; }
.qe2-clean .qe2-part-code { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap; }
.qe2-clean .qe2-row-mark:empty, .qe2-clean [data-row-mark]:empty { display: none; }
.qe2-clean [data-row-mark] { display: inline-flex; align-self: center; }
.qe2-clean .qe2-row-mark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--qe-ink-3); cursor: help; }
.qe2-clean .qe2-row-mark.qe2-mark-warn { background: var(--qe-ink-3); }
/* Cells: one box per editable number. */
.qe2-clean .qe2-cell { height: var(--qe2-field-h); align-self: center; }
.qe2-clean .qe2-cell input {
  height: var(--qe2-field-h); margin: 0; padding: 0 var(--qe2-field-pad); border: 1px solid var(--ds-field); border-radius: var(--qe-r-1);
  background: var(--qe-surface); color: var(--qe-ink); text-align: right; font-variant-numeric: tabular-nums;
  transition: border-color .1s, box-shadow .1s;
}
.qe2-clean .qe2-cell input:hover { border-color: var(--qe-ink-2); }
.qe2-clean .qe2-cell input:focus { border-color: var(--qe-focus); outline: 2px solid var(--qe-focus); outline-offset: 0; }
.qe2-clean .qe2-cell-ro { display: block; height: var(--qe2-field-h); line-height: var(--qe2-field-h); padding: 0 calc(var(--qe2-field-pad) + 1px) 0 0; color: var(--qe-ink-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.qe2-clean .qe2-line-total { align-self: center; line-height: var(--qe2-field-h); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Markers in a box: below cost tints the markup box amber; a price that differs from the book or rate card is a dot. */
.qe2-clean .qe2-negative input, .qe2-clean .qe2-negative input:focus { border-color: var(--qe-field); background: var(--qe-surface); color: var(--qe-ink-3); font-weight: 500; }
.qe2-clean .qe2-cell-needs input { border-color: var(--qe-field); background: var(--qe-surface); }
.qe2-clean .qe2-cell-sell:has(.qe2-price-dot) input { padding-left: 18px; }
.qe2-clean .qe2-price-dot { position: absolute; left: 3px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.qe2-clean .qe2-price-dot::after { content: ''; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--qe-link); }
/* Nothing stacked under a number. */
.qe2-clean .qe2-line-warning, .qe2-clean .qe2-book-hint, .qe2-clean .qe2-line-margin, .qe2-clean .qe2-price-needed,
.qe2-clean .qe2-price-source, .qe2-clean .qe2-band-meta, .qe2-clean .qe2-cc-meta, .qe2-clean .qe2-cc-head > .qe2-tag { display: none !important; }
/* Band heads, centre heads and footing rows on the same grid: label in Description, amount in Total. */
.qe2-clean .qe2-group-head, .qe2-clean .qe2-band-head, .qe2-clean .qe2-cc-head, .qe2-clean .qe2-foot-row {
  display: grid; grid-template-columns: var(--qe2-columns); column-gap: var(--qe2-colgap); align-items: center;
  margin-left: calc(-1 * (var(--qe2-gut) + var(--qe2-colgap))); padding: 0;
}
.qe2-clean .qe2-group-head > :first-child, .qe2-clean .qe2-band-head > :first-child, .qe2-clean .qe2-cc-head > .qe2-cc-name, .qe2-clean .qe2-foot-row > span { grid-column: 2 / 7; justify-self: start; min-width: 0; }
.qe2-clean .qe2-group-head > span:last-child, .qe2-clean .qe2-band-head > span:last-child, .qe2-clean .qe2-cc-head > strong, .qe2-clean .qe2-foot-row > strong { grid-column: 7; justify-self: end; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qe2-clean .qe2-cc-head > .qe2-spacer { display: none; }
.qe2-clean .qe2-cc-head > .qe2-cc-delete { grid-column: 8; justify-self: center; }
.qe2-clean .qe2-group-head, .qe2-clean .qe2-band-head { height: 32px; align-items: end; padding-bottom: var(--qe-s-1); }
.qe2-clean .qe2-band-head .qe2-band-toggle { margin-left: 0; }
.qe2-clean .qe2-cc-head { min-height: 32px; }
.qe2-clean .qe2-cc-name { margin-left: -6px; }
.qe2-clean .qe2-cc-foot { padding: var(--qe-s-1) 0 0; }
.qe2-clean .qe2-foot-row { min-height: 28px; }
.qe2-clean .qe2-foot-row > strong { font-weight: 500; }
.qe2-clean .qe2-foot-row.qe2-foot-sub > strong { font-weight: 600; }
/* Column heads sit on the boxes' right edge (number text ends field-pad + border inside the box). */
.qe2-clean .qe2-table-head > span:nth-child(n+3):nth-child(-n+6) { padding-right: calc(var(--qe2-field-pad) + 1px); }
/* ── Above the lines: two rows ── */
.qe2-clean .qe2-identity-clean { display: flex !important; flex-wrap: nowrap; align-items: center; gap: var(--qe-s-2); min-height: 40px; margin: 0 0 var(--qe-s-2); }
.qe2-clean .qe2-identity-clean > .qe2-identity-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--qe-t-sheet, 18px); line-height: var(--qe-l-sheet, 26px); font-weight: 600; }
.qe2-clean .qe2-identity-clean > .qe2-spacer { flex: 1 1 0; }
.qe2-clean .qe2-identity-clean > .qe2-identity-total, .qe2-clean .qe2-identity-clean > .qe2-sync-id { flex: none; white-space: nowrap; }
.qe2-clean .qe2-identity-clean > .qe2-sync-id { display: inline-flex !important; color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.qe2-clean .qe2-identity-clean > .qe2-header-actions { flex: none; }
.qe2-clean .qe2-identity-clean .qe2-actionrow { display: flex; align-items: center; gap: var(--qe-s-1); }
.qe2-clean .qe2-identity-clean .qe2-actionrow .qe2-shortcut { display: none; }
.qe2-clean .qe2-identity-clean .qe2-phone-send { display: none; }
.qe2-clean .qe2-details-btn { flex: none; color: var(--qe-ink-2); }
.qe2-clean .qe2-identity-clean > .qe2-identity-note:empty { display: none; }
.qe2-clean .qe2-header-clean { margin: 0 0 var(--qe-s-2); }
.qe2-clean.qe2-one-option .qe2-header-clean { display: none; }
.qe2-clean .qe2-command { display: flex; align-items: center; gap: var(--qe-s-2); }
.qe2-clean .qe2-command > .qe2-search-wrap { flex: 1 1 260px; min-width: 200px; }
.qe2-clean .qe2-command > .qe2-quick-wrap { flex: 0 1 auto; display: flex; align-items: center; gap: var(--qe-s-1); min-width: 0; margin: 0; }
.qe2-clean .qe2-command > .qe2-quick-wrap > .qe2-quick { display: flex; flex-wrap: nowrap; gap: var(--qe-s-1); min-width: 0; overflow: hidden; }
.qe2-clean .qe2-command > .qe2-quick-wrap > .qe2-quick > .qe2-quick-button { flex: none; white-space: nowrap; }
.qe2-clean .qe2-command > .qe2-quick-wrap > .qe2-quick > .qe2-quick-button[hidden] { display: none; }
.qe2-clean .qe2-quick-more-all { flex: none; white-space: nowrap; }
.qe2-clean .qe2-table-head { margin-top: var(--qe-s-2); }
.qe2-clean .qe2-scope-body > .qe2-section-head > [data-action="draft"], .qe2-clean .qe2-scope-body > .qe2-section-head > [data-action="draft-lines"] { display: none !important; }
.qe2-clean .qe2-scope-body > .qe2-section-head > .qe2-scope-menu { margin-right: -8px; }
.qe2-clean .qe2-identity-clean > * { order: 0 !important; }
.qe2-clean .qe2-identity-clean > .qe2-identity-title { display: block !important; flex: 0 1 auto; }
.qe2-clean .qe2-identity-clean > .qe2-identity-total { display: inline !important; }
.qe2-clean .qe2-command > .qe2-search-wrap { flex: 1 1 340px; }
.qe2-clean .qe2-search-wrap > .qe2-search { flex: 1 1 auto; min-width: 80px; }
.qe2-clean .qe2-search-wrap > .qe2-ghost { display: none !important; }
.qe2-clean .qe2-identity-clean::before { content: none; display: none; }
.qe2-clean .qe2-command > .qe2-search-wrap { min-width: min(340px, 45%); }
/* Clean editor on a phone: a card is the name line plus the boxes; cost and markup open under "Cost". */
@container qe (max-width: 699px) {
  .qe2-clean .qe2-line:not(.qe2-internal-open) > .qe2-cell-ro[data-ro="cost"], .qe2-clean .qe2-line:not(.qe2-internal-open) > .qe2-cell-ro[data-ro="markup"] { display: none; }
  .qe2-clean .qe2-internal-open > .qe2-cell-ro[data-ro="cost"], .qe2-clean .qe2-internal-open > .qe2-cell-ro[data-ro="markup"] { display: flex; justify-content: space-between; align-items: center; gap: var(--qe-s-2); }
  .qe2-clean .qe2-internal-open > .qe2-cell-ro::before { content: attr(data-label); color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
  .qe2-clean .qe2-cell-sell .qe2-price-dot { left: 20px; }
  .qe2-clean .qe2-cell-sell:has(.qe2-price-dot) input { padding-left: 18px; }
  .qe2-clean .qe2-identity-clean { flex-wrap: wrap; row-gap: 2px; }
  .qe2-clean .qe2-identity-clean > .qe2-back { order: 1 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-identity-title { order: 2 !important; flex: 1 1 calc(100% - 96px); font-size: var(--qe-t-row); }
  .qe2-clean .qe2-identity-clean > .qe2-header-actions { order: 3 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-status { order: 5 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-details-btn { order: 6 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-identity-note { order: 7 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-restored { order: 7 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-spacer { order: 8 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-identity-total { order: 9 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-sync-id { order: 10 !important; }
  .qe2-clean .qe2-identity-clean .qe2-actionrow > :not(.qe2-menu-anchor) { display: none !important; }
  .qe2-clean .qe2-command { flex-wrap: wrap; row-gap: var(--qe-s-1); }
  .qe2-clean .qe2-command > .qe2-search-wrap { flex: 1 1 100%; min-width: 0; }
  .qe2-clean .qe2-command > .qe2-quick-wrap { flex: 1 1 100%; }
  .qe2-clean .qe2-command > .qe2-quick-wrap > .qe2-quick { flex: 1 1 auto; }
  .qe2-clean .qe2-quick-button { flex-direction: row; align-items: baseline; gap: 6px; }
}
.qe2-clean .qe2-quick-button.qe2-chip { flex-direction: row; align-items: center; gap: 6px; min-height: 32px; }
@container qe (max-width: 699px) { .qe2-clean .qe2-quick-button.qe2-chip, .qe2-clean .qe2-quick-more-all { min-height: 40px; } }
@container qe (max-width: 699px) {
  .qe2-clean .qe2-identity-clean > .qe2-identity-title { flex: 1 1 0; }
  .qe2-clean .qe2-identity-clean::after { content: ''; order: 4; flex: 0 0 100%; height: 0; }
}
/* Narrower desktops: the tools keep their icons (labels as tooltips); under 1024 the title line wraps to two lines. */
@container qe (max-width: 1279px) {
  .qe2-clean .qe2-identity-clean .qe2-actionrow > [data-action="start"] .qe2-action-label,
  .qe2-clean .qe2-identity-clean .qe2-actionrow > [data-action="preview"] .qe2-action-label,
  .qe2-clean .qe2-identity-clean .qe2-actionrow > [data-action="technotes"] .qe2-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@container qe (min-width: 700px) and (max-width: 1023px) {
  .qe2-clean .qe2-identity-clean { flex-wrap: wrap; row-gap: 2px; }
  .qe2-clean .qe2-identity-clean::after { content: ''; order: 4; flex: 0 0 100%; height: 0; }
  .qe2-clean .qe2-identity-clean > .qe2-back { order: 1 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-identity-title { order: 2 !important; flex: 1 1 0; }
  .qe2-clean .qe2-identity-clean > .qe2-header-actions { order: 3 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-status { order: 5 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-details-btn { order: 6 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-identity-note, .qe2-clean .qe2-identity-clean > .qe2-restored { order: 7 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-spacer { order: 8 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-identity-total { order: 9 !important; }
  .qe2-clean .qe2-identity-clean > .qe2-sync-id { order: 10 !important; }
}
.qe2-root.qe2-clean .qe2-identity-clean > .qe2-identity-title { padding-right: 0; }
.qe2-clean .qe2-below-note { color: var(--qe-ink-3); }
/* Review of gallery2 (2026-11-02): description gets the slack; one line per row; no stray split line. */
@media (min-width: 1280px) {
  .qe2-root.qe2-clean:not(.qe2-show-preview) { --qe2-columns: var(--qe2-gut) minmax(160px, 1fr) 48px 84px 76px 92px 96px 28px; }
  /* The split gap is wider than the lines' hidden select gutter, so no row or head ever overlaps the scope card's edge. */
  .qe2-root.qe2-clean .qe2-main.qe2-split-on { grid-template-columns: max(200px, min(var(--qe-left-w, 300px), calc(100% - 656px))) calc(var(--qe2-gut) + var(--qe2-colgap) + 4px) minmax(640px, 1fr); }
}
.qe2-clean .qe2-line-name { flex-wrap: nowrap; }
.qe2-clean .qe2-line-name > strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe2-clean .qe2-line-name > .qe2-part-code, .qe2-clean .qe2-line-name > [data-row-mark] { flex: none; }
.qe2-root.qe2-clean .qe2-main.qe2-split-on > .qe2-split::before { background: transparent; }
.qe2-root.qe2-clean .qe2-main.qe2-split-on > .qe2-split:hover::before, .qe2-root.qe2-clean .qe2-main.qe2-split-on > .qe2-split:focus-visible::before { background: var(--qe-field); }
@container qe2scope (max-width: 310px) {
  .qe2-root.qe2-clean .qe2-scope-body > .qe2-section-head { flex-wrap: nowrap; }
  .qe2-root.qe2-clean .qe2-scope-body > .qe2-section-head > strong { flex: 1 1 auto; }
}

/* ═══ Visual review 2026-11-02 (19 items) ═══════════════════════════════════════════════════════════════════════════ */
/* 13 + 1 + 4: the header. Left: title, save state, status, Details over a quiet customer · site line. Right: the total
   echo, Preview, the primary, ⋯. One slim state banner below. */
.qe2-clean .qe2-identity-clean { align-items: flex-start; flex-wrap: nowrap; }
.qe2-clean .qe2-identity-clean > .qe2-back { margin-top: 4px; }
.qe2-clean .qe2-title-block { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qe2-clean .qe2-title-line { display: flex; align-items: center; gap: var(--qe-s-2); min-width: 0; }
.qe2-clean .qe2-title-line > .qe2-identity-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--qe-t-sheet); line-height: var(--qe-l-sheet); font-weight: 600; padding-right: 0; }
.qe2-clean .qe2-title-line > .qe2-sync-id { display: inline-flex !important; align-items: center; flex: none; }
.qe2-clean .qe2-save-ok { display: inline-flex; color: var(--qe-ok); }
.qe2-clean .qe2-save-ok .qe2-icon { width: 16px; height: 16px; }
.qe2-clean .qe2-save-state { color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
.qe2-clean .qe2-save-dirty { color: var(--qe-ink-3); font-weight: 500; }
.qe2-clean .qe2-subtitle { display: flex; align-items: center; gap: var(--qe-s-2); min-width: 0; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-clean .qe2-subtitle-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe2-clean .qe2-overlap-chip-clean { flex: none; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--qe-ink-3); font: inherit; font-size: var(--qe-t-meta); cursor: pointer; }
.qe2-clean .qe2-identity-clean > .qe2-identity-total { align-self: center; color: var(--qe-ink-3); }
.qe2-clean .qe2-identity-clean > .qe2-identity-total strong { color: var(--qe-ink); }
.qe2-clean .qe2-identity-clean > .qe2-header-actions { align-self: center; }
.qe2-clean .qe2-status .qe2-tag-status, .qe2-clean .qe2-details-btn { border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); min-height: 26px; padding: 0 var(--qe-s-2); }
.qe2-clean .qe2-state-banner { display: flex; align-items: center; gap: var(--qe-s-2); min-height: 0; margin: 2px 0; padding: 2px 0; border-radius: 0; background: transparent; color: var(--qe-ink-3); font-size: var(--qe-t-meta);border:0 }
.qe2-clean .qe2-state-banner[hidden] { display: none; }
.qe2-clean .qe2-state-banner > .qe2-icon { width: 14px; height: 14px; flex: none; }
.qe2-clean .qe2-state-banner > .qe2-btn { min-height: 24px; margin-left: auto; color: var(--qe-ink-3); font-weight: 600; }

.qe2-clean .qe2-identity-clean .qe2-sync-note { display: none; }
.qe2-clean .qe2-info-mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; border: 1px solid var(--qe-ink-3); border-radius: 50%; color: var(--qe-ink-3); font-size: var(--qe-t-caps); font-weight: 600; font-style: italic; line-height: 1; vertical-align: 1px; cursor: help; }
/* 1: scope mismatch is a dot on the scope header. */
.qe2-clean .qe2-scope-dot { width: 10px; height: 10px; margin: 0 auto 0 var(--qe-s-1); padding: 0; border: 0; border-radius: 50%; background: var(--qe-ink-3); cursor: pointer; }
.qe2-clean [data-scope-dot]:empty { display: none; }
.qe2-clean [data-scope-dot] { display: inline-flex; align-items: center; margin-right: auto; }
/* 3: the name gets the column (two lines at most); the part number is a quiet second line. */
.qe2-clean .qe2-line-name { display: block; }
.qe2-clean .qe2-line-name > strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; text-overflow: clip; }
.qe2-clean .qe2-line-name > .qe2-part-code { display: block; margin-top: 1px; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); color: var(--qe-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qe2-clean .qe2-line-name > [data-row-mark] { display: inline-flex; margin-left: 6px; vertical-align: 1px; }
.qe2-clean .qe2-line-name > [data-row-mark]:empty { display: none; }
.qe2-clean .qe2-labour-pick { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 30px; padding: 0 var(--qe-s-2); margin-left: calc(-1 * var(--qe-s-2)); border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink); font: inherit; font-size: var(--qe-t-row); font-weight: 500; cursor: pointer; }
.qe2-clean .qe2-labour-pick:hover { border-color: var(--ds-field); }
/* 12: white boxes always; below cost is an amber number plus a small icon outside the box; a price that differs is the
   same icon pattern (tag). The icon takes room at the box's left, so every right edge stays on the grid. */
.qe2-clean .qe2-negative input, .qe2-clean .qe2-negative input:focus { background: var(--qe-surface); border-color: var(--qe-field); color: var(--qe-ink-3); }
.qe2-clean .qe2-cell-needs input { background: var(--qe-surface);border-color:var(--qe-field) }
.qe2-clean .qe2-cell.qe2-has-mark { display: flex; align-items: center; gap: 2px; }
.qe2-clean .qe2-cell.qe2-has-mark > input { flex: 1 1 auto; min-width: 0; }
.qe2-clean .qe2-cell-mark { position: static; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--qe-ink-3); }
.qe2-clean .qe2-cell-mark .qe2-icon { width: 12px; height: 12px; }
.qe2-clean .qe2-price-dot { color: var(--qe-link); cursor: pointer; }
.qe2-clean .qe2-price-dot::after { content: none; }
.qe2-clean .qe2-cell-sell:has(.qe2-price-dot) input { padding-left: var(--qe2-field-pad); }
/* 8: every numeric head ends on its values' right edge (the number inside a box ends at the box's padding). */
.qe2-clean .qe2-table-head > span:nth-child(n+3):nth-child(-n+6) { text-align: right; padding-right: calc(var(--qe2-field-pad) + 1px); }
.qe2-clean .qe2-table-head > .qe2-th-qty { text-align: right; }
.qe2-clean .qe2-table-head > .qe2-th-total { text-align: right; padding-right: 0; }
/* 9: section · group · sub-group. */
.qe2-clean .qe2-cc-section { margin-top: var(--qe-s-3); border-top: 1px solid var(--qe-line); }
.qe2-clean .qe2-cc-head { min-height: 36px; }
.qe2-clean .qe2-cc-name { font-size: var(--qe-t-row); font-weight: 600; color: var(--qe-ink); }
.qe2-clean .qe2-cc-head > strong { font-size: var(--qe-t-row); font-weight: 600; }
.qe2-clean .qe2-cc-head > .qe2-cc-menu { grid-column: 8; justify-self: center; }
.qe2-clean .qe2-group-head, .qe2-clean .qe2-band-head { height: 28px; }
.qe2-clean .qe2-group-head > strong, .qe2-clean .qe2-band-toggle > strong { font-size: var(--qe-t-caps); line-height: var(--qe-l-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qe-ink-3); }
.qe2-clean .qe2-group-head > span:last-child, .qe2-clean .qe2-band-head > span:last-child { color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.qe2-clean .qe2-group .qe2-band .qe2-band-head .qe2-band-toggle { padding-left: 16px; }
/* 10: Parts / Labour / Fees subtotals live in the summary only; a band (Equipment, OEM Kits…) keeps its own. */
.qe2-clean .qe2-group > .qe2-group-head > span:last-child { visibility: hidden; }
.qe2-clean .qe2-group:not(:has(> .qe2-band)) > .qe2-group-head > span:last-child { visibility: hidden; }
/* 11: discount is one box with a %/$ suffix inside; tax is a select-style field. */
.qe2-clean .qe2-discount-row { grid-template-columns: minmax(0, 1fr) 56px auto 80px; grid-template-areas: "label value seg amount"; column-gap: 0; }
.qe2-clean .qe2-discount-row > .qe2-mr-amount { padding-left: var(--qe-s-2); }
.qe2-clean .qe2-discount-row .qe2-mr-input > .qe2-num-input { width: 56px; min-width: 0; height: 28px; margin: 0; padding: 0 6px; border: 1px solid var(--ds-field); border-right: 0; border-radius: var(--qe-r-1) 0 0 var(--qe-r-1); background: var(--qe-surface); text-align: right; }
.qe2-clean .qe2-discount-row > .qe2-seg-mini { height: 28px; padding: 1px; border: 1px solid var(--ds-field); border-left: 0; border-radius: 0 var(--qe-r-1) var(--qe-r-1) 0; background: var(--qe-surface); }
.qe2-clean .qe2-discount-row > .qe2-seg-mini button { min-width: 20px; min-height: 24px; padding: 0 4px; }
.qe2-clean .qe2-tax-trigger { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 var(--qe-s-2); border: 1px solid var(--ds-field); border-radius: var(--qe-r-1); background: var(--qe-surface); }
/* 4: Valid until · Renew in the summary. */
.qe2-clean .qe2-valid-line { display: flex; align-items: center; gap: var(--qe-s-2); min-height: 32px; padding: 0 var(--qe-s-4); border-top: 1px solid var(--qe-hair); color: var(--qe-ink-2); font-size: var(--qe-t-meta); }
.qe2-clean .qe2-valid-line > .qe2-link-btn { margin-left: auto; }
.qe2-clean .qe2-valid-expired { color: var(--qe-ink-3); font-weight: 500; }
/* 4: the option tabs always sit right above the column heads; their settings are in ⋯. */
.qe2-clean .qe2-builder > .qe2-option-row { display: flex !important; margin: var(--qe-s-2) 0 0; }
.qe2-clean .qe2-option-row .qe2-option-meta, .qe2-clean .qe2-option-row .qe2-comparison:empty { display: none; }
.qe2-clean.qe2-one-option .qe2-header-clean { display: none; }
.qe2-clean .qe2-header-clean:empty { display: none; }
/* 14: while a quote is open the list chrome (recently viewed, stage tabs, filters, other rows) gives way to one back bar. */
.qwork:has(.qe2-root.qe2-clean) > .qbar, .qwork:has(.qe2-root.qe2-clean) > .qf-toolbar, .qwork:has(.qe2-root.qe2-clean) > .quote-listhead, .qwork:has(.qe2-root.qe2-clean) > .queue-foot,
.qwork:has(.qe2-root.qe2-clean) .lbody > .qrow { display: none !important; }
.device:has(.qe2-root.qe2-clean) .rt-chrome { display: none !important; }
.qe2-clean .qe2-backbar { display: flex; align-items: center; gap: var(--qe-s-1); min-height: 36px; margin: 0 0 var(--qe-s-1); color: var(--qe-ink-3); font-size: var(--qe-t-body); }
.qe2-clean .qe2-back-quotes { gap: 2px; padding-left: 0; color: var(--qe-ink-2); font-weight: 500; }
.qe2-clean .qe2-backbar-pos { margin: 0 var(--qe-s-1) 0 var(--qe-s-2); font-variant-numeric: tabular-nums; }
.qe2-clean .qe2-identity-clean > .qe2-back { display: none; }
.qe2-clean .qe2-labour-pick { margin-left: 0; }
/* 19: photos have no selection ticks outside a select mode. */
.qe2-clean .qe2-photo-image:not(:has(input))::after, .qe2-clean .qe2-photo-image:not(:has(input))::before { content: none; display: none; }
/* 16: below 1280 the scope is a visible six-line preview with Expand; internal notes are a tab beside it; the lines start
   above the fold. At 1280+ there are no tabs (notes sit under the scope) and no Expand. */
.qe2-clean .qe2-scope-tabs, .qe2-clean .qe2-scope-expand { display: none; }
@container qe (max-width: 1279px) {
  .qe2-clean .qe2-scope-tabs { display: flex; gap: var(--qe-s-1); margin: 0 0 var(--qe-s-1); }
  .qe2-clean .qe2-scope-tabs > button { min-height: 28px; padding: 0 var(--qe-s-2); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--qe-ink-3); font: inherit; font-size: var(--qe-t-body); font-weight: 500; cursor: pointer; }
  .qe2-clean .qe2-scope-tabs > button[aria-selected="true"] { border-bottom-color: var(--qe-ink); color: var(--qe-ink); }
  .qe2-clean .qe2-scope-expand { display: inline-flex; }
  .qe2-clean:not(.qe2-scope-open) .qe2-scope-body:not(:focus-within) > .qe2-scope { max-height: calc(6 * var(--qe-l-body) + var(--qe-s-4)); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
  .qe2-clean .qe2-scope-body > .qe2-scope { min-height: 0; }
  .qe2-clean .qe2-notes-wide { display: none !important; }
  .qe2-clean.qe2-tab-notes .qe2-scope-body { display: none !important; }
  .qe2-clean.qe2-tab-notes .qe2-notes-wide { display: block !important; }
  .qe2-clean.qe2-tab-notes .qe2-notes-wide > .qe2-label { display: none; }
  .qe2-clean .qe2-notes-wide textarea { min-height: calc(6 * var(--qe-l-body)); }
  .qe2-clean .qe2-notes-phone { display: none !important; }
  .qe2-clean .qe2-scope-section { margin-bottom: var(--qe-s-2); }
}
/* At 768 (and every width with the docked total bar) the page reserves the bar's height, so the last line is never under it. */
@container qe (max-width: 999px) { .qe2-clean .qe2-builder { padding-bottom: 88px; } }
/* 17: the search dropdown: two flat groups, uniform 40px one-line rows (the extra info on the same line). */
.qe2-clean .qe2-result { flex-direction: row; align-items: center; gap: var(--qe-s-2); min-height: 40px; height: 40px; padding: 0 var(--qe-s-2); }
.qe2-clean .qe2-result > .qe2-result-line1, .qe2-clean .qe2-result > .qe2-result-line2 { display: contents; }
.qe2-clean .qe2-result .qe2-lead { display: none; }
.qe2-clean .qe2-result .qe2-result-name { order: 1; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe2-clean .qe2-result .qe2-result-line2 > * { order: 2; flex: none; white-space: nowrap; color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.qe2-clean .qe2-result .qe2-result-pn2 { display: none; }
.qe2-clean .qe2-result .qe2-result-price { order: 9; margin-left: auto; flex: none; }
.qe2-clean .qe2-result-group { min-height: 28px; display: flex; align-items: flex-end; padding: 0 var(--qe-s-2) 4px; color: var(--qe-ink-3); font-size: var(--qe-t-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
/* 18: phone. Lines are divided rows (no cards in cards); the scope preview ends on a line with a fade; no "/" on touch. */
@container qe (max-width: 699px) {
  .qe2-clean .qe2-line { border: 0; border-bottom: 1px solid var(--qe-hair); border-radius: 0; box-shadow: none; margin: 0; background: transparent; }
  .qe2-clean .qe2-group, .qe2-clean .qe2-band { border: 0; box-shadow: none; background: transparent; }
  .qe2-clean .qe2-scope-body:not(:focus-within) > .qe2-scope { max-height: calc(5 * var(--qe-l-body) + var(--qe-s-4)) !important; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); }
  .qe2-clean .qe2-search-wrap > kbd { display: none; }
  .qe2-clean .qe2-internal-toggle { min-width: 0; padding: 0 2px; white-space: nowrap; font-size: var(--qe-t-meta); }
  .qe2-clean .qe2-backbar { min-height: 32px; }
}
@media (pointer: coarse) { .qe2-clean .qe2-search-wrap > kbd { display: none; } }
.qe2-clean .qe2-labour-pick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Header below 1024 (review 2026-11-02): the title gets its own line (it wraps rather than truncates), status and Details
   follow it; the total is in the docked bar; the tools are icons. Replaces the earlier ordered layout. */
@container qe (max-width: 1023px) {
  .qe2-clean .qe2-identity-clean { flex-wrap: nowrap !important; align-items: flex-start; }
  .qe2-clean .qe2-identity-clean::after { content: none !important; display: none !important; }
  .qe2-clean .qe2-identity-clean > * { order: 0 !important; }
  .qe2-clean .qe2-title-block { flex: 1 1 0 !important; min-width: 0; }
  .qe2-clean .qe2-title-line { flex-wrap: wrap; row-gap: 4px; }
  .qe2-clean .qe2-title-line > .qe2-identity-title { flex: 1 1 100% !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: calc(2 * var(--qe-l-row)); font-size: var(--qe-t-row) !important; line-height: var(--qe-l-row); }
  .qe2-clean .qe2-identity-clean > .qe2-identity-total { display: none !important; }
  .qe2-clean .qe2-identity-clean > .qe2-header-actions { flex: none; align-self: flex-start; }
  .qe2-clean .qe2-identity-clean .qe2-actionrow .qe2-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .qe2-clean .qe2-identity-clean .qe2-actionrow [data-primary] .qe2-action-label { position: static; width: auto; height: auto; clip: auto; }
  .qe2-clean .qe2-subtitle { flex-wrap: wrap; row-gap: 2px; }
  .qe2-clean .qe2-subtitle-text { white-space: normal; }
}
.qe2-root.qe2-clean .qe2-identity-clean .qe2-identity-title { padding-right: 0 !important; }
@container qe (max-width: 1023px) { .qe2-clean .qe2-title-line > .qe2-sync-id { order: 0; } }
@container qe (max-width: 1023px) { .qe2-clean .qe2-identity-clean > .qe2-spacer { display: none !important; } .qe2-clean .qe2-identity-clean > .qe2-header-actions { margin-left: auto; } }
.qe2-clean .qe2-title-line { justify-content: flex-start; }
.qe2-clean .qe2-title-line > * { margin-left: 0 !important; }
/* 3: a name is never cut (it wraps as far as it needs; most fit on one or two lines). */
.qe2-clean .qe2-line-name > strong { display: block; -webkit-line-clamp: unset; overflow: visible; }
@container qe (max-width: 699px) {
  .qe2-clean .qe2-foot-row, .qe2-clean .qe2-cc-head, .qe2-clean .qe2-group-head, .qe2-clean .qe2-band-head { display: flex !important; align-items: center; justify-content: space-between; margin-left: 0; }
  .qe2-clean .qe2-foot-row > strong, .qe2-clean .qe2-cc-head > strong { margin-left: auto; }
}

/* ═══ Visual review round 3 (2026-11-02) ════════════════════════════════════════════════════════════════════════════ */
/* 1: SF review facts are a two-column list. */
.qe2-review-facts { display: grid; row-gap: var(--qe-s-2); margin: var(--qe-s-3) 0; }
.qe2-review-row { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); column-gap: var(--qe-s-3); align-items: baseline; min-height: 20px; }
.qe2-review-row > span { color: var(--qe-ink-3); }
.qe2-review-row > strong { justify-self: end; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
/* 2: every number is a box; a number that can't be written is the same box, read-only, its reason the tooltip. */
.qe2-clean .qe2-cell-ro { padding: 0; line-height: normal; overflow: visible; cursor: help; }
.qe2-clean .qe2-cell-ro > .qe2-ro-box { display: block; width: 100%; height: var(--qe2-field-h); margin: 0; padding: 0 var(--qe2-field-pad); border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-canvas); color: var(--qe-ink-3); font: inherit; font-size: var(--qe-t-body); text-align: right; font-variant-numeric: tabular-nums; pointer-events: none; }
/* 7: the markers sit inside the box at its left edge, so every Markup and Sell box has the same edges. */
.qe2-clean .qe2-cell.qe2-has-mark { display: block; position: relative; }
.qe2-clean .qe2-cell.qe2-has-mark > input { width: 100%; padding-left: 22px; }
.qe2-clean .qe2-cell > .qe2-cell-mark { position: absolute; left: 6px; top: 50%; z-index: 1; margin-top: -7px; }
/* 3: Summary tax and discount: nothing overlaps or clips; the value sits on the control's middle. */
.qe2-clean .qe2-total-row[data-total="tax"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--qe-s-2); }
.qe2-clean .qe2-total-row[data-total="tax"] > .qe2-tax-trigger { min-width: 0; max-width: 100%; overflow: hidden; }
.qe2-clean .qe2-total-row[data-total="tax"] > .qe2-tax-trigger { white-space: nowrap; text-overflow: ellipsis; display: inline-flex; justify-self: start; }
.qe2-clean .qe2-total-row[data-total="tax"] > .qe2-total-value { align-self: center; }
.qe2-clean .qe2-tax-trigger > .qe2-icon { flex: none; }
.qe2-clean .qe2-tax-note, .qe2-clean [class*="qe2-tax-"]:not(.qe2-tax-trigger) { position: static; }
.qe2-clean .qe2-discount-row { grid-template-columns: max-content minmax(0, 1fr) auto auto; grid-template-areas: "label value seg amount"; column-gap: 0; }
.qe2-clean .qe2-discount-row > .qe2-mr-label { padding-right: var(--qe-s-2); white-space: nowrap; }
.qe2-clean .qe2-discount-row > .qe2-mr-value { justify-self: end; }
.qe2-clean .qe2-discount-row .qe2-mr-input > .qe2-num-input { width: 52px; }
.qe2-clean .qe2-discount-row > .qe2-mr-amount { min-width: 64px; }
/* 4: the parts book is a panel over the line-items column; Findings & scope and the summary stay. */
.qe2-clean.qe2-book-open .qe2-builder > :not(.qe2-command):not(.qe2-book-dock) { display: none !important; }
.qe2-clean .qe2-builder > .qe2-book-dock { margin-top: var(--qe-s-2); position: relative; top: auto; display: flex; flex-direction: column; min-width: 0; max-height: none; border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); overflow: visible; }
.qe2-root.qe2-clean.qe2-book-open .qe2-main.qe2-split-on > .qe2-scope-section { display: block; }
.qe2-clean .qe2-book-dock > .qe2-book-dock-body { overflow: visible; }
/* 5: add-on mode: one editor for the add-on; the main scope folded, read-only. */
.qe2-clean .qe2-head-note { color: var(--qe-ink-3); font-weight: 400; font-size: var(--qe-t-meta); }
.qe2-clean .qe2-main-scope-fold { margin-top: var(--qe-s-2); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); }
.qe2-clean .qe2-main-scope-fold > summary { min-height: 36px; display: flex; align-items: center; padding: 0 var(--qe-s-4); color: var(--qe-ink-2); font-weight: 500; cursor: pointer; }
.qe2-clean .qe2-main-scope-fold > .qe2-scope-readonly { padding: var(--qe-s-2) var(--qe-s-4) var(--qe-s-3); color: var(--qe-ink-2); }
/* 6: the tab of the main quote shows no figure; an add-on tab says what it adds. */
.qe2-clean .qe2-option [data-option-total]:empty { display: none; }
/* 9: Description has a minimum width; names wrap at spaces only; the labour picker wraps rather than clips. */
.qe2-root.qe2-clean { --qe2-desc-min: 220px; }
@media (min-width: 1280px) { .qe2-root.qe2-clean:not(.qe2-show-preview) { --qe2-columns: var(--qe2-gut) minmax(var(--qe2-desc-min), 1fr) 48px 84px 76px 92px 96px 28px; } }
.qe2-clean .qe2-line-name > strong { overflow-wrap: normal; word-break: normal; }
.qe2-clean .qe2-labour-pick { white-space: normal; text-align: left; overflow: visible; text-overflow: clip; max-width: 100%; height: auto; padding-top: 4px; padding-bottom: 4px; }
.qe2-clean .qe2-labour-pick > .qe2-icon { flex: none; }
/* 10: the phone summary sheet: the same discount box; the validity row padded. */
.qe2-clean.qe2-bottom-bar .qe2-valid-line { padding: 0 var(--qe-s-4); }
.qe2-clean .qe2-ms-unsaved { color: var(--qe-ink-3); }
/* 11: search rows: name, then part code; one quiet note at most. */
.qe2-clean .qe2-result .qe2-result-pn { order: 1; flex: none; color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
.qe2-clean .qe2-result .qe2-fit, .qe2-clean .qe2-result .qe2-result-line2 > span:not([class]), .qe2-clean .qe2-result .qe2-result-line2 > .qe2-muted { display: none !important; }
/* 15: the scope note is words, not a dot; the tab flag goes. */
.qe2-clean .qe2-scope-words { margin-left: var(--qe-s-2); padding: 0; border: 0; background: transparent; color: var(--qe-ink-3); font: inherit; font-size: var(--qe-t-meta); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.qe2-clean .qe2-scope-flag { display: none !important; }
/* 18: a blocked menu row reads as disabled (its reason is the tooltip). */
.qe2-clean .qe2-mi[aria-disabled="true"] { color: var(--qe-ink-3); }
/* 19 + 20: below 1280 the folded scope is shorter; the card's own title gives way to the tab. */
@container qe (max-width: 1279px) {
  .qe2-clean:not(.qe2-scope-open) .qe2-scope-body:not(:focus-within) > .qe2-scope { max-height: calc(3 * var(--qe-l-body) + var(--qe-s-4)); }
  .qe2-clean .qe2-scope-body > .qe2-section-head > strong { visibility: hidden; }
  .qe2-clean .qe2-scope-body > .qe2-section-head { min-height: 36px; }
}
.qe2-bottom-bar .qe2-info-mark { display: none; }
.qe2-clean .qe2-tax-note { margin: 4px 0 var(--qe-s-1); }
.qe2-clean .qe2-total-row[data-total="tax"] { min-height: 36px; }
.qe2-clean .qe2-scope-body > .qe2-section-head { flex-wrap: wrap; }
.qe2-clean .qe2-scope-body > .qe2-section-head > [data-scope-dot]:not(:empty) { order: 5; flex: 1 0 100%; margin: 0; padding-bottom: 2px; }
.qe2-clean .qe2-scope-words { margin-left: 0; }
.qe2-clean .qe2-option-row .qe2-comparison { display: none !important; }
/* Review r5 B: nothing overlaps from 1024 to 1920. The description's minimum fits the column the grid can give it, and the
   split leaves the line builder its full minimum (so the summary never covers the Total column). */
.qe2-root.qe2-clean { --qe2-desc-min: 120px; }
@media (min-width: 1400px) { .qe2-root.qe2-clean { --qe2-desc-min: 200px; } }
@media (min-width: 1280px) {
  .qe2-root.qe2-clean .qe2-main.qe2-split-on { grid-template-columns: max(200px, min(var(--qe-left-w, 300px), calc(100% - 668px))) calc(var(--qe2-gut) + var(--qe2-colgap) + 4px) minmax(640px, 1fr) !important; }
}
.qe2-clean .qe2-builder { min-width: 0; }
/* C: in $ the discount box fits six digits. */
.qe2-clean .qe2-discount-row .qe2-mr-input > .qe2-num-input[data-mode="$"] { width: 76px; }
.qe2-clean .qe2-discount-row > .qe2-discount-alt { padding-left: var(--qe-s-2); white-space: nowrap; }
/* D */
.qe2-clean .qe2-book-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.qe2-clean .qe2-book-chip .qe2-icon { width: 14px; height: 14px; }
/* G */
.qe2-clean .qe2-below-btn { color: var(--qe-ink-3); font-size: var(--qe-t-meta); text-decoration: underline dotted; text-underline-offset: 2px; }
.qe2-clean .qe2-below-detail { display: block; margin-top: 2px; color: var(--qe-ink-3); }

/* ═══ Round 4 (2026-11-02) ═══ */
/* 1: no wrapping at 1280: below 1360 the Findings and Summary columns give ~40px each and the number boxes narrow. */
@media (min-width: 1280px) {
  .qe2-root.qe2-clean { --qe-rail: 256px; }
  .qe2-root.qe2-clean:not(.qe2-show-preview) { --qe2-columns: var(--qe2-gut) minmax(var(--qe2-desc-min), 1fr) 44px 86px 70px 98px 96px 24px; --qe2-colgap: 6px; }
  .qe2-root.qe2-clean .qe2-main.qe2-split-on { grid-template-columns: max(200px, min(var(--qe-left-w, 248px), calc(100% - 668px))) calc(var(--qe2-gut) + var(--qe2-colgap) + 4px) minmax(600px, 1fr) !important; }
  .qe2-root.qe2-clean .qe2-workspace { column-gap: var(--qe-s-4); }
}
.qe2-clean .qe2-labour-pick { white-space: nowrap; }
/* 2: the Findings header is one line; the scope note is its own slim line inside the card. */
.qe2-clean .qe2-scope-body > .qe2-section-head { flex-wrap: nowrap !important; }
.qe2-clean .qe2-scope-body > .qe2-section-head > strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.qe2-clean .qe2-scope-noteline { display: flex; align-items: center; gap: 6px; min-height: 0; padding: 2px 0; border-bottom: 1px solid var(--qe-hair); background: transparent; color: var(--qe-ink-3); font-size: var(--qe-t-meta);border:0;border-radius:0;margin:2px 0 }
.qe2-clean .qe2-scope-noteline:empty { display: none; }
.qe2-clean .qe2-scope-noteline .qe2-icon { width: 12px; height: 12px; flex: none; color: var(--qe-ink-3); }
.qe2-clean .qe2-scope-noteline .qe2-scope-words { margin: 0; font-weight: 600; }
.qe2-clean .qe2-line-name > strong { display: inline; }
.qe2-clean .qe2-line-name > .qe2-part-code { display: block; }
/* Review r6 L: in $ the discount box fits "$12,345.67"; the $ toggle says it is fixed, so the "fixed" word gives way. */
.qe2-clean .qe2-discount-row .qe2-mr-input > .qe2-num-input[data-mode="$"] { width: min(100%, 100px); }
.qe2-clean .qe2-discount-row:has(.qe2-num-input[data-mode="$"]) > .qe2-discount-alt { display: none; }
.qe2-clean .qe2-discount-row:has(.qe2-num-input[data-mode="$"]) { grid-template-columns: max-content minmax(0, 1fr) auto; grid-template-areas: "label value seg"; }
/* Review r6 M: the one-time discount note is visible, plain text, one slim line. */
.qe2-clean .qe2-freeze-note:not([hidden]) { display: block; margin: 0 0 var(--qe-s-2); padding: 6px var(--qe-s-3); border-radius: var(--qe-r-1); background: var(--qe-canvas); color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The reserve and deposit rows fit the narrower summary (244px at 1280+): no control covers another. */
.qe2-clean .qe2-money-row:not(.qe2-discount-row), .qe2-clean .qe2-more-rows > .qe2-money-row:not(.qe2-discount-row) { grid-template-columns: minmax(0, 1fr) auto minmax(44px, auto) minmax(56px, auto); column-gap: 4px; }
.qe2-clean .qe2-money-row:not(.qe2-discount-row) > .qe2-mr-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe2-clean .qe2-discount-row > .qe2-mr-amount { min-width: 58px; }
.qe2-clean .qe2-discount-row > .qe2-seg-mini button { min-width: 18px; padding: 0 3px; }
.qe2-clean .qe2-cell.qe2-has-mark > input { padding-left: 20px; padding-right: 6px; }
.qe2-clean .qe2-cell > .qe2-cell-mark { left: 5px; }
.qe2-root.qe2-clean { --qe2-field-pad: 6px; }
/* ═══ Round 5 (2026-11-02) ═══ */
/* 1: no full-width discount band; one short grey line under Discount in the summary (the longer note is the i's tooltip). */
.qe2-clean [data-freeze-note] { display: none !important; }
.qe2-clean .qe2-disc-replaces { margin: -2px 0 var(--qe-s-1); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.qe2-clean .qe2-disc-replaces:empty { display: none; }
/* 2: the i sits right after the word, then a 6px gap before the box; the row fits the summary. */
@media (min-width: 1280px) { .qe2-root.qe2-clean { --qe-rail: 264px; } }
.qe2-clean .qe2-discount-row > .qe2-mr-label { display: inline-flex; align-items: center; padding-right: 6px; }
.qe2-clean .qe2-discount-row > .qe2-mr-label > .qe2-info-mark { margin-left: 4px; flex: none; }
.qe2-clean .qe2-discount-row .qe2-mr-input > .qe2-num-input:not([data-mode="$"]) { width: 46px; }
.qe2-clean .qe2-discount-row > .qe2-mr-amount { min-width: 52px; }
/* 3: the add bar's sticky band stops at the line builder's edge, so the summary card keeps one clean border. */
.qe2-clean .qe2-command { margin-right: 0; padding-right: 0; }
@media (min-width: 1280px) { .qe2-root.qe2-clean { --qe-rail: 272px; } }
.qe2-clean .qe2-discount-row > .qe2-mr-amount, .qe2-clean .qe2-discount-row > .qe2-discount-alt { padding-left: 4px; min-width: 0; }
.qe2-clean .qe2-discount-row .qe2-mr-input > .qe2-num-input:not([data-mode="$"]) { width: 50px; }
/* ═══ Round 6 (2026-11-02) ═══ */
/* 1: the scope column takes the middle column's slack: 290px at 1440+, 260px at 1280 (Summary 272 / 256). */
@media (min-width: 1280px) {
  .qe2-root.qe2-clean { --qe-rail: 256px; }
  .qe2-root.qe2-clean .qe2-main.qe2-split-on { grid-template-columns: max(200px, min(var(--qe-left-w, 260px), calc(100% - 668px))) calc(var(--qe2-gut) + var(--qe2-colgap) + 4px) minmax(600px, 1fr) !important; }
  .qe2-clean .qe2-discount-row .qe2-mr-input > .qe2-num-input:not([data-mode="$"]) { width: 44px; }
  .qe2-clean .qe2-discount-row > .qe2-seg-mini button { min-width: 16px; padding: 0 2px; }
}
@media (min-width: 1440px) {
  .qe2-root.qe2-clean { --qe-rail: 272px; }
  .qe2-root.qe2-clean .qe2-main.qe2-split-on { grid-template-columns: max(200px, min(var(--qe-left-w, 290px), calc(100% - 668px))) calc(var(--qe2-gut) + var(--qe2-colgap) + 4px) minmax(600px, 1fr) !important; }
  .qe2-clean .qe2-discount-row .qe2-mr-input > .qe2-num-input:not([data-mode="$"]) { width: 50px; }
}
/* 2: one line, Review on the right; "Check scope" when the column is narrow. */
.qe2-clean .qe2-scope-noteline { flex-wrap: nowrap; white-space: nowrap;background:transparent;border:0;border-radius:0;color:var(--qe-ink-3);padding:2px 0;min-height:0;margin:2px 0 }
.qe2-clean .qe2-scope-noteline > .qe2-sn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qe2-clean .qe2-scope-noteline > .qe2-scope-words { margin-left: auto !important; flex: none; }
.qe2-clean .qe2-sn-short { display: none; }
@container qe2scope (max-width: 250px) { .qe2-clean .qe2-sn-long { display: none; } .qe2-clean .qe2-sn-short { display: inline; } }
/* 4: the tax field shrinks with an ellipsis; its arrow always shows; 8px before the amount. */
.qe2-clean .qe2-total-row[data-total="tax"] { column-gap: var(--qe-s-2); }
.qe2-clean .qe2-tax-trigger { display: inline-flex !important; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.qe2-clean .qe2-tax-trigger > .qe2-tax-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe2-clean .qe2-tax-trigger > .qe2-icon { flex: none; }
/* 5: the discount amount has a fixed minimum width, right-aligned; the note line has 4px above it. */
.qe2-clean .qe2-discount-row > .qe2-mr-amount, .qe2-clean .qe2-discount-row > .qe2-discount-alt { min-width: 64px; justify-self: end; text-align: right; padding-left: 4px; font-size: var(--qe-t-meta); white-space: nowrap; }
.qe2-clean .qe2-disc-replaces { margin-top: 4px; }
/* 1280–1439: the 256px summary keeps every row on one grid with 12px side padding, so the discount box, its %/$ and a
   "−$1,234.56" amount all fit without touching. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .qe2-clean .qe2-workspace > .qe2-totals .qe2-summary-header { padding-left: 12px; }
  .qe2-clean .qe2-workspace > .qe2-totals .qe2-summary-scroll, .qe2-clean .qe2-workspace > .qe2-totals .qe2-summary-pinned, .qe2-clean .qe2-workspace > .qe2-totals .qe2-valid-line { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1280px) and (max-width: 1439px) { .qe2-clean .qe2-discount-row > .qe2-mr-amount, .qe2-clean .qe2-discount-row > .qe2-discount-alt { min-width: 60px; } }
/* $ mode: the typed cell is the dollar box (grid area "amount"), next to its %/$ toggle. */
.qe2-clean .qe2-discount-row:has(.qe2-num-input[data-mode="$"]) { grid-template-columns: max-content minmax(0, 1fr) auto !important; grid-template-areas: "label amount seg" !important; }
.qe2-clean .qe2-discount-row > .qe2-mr-amount.qe2-mr-input { min-width: 0; font-size: inherit; padding-left: 0; justify-self: end; }
.qe2-clean .qe2-discount-row:has(.qe2-num-input[data-mode="$"]) > .qe2-seg-mini { border-left: 0; }
/* Review r9: a book part with no cost yet: the cost box is empty and amber and says "Cost needed". */
.qe2-root.qe2-clean .qe2-cell-cost.qe2-cell-needs input { border-color: var(--qe-field);background:var(--qe-surface) }
.qe2-root.qe2-clean .qe2-cell-cost.qe2-cell-needs input::placeholder { color: var(--qe-ink-3); font-size: var(--qe-t-meta); opacity: 1; }
/* Review r16: a line that needs a cost says so in place of the phone's "Cost" toggle; the summary's link is amber. */
.qe2-root.qe2-clean .qe2-internal-toggle.qe2-toggle-needs { color: var(--qe-ink-3); font-weight: 600; }
/* On a phone the Sell box starts after the "×" (16px), so the price tag sits 4px inside the box's left edge. */
@media (max-width: 699px) {
  .qe2-root.qe2-clean .qe2-cell-sell > .qe2-price-dot { left: 20px; }
  .qe2-root.qe2-clean .qe2-cell-sell:has(> .qe2-price-dot) input { padding-left: 22px; }
}
/* Owner 2026-11-04 ("i dont like all these yellow alerts"): no amber or yellow in the editor or the parts book. Warnings and
   status use the navy system's neutral greys; red is kept only for what blocks Send (a line with no price). */
.qe2-root.qe2-clean, .qe2-layer[data-clean] { --qe-warn: var(--qe-ink-3); --qe-warn-ink: var(--qe-ink-2); --qe-warn-bg: transparent; }
.qe2-root.qe2-clean .qe2-row-mark.qe2-mark-bad, .qe2-layer[data-clean] .qe2-row-mark.qe2-mark-bad { background: var(--qe-bad); }
.qe2-root.qe2-clean .qe2-cell-sell.qe2-cell-needs input { border-color: var(--qe-bad); }
.qe2-root.qe2-clean .qe2-cell-cost.qe2-cell-needs input { border: 1px dashed var(--qe-ink-3); background: var(--qe-surface);border-color:var(--qe-field) }
.qe2-root.qe2-clean .qe2-cell-cost.qe2-cell-needs input::placeholder { color: var(--qe-ink-3); }
.qe2-root.qe2-clean .qe2-internal-toggle.qe2-toggle-needs { color: var(--qe-ink-2); font-weight: 500; }
.qe2-root.qe2-clean .qe2-negative input, .qe2-root.qe2-clean .qe2-negative input:focus { color: var(--qe-ink); font-weight: 400; background: var(--qe-surface); }
.qe2-root.qe2-clean .qe2-below-btn { color: var(--qe-ink-2); }
/* The quote's state: grey text at the end of the subtitle line (always one line), never a band. */
.qe2-root.qe2-clean .qe2-revise-note { flex: none; color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
.qe2-root.qe2-clean .qe2-revise-note::before { content: '·'; margin-right: var(--qe-s-2); }
.qe2-root.qe2-clean .qe2-revise-note[hidden] { display: none; }
/* "Check scope": a plain grey link in the Findings & scope header row. */
.qe2-root.qe2-clean .qe2-scope-check:empty { display: none; }
.qe2-root.qe2-clean .qe2-scope-check { flex: none; display: inline-flex; align-items: center; margin-left: auto; }
.qe2-root.qe2-clean .qe2-check-scope { color: var(--qe-ink-2); font-size: var(--qe-t-meta); }
/* On a phone the save state lives in the bottom bar ("2 unsaved"); the title line does not repeat it, so the first edit
   moves nothing. */
@media (max-width: 699px) { .qe2-root.qe2-clean .qe2-title-line > .qe2-sync-id { display: none !important; } }
/* Review r19: the expired notice is grey text in the subtitle line ("· Expired Oct 1 · Renew"); it does not block Send. */
.qe2-root.qe2-clean .qe2-expired-inline { flex: none; color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
.qe2-root.qe2-clean .qe2-expired-inline::before { content: '·'; margin-right: var(--qe-s-2); }
.qe2-root.qe2-clean .qe2-expired-renew { color: var(--qe-ink-2); font-size: var(--qe-t-meta); }
/* On a phone the customer always shows in full: the revised-version note is dropped there (the bottom bar says what is
   unsaved), and the expired note takes its own line under the customer. */
@media (max-width: 699px) {
  .qe2-root.qe2-clean .qe2-revise-note { display: none !important; }
  .qe2-root.qe2-clean .qe2-expired-inline { flex-basis: 100%; }
  .qe2-root.qe2-clean .qe2-expired-inline::before { content: none; }
}
/* "Check scope" sits right, beside the ··· menu, at every width. */
.qe2-root.qe2-clean .qe2-section-head > .qe2-scope-check { margin-left: auto; order: 90; }
.qe2-root.qe2-clean .qe2-section-head > .qe2-scope-menu { order: 91; }
/* Phone: "Add cost" takes the Cost toggle's slot at its width. */
.qe2-root.qe2-clean .qe2-internal-toggle.qe2-toggle-needs { color: var(--qe-ink-2); font-weight: 400; white-space: nowrap; }
.qe2-root.qe2-clean .qe2-internal-toggle.qe2-toggle-needs { font-size: 11px; letter-spacing: -0.1px; padding: 0; overflow: hidden; }
/* Write description (owner approved 2026-11-04): a quiet text button in the scope header; the draft opens beside the
   current text, one primary button. */
/* Desktop: at the right end of the formatting toolbar, under the header (the header has no room for a third control
   beside "Check scope" and the ··· menu in a 260–290px column without crushing the title). Phone: in the header row. */
.qe2-root.qe2-clean .qe2-write-desc { flex: none; width: auto; min-width: 0; min-height: 28px; padding: 0 6px; border: 0; background: transparent; color: var(--qe-ink-2); font-size: var(--qe-t-meta); font-weight: 500; white-space: nowrap; }
.qe2-root.qe2-clean .qe2-write-desc:hover:not([disabled]) { color: var(--qe-ink); background: var(--qe-hover, var(--qe-hair)); }
.qe2-root.qe2-clean .qe2-write-desc[disabled] { color: var(--qe-ink-3); cursor: not-allowed; }
.qe2-root.qe2-clean .qe2-format > .qe2-wd-tool { margin-left: auto; }
.qe2-root.qe2-clean .qe2-section-head > .qe2-wd-head { display: none; order: 89; }
@media (max-width: 699px) {
  .qe2-root.qe2-clean .qe2-format > .qe2-wd-tool { display: none; }
  .qe2-root.qe2-clean .qe2-section-head > .qe2-wd-head { display: inline-flex; margin-left: auto; }
  .qe2-root.qe2-clean .qe2-section-head > .qe2-wd-head + .qe2-scope-check { margin-left: 0; }
}
.qe2-layer[data-clean] .qe2-wd { display: flex; flex-direction: column; gap: var(--qe-s-3); }
.qe2-layer[data-clean] .qe2-wd-hint textarea { width: 100%; min-height: 72px; resize: vertical; }
.qe2-layer[data-clean] .qe2-wd-source, .qe2-layer[data-clean] .qe2-wd-status { margin: 0; color: var(--qe-ink-2); font-size: var(--qe-t-body); }
.qe2-layer[data-clean] .qe2-wd-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--qe-s-3); }
.qe2-layer[data-clean] .qe2-wd-compare h4 { margin: 0 0 var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); font-weight: 600; }
.qe2-layer[data-clean] .qe2-wd-doc { min-height: 100%; overflow: visible; padding: var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); color: var(--qe-ink); font-size: var(--qe-t-body); line-height: 1.5; overflow-wrap: anywhere; }
.qe2-layer[data-clean] .qe2-wd-doc p { margin: 0 0 var(--qe-s-2); }
.qe2-layer[data-clean] .qe2-wd-footer { display: flex; justify-content: flex-end; gap: var(--qe-s-2); flex-wrap: wrap; }
@media (max-width: 699px) { .qe2-layer[data-clean] .qe2-wd-compare { grid-template-columns: minmax(0, 1fr); } }
/* Round 2: Current and Draft fill the panel and scroll together (the sheet body is the one scroller). */
.qe2-layer[data-clean][data-panel="write-desc"] .qe2-sheet-body { display: flex; flex-direction: column; }
.qe2-layer[data-clean] .qe2-wd { flex: 1 1 auto; min-height: 0; }
.qe2-layer[data-clean] .qe2-wd-compare { flex: 1 1 auto; align-items: stretch; }
.qe2-layer[data-clean] .qe2-wd-compare > section { display: flex; flex-direction: column; min-height: 0; }
.qe2-layer[data-clean] .qe2-wd-compare > section > .qe2-wd-doc { flex: 1 1 auto; }
/* Round 3: the note sits directly above "Replace scope list only" (and is its tooltip). Phone: Current / Draft tabs. */
.qe2-layer[data-clean] .qe2-wd-footer { align-items: flex-end; }
.qe2-layer[data-clean] .qe2-wd-only { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.qe2-layer[data-clean] .qe2-wd-note { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: 1.2; white-space: nowrap; }
.qe2-layer[data-clean] .qe2-wd-tabs { display: none; }
@media (max-width: 699px) {
  .qe2-layer[data-clean] .qe2-wd-tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 2px; border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); }
  .qe2-layer[data-clean] .qe2-wd-tabs > button { min-height: 32px; padding: 0 var(--qe-s-3); border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2); font: inherit; font-size: var(--qe-t-body); }
  .qe2-layer[data-clean] .qe2-wd-tabs > button[aria-selected="true"] { background: var(--qe-action); color: var(--qe-on-action); }
  .qe2-layer[data-clean] .qe2-wd-compare[data-wd-tab="draft"] > section[aria-label="Current"], .qe2-layer[data-clean] .qe2-wd-compare[data-wd-tab="current"] > section[aria-label="Draft"] { display: none; }
  .qe2-layer[data-clean] .qe2-wd-compare h4 { display: none; }
}
.qe2-layer[data-clean] .qe2-wd-dropped { margin: 0; color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.qe2-layer[data-clean] .qe2-wd-show { color: var(--qe-ink-2); font-size: var(--qe-t-meta); text-decoration: underline; text-underline-offset: 2px; }
.qe2-layer[data-clean] .qe2-wd-dropped-list { margin: var(--qe-s-1, 4px) 0 0; padding-left: 18px; color: var(--qe-ink-2); font-size: var(--qe-t-meta); }
/* Review r21: a negative margin is plain text (red is only for what blocks Send). */
.qe2-root.qe2-clean .qe2-margin.qe2-margin-neg > strong, .qe2-root.qe2-clean .qe2-ms-margin.qe2-neg, .qe2-root.qe2-clean .qe2-below-cost-warn { color: var(--qe-ink); }
/* Review r27: the Internal notes tab marks a quote that has notes with a small filled dot. */
.qe2-root.qe2-clean .qe2-tab-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--qe-ink-3); vertical-align: middle; }
/* Live #3816 (2026-11-05): the quote description of a multi-centre quote is folded: one line when it is the centres'
   scopes put together, else a three-line preview (never more than ~120px) with Expand. */
.qe2-root.qe2-clean .qe2-desc-folded { margin-top: var(--qe-s-2); }
.qe2-root.qe2-clean .qe2-desc-same { display: flex; align-items: center; gap: var(--qe-s-2); min-height: 28px; }
.qe2-root.qe2-clean .qe2-desc-fold-head { display: flex; align-items: center; gap: var(--qe-s-2); min-height: 24px; }
.qe2-root.qe2-clean .qe2-desc-section .qe2-desc-expand { margin-left: auto; flex: none; color: var(--qe-ink-2); font-size: var(--qe-t-meta); }
.qe2-root.qe2-clean .qe2-desc-same .qe2-desc-expand { margin-left: 0; }
.qe2-root.qe2-clean .qe2-desc-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 4.8em; margin-top: 4px; padding: var(--qe-s-2) var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); color: var(--qe-ink-2); font-size: var(--qe-t-body); line-height: 1.5; }
/* Review r28: the expanded description's Collapse sits a space after the label; a named building titles the scope card
   in full. */
.qe2-root.qe2-clean .qe2-desc-section > .qe2-desc-expand { margin-left: var(--qe-s-2); }
.qe2-root.qe2-clean .qe2-section-head > strong:has(> .qe2-scope-title-name) { overflow: visible; text-overflow: clip; white-space: normal; min-width: 0; flex: 1 1 auto; }
.qe2-root.qe2-clean .qe2-desc-same > .qe2-label { white-space: nowrap; }
.qe2-root.qe2-clean .qe2-dn-short { display: none; }
@media (min-width: 1280px) and (max-width: 1439px) { .qe2-root.qe2-clean .qe2-dn-long { display: none; } .qe2-root.qe2-clean .qe2-dn-short { display: inline; } }

/* Independent editor review, 2026-11-05: preserve reading space and stable rows. */
.qe2-clean .qe2-command.qe2-stuck::after { display: none; }
.qe2-clean .qe2-line-name > strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  max-height: calc(2 * var(--qe-l-body)); overflow: hidden; white-space: normal;
}
.qe2-clean .qe2-cell-ro > .qe2-ro-value { display: block; padding-right: 0; border: 0; background: transparent; line-height: var(--qe2-field-h, 30px); text-align: right; }
.qe2-clean .qe2-num-input, .qe2-layer[data-clean] .qe2-num-input {
  border: 1px solid var(--ds-field); border-radius: var(--qe-r-1); background: var(--qe-surface);
}
.qe2-clean .qe2-quote-desc:empty::before { content: attr(data-placeholder); color: var(--qe-ink-3); pointer-events: none; }
.qe2-clean .qe2-quote-desc { min-height: 36px; box-sizing: border-box; }
/* Round 9 P1-3: an empty Findings & scope box keeps one line of height while it is read-only during a save (Chrome gives
   an editable empty box a line; a read-only one collapses to its padding, which moved every row 20 px). */
.qe2-clean .qe2-scope:not(.qe2-quote-desc):empty::before { content: '\200b'; }
/* Labour rows reserve a quiet baseline from first paint. The temporary note uses that space without
   contributing height or covering the next band, even when the description wraps. */
.qe2-clean .qe2-labour-row > .qe2-cell-note {
  position: absolute; top: auto; bottom: 0; left: var(--qe2-gut); right: 0; z-index: 1;
  margin: 0; padding: 0; height: var(--qe-l-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: transparent; color: var(--qe-ink-3); font-weight: 400; text-align: left;
}
/* Wider part names at laptop widths (review P1-11): the scope panel stays beside the lines, a little
   narrower by default (the operator can still drag it), and the money columns are slimmer. */
@media (min-width: 1280px) {
  .qe2-root.qe2-clean { --qe2-desc-min: 200px; }
  .qe2-root.qe2-clean:not(.qe2-show-preview) {
    --qe2-columns: var(--qe2-gut) minmax(var(--qe2-desc-min), 1fr) 44px 84px 70px 92px 88px 28px; --qe2-colgap: 6px;
  }
  .qe2-root.qe2-clean .qe2-main.qe2-split-on { grid-template-columns: max(200px, min(var(--qe-left-w, 220px), calc(100% - 720px))) calc(var(--qe2-gut) + var(--qe2-colgap) + 4px) minmax(640px, 1fr) !important; }
}
@media (min-width: 1440px) {
  .qe2-root.qe2-clean .qe2-main.qe2-split-on { grid-template-columns: max(200px, min(var(--qe-left-w, 260px), calc(100% - 720px))) calc(var(--qe2-gut) + var(--qe2-colgap) + 4px) minmax(640px, 1fr) !important; }
}
@media (max-width: 1023px) {
  .qe2-root.qe2-clean { --qe2-field-h: 32px; --qe2-gut: 32px; }
  .qe2-clean .qe2-cell input, .qe2-clean .qe2-num-input { min-height: 32px; }
  .qe2-clean .qe2-delete, .qe2-clean .qe2-icon-btn { min-width: 32px; min-height: 32px; }
  .qe2-clean .qe2-band-toggle, .qe2-clean .qe2-cc-name, .qe2-clean .qe2-scope-expand,
  .qe2-clean .qe2-desc-expand, .qe2-clean [data-action="optional-item"],
  .qe2-clean .qe2-link-btn, .qe2-clean .qe2-labour-pick { min-height: 32px; }
  .qe2-clean .qe2-group-head, .qe2-clean .qe2-band-head { height: auto; min-height: 32px; }
}


/* Review round 2 (2026-11-05). N1: a scope width dragged on a wider screen is clamped so the line grid always fits
   (see the 720px reserve above); the builder never paints money under the Summary card. */
/* N2: "Saved copy · loading the live quote" floats; it never pushes the lines when it goes away. */
.qe2-root .qe2-banner.qe2-provisional-note {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; margin: 0;
  max-width: min(520px, calc(100vw - 32px)); box-shadow: var(--qe-shadow-pop); pointer-events: none;
}
/* P1-14 remainder: header, scope and footer controls are at least 32px tall below 1024px. */
@media (max-width: 1023px) {
  .qe2-clean .qe2-header button, .qe2-clean .qe2-identity button, .qe2-clean .qe2-scope-tabs [role="tab"],
  .qe2-root.qe2-clean .qe2-write-desc, .qe2-clean .qe2-addline-footer .qe2-btn { min-height: 32px; }
  .qe2-root.qe2-clean .qe2-select-tick { min-width: 32px; min-height: 32px; flex: none; margin-left: 0; }
  .qe2-clean .qe2-format button { min-height: 32px; min-width: 32px; }
  .qe2-root .qe2-banner.qe2-provisional-note { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Review round 3: title and option names shrink inside their own boxes; tools keep their space. */
.qe2-clean .qe2-identity-clean { min-width: 0; }
.qe2-clean .qe2-title-line > :not(.qe2-identity-title) { flex-shrink: 0; }
.qe2-clean .qe2-option-row, .qe2-clean .qe2-options, .qe2-clean .qe2-option,
.qe2-clean .qe2-option-picker { min-width: 0; max-width: 100%; }
.qe2-clean .qe2-options { flex: 0 1 auto; }
.qe2-clean .qe2-option { overflow: hidden; }
.qe2-clean .qe2-option-name { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe2-clean .qe2-option > :not(.qe2-option-name) { flex-shrink: 0; }
/* Save failures are a real block, but appearing or closing the message must never move the work. */
.qe2-root .qe2-banner.qe2-save-error {
  position: fixed; left: 50%; top: 80px; bottom: auto; transform: translateX(-50%); z-index: 9002;
  width: max-content; max-width: min(680px, calc(100vw - 32px)); margin: 0;
  background: var(--qe-surface); color: var(--qe-bad); border: 1px solid var(--qe-line); box-shadow: var(--qe-shadow-pop);
}
.qe2-save-error > span { min-width: 0; overflow-wrap: anywhere; }
.qe2-root .qe2-save-error > .qe2-btn { flex: none; min-height: 32px; min-width: 32px; }
.qe2-clean .qe2-cell-note::before { display: none; }

/* On narrow screens the same price action is in the keyboard-accessible row menu. */
@media (max-width: 1023px) {
  .qe2-root .qe2-cell-mark.qe2-price-dot { display: none; }
  .qe2-root.qe2-clean .qe2-cell-sell:has(> .qe2-price-dot) input { padding-left: var(--qe2-field-pad); }
  .qe2-root [data-action="row-menu"], .qe2-layer .qe2-mi { min-width: 32px; min-height: 32px; }
}

/* Draft reconciliation notes float above the work area without moving quote rows. */
.qe2-draft-notices { position: fixed; right: 24px; bottom: 88px; z-index: 30; max-width: min(480px, calc(100vw - 48px)); }
.qe2-draft-notices:not(:empty) { padding: 8px 12px; border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); box-shadow: var(--qe-shadow-pop); }
.qe2-draft-notices .qe2-quiet-notice { margin: 0; }

/* Accepted quotes show recorded values and a quiet next-step explanation. */
.qe2-readonly-value { color: inherit; font: inherit; white-space: pre-wrap; }
.qe2-convert-note { margin: 0; color: var(--qe-ink-3); font-size: var(--qe-t-meta); font-weight: 400; }
.qe2-root.qe2-clean.qe2-signed-locked .qe2-subtitle { flex-wrap: wrap; }
.qe2-root.qe2-clean.qe2-signed-locked .qe2-revise-note { display: block !important; flex-basis: 100%; }
.qe2-root.qe2-clean.qe2-signed-locked .qe2-revise-note::before { content: none; }

/* Round 10: reserve room for $99,999.99, including borders, padding and the price marker. */
.qe2-root.qe2-clean .qe2-cell-cost input,
.qe2-root.qe2-clean .qe2-cell-sell input {
  box-sizing: border-box; width: 100%; min-width: 0; padding-left: 4px; padding-right: 4px; font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) {
  .qe2-root.qe2-clean:not(.qe2-show-preview) { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 44px 100px 70px 110px 88px 28px; }
}
@container qe (min-width: 700px) {
  .qe2-root.qe2-clean.qe2-show-margin .qe2-table-head,
  .qe2-root.qe2-clean.qe2-show-margin .qe2-line { grid-template-columns: var(--qe2-columns); }
  .qe2-clean.qe2-show-margin .qe2-builder { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 64px 56px 110px 88px 32px; }
  .qe2-clean.qe2-show-margin :is(.qe2-group-head, .qe2-band-head) > span:last-child,
  .qe2-clean.qe2-show-margin .qe2-cc-head > strong,
  .qe2-clean.qe2-show-margin .qe2-foot-row > strong { grid-column: 8; }
  .qe2-clean.qe2-show-margin .qe2-cc-head > .qe2-cc-delete { grid-column: 9; }
}
@media (min-width: 1024px) {
  .qe2-root.qe2-clean .qe2-cell-sell:has(> .qe2-price-dot) input { padding-left: 18px; }
}
@media (max-width: 1023px) {
  .qe2-root.qe2-clean .qe2-cell-sell:has(> .qe2-price-dot) input { padding-left: 4px; }
}
/* Docking starts at a 940px editor. Stack scope above the builder and let descriptions wrap;
   a 640px split-column minimum cannot fit beside the preview. Markup remains available undocked. */
@media (min-width: 1280px) {
  .qe2-root.qe2-clean.qe2-show-preview { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 0px 110px 88px 32px; --qe2-colgap: 4px; }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-canvas { grid-template-columns: minmax(0, 1fr) clamp(300px, 36%, 600px); }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-main.qe2-split-on { display: block; }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-split,
  .qe2-root.qe2-clean.qe2-show-preview .qe2-cell-markup { display: none; }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-th-markup { visibility: hidden; overflow: hidden; }
  .qe2-root.qe2-clean.qe2-show-preview.qe2-show-margin .qe2-builder { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 0px 56px 110px 88px 32px; --qe2-colgap: 4px; }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-line-name { flex-wrap: wrap; }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-part-code { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}
.qe2-logo { padding: var(--qe-s-2); border-radius: var(--qe-r-1); background: var(--qe-action); }
@media (max-width: 1023px) {
  .qe2-root.qe2-clean .qe2-table-head, .qe2-root.qe2-clean .qe2-line,
  .qe2-root.qe2-clean .qe2-group-head, .qe2-root.qe2-clean .qe2-band-head,
  .qe2-root.qe2-clean .qe2-cc-head, .qe2-root.qe2-clean .qe2-foot-row { margin-left: 0; }
}
.qe2-root .qe2-banner.qe2-provisional-note { display: block; box-sizing: border-box; width: max-content; min-width: 0; pointer-events: auto; }
.qe2-draft-notices { box-sizing: border-box; }

/* Round 13: real-width reading space, tap targets and a stable load-notice baseline. */
@media (max-width: 699px) {
  .qe2-root.qe2-clean .qe2-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; height: auto; min-height: 64px; padding: 6px var(--qe-s-2); gap: 2px var(--qe-s-2); }
  .qe2-root.qe2-clean .qe2-result .qe2-result-name { grid-column: 1 / -1; grid-row: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; overflow-wrap: anywhere; }
  .qe2-root.qe2-clean .qe2-result-name .qe2-nowrap { white-space: normal; }
  .qe2-root.qe2-clean .qe2-result .qe2-result-pn { display: block; grid-column: 1; grid-row: 2; margin: 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .qe2-root.qe2-clean .qe2-result .qe2-result-price { grid-column: 2; grid-row: 2; padding: 0; }
  .qe2-root.qe2-clean .qe2-result .qe2-onquote { grid-column: 1 / -1; grid-row: 3; justify-self: start; white-space: normal; }
}
@media (max-width: 1023px) {
  .qe2-root.qe2-clean .qe2-row-controls { min-width: 32px; }
  .qe2-root.qe2-clean .qe2-select-tick { box-sizing: border-box; width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin: 0; padding: 0; justify-content: center; }
  .qe2-root.qe2-clean .qe2-select-tick input { width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin: 0; }
}
@media (min-width: 1280px) {
  .qe2-root.qe2-clean:not(.qe2-show-preview) { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 56px 110px 88px 28px; --qe2-colgap: 4px; }
  .qe2-root.qe2-clean.qe2-show-margin .qe2-builder { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 56px 48px 110px 88px 28px; --qe2-colgap: 4px; }
  .qe2-root.qe2-clean .qe2-line-name > strong { width: 100%; }
}
/* The empty header and a loaded advisory occupy the same one-line slot. Loading is
   ordinary flow here, so it cannot paint over Summary. Errors/reconciliation toasts
   keep their existing independent placement. Multiple real notices remain readable. */
.qe2-root.qe2-clean .qe2-header-clean:empty { display: block; min-height: 36px; margin: 0; }
.qe2-root.qe2-clean .qe2-header-clean:has(~ .qe2-loading, ~ .qe2-banner:not(.qe2-save-error):not(.qe2-provisional-note), ~ .qe2-quiet-notice) { display: none; }
.qe2-root.qe2-clean .qe2-canvas > :is(.qe2-loading, .qe2-banner:not(.qe2-save-error):not(.qe2-provisional-note), .qe2-quiet-notice) {
  box-sizing: border-box; height: 36px; min-height: 36px; margin: 0; padding: 2px 0; color: var(--qe-ink-3); background: transparent; font-size: var(--qe-t-meta); line-height: 32px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.qe2-root.qe2-clean .qe2-canvas > :is(.qe2-loading, .qe2-banner, .qe2-quiet-notice)::-webkit-scrollbar { display: none; }
.qe2-root.qe2-clean .qe2-canvas > .qe2-banner:not(.qe2-save-error):not(.qe2-provisional-note) .qe2-btn { min-height: 32px; padding-top: 0; padding-bottom: 0; }
/* At a wide desk the preview leaves enough room for the scope and complete line
   grid beside it. Narrower docked editors retain their existing stacked layout. */
@media (min-width: 1800px) {
  .qe2-root.qe2-clean.qe2-show-preview { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 56px 110px 88px 28px; --qe2-colgap: 4px; }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-canvas { grid-template-columns: minmax(0, 1fr) clamp(300px, 28%, 440px); }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-main.qe2-split-on { display: grid; grid-template-columns: max(200px, min(var(--qe-left-w, 220px), calc(100% - 720px))) 24px minmax(640px, 1fr) !important; }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-main.qe2-split-on > .qe2-split { display: block; }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-cell-markup { display: flex; }
  .qe2-root.qe2-clean.qe2-show-preview .qe2-th-markup { visibility: visible; overflow: visible; }
  .qe2-root.qe2-clean.qe2-show-preview.qe2-show-margin .qe2-builder { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 56px 48px 110px 88px 28px; --qe2-colgap: 4px; }
}
/* Round 14: 1101.2% needs room for all seven glyphs plus the input's padding.
   Reserve the markup track without taking space from currency fields. */
@media (min-width: 1024px) {
  .qe2-root.qe2-clean .qe2-cell-markup input { box-sizing: border-box; width: 100%; min-width: 0; padding-left: 4px; padding-right: 4px; }
  .qe2-root.qe2-clean:not(.qe2-show-preview) { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 72px 110px 88px 28px; --qe2-colgap: 2px; }
  .qe2-root.qe2-clean.qe2-show-margin:not(.qe2-show-preview) .qe2-builder { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 72px 48px 110px 88px 28px; }
}
@media (min-width: 1280px) {
  /* Keep the default scope width steady as the viewport grows; the flexible name
     track receives the spare room. An operator's explicit split width still wins. */
  .qe2-root.qe2-clean:not(.qe2-show-preview) .qe2-main.qe2-split-on { grid-template-columns: max(200px, min(var(--qe-left-w, 220px), calc(100% - 720px))) calc(var(--qe2-gut) + var(--qe2-colgap) + 4px) minmax(640px, 1fr) !important; }
}
@media (min-width: 1800px) {
  .qe2-root.qe2-clean.qe2-show-preview { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 72px 110px 88px 28px; }
  .qe2-root.qe2-clean.qe2-show-preview.qe2-show-margin .qe2-builder { --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 72px 48px 110px 88px 28px; }
}
.qe2-draft-notices:not(:empty) { padding-right: 44px; }
.qe2-draft-notices > [data-action="dismiss-draft-notices"] { position: absolute; top: 0; right: 0; min-width: 32px; min-height: 32px; }
.qd-scope-note { margin: 8px 0; font-size: 12px; font-weight: 400; color: var(--muted); }
.quotes-queue .inline-editor[data-mode="email"] .qd-send > .qd-scope-note { box-sizing: border-box; width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 20px; }
@media (max-width: 740px) {
  .quotes-queue .inline-editor[data-mode="email"] .qd-send > .qd-scope-note { padding-left: 16px; padding-right: 16px; }
}

/* Keep Save in the normal header flow and reachable above the add bar and column headings.
   Phones retain the existing bottom bar. JS measures the header when its text wraps. */
@media (min-width: 700px) {
  .qe2-root { --qe2-sticky-actions-h: var(--qe2-actions-h, 0px); }
  .qe2-clean .qe2-identity-clean, .qe2-root:not(.qe2-clean) .qe2-header {
    position: sticky; top: 0; z-index: 40; align-self: start;
    background: var(--qe-surface); box-shadow: 0 -8px 0 var(--qe-surface);
  }
  .qe2-root [data-row], .qe2-root [data-line] {
    scroll-margin-top: calc(var(--qe2-sticky-actions-h, 0px) + var(--qe2-cmd-h, 56px) + var(--qe-h-head) + 8px);
  }
}

/* Customer email stays over the mounted editor; its scroll and quote stay put. */
.qe2-email-panel {
  position: fixed; inset: 0 0 0 auto; z-index: 1200;
  margin: 0; padding: 0; height: 100%; max-height: none; max-width: none; color: inherit; border: 0;
  width: min(680px, 85vw); display: flex; flex-direction: column;
  background: var(--qe-surface); border-left: 1px solid var(--qe-line);
  box-shadow: var(--qe-shadow-sheet); overflow: hidden;
}
.qe2-email-panel::backdrop { background: var(--qe-scrim); }
.qe2-email-panel-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--qe-line); }
.qe2-email-panel-header strong { flex: 1; }
.qe2-email-panel-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* Beats quotes-redesign.css ".quotes-queue .quote-page[data-mode=\"pricing\"] .qd-send:not(.qd-costbar){display:none}": the panel lives
   inside that pricing-mode page (live review round 12: the panel opened blank). */
.quotes-queue .quote-page[data-mode] .qe2-email-panel .qd-send:not(.qd-costbar), .qe2-email-panel .qd-send { display: flex; flex-direction: column; overflow: visible; min-height: 100%; border-top: 0; }
.qe2-email-panel .qd-send > .scroll { flex: 1 0 auto; overflow: visible; max-height: none; }
.qe2-email-panel .qd-send > .scroll > .editform { height: auto; min-height: 0; min-width: 0; }
.qe2-email-panel .qd-send .rtedit { flex: 1 0 160px; min-height: 160px; height: auto; max-height: none; overflow: visible; }
.qe2-email-panel .qd-card, .qe2-email-panel .qd-note { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.qe2-email-panel .qd-send .qd-card { box-sizing: border-box; width: auto; max-width: calc(100% - 52px); margin: 14px 26px; }
.qe2-email-panel .qd-test-recipient-note { min-height: 1.6em; margin: 0; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: 1.6; overflow-wrap: anywhere; }
.qe2-email-panel .qd-send .btns { flex-wrap: wrap; }
.qe2-email-panel .qd-send .action { position: sticky; bottom: 0; background: var(--qe-surface); }
.qe2-email-panel .qd-send .action::before { display: none; }
.qe2-email-panel .qd-send .qd-expired-row { padding: 0; }
.qe2-email-panel :is(.qd-scope-note, .qd-placeholder-note, .qd-expired-note) { display: block; margin: 0 0 8px; padding: 0; color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: normal; overflow-wrap: anywhere; }
.qe2-email-panel .qd-placeholder-note[hidden] { display: none; }
@media (max-width: 1023px) {
  .qe2-email-panel :is(button, select, input:not([type="checkbox"])) { min-height: 32px; }
  .qe2-email-panel .qe-itemize { display: inline-flex; align-items: center; min-height: 32px; }
}
@media (max-width: 600px) {
  .qe2-email-panel { width: 100%; border-left: 0; }
  .qe2-email-panel-header { gap: 8px; padding: 10px; }
  /* A wrapped phone footer follows the form so it cannot cover the body editor. */
  .qe2-email-panel .qd-send .action { position: static; }
}

/* Round 15: give spare laptop width to descriptions, including with a saved wide
   scope divider. Currency tracks retain room for $99,999.99 and their padding. */
@media (min-width: 1280px) and (max-width: 1799px) {
  .qe2-root.qe2-clean:not(.qe2-show-preview) .qe2-main.qe2-split-on {
    grid-template-columns: minmax(200px, min(var(--qe-left-w, 220px), 220px)) calc(var(--qe2-gut) + var(--qe2-colgap) + 4px) minmax(0, 1fr) !important;
  }
  .qe2-root.qe2-clean:not(.qe2-show-preview) {
    --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 72px 110px 88px 28px;
  }
  .qe2-root.qe2-clean.qe2-show-margin:not(.qe2-show-preview) .qe2-builder {
    --qe2-columns: var(--qe2-gut) minmax(0, 1fr) 36px 100px 72px 48px 110px 88px 28px;
  }
}

/* innerWidth rounds fractional CSS pixels: 1023.5 can report 1023 while a
   max-width:1023px query is false. Cover the whole range below desktop. */
@media (1023px < width < 1024px) {
  .qe2-root.qe2-clean { --qe2-gut: 32px; }
  .qe2-root.qe2-clean .qe2-row-controls { min-width: 32px; }
  .qe2-root.qe2-clean .qe2-select-tick,
  .qe2-root.qe2-clean .qe2-select-tick input { box-sizing: border-box; width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin: 0; padding: 0; }
}

/* ═══ Roadmap #570 (quotes audit 2026-11-11): nothing clips or overlaps at 1024, 1280 or 1440 ═══ */
/* The quote description's label wraps inside the Findings column; its Expand never runs into the lines beside it. */
.qe2-root.qe2-clean .qe2-desc-same { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.qe2-root.qe2-clean .qe2-desc-same > .qe2-label { white-space: normal; min-width: 0; overflow-wrap: break-word; }
.qe2-root.qe2-clean .qe2-desc-fold-head { flex-wrap: wrap; min-width: 0; }
.qe2-root.qe2-clean .qe2-desc-fold-head > .qe2-label { min-width: 0; overflow-wrap: break-word; }
/* A long tax city wraps inside its button instead of being cut off ("Rancho Palos Verdes"). */
.qe2-clean .qe2-total-row[data-total="tax"] > .qe2-tax-trigger { white-space: normal; overflow: visible; text-overflow: clip; height: auto; padding-top: var(--qe-s-1); padding-bottom: var(--qe-s-1); text-align: left; }
.qe2-clean .qe2-tax-trigger > .qe2-tax-text { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* The labour type wraps in a narrow description column instead of being clipped ("Technician Norma"). */
.qe2-clean .qe2-labour-pick { white-space: normal; overflow: visible; text-overflow: clip; height: auto; text-align: left; }