/* ==========================================================================================
   Quoting: shared styles (prefix qt-). Quoting rebuild, phase 1 onward.

   One global sheet for the quoting pages, like safety.css for the Safety pages, loaded last so a
   page's own inline styles don't have to fight it. The phone app keeps a copy at
   src/Quote.Mobile/wwwroot/css/quoting.css: when this file changes, copy it there and bump the ?v=
   in both App.razor and the phone's index.html.

   Colours come from design-tokens.css. Primary actions are app blue; nothing here is decoration.
   ========================================================================================== */

/* ---- The allowance and ABN notice (QuoteAllowanceNotice) ------------------------------------ */

.qt-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #1e293b);
    font-size: 0.9rem;
    line-height: 1.45;
}

.qt-notice > i {
    flex: none;
    margin-top: 2px;
    line-height: 1.2;
    color: var(--color-primary, #2563eb);
}

.qt-notice-body {
    min-width: 0;
    flex: 1 1 auto;
}

.qt-notice-text {
    margin: 0;
    overflow-wrap: anywhere;
}

.qt-notice-warn {
    border-color: var(--warning-600, #d97706);
    background: var(--warning-100, #fef3c7);
}

.qt-notice-warn > i {
    color: var(--warning-700, #b45309);
}

.qt-notice-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--color-primary, #2563eb);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qt-notice-link:hover,
.qt-notice-link:focus-visible {
    color: var(--color-primary-hover, #1d4ed8);
}

/* A notice that sits on the job page, under the "Quote this job" card. */
.qt-notice-under-cta {
    margin-top: -0.5rem;
}

/* ---- A quote reopened from a saved one (the quote form) -------------------------------------- */

.qt-reopened {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.65rem 1rem;
    margin: 0 0 1rem;
    border-radius: var(--radius-lg, 12px);
    background: var(--brand-50, #eff6ff);
    color: var(--color-text, #1e293b);
    font-size: 0.9rem;
}

.qt-reopened p {
    margin: 0;
    flex: 1 1 16rem;
    min-width: 0;
}

.qt-link-button {
    min-height: 44px;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--color-primary, #2563eb);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.qt-link-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---- Saved to send later (My Quotes) --------------------------------------------------------- */

.qt-saved {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface, #ffffff);
}

.qt-saved-title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1e293b);
}

.qt-saved-sub {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted, #64748b);
}

.qt-saved-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.qt-saved-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--neutral-100, #f1f5f9);
}

.qt-saved-row:first-child {
    border-top: 0;
}

.qt-saved-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.qt-saved-job {
    font-weight: 600;
    color: var(--color-text, #1e293b);
    overflow-wrap: anywhere;
}

.qt-saved-meta {
    font-size: 0.82rem;
    color: var(--color-text-muted, #64748b);
}

.qt-saved-open {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.9rem;
    border-radius: var(--radius-md, 10px);
    background: var(--color-primary, #2563eb);
    color: var(--neutral-0, #ffffff);
    font-weight: 600;
    text-decoration: none;
}

.qt-saved-open:hover,
.qt-saved-open:focus-visible {
    background: var(--color-primary-hover, #1d4ed8);
    color: var(--neutral-0, #ffffff);
}

/* ---- The quick-tools launcher on My Quotes and Compare (phones) -------------------------------- */
/* On a phone the launcher (58px round, fixed above the tab bar) sat over My Quotes' Sort select at the top of the page
   and over rows and cards as they scrolled under it, on My Quotes and on Compare. Neither page has a pinned bar to keep
   it beside, so on a phone it steps aside there, as it does for the editor, the money sheets and the sent view. From
   768px My Quotes keeps room under its list for it instead. */
@media (max-width: 767.98px) {
    body:has(.qt-mq) .qt-dock, body:has(.qt-cmp) .qt-dock { display: none !important; }
}

/* ---- Quoting phase 3: money components, the quote editor, the sent view ---- */
/*
   The money components (src/Quote.UI/Components/Money: LineEditor, TotalsBar, OptionTabs, ExtrasList, StatusPill,
   ProposalSheet, ProposalPhotos, OnlyYou, SaveStatus, MoneySheet) and the quote editor's pages. Every class below is
   in the phase 3 contract's catalogue and uses a sub-prefix (qt-le-, qt-tb-, qt-ps-, ...) so nothing collides with
   the qt- classes Templates.razor and QuickToolsDock already define; QuotingCssContractTests holds that line.

   Rules: colours only from design-tokens.css (a hex appears only as a var() fallback); primary actions app blue;
   the business's brand colour only on the customer sheet's rule and logo tile (--qt-ps-brand); every target at least
   44x44; typed fields 16px text (so iOS doesn't zoom) and at least 44px tall; a visible focus ring on every control.
   Layout follows the component's own width, not the screen's: the line editor and the editor page are CSS containers.
*/

:root {
    --qt-sans: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    --qt-display: var(--font-display, 'Archivo', 'Segoe UI', Helvetica, Arial, sans-serif);
}

/* The money editors own the bottom of a phone screen (MoneyEditorChrome sets these on <body>): the app's tab bar and
   the quick-tools dock step aside for the sticky total and Send, and the sticky total steps aside for the keyboard. */
body.qt-money-focus .app-bottomnav { display: none !important; }
@media (max-width: 767.98px) {
    body.qt-money-focus .qt-dock { display: none !important; }
    body.qt-money-focus .app-main { padding-bottom: 0; }
    body.qt-money-kb .qt-tb--sticky { display: none !important; }
}
/* The quick-tools launcher sits above everything (its own z-index, above --z-modal): an open money sheet (the preview,
   the checks, the hire yards) covers it at every width, so it never floats bright and tappable over the sheet's scrim.
   The sent view steps it aside at every width too. The editor keeps everything clear of it with its pinned total (the
   launcher sits over the bar's reserved right-hand end, below); the sent view has no pinned bar, and its actions are
   full-width buttons in one column up to 1000px of the view and in the 320px column beside the sheet after that, so the
   launcher sat over their right-hand ends at 390, 800, 1024 and 1320 ("Duplicate as a new draft", "Mark as won",
   "Revise this quote"). Room kept for it there would narrow every button at every width. */
body:has(.qt-sheet) .qt-dock { display: none !important; }
body:has(.qt-sv) .qt-dock { display: none !important; }
/* The phone's tab bar (fixed, z-index 1460, above --z-modal) steps aside for an open money sheet too. The editors hide
   it with qt-money-focus, but phase 7 opens sheets on pages without that chrome (the saved items library's Archive
   confirm, "Save lines as a saved item" on a sent quote's page): their footer buttons sat in the bottom 60px under the
   bar at 390 and 300, and a tap on "Keep it" went to More. The sheet is in the page only while it is open, so the bar
   comes back as it closes. */
body:has(.qt-sheet) .app-bottomnav { display: none !important; }
/* From 768px the quick-tools launcher stays (fixed 22px from the bottom right, 58px round, above the page): the pinned
   total keeps its right-hand end clear of it, so Send's label is never under it. 22 + 58 + 16 of air = 96px. */
@media (min-width: 768px) {
    body.qt-money-focus .qt-tb--sticky { padding-right: 96px; }
}

/* ---- Shared: buttons, fields, segments, boxes, banners, state cards, pills ------------------------ */

.qt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    max-width: 100%; min-width: 44px; min-height: 44px; padding: 0 16px;
    border: 1px solid transparent; border-radius: var(--radius-sm, 8px);
    background: var(--brand-600, #2563eb); color: var(--neutral-0, #ffffff);
    font: 600 15px/1.2 var(--qt-sans); text-align: center; text-decoration: none; cursor: pointer;
    transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease), border-color var(--dur-fast, 120ms) var(--ease-out, ease), color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.qt-btn > i { font-size: 16px; line-height: 1; }
.qt-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--brand-700, #1d4ed8); color: var(--neutral-0, #ffffff); }
.qt-btn:disabled, .qt-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.qt-btn.is-secondary { background: var(--neutral-0, #ffffff); color: var(--brand-700, #1d4ed8); border-color: var(--neutral-400, #cbd0d6); }
.qt-btn.is-secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--brand-50, #eff6ff); border-color: var(--brand-300, #93c5fd); color: var(--brand-800, #1e40af); }
.qt-btn.is-secondary[aria-pressed="true"] { background: var(--brand-50, #eff6ff); border-color: var(--brand-600, #2563eb); color: var(--brand-800, #1e40af); }
.qt-btn.is-quiet { background: transparent; color: var(--neutral-800, #333d47); }
.qt-btn.is-quiet:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--neutral-200, #e9e9e6); color: var(--neutral-900, #1f2933); }
.qt-btn.is-danger { background: var(--neutral-0, #ffffff); color: var(--danger-700, #b91c1c); border-color: var(--danger-200, #fecaca); }
.qt-btn.is-danger:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--danger-50, #fef2f2); color: var(--danger-800, #991b1b); }
.qt-btn.is-block { display: flex; width: 100%; }

/* A field: its label, the control, a hint and an error, stacked. */
.qt-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qt-lbl { margin: 0; font: 600 13px/1.3 var(--qt-sans); color: var(--neutral-800, #333d47); }
.qt-in, .qt-ta {
    display: block; width: 100%; min-width: 0; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--neutral-400, #cbd0d6); border-radius: var(--radius-sm, 8px);
    background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933);
    font: 400 16px/1.4 var(--qt-sans);
}
.qt-ta { min-height: 88px; padding: 10px 12px; resize: vertical; }
select.qt-in { padding-right: 32px; }
.qt-in::placeholder, .qt-ta::placeholder { color: var(--neutral-600, #6b7280); }
.qt-in:disabled, .qt-ta:disabled, .qt-in[readonly], .qt-ta[readonly] { background: var(--neutral-50, #f8f8f7); color: var(--neutral-700, #4b5563); }
.qt-in[aria-invalid="true"], .qt-ta[aria-invalid="true"] { border-color: var(--danger-600, #dc2626); }
.qt-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.qt-err { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--danger-700, #b91c1c); }

/* A segmented choice ("14 days | 30 days | 60 days", "Fast | Full"): buttons with aria-pressed. */
.qt-seg {
    display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px;
    border-radius: var(--radius-md, 12px); background: var(--neutral-200, #e9e9e6);
}
.qt-seg-btn {
    min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-sm, 8px);
    background: transparent; color: var(--neutral-800, #333d47); font: 600 14px/1.2 var(--qt-sans); cursor: pointer;
}
.qt-seg-btn:hover { color: var(--neutral-900, #1f2933); }
.qt-seg-btn[aria-pressed="true"] { background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); box-shadow: var(--shadow-xs); }

/* A plain bordered box with a small heading. */
.qt-box { min-width: 0; padding: 16px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
.qt-box-h { margin: 0 0 12px; font: 700 16px/1.3 var(--qt-display); color: var(--neutral-900, #1f2933); }

/* A banner above the editor: saved elsewhere, sent, leaving with unsaved changes. */
.qt-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 12px 16px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px);
    background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); font-size: 14px; line-height: 1.45;
}
.qt-banner > i { flex: none; font-size: 18px; line-height: 1; }
.qt-banner > p { flex: 1 1 240px; min-width: 0; margin: 0; }
.qt-banner.is-info { border-color: var(--brand-200, #bfdbfe); background: var(--brand-50, #eff6ff); }
.qt-banner.is-info > i { color: var(--brand-700, #1d4ed8); }
.qt-banner.is-warn { border-color: var(--warning-200, #fde68a); background: var(--warning-50, #fffbeb); }
.qt-banner.is-warn > i { color: var(--warning-700, #b45309); }
.qt-banner.is-error { border-color: var(--danger-200, #fecaca); background: var(--danger-50, #fef2f2); }
.qt-banner.is-error > i { color: var(--danger-700, #b91c1c); }

/* A centred card instead of the editor: not found, managers quote, the upgrade note, a closed job. */
.qt-state {
    max-width: 560px; margin: 24px auto; padding: 24px; text-align: center;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); background: var(--neutral-0, #ffffff);
}
.qt-state > i:first-child { display: block; margin: 0 0 8px; font-size: 28px; line-height: 1; color: var(--brand-600, #2563eb); }
.qt-state h2, .qt-state h3 { margin: 0 0 8px; font: 700 20px/1.25 var(--qt-display); color: var(--neutral-900, #1f2933); }
.qt-state p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.qt-state p:last-child { margin-bottom: 0; }

/* Only you see this: tradie-private fields (a line's cost, the allowance, the deposit limit) on a grey desk. */
.qt-only-you {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill, 999px);
    background: var(--neutral-200, #e9e9e6); color: var(--neutral-800, #333d47); font: 600 12px/1.4 var(--qt-sans); white-space: nowrap;
}
.qt-private { min-width: 0; padding: 10px 12px; border: 1px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-sm, 8px); background: var(--neutral-100, #f4f4f2); }

/* Where the draft is: "Saved 2:14pm". */
.qt-save-status { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 13px; line-height: 1.3; color: var(--neutral-700, #4b5563); }
.qt-save-status[data-state="failed"], .qt-save-status[data-state="stale"] { color: var(--danger-700, #b91c1c); }
.qt-save-status[data-state="offline"] { color: var(--warning-800, #92400e); }
.qt-save-status[data-state="saving"] > i { animation: qt-spin 1s linear infinite; }
@keyframes qt-spin { to { transform: rotate(360deg); } }

/* A status in words, with a tone. */
.qt-pill {
    display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill, 999px);
    background: var(--neutral-100, #f4f4f2); color: var(--neutral-800, #333d47); box-shadow: inset 0 0 0 1px var(--neutral-300, #e5e7eb);
    font: 600 12.5px/1.3 var(--qt-sans); white-space: nowrap;
}
.qt-pill--neutral { background: var(--neutral-100, #f4f4f2); color: var(--neutral-800, #333d47); box-shadow: inset 0 0 0 1px var(--neutral-300, #e5e7eb); }
.qt-pill--info { background: var(--brand-50, #eff6ff); color: var(--brand-800, #1e40af); box-shadow: inset 0 0 0 1px var(--brand-200, #bfdbfe); }
.qt-pill--ok { background: var(--success-50, #f0fdf4); color: var(--success-800, #166534); box-shadow: inset 0 0 0 1px var(--success-200, #bbf7d0); }
.qt-pill--warn { background: var(--warning-50, #fffbeb); color: var(--warning-800, #92400e); box-shadow: inset 0 0 0 1px var(--warning-200, #fde68a); }
.qt-pill--over { background: var(--danger-50, #fef2f2); color: var(--danger-800, #991b1b); box-shadow: inset 0 0 0 1px var(--danger-200, #fecaca); }
.qt-pill--muted { background: var(--neutral-50, #f8f8f7); color: var(--neutral-600, #6b7280); box-shadow: inset 0 0 0 1px var(--neutral-200, #e9e9e6); }

/* One focus ring for every control in this block. */
:is(.qt-btn, .qt-in, .qt-ta, .qt-seg-btn,
    .qt-le-fold, .qt-le-sum, .qt-le-kind, .qt-le-step, .qt-le-qty-in, .qt-le-unit, .qt-le-price-in, .qt-le-menu-btn, .qt-le-panel-item, .qt-le-add-btn,
    .qt-ot-chip, .qt-ot-add, .qt-sheet-close, .qt-ed-tab, .qt-ed-preview-btn, .qt-js-toggle, .qt-js-trade,
    .qt-ph-remove, .qt-ph-pick-tile, .qt-ck-fix, .qt-hp-yard, .qt-rc-result, .qt-si-add, .qt-sv-act):focus-visible,
:is(.qt-xl-item, .qt-ps-opt) > input:focus-visible,
.qt-pp-tile > a:focus-visible {
    outline: 3px solid var(--brand-500, #3b82f6);
    outline-offset: 2px;
}
.qt-ph-add:focus-within { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }

/* ---- LineEditor (qt-le-): cards below 792px of its own width, a real table from there -------------- */

.qt-le { container: qt-le / inline-size; min-width: 0; font-family: var(--qt-sans); color: var(--neutral-900, #1f2933); }

.qt-le-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; }
.qt-le-title { margin: 0; font: 700 17px/1.25 var(--qt-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
.qt-le-summary { font-size: 13px; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; }
.qt-le-fold {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px);
    background: var(--neutral-50, #f8f8f7); color: var(--neutral-900, #1f2933); font: inherit; text-align: left; cursor: pointer;
}
.qt-le-fold > i { flex: none; transition: transform var(--dur-fast, 120ms) var(--ease-out, ease); }
.qt-le-fold[aria-expanded="false"] > i { transform: rotate(-90deg); }
.qt-le-fold > strong { font: 700 15px/1.3 var(--qt-display); }
.qt-le-fold > small { margin-left: auto; font-size: 13px; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; text-align: right; }
/* In card layout a foldable group shows the fold row instead of its heading; folded, only the fold row. */
.qt-le[data-foldable] .qt-le-head > .qt-le-title,
.qt-le[data-foldable] .qt-le-head > .qt-le-summary { display: none; }
.qt-le[data-folded] .qt-le-list,
.qt-le[data-folded] .qt-le-empty,
.qt-le[data-folded] .qt-le-add,
.qt-le[data-folded] .qt-le-limit { display: none; }

.qt-le-cols { display: none; }
.qt-le-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qt-le-empty {
    margin: 0 0 8px; padding: 12px; border: 1px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-md, 12px);
    font-size: 14px; color: var(--neutral-700, #4b5563); text-align: center;
}

/* A line as a card. Collapsed, it is one tappable summary row; open, the summary heads its fields. */
.qt-le-line {
    position: relative; min-width: 0; padding: 0;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.qt-le-line.is-open { border-color: var(--brand-500, #3b82f6); box-shadow: 0 0 0 3px var(--color-primary-glow-soft, rgba(37, 99, 235, 0.06)); }
.qt-le-line.is-optional { border-style: dashed; }
.qt-le-line.has-error:not(.is-open) { border-color: var(--danger-600, #dc2626); }
.qt-le-line:not(.is-open) .qt-le-fields { display: none; }

.qt-le-sum {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    width: 100%; min-height: 56px; padding: 8px 12px; border: 0; border-radius: var(--radius-md, 12px);
    background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.qt-le-sum > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.qt-le-sum strong, .qt-le-sum small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-le-sum strong { font-size: 15px; font-weight: 600; }
.qt-le-sum small { font-size: 13px; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; }
.qt-le-line.has-error .qt-le-sum small { color: var(--danger-700, #b91c1c); }
.qt-le-sum .qt-le-amt { font-size: 15px; }
.qt-le-line.is-open > .qt-le-sum { margin-bottom: 10px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0; }

/* Each kind wears its own colour on the dot and the kind button (the words always say the kind too). */
.qt-le-kind--labour { --qt-le-k: var(--brand-700, #1d4ed8); --qt-le-kb: var(--brand-50, #eff6ff); }
.qt-le-kind--material { --qt-le-k: var(--success-700, #15803d); --qt-le-kb: var(--success-50, #f0fdf4); }
.qt-le-kind--hire { --qt-le-k: var(--warning-700, #b45309); --qt-le-kb: var(--warning-50, #fffbeb); }
.qt-le-kind--travel { --qt-le-k: var(--info-700, #0e7490); --qt-le-kb: var(--info-50, #ecfeff); }
.qt-le-kind--fee { --qt-le-k: var(--neutral-800, #333d47); --qt-le-kb: var(--neutral-100, #f4f4f2); }
.qt-le-kind--other { --qt-le-k: var(--neutral-700, #4b5563); --qt-le-kb: var(--neutral-100, #f4f4f2); }
.qt-le-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--qt-le-k, var(--neutral-500, #9aa3ad)); }

/* The fields: the kind row (kind ... menu), the description, the numbers, then cost, panels, tags and Done. */
.qt-le-fields {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 10px;
    min-width: 0; padding: 0 12px 12px;
}
.qt-le-fields > * { grid-column: 1 / -1; min-width: 0; }
.qt-le-fields > .qt-le-top { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.qt-le-fields > .qt-le-menu-btn { grid-column: 2; grid-row: 1; }
.qt-le-top .qt-le-amt { display: none; margin-left: auto; }

.qt-le-kind {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 1px solid transparent; border-radius: var(--radius-sm, 8px);
    background: var(--qt-le-kb, var(--neutral-100, #f4f4f2)); color: var(--qt-le-k, var(--neutral-800, #333d47));
    font: 600 14px/1.2 var(--qt-sans); cursor: pointer;
}
span.qt-le-kind { cursor: default; }
button.qt-le-kind:hover { border-color: var(--qt-le-k, var(--neutral-400, #cbd0d6)); }
.qt-le-kind > i { font-size: 16px; line-height: 1; }
.qt-le-kind-text { display: inline-flex; align-items: center; gap: 4px; }
.qt-le-kind-text > i { font-size: 12px; }

.qt-le-desc .qt-in { font-size: 16px; }

.qt-le-nums { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-width: 0; }
.qt-le-nums > .qt-fld:nth-child(1) { flex: 0 0 auto; }
.qt-le-nums > .qt-fld:nth-child(2) { flex: 1 1 96px; }
.qt-le-nums > .qt-fld:nth-child(3) { flex: 1 1 136px; }

/* Quantity: [44 -][76 input][+ 44] inside one 1px box (64px usable), or a plain 96px input with no steps. */
.qt-le-qty {
    display: inline-flex; align-items: stretch; min-height: 46px;
    border: 1px solid var(--neutral-400, #cbd0d6); border-radius: var(--radius-sm, 8px); background: var(--neutral-0, #ffffff);
}
.qt-le-qty:has(> [aria-invalid="true"]) { border-color: var(--danger-600, #dc2626); }
.qt-le-step {
    flex: none; width: 44px; min-height: 44px; padding: 0; border: 0;
    background: var(--neutral-50, #f8f8f7); color: var(--neutral-800, #333d47); font-size: 18px; line-height: 1; cursor: pointer;
}
.qt-le-step:first-child { border-right: 1px solid var(--neutral-300, #e5e7eb); border-radius: 7px 0 0 7px; }
.qt-le-step:last-child { border-left: 1px solid var(--neutral-300, #e5e7eb); border-radius: 0 7px 7px 0; }
.qt-le-step:hover { background: var(--neutral-100, #f4f4f2); color: var(--neutral-900, #1f2933); }
.qt-le-qty-in {
    width: 76px; min-width: 76px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 0;
    background: transparent; color: var(--neutral-900, #1f2933); text-align: center;
    font: 600 16px/1.2 var(--qt-sans); font-variant-numeric: tabular-nums;
}
.qt-le-qty-in:only-child { width: 96px; min-width: 96px; padding: 0 12px; border-radius: 7px; text-align: left; }

.qt-le-unit { min-width: 96px; min-height: 46px; padding: 0 12px; }

.qt-le-price { position: relative; min-width: 136px; }
.qt-le-cur { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); font-size: 16px; color: var(--neutral-600, #6b7280); pointer-events: none; }
.qt-le-price-in {
    display: block; width: 100%; min-width: 0; min-height: 46px; padding: 0 12px 0 24px;
    border: 1px solid var(--neutral-400, #cbd0d6); border-radius: var(--radius-sm, 8px);
    background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933);
    font: 400 16px/1.2 var(--qt-sans); font-variant-numeric: tabular-nums;
}
.qt-le-price-in[aria-invalid="true"] { border-color: var(--danger-600, #dc2626); }

.qt-le-amt { font: 700 18px/1.2 var(--qt-display); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--neutral-900, #1f2933); }

.qt-le-menu-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm, 8px);
    background: transparent; color: var(--neutral-700, #4b5563); font-size: 18px; line-height: 1; cursor: pointer;
}
.qt-le-menu-btn:hover, .qt-le-menu-btn[aria-expanded="true"] { background: var(--neutral-100, #f4f4f2); color: var(--neutral-900, #1f2933); }

.qt-le-cost { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.qt-le-cost > .qt-fld { flex: 0 1 180px; }

/* The inline panels under a line (never a floating popover: they must fit at 300px). */
.qt-le-panel {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
}
.qt-le-panel-item {
    display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-sm, 8px);
    background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); font: 500 14px/1.2 var(--qt-sans); text-align: left; cursor: pointer;
}
.qt-le-panel-item:hover { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); }
.qt-le-panel-item[aria-checked="true"] { border-color: var(--brand-600, #2563eb); background: var(--brand-50, #eff6ff); color: var(--brand-800, #1e40af); font-weight: 600; }

.qt-le-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qt-le-tag {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill, 999px);
    background: var(--neutral-100, #f4f4f2); color: var(--neutral-800, #333d47); font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.qt-le-fields > .qt-le-done { justify-self: end; }

/* The add bar: one button per kind, then the page's own ("Hire from a yard", "From a template"). */
.qt-le-add {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 12px;
    border: 1px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-md, 12px);
}
.qt-le-add > span:first-child { flex: 1 1 100%; font: 600 13px/1.3 var(--qt-sans); color: var(--neutral-700, #4b5563); }
.qt-le-add-btn {
    display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-sm, 8px);
    background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); font: 600 14px/1.2 var(--qt-sans); cursor: pointer;
}
.qt-le-add-btn:hover { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); }
.qt-le-add-btn > i { font-size: 16px; line-height: 1; color: var(--brand-700, #1d4ed8); }
.qt-le-limit { margin: 10px 0 0; font-size: 14px; color: var(--neutral-700, #4b5563); }

/* Read only: the same rows as text. */
.qt-le-line.is-readonly {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 10px 12px;
}
.qt-le-line.is-readonly > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.qt-le-line.is-readonly strong { font-weight: 600; overflow-wrap: anywhere; }
.qt-le-line.is-readonly small { font-size: 13px; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; }
.qt-le-line.is-readonly .qt-le-amt { font-size: 15px; }
.qt-le-line.is-readonly .qt-le-tags { grid-column: 2 / -1; }

/* The table: 44 + 160 + 76 + 76 + 100 + 96 + 44 plus six 6px gaps is 632px, every column at its floor. The number
   columns are as narrow as a 64px field allows (quantity and unit 66px usable, the price 66px), so the description,
   the field that matters most, gets the rest. The table starts at 792px (632 + 160), where that rest is 320px: from
   632px it gave the description 202-215px at 1320 beside the editor's preview and the invoice's side panel, and the
   one-line field cut it off ("Remove the old system a..."). Below 792px each line is a card, the description the
   card's full width. */
@container qt-le (min-width: 792px) {
    .qt-le-cols {
        display: grid; grid-template-columns: 44px minmax(160px, 1fr) 76px 76px 100px 96px 44px; column-gap: 6px;
        padding: 0 0 6px; border-bottom: 1px solid var(--neutral-300, #e5e7eb);
        font: 600 12.5px/1.3 var(--qt-sans); color: var(--neutral-700, #4b5563);
    }
    .qt-le-cols > span:nth-child(6) { text-align: right; }

    .qt-le-fold, .qt-le-sum, .qt-le-done, .qt-le-step, .qt-le-kind-text { display: none; }
    .qt-le[data-foldable] .qt-le-head > .qt-le-title { display: block; }
    .qt-le[data-foldable] .qt-le-head > .qt-le-summary { display: inline; }
    .qt-le[data-folded] .qt-le-list, .qt-le[data-folded] .qt-le-add { display: flex; }
    .qt-le[data-folded] .qt-le-empty, .qt-le[data-folded] .qt-le-limit { display: block; }

    .qt-le-list { gap: 0; }
    .qt-le-line, .qt-le-line.is-open, .qt-le-line.has-error:not(.is-open) {
        padding: 4px 0; border: 0; border-bottom: 1px solid var(--neutral-200, #e9e9e6); border-radius: 0;
        background: transparent; box-shadow: none;
    }
    .qt-le-line.is-optional { border-bottom-style: dashed; }
    .qt-le-line:not(.is-open) .qt-le-fields { display: grid; }

    .qt-le-fields {
        grid-template-columns: 44px minmax(160px, 1fr) 76px 76px 100px 96px 44px; column-gap: 6px; row-gap: 6px;
        align-items: start; padding: 0;
    }
    .qt-le-fields > .qt-le-top, .qt-le-nums { display: contents; }
    .qt-le-top > .qt-le-kind { grid-column: 1; grid-row: 1; width: 44px; padding: 0; }
    .qt-le-fields > .qt-le-desc { grid-column: 2; grid-row: 1; }
    .qt-le-nums > .qt-fld:nth-child(1) { grid-column: 3; grid-row: 1; }
    .qt-le-nums > .qt-fld:nth-child(2) { grid-column: 4; grid-row: 1; }
    .qt-le-nums > .qt-fld:nth-child(3) { grid-column: 5; grid-row: 1; }
    .qt-le-top .qt-le-amt { display: block; grid-column: 6; grid-row: 1; align-self: center; margin: 0; font-size: 15px; text-align: right; }
    .qt-le-fields > .qt-le-menu-btn { grid-column: 7; grid-row: 1; }
    .qt-le-fields > .qt-le-cost, .qt-le-fields > .qt-le-panel, .qt-le-fields > .qt-le-tags { grid-column: 2 / 8; }

    /* The column header names the fields; their own labels stay for screen readers. */
    .qt-le-fields .qt-lbl {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .qt-le-cost .qt-lbl { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }

    .qt-le-qty { display: block; min-height: 0; border: 0; background: transparent; }
    .qt-le-qty-in, .qt-le-qty-in:only-child {
        width: 100%; min-width: 0; min-height: 44px; padding: 0 4px;
        border: 1px solid var(--neutral-400, #cbd0d6); border-radius: var(--radius-sm, 8px); background: var(--neutral-0, #ffffff);
        font-weight: 400; text-align: right;
    }
    .qt-le-qty-in[aria-invalid="true"] { border-color: var(--danger-600, #dc2626); }
    .qt-le-unit { min-width: 0; min-height: 44px; padding: 0 4px; }
    .qt-le-price { min-width: 0; }
    .qt-le-cur { left: 10px; }
    .qt-le-price-in { min-height: 44px; padding: 0 8px 0 24px; text-align: right; }
    .qt-le-cost .qt-le-price-in { text-align: left; }

    .qt-le-line.is-readonly { grid-template-columns: 10px minmax(0, 1fr) auto; padding: 8px 0; }
}

/* ---- TotalsBar (qt-tb-): the total and Send, pinned to the bottom at every width ---------------- */

.qt-tb {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    min-width: 0; padding: 12px 16px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px);
    background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); font-family: var(--qt-sans);
}
.qt-tb--sticky {
    position: sticky; bottom: 0; z-index: var(--z-sticky, 1000); margin-top: 16px;
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.qt-tb--block { margin-top: 16px; }
.qt-tb-sum { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.qt-tb-label { font: 600 13px/1.3 var(--qt-sans); color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.qt-tb-total {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
    font: 800 26px/1.1 var(--qt-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--neutral-900, #1f2933);
}
.qt-tb-suffix { font: 600 13px/1.2 var(--qt-sans); letter-spacing: 0; color: var(--neutral-700, #4b5563); }
.qt-tb-split { font-size: 13px; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; }
.qt-tb-row { display: flex; justify-content: space-between; gap: 12px; max-width: 320px; font-size: 13px; color: var(--neutral-800, #333d47); font-variant-numeric: tabular-nums; }
.qt-tb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; font-size: 13px; color: var(--neutral-700, #4b5563); }
.qt-tb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qt-tb-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.qt-tb-actions > .qt-btn { min-height: 48px; }
@media (max-width: 479.98px) {
    .qt-tb-actions { flex: 1 1 100%; }
    .qt-tb-actions > [data-money-send] { flex: 1 1 auto; }
}

/* ---- OptionTabs (qt-ot-): good, better and best --------------------------------------------------- */

.qt-ot {
    display: flex; gap: 8px; margin: 0 0 12px; padding: 2px 2px 8px; overflow-x: auto;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.qt-ot > [role="tablist"] { display: flex; flex: none; gap: 8px; }
.qt-ot-chip {
    flex: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    min-width: 96px; min-height: 52px; padding: 6px 14px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px);
    background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); text-align: left; cursor: pointer; scroll-snap-align: start;
}
.qt-ot-chip:hover { border-color: var(--brand-300, #93c5fd); }
.qt-ot-chip[aria-selected="true"] { border-color: var(--brand-600, #2563eb); background: var(--brand-50, #eff6ff); box-shadow: inset 0 0 0 1px var(--brand-600, #2563eb); }
.qt-ot-name { display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1.2 var(--qt-sans); white-space: nowrap; }
.qt-ot-name > i { font-size: 12px; color: var(--warning-600, #d97706); }
.qt-ot-total { font-size: 13px; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qt-ot-add {
    flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0;
    border: 1px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-md, 12px);
    background: transparent; color: var(--brand-700, #1d4ed8); font-size: 18px; cursor: pointer;
}
.qt-ot-add:hover { border-color: var(--brand-500, #3b82f6); background: var(--brand-50, #eff6ff); }
.qt-ot-edit {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 16px; padding: 12px;
    border: 1px solid var(--neutral-200, #e9e9e6); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
}
.qt-ot-edit > .qt-fld { flex: 1 1 100%; }

/* ---- ExtrasList (qt-xl-): optional extras, ticked or listed ---------------------------------------- */

.qt-xl { min-width: 0; }
.qt-xl-h { margin: 0 0 8px; font: 700 15px/1.3 var(--qt-display); color: var(--neutral-900, #1f2933); }
.qt-xl ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qt-xl-item {
    display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 8px 12px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-sm, 8px); background: var(--neutral-0, #ffffff); cursor: pointer;
}
div.qt-xl-item { cursor: default; }
.qt-xl-item > input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--brand-600, #2563eb); }
.qt-xl-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.qt-xl-text small { font-size: 12.5px; color: var(--neutral-700, #4b5563); }
.qt-xl-adds { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qt-xl-note { margin: 8px 0 0; font-size: 13px; color: var(--neutral-700, #4b5563); }

/* ---- ProposalSheet (qt-ps-): the visual proposal, with customer figures from the shared sheet ----- */

.qt-ps {
    --ps-ink: var(--proposal-ink, #142544); --ps-muted: var(--proposal-muted, #4e607b); --ps-line: var(--proposal-line, #e0e7ef); --ps-serif: Georgia, "Times New Roman", serif;
    container: qt-proposal / inline-size; min-width: 0; border: 1px solid var(--ps-line); border-radius: 6px;
    background: var(--proposal-paper, #fff); color: var(--ps-ink); box-shadow: 0 7px 28px var(--proposal-shadow, #233b5710); font-family: var(--qt-sans);
}
.qt-ps-in { display: flex; flex-direction: column; min-width: 0; overflow: clip; border-radius: inherit; }
.qt-ps h4 { margin: 0; color: var(--ps-ink); font: 700 21px/1.25 var(--ps-serif); letter-spacing: -.025em; }
.qt-ps-letterhead { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; min-width: 0; padding: 24px 30px; }
.qt-ps-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.qt-ps-brand-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qt-ps-logo {
    display: grid; flex: none; place-items: center; width: 58px; height: 58px; overflow: hidden;
    border: 1px solid var(--proposal-logo-edge, #b8ac98); outline: 1px solid var(--proposal-logo-inset, #e1dbd1); outline-offset: -5px; background: var(--proposal-paper, #fff);
    color: var(--ps-ink); font: 700 32px/1 var(--ps-serif);
    border-color: var(--qt-ps-brand, var(--proposal-logo-edge, #b8ac98));
}
.qt-ps-logo > img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--proposal-paper, #fff); }
.qt-ps-name { font: 700 23px/1.18 var(--ps-serif); letter-spacing: -.025em; overflow-wrap: anywhere; }
.qt-ps-ids, .qt-ps-meta { color: var(--ps-muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.qt-ps-contact { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 280px; padding-left: 24px; border-left: 1px solid var(--ps-line); color: var(--ps-muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.qt-ps-reference { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-left: auto; text-align: right; font-size: 12px; color: var(--ps-muted); }
.qt-ps-reference strong { color: var(--ps-ink); font: 400 16px/1.3 var(--ps-serif); }
.qt-ps-hero { position: relative; display: grid; min-width: 0; background: var(--proposal-ivory, #f7f2ea); }
.qt-ps-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 17px; min-width: 0; padding: 30px; }
.qt-ps-kicker { margin: 0; color: var(--proposal-kicker, #615d56); font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .28em; text-transform: uppercase; }
.qt-ps-title { margin: 0; color: var(--proposal-heading, #112344); font: 700 37px/1.12 var(--ps-serif); letter-spacing: -.045em; overflow-wrap: anywhere; }
.qt-ps-for { margin: 0; font-size: 15px; line-height: 1.45; color: var(--proposal-recipient, #263b59); overflow-wrap: anywhere; }
.qt-ps-rule { width: 42px; height: 3px; flex: none; margin-top: 2px; background: var(--qt-ps-brand, var(--proposal-rule, #b6976b)); }
.qt-ps-cover { position: relative; display: block; min-width: 0; min-height: 210px; overflow: hidden; background: var(--proposal-image-backdrop, #ece8e0); }
.qt-ps-cover > img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.qt-ps-cover > span { position: absolute; right: 10px; bottom: 9px; max-width: calc(100% - 20px); padding: 3px 6px; border-radius: 3px; background: var(--proposal-caption-backdrop, #142544b8); color: var(--proposal-paper, #fff); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.qt-ps-cover:focus-visible { outline: 3px solid var(--proposal-focus, #2563eb); outline-offset: -3px; }
.qt-ps-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 14px 30px; border-bottom: 1px solid var(--proposal-facts-line, #e7edf3); background: var(--proposal-facts-background, #f2f6fa); font-size: 12px; line-height: 1.4; }
.qt-ps-facts > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; min-width: 0; }
.qt-ps-facts > div + div { padding-left: 24px; border-left: 1px solid var(--proposal-facts-divider, #c9d5e1); }
.qt-ps-facts dt { font-weight: 400; color: var(--ps-muted); }
.qt-ps-facts dt > i { margin-right: 7px; color: var(--proposal-facts-icon, #314967); }
.qt-ps-facts dd { margin: 0; font-weight: 500; }
.qt-ps-body { display: grid; min-width: 0; }
.qt-ps-content { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px 30px; }
.qt-ps-content > section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qt-ps-scope { margin: 0; font-size: 13px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.qt-ps-msg { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 3px 10px; min-width: 0; padding: 13px 16px; border-radius: 5px; background: var(--proposal-note-background, #eef4f9); }
.qt-ps-av { grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: var(--proposal-note-icon-background, #e0ebfa); color: var(--proposal-note-icon, #244885); font: 700 13px/1 var(--qt-sans); }
.qt-ps-msg > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qt-ps-msg strong { font: 700 14px/1.4 var(--ps-serif); }
.qt-ps-msg p { margin: 0; font-size: 12px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.qt-ps-msg small { color: var(--ps-muted); font-size: 11px; }
.qt-ps-summary { display: flex; flex-direction: column; align-self: stretch; gap: 0; min-width: 0; padding: 20px; border-top: 1px solid var(--ps-line); }
.qt-ps-options-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 14px 0; border-radius: 5px 5px 0 0; background: var(--proposal-summary-background, #eff4f8); }
.qt-ps-opts { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; list-style: none; }
.qt-ps-opts > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.qt-ps-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 7px 10px; min-width: 0; min-height: 44px; margin: 0; padding: 15px; border: 1px solid var(--proposal-card-edge, #d8e2ed); border-radius: 5px; background: var(--proposal-paper, #fff); }
label.qt-ps-opt { grid-template-columns: 18px minmax(0, 1fr) auto; cursor: pointer; }
label.qt-ps-opt > input { grid-column: 1; grid-row: 1; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--proposal-selected, #075dff); }
label.qt-ps-opt:hover { border-color: var(--proposal-card-hover, #8db5f5); }
.qt-ps-opt.is-selected { border-color: var(--proposal-selected, #075dff); background: var(--proposal-selected-background, #f5f9ff); box-shadow: inset 0 0 0 .5px var(--proposal-selected, #075dff); }
.qt-ps-opt > strong { grid-row: 1; color: var(--ps-ink); font: 700 16px/1.25 var(--ps-serif); overflow-wrap: anywhere; }
.qt-ps-option-indicator { grid-column: 1; grid-row: 1; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--proposal-option-circle, #bcccdc); border-radius: 50%; background: var(--proposal-paper, #fff); }
.qt-ps-opt.is-selected .qt-ps-option-indicator { border-color: var(--proposal-selected, #075dff); background: var(--proposal-selected, #075dff); box-shadow: inset 0 0 0 3px var(--proposal-paper, #fff); }
.qt-ps-option-badges { display: flex; flex-wrap: wrap; grid-column: 2 / -1; gap: 4px; min-width: 0; }
.qt-ps-option-badges:empty { display: none; }
.qt-ps-opt > .qt-ps-total { grid-row: 1; grid-column: -2; color: var(--ps-ink); font: 700 17px/1.25 var(--ps-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qt-ps-opt > :is(.qt-ps-rec, .qt-ps-selected, .qt-ps-detail, .qt-ps-diff) { grid-column: 2 / -1; }
label.qt-ps-opt > :is(.qt-ps-rec, .qt-ps-selected, .qt-ps-detail, .qt-ps-diff) { grid-column: 2 / -1; }
.qt-ps-rec, .qt-ps-selected { display: inline-flex; align-items: center; justify-self: start; gap: 4px; width: fit-content; max-width: 100%; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 500; line-height: 1.3; color: var(--proposal-recommended-ink, #205b3c); background: var(--proposal-recommended-background, #e0f4e7); }
.qt-ps-rec > i { font-size: 9px; }
.qt-ps-selected { background: var(--proposal-selected-badge-background, #deebff); color: var(--proposal-selected-badge-ink, #1351b3); }
.qt-ps-diff { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; color: var(--ps-muted); font-size: 11px; line-height: 1.5; }
.qt-ps-diff i { color: var(--proposal-check, #268354); }
.qt-ps-detail { display: block; color: var(--ps-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.qt-ps-lines { width: 100%; margin: 0; border-spacing: 0; border-collapse: separate; border: 1px solid var(--proposal-card-edge, #d8e2ed); border-radius: 5px; overflow: hidden; table-layout: fixed; font-size: 11.5px; line-height: 1.5; }
.qt-ps-lines th { padding: 7px 9px; background: var(--proposal-table-background, #edf2f7); color: var(--proposal-table-heading, #354965); font-size: 10.5px; font-weight: 600; text-align: left; }
.qt-ps-lines td { padding: 8px 9px; border-top: 1px solid var(--proposal-table-line, #e4eaf1); vertical-align: top; overflow-wrap: anywhere; }
.qt-ps-lines .qt-ps-description { width: 45%; }
.qt-ps-lines .qt-ps-description > .qt-ps-detail { display: none; }
.qt-ps-lines .qt-ps-description > .qt-ps-detail.is-rounding { display: block; margin-top: 3px; font-weight: 400; }
.qt-ps-lines :is(.qt-ps-quantity, .qt-ps-unit) { width: 10%; text-align: center; }
.qt-ps-lines :is(.qt-ps-rate, .qt-ps-amount) { width: 17.5%; text-align: right; font-variant-numeric: tabular-nums; }
.qt-ps-lines .qt-ps-amount { font-weight: 600; }
.qt-ps-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--proposal-tag-background, #eef2f6); color: var(--proposal-tag-ink, #415675); font-size: 10px; font-weight: 500; vertical-align: 1px; }
.qt-ps-payment { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 14px solid var(--proposal-summary-background, #eff4f8); border-top-width: 14px; border-radius: 0 0 5px 5px; background: var(--proposal-paper, #fff); }
.qt-ps-totals { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.qt-ps-totals > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; font-size: 12px; color: var(--ps-muted); }
.qt-ps-totals dt { font-weight: 400; }
.qt-ps-totals dd { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; }
.qt-ps-totals > .qt-ps-total { color: var(--ps-ink); font-size: 14px; }
.qt-ps-totals > .qt-ps-total dt { font: 700 16px/1.3 var(--ps-serif); }
.qt-ps-totals > .qt-ps-total dd { font: 700 29px/1.1 var(--ps-serif); letter-spacing: -.025em; }
.qt-ps-credit dd { font-weight: 600; }
.qt-ps-note { margin: 0; color: var(--ps-muted); font-size: 11px; line-height: 1.5; }
.qt-ps-terms-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 17px; border: 1px solid var(--ps-line); border-radius: 5px; }
.qt-ps-terms-panel > h4 { font-size: 16px; }
.qt-ps-terms { margin: 0; padding-left: 16px; color: var(--ps-muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.qt-ps-terms li + li { margin-top: 5px; }
.qt-ps-accept { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--proposal-payment-divider, #cad6e3); color: var(--ps-muted); font-size: 11px; line-height: 1.5; text-align: center; }
.qt-ps-accept .qt-btn { width: 100%; }
.qt-ps-accept > p { margin: 0; }
.qt-ps-foot { margin: 0; padding: 15px 24px; border-top: 1px solid var(--ps-line); color: var(--ps-muted); font-size: 11px; text-align: center; }
.qt-ps .qt-xl { gap: 8px; }
.qt-ps .qt-xl-item { gap: 10px; padding: 12px; border-radius: 5px; border-color: var(--proposal-card-edge, #d8e2ed); }
.qt-ps .qt-xl-text { font-size: 12px; }
.qt-ps .qt-xl-text small, .qt-ps .qt-xl-note { font-size: 11px; }
.qt-ps .qt-xl-adds { font: 700 14px/1.3 var(--ps-serif); }

/* Remaining manually chosen images. The cover is displayed only in the hero. */
.qt-pp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.qt-pp-tile { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qt-pp-tile > a { display: block; min-width: 44px; min-height: 44px; aspect-ratio: 2.9; overflow: hidden; border-radius: 5px; background: var(--proposal-image-background, #f1f3f5); }
.qt-pp-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qt-pp-cap { color: var(--ps-muted, var(--proposal-muted, #4e607b)); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
@container qt-proposal (min-width: 760px) {
    .qt-ps-hero.has-photo { grid-template-columns: 45% 55%; min-height: 220px; }
    .qt-ps-hero.has-photo .qt-ps-hero-copy { margin-right: -70px; padding-right: 85px; background: var(--proposal-ivory, #f7f2ea); clip-path: polygon(0 0, 100% 0, calc(100% - 70px) 100%, 0 100%); }
    .qt-ps-body { grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr); }
    .qt-ps-content { padding-right: 24px; }
    .qt-ps-summary { padding-left: 18px; border-top: 0; border-left: 1px solid var(--proposal-body-divider, #e6ecf2); }
}
@container qt-proposal (max-width: 759px) {
    .qt-ps-letterhead { gap: 14px 18px; padding: 20px; }
    .qt-ps-contact { max-width: 100%; padding: 0; border: 0; }
    .qt-ps-reference { font-size: 11px; }
    .qt-ps-name { font-size: 20px; }
    .qt-ps-logo { width: 46px; height: 46px; font-size: 26px; }
    .qt-ps-brand { gap: 12px; }
    .qt-ps-hero-copy { gap: 12px; padding: 25px 20px; }
    .qt-ps-title { font-size: 30px; }
    .qt-ps-cover { min-height: 190px; }
    .qt-ps-facts { gap: 9px 20px; padding: 13px 20px; font-size: 11px; }
    .qt-ps-facts > div + div { padding-left: 0; border-left: 0; }
    .qt-ps-content { gap: 16px; padding: 20px; }
    .qt-ps-summary { padding: 20px; }
}
@container qt-proposal (max-width: 479px) {
    .qt-ps-letterhead { padding: 16px; gap: 12px; }
    .qt-ps-brand { flex: 1 1 100%; }
    .qt-ps-contact { flex: 1 1 150px; font-size: 10px; }
    .qt-ps-reference { font-size: 10px; }
    .qt-ps-reference strong { font-size: 13px; }
    .qt-ps-hero-copy { padding: 22px 16px; }
    .qt-ps-title { font-size: 27px; }
    .qt-ps-for { font-size: 12px; }
    .qt-ps-cover { min-height: 155px; }
    .qt-ps-facts, .qt-ps-content, .qt-ps-summary { padding: 16px; }
    .qt-ps h4, .qt-ps-opts > legend { font-size: 19px; }
    .qt-ps-lines { display: block; border-bottom: 0; }
    .qt-ps-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .qt-ps-lines tbody { display: block; }
    .qt-ps-lines .qt-ps-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 12px; gap: 8px; border-bottom: 1px solid var(--proposal-card-edge, #d8e2ed); }
    .qt-ps-lines td { display: block; width: auto; min-width: 0; padding: 0; border: 0; text-align: left; font-size: 12px; }
    .qt-ps-lines .qt-ps-description { width: auto; grid-column: 1 / -1; font-weight: 600; }
    .qt-ps-lines :is(.qt-ps-quantity, .qt-ps-unit, .qt-ps-rate) { width: auto; text-align: left; }
    .qt-ps-lines :is(.qt-ps-quantity, .qt-ps-unit, .qt-ps-rate)::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ps-muted); font-size: 10px; }
    .qt-ps-lines .qt-ps-amount { grid-column: 1 / -1; width: auto; padding-top: 6px; border-top: 1px solid var(--proposal-mobile-divider, #edf1f5); text-align: right; }
    .qt-ps-lines .qt-ps-amount::before { content: attr(data-label); float: left; color: var(--ps-muted); font-size: 11px; font-weight: 400; }
    .qt-ps-options-panel { padding: 13px 10px 0; }
    .qt-ps-payment { padding: 13px; border-width: 10px; }
    .qt-ps-opt { padding: 12px; }
    .qt-ps-opt > strong { font-size: 15px; }
    .qt-ps-opt > .qt-ps-total { font-size: 16px; }
    .qt-ps-totals > .qt-ps-total dd { font-size: 26px; }
    .qt-ps .qt-xl-item { flex-wrap: wrap; }
    .qt-ps .qt-xl-adds { margin-left: auto; }
    .qt-pp-tile > a { aspect-ratio: 1.65; }
}

/* ---- MoneySheet (qt-sheet-): a bottom sheet on a phone, a centred dialog above ---------------------- */

.qt-sheet { position: fixed; inset: 0; z-index: var(--z-modal, 1300); display: flex; align-items: flex-end; justify-content: center; }
.qt-sheet-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--neutral-900, #1f2933); opacity: .45; cursor: pointer; }
.qt-sheet-panel {
    position: relative; display: flex; flex-direction: column; width: 100%; max-height: 85vh; max-height: 85dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px); border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); box-shadow: var(--shadow-2xl); font-family: var(--qt-sans);
}
.qt-sheet-panel:focus { outline: none; }
.qt-sheet-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); }
.qt-sheet-title { flex: 1 1 auto; min-width: 0; margin: 0; font: 700 18px/1.25 var(--qt-display); overflow-wrap: anywhere; }
.qt-sheet-close {
    flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm, 8px);
    background: transparent; color: var(--neutral-700, #4b5563); font-size: 18px; cursor: pointer;
}
.qt-sheet-close:hover { background: var(--neutral-100, #f4f4f2); color: var(--neutral-900, #1f2933); }
.qt-sheet-body { flex: 1 1 auto; min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.qt-sheet-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
@media (min-width: 768px) {
    .qt-sheet { align-items: center; padding: 24px; }
    .qt-sheet-panel { max-width: 560px; max-height: calc(100vh - 48px); border-radius: var(--radius-lg, 16px); }
    .qt-sheet-panel.is-sm { max-width: 420px; }
    .qt-sheet-panel.is-md { max-width: 560px; }
    .qt-sheet-panel.is-lg { max-width: 760px; }
}

/* The proposal inspector occupies the viewport; other MoneySheets retain their normal sizing. */
html:has(.qt-sheet.is-full), body:has(.qt-sheet.is-full) { overflow: hidden; }
.qt-sheet.is-full { align-items: stretch; padding: 0; }
.qt-sheet.is-full .qt-sheet-panel.is-full { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; background: var(--proposal-inspector-background, #f4f7fa); }
.qt-sheet.is-full .qt-sheet-head { flex: none; min-height: 64px; padding: 8px max(20px, calc((100vw - 1280px) / 2)); border-color: var(--proposal-inspector-line, #e3eaf1); background: var(--proposal-paper, #fff); }
.qt-sheet.is-full .qt-sheet-title { color: var(--proposal-inspector-title, #233b5c); font-size: 15px; font-weight: 500; }
.qt-sheet.is-full .qt-sheet-body { padding: 16px max(20px, calc((100vw - 1280px) / 2)) 28px; }
.qt-sheet.is-full .qt-sheet-body > [data-tour="quote-preview"] { width: 100%; max-width: 1280px; margin: 0 auto; }
.qt-ed-preview-heading { display: flex; align-items: center; gap: 18px; min-width: 0; }
.qt-ed-preview-heading > img { display: block; width: 28px; height: 28px; object-fit: contain; }
.qt-ed-preview-heading > strong { margin-left: -10px; color: var(--proposal-ink, #142544); font-size: 18px; font-weight: 750; letter-spacing: -.035em; }
.qt-ed-preview-heading > span { padding-left: 18px; border-left: 1px solid var(--proposal-inspector-divider, #bccadc); }
.qt-ed-preview-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: 1280px; margin: 0 auto 16px; padding: 11px 16px; border-radius: 5px; background: var(--proposal-inspector-notice, #e7eff7); color: var(--proposal-inspector-notice-ink, #314969); font-size: 12px; line-height: 1.5; }
.qt-ed-preview-notice > i { margin-right: 6px; color: var(--proposal-inspector-notice-icon, #164eb8); font-size: 17px; }
@media (max-width: 599px) {
    .qt-sheet.is-full .qt-sheet-head { min-height: 58px; padding: 6px 12px; }
    .qt-sheet.is-full .qt-sheet-body { padding: 12px 10px 20px; }
    .qt-ed-preview-heading { gap: 10px; }
    .qt-ed-preview-heading > img { width: 26px; height: 26px; }
    .qt-ed-preview-heading > strong { margin-left: -4px; font-size: 16px; }
    .qt-ed-preview-heading > span { padding-left: 10px; font-size: 12px; }
    .qt-ed-preview-notice { padding: 10px 12px; font-size: 11px; }
}

/* ---- The quote editor (qt-ed-): tabs on a phone, one column from 700px, two panes from 1000px ------- */

.qt-ed { container: qt-ed / inline-size; min-width: 0; padding: 0 16px 16px; font-family: var(--qt-sans); color: var(--neutral-900, #1f2933); }
.qt-ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }
.qt-ed-no { font: 700 14px/1.2 var(--qt-sans); letter-spacing: .02em; color: var(--neutral-800, #333d47); font-variant-numeric: tabular-nums; }
.qt-ed-mode { margin-left: auto; }
.qt-ed-preview-btn { display: none; }

.qt-ed-tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 12px; padding: 4px;
    border-radius: var(--radius-md, 12px); background: var(--neutral-200, #e9e9e6);
}
.qt-ed-tab {
    min-width: 0; min-height: 48px; padding: 0 8px; border: 0; border-radius: var(--radius-sm, 8px);
    background: transparent; color: var(--neutral-800, #333d47); font: 600 14px/1.2 var(--qt-sans); cursor: pointer;
}
.qt-ed-tab[aria-selected="true"] { background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); box-shadow: var(--shadow-xs); }

.qt-ed-grid { display: block; min-width: 0; }
.qt-ed-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qt-ed-panel { min-width: 0; }
.qt-ed-panel:not(.is-active) { display: none; }
/* Flat on a phone: the lines are cards already. */
.qt-ed-card { min-width: 0; }
.qt-ed-caption { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.qt-ed-row { display: grid; gap: 12px; min-width: 0; }
.qt-ed-note {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px;
    border: 1px solid var(--brand-200, #bfdbfe); border-radius: var(--radius-sm, 8px); background: var(--brand-50, #eff6ff);
    font-size: 14px; line-height: 1.45; color: var(--neutral-900, #1f2933);
}
.qt-ed-note > p { flex: 1 1 220px; min-width: 0; margin: 0; }

@container qt-ed (min-width: 480px) {
    .qt-ed-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A panel's own heading ("Details") shows once the tabs don't: on a phone the tab names the panel. */
.qt-ed-card > .qt-box-h { display: none; }

/* On a phone the first line has to be on the first screen, above the pinned total. The quote's number is the page's
   title already, so the bar keeps the status, the save and Fast/Full on one row; the pinned total is one line of
   words above Checks (an icon, its count on a badge) and Send. What leaves the bar's face stays for screen readers
   (the routine save status); a problem (the last send, or a save that didn't go through) stays in sight, and so does a
   Free business's counter (qt-hint), one short line on Free marketplace quotes only. Checks and Send keep one row: the
   site-wide phone rule wraps every "-actions" row (app.css, !important), so this one is !important too and wins on its
   two classes; Send gives up width and wraps its own words ("Save to send later" at 300px) instead. */
@container qt-ed (max-width: 479.98px) {
    .qt-ed-no { display: none; }
    .qt-ed-bar { gap: 6px; margin: 10px 0; }
    .qt-ed-mode .qt-seg-btn { padding: 0 10px; }

    .qt-tb--sticky { gap: 8px 12px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .qt-tb--sticky .qt-tb-sum { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
    .qt-tb--sticky .qt-tb-total { font-size: 22px; }
    .qt-tb--sticky .qt-tb-meta { flex: 1 1 100%; margin: 0; }
    .qt-tb--sticky .qt-tb-split,
    .qt-tb--sticky .qt-tb-meta > :not(.qt-err):not(.qt-hint),
    .qt-tb--sticky .qt-tb-actions > .qt-btn.is-quiet > span {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .qt-tb--sticky .qt-tb-actions { flex-wrap: nowrap !important; }
    .qt-tb--sticky .qt-tb-actions > [data-money-send] { min-width: 0; white-space: normal; }
    .qt-tb--sticky .qt-tb-actions > .qt-btn.is-quiet { position: relative; flex: none; width: 48px; padding: 0; }
    .qt-tb--sticky .qt-tb-actions > .qt-btn.is-quiet[data-count]::after {
        content: attr(data-count); position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
        border-radius: var(--radius-pill, 999px); background: var(--danger-600, #dc2626); color: var(--neutral-0, #ffffff);
        font: 700 11px/18px var(--qt-sans); text-align: center;
    }
}
@container qt-ed (min-width: 700px) {
    .qt-ed-tabs { display: none; }
    .qt-ed-card > .qt-box-h { display: block; }
    .qt-ed-main .qt-ed-panel, .qt-ed-main .qt-ed-panel:not(.is-active) { display: block; }
    .qt-ed-side, .qt-ed-side.is-active { display: none; }
    .qt-ed-preview-btn { display: inline-flex; }
    .qt-ed-card { padding: 16px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); background: var(--neutral-0, #ffffff); }
}
@container qt-ed (min-width: 1000px) {
    .qt-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
    .qt-ed-side, .qt-ed-side.is-active, .qt-ed-side:not(.is-active) { display: block; position: sticky; top: calc(var(--topbar-height, 72px) + 12px); }
    .qt-ed-preview-btn { display: none; }
}

/* The job strip: the marketplace job, folded to one row until opened. */
.qt-js { min-width: 0; margin: 0 0 12px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
.qt-js-head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 8px 8px 14px; }
.qt-js-title { flex: 1 1 auto; min-width: 0; margin: 0; font: 700 15px/1.3 var(--qt-display); overflow-wrap: anywhere; }
.qt-js-where { display: block; font: 400 13px/1.4 var(--qt-sans); color: var(--neutral-700, #4b5563); }
.qt-js-toggle {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: var(--radius-sm, 8px); background: transparent; color: var(--brand-700, #1d4ed8); font: 600 14px/1.2 var(--qt-sans); cursor: pointer;
}
.qt-js-toggle:hover { background: var(--brand-50, #eff6ff); }
.qt-js-toggle > i { transition: transform var(--dur-fast, 120ms) var(--ease-out, ease); }
.qt-js-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
/* The narrowest phones (320 and 360 wide): the job strip's toggle is its chevron (its words stay for screen readers),
   so the job's title keeps two lines rather than four. */
@container qt-ed (max-width: 339.98px) {
    .qt-js-toggle { width: 44px; padding: 0; justify-content: center; }
    .qt-js-toggle > span {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
}
.qt-js-body { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 14px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.qt-js-said {
    margin: 0; padding: 10px 12px; border-left: 3px solid var(--neutral-300, #e5e7eb); border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
    background: var(--neutral-50, #f8f8f7); font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
}
.qt-js-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.qt-js-facts dt { font-weight: 400; color: var(--neutral-700, #4b5563); }
.qt-js-facts dd { margin: 0; overflow-wrap: anywhere; }
.qt-js-lock { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; color: var(--neutral-700, #4b5563); }
.qt-js-trades { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qt-js-trade {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 14px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
    color: var(--neutral-900, #1f2933); font: 600 15px/1.3 var(--qt-sans); text-align: left; text-decoration: none; cursor: pointer;
}
.qt-js-trade:hover { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); color: var(--neutral-900, #1f2933); }

/* Photos on the quote: tiles, remove, take or choose, and picking from the job's photos. */
.qt-ph { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qt-ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@container qt-ed (min-width: 700px) {
    .qt-ph-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
.qt-ph-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qt-ph-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm, 8px); background: var(--neutral-100, #f4f4f2); }
.qt-ph-cap { font-size: 12px; line-height: 1.35; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.qt-ph-remove {
    position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 50%; background: var(--neutral-0, #ffffff); color: var(--danger-700, #b91c1c);
    box-shadow: var(--shadow-sm); font-size: 16px; cursor: pointer;
}
.qt-ph-cover-label { position: absolute; top: 7px; left: 7px; max-width: calc(100% - 58px); padding: 4px 7px; border-radius: 4px; background: var(--proposal-cover-badge, #13284ae8); color: var(--proposal-paper, #fff); font-size: 10px; font-weight: 600; line-height: 1.4; }
.qt-ph-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.qt-ph-toolbar > button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 36px; min-height: 36px; padding: 5px 8px; border: 1px solid var(--proposal-photo-control-edge, #d5deeb); border-radius: 4px; background: var(--proposal-paper, #fff); color: var(--proposal-photo-control-ink, #31527d); font: 500 11px/1.3 var(--qt-sans); cursor: pointer; }
.qt-ph-toolbar > button:hover:not(:disabled) { border-color: var(--proposal-photo-control-hover, #79a8f0); background: var(--proposal-photo-control-hover-background, #f1f6ff); color: var(--proposal-photo-control-hover-ink, #145ad0); }
.qt-ph-toolbar > button:disabled { opacity: .45; cursor: default; }
.qt-ph-toolbar > button:focus-visible { outline: 3px solid var(--proposal-control-focus, #3b82f6); outline-offset: 2px; }
@media (pointer: coarse) {
    .qt-ph-toolbar > button { min-width: 44px; min-height: 44px; }
}
.qt-ph-add {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px;
    border: 1px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-sm, 8px); background: var(--neutral-0, #ffffff);
    color: var(--brand-700, #1d4ed8); font: 600 14px/1.2 var(--qt-sans); cursor: pointer;
}
.qt-ph-add:hover { border-color: var(--brand-500, #3b82f6); background: var(--brand-50, #eff6ff); }
/* The file input itself is hidden inside its 44px label, which is what gets the tap. */
.qt-ph-file {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0;
}
.qt-ph-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.qt-ph-pick-tile {
    position: relative; display: block; width: 100%; min-height: 44px; aspect-ratio: 1; padding: 0; overflow: hidden;
    border: 2px solid transparent; border-radius: var(--radius-sm, 8px); background: var(--neutral-100, #f4f4f2); cursor: pointer;
}
.qt-ph-pick-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qt-ph-pick-tile.is-picked, .qt-ph-pick-tile[aria-pressed="true"] { border-color: var(--brand-600, #2563eb); box-shadow: 0 0 0 2px var(--brand-600, #2563eb); }

/* The pre-send checklist (the server's): blockers first, each with where to fix it. */
.qt-ck { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qt-ck-item {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 4px 10px; padding: 10px 12px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
    font-size: 14px; line-height: 1.45;
}
.qt-ck-icon { font-size: 18px; line-height: 1.2; color: var(--neutral-600, #6b7280); }
.qt-ck-text { min-width: 0; overflow-wrap: anywhere; }
.qt-ck-item > :not(.qt-ck-icon) { grid-column: 2; }
.qt-ck-item .qt-only-you { justify-self: start; }
.qt-ck-fix {
    justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600;
    color: var(--brand-700, #1d4ed8); text-decoration: underline; text-underline-offset: 2px;
}
.qt-ck-item--ok .qt-ck-icon { color: var(--success-700, #15803d); }
.qt-ck-item--info .qt-ck-icon { color: var(--brand-700, #1d4ed8); }
.qt-ck-item--warn { border-color: var(--warning-200, #fde68a); background: var(--warning-50, #fffbeb); }
.qt-ck-item--warn .qt-ck-icon { color: var(--warning-700, #b45309); }
.qt-ck-item--held { border-color: var(--warning-200, #fde68a); background: var(--warning-50, #fffbeb); }
.qt-ck-item--held .qt-ck-icon { color: var(--warning-800, #92400e); }
.qt-ck-item--block { border-color: var(--danger-200, #fecaca); background: var(--danger-50, #fef2f2); }
.qt-ck-item--block .qt-ck-icon { color: var(--danger-700, #b91c1c); }

/* The hire picker: yards with their listed rate, and the days. */
.qt-hp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qt-hp-yard {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; min-height: 56px; padding: 10px 14px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
    color: var(--neutral-900, #1f2933); font: 600 14px/1.3 var(--qt-sans); text-align: left; cursor: pointer;
}
.qt-hp-yard:hover { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); }
.qt-hp-yard small { grid-column: 1; font-weight: 400; color: var(--neutral-700, #4b5563); }
.qt-hp-rate { grid-column: 2; grid-row: 1; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qt-hp-days { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }

/* ---- Full mode, the recipient, saved items, sending (W2) ------------------------------------------ */

.qt-fp { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qt-fp-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qt-fp-extras { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px dashed var(--neutral-300, #e5e7eb); }
.qt-fp-terms { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qt-fp-snippets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qt-fp-brand {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-radius: var(--radius-sm, 8px);
    background: var(--neutral-50, #f8f8f7); font-size: 13px; line-height: 1.45; color: var(--neutral-800, #333d47);
}
.qt-fp-upgrade {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px;
    border: 1px solid var(--brand-200, #bfdbfe); border-radius: var(--radius-md, 12px); background: var(--brand-50, #eff6ff);
    font-size: 14px; line-height: 1.45; color: var(--neutral-900, #1f2933);
}
.qt-fp-upgrade > p { flex: 1 1 220px; min-width: 0; margin: 0; }

.qt-rc {
    display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0 0 12px; padding: 14px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.qt-rc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.qt-rc-search { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qt-rc-result {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; min-height: 44px; padding: 8px 12px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-sm, 8px); background: var(--neutral-0, #ffffff);
    color: var(--neutral-900, #1f2933); font: 600 14px/1.3 var(--qt-sans); text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.qt-rc-result:hover { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); }
.qt-rc-result small { font-weight: 400; color: var(--neutral-700, #4b5563); }
.qt-rc-fields { display: grid; gap: 12px; min-width: 0; }
@container qt-ed (min-width: 480px) {
    .qt-rc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A direct draft opened with its recipient named folds, on a phone (the editor's tabs layout, under 700px), to one row
   ("For Pat Nguyen · pat@example.com", Change) and the job's title: the card whole put the lines about 1,300px down.
   Change unfolds it. Wider, the card shows whole and the row isn't drawn. */
.qt-rc-who[data-rc-fold] { display: none; }
@container qt-ed (max-width: 699.98px) {
    .qt-rc[data-rc-folded] .qt-rc-who[data-rc-fold] { display: flex; }
    .qt-rc[data-rc-folded] > :not(.qt-box-h):not([data-rc-fold]):not([data-rc-keep]) { display: none; }
}

.qt-si { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qt-si-search { min-width: 0; }
.qt-si-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qt-si-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 12px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.qt-si-item > :not(.qt-si-add) { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.qt-si-kind { font-size: 12px; font-weight: 600; color: var(--neutral-700, #4b5563); }
.qt-si-detail { font-size: 13px; color: var(--neutral-700, #4b5563); }
.qt-si-add { grid-column: 2; grid-row: 1 / span 3; }

.qt-so { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qt-so-choice {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.qt-so-msg { min-width: 0; }
.qt-so-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); }

/* ---- The sent view (qt-sv-): the sheet and what can still be done with it ------------------------- */

.qt-sv { container: qt-sv / inline-size; min-width: 0; padding: 0 16px 16px; font-family: var(--qt-sans); color: var(--neutral-900, #1f2933); }
.qt-sv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }
.qt-sv-status { margin: 0; font-size: 14px; line-height: 1.45; color: var(--neutral-800, #333d47); }
.qt-sv-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 12px 16px;
    border: 1px solid var(--success-200, #bbf7d0); border-radius: var(--radius-md, 12px); background: var(--success-50, #f0fdf4);
    color: var(--success-800, #166534); font-size: 14px; line-height: 1.45;
}
.qt-sv-banner > p { flex: 1 1 220px; min-width: 0; margin: 0; }
/* What the view has just said ("Quote withdrawn…", "Marked as lost.", a problem) is at its top, and on a phone the action
   that said it can be a screen further down: the view brings it into view (MoneyEditorChrome's reveal), clear of the
   pinned top bar. */
.qt-sv > .qt-sv-banner, .qt-sv > .qt-banner { scroll-margin-top: calc(var(--topbar-height, 72px) + 16px); }
.qt-sv-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.qt-sv-facts dt { font-weight: 400; color: var(--neutral-700, #4b5563); }
.qt-sv-facts dd { margin: 0; overflow-wrap: anywhere; }
.qt-sv-grid { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qt-sv-side { order: -1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qt-sv-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qt-sv-act { width: 100%; justify-content: flex-start; text-align: left; }
.qt-sv-share { display: flex; flex-wrap: wrap; gap: 8px; }
.qt-sv-won {
    display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
}
.qt-sv-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
@container qt-sv (min-width: 1000px) {
    .qt-sv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
    .qt-sv-grid > :not(.qt-sv-side) { grid-column: 1; grid-row: 1; }
    .qt-sv-side { order: 0; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--topbar-height, 72px) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
    .qt-btn, .qt-le-fold > i, .qt-js-toggle > i { transition: none; }
    .qt-save-status[data-state="saving"] > i { animation: none; }
}

/* ---- Quoting phase 4: the proposal page, stopping emails, reminders and the link ---- */
/* Only the phase 4 contract's catalogue (section 12.9); everything else on these pages uses the phase 3 classes.
   Colours only through the design tokens, each with its fallback. */

/* An accepted quote's banner on the proposal page. */
.qt-banner.is-ok { border-color: var(--success-200, #bbf7d0); background: var(--success-50, #f0fdf4); }
.qt-banner.is-ok > i { color: var(--success-700, #15803d); }

/* The customer's link (the proposal page): the sheet, the PDF download, accepting and declining, a link that isn't working. */
.qt-pl { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; font-family: var(--qt-sans); color: var(--neutral-900, #1f2933); }
.qt-pl-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.qt-pl-agree { margin: 0; font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-700, #4b5563); }
.qt-pl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qt-pl-actions > .qt-btn { flex: 1 1 200px; }
.qt-pl-decline { display: grid; gap: 8px; padding-top: 8px; }
.qt-pl-gone { display: grid; justify-items: center; gap: 12px; padding: 48px 16px; text-align: center; }
.qt-pl-gone > i { font-size: 32px; line-height: 1; color: var(--neutral-600, #6b7280); }
.qt-pl-gone h1 { margin: 0; font: 700 22px/1.25 var(--qt-display); color: var(--neutral-900, #1f2933); }
.qt-pl-gone p { margin: 0; max-width: 46ch; font: 400 15px/1.5 var(--qt-sans); color: var(--neutral-700, #4b5563); }

/* Stopping quote emails (the stop-emails page). */
.qt-ep { display: grid; gap: 16px; max-width: 560px; margin: 0 auto; padding: 32px 16px 48px; font-family: var(--qt-sans); }
.qt-ep-card { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
.qt-ep-card h1 { margin: 0; font: 700 22px/1.25 var(--qt-display); color: var(--neutral-900, #1f2933); }
.qt-ep-card p { margin: 0; font: 400 15px/1.5 var(--qt-sans); color: var(--neutral-700, #4b5563); }
.qt-ep-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The sent view's reminders panel and link controls. */
.qt-rm { display: grid; gap: 8px; }
.qt-rm-line { margin: 0; font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-800, #333d47); }
.qt-rm-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.qt-rm-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 400 13px/1.4 var(--qt-sans); color: var(--neutral-700, #4b5563); }
.qt-lk { display: grid; gap: 8px; }
.qt-lk-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Quoting phase 5: acceptance, what happens next, Compare and deposits ---- */
/* The phase 5 catalogue (contract 13.9): nothing else is styled here, colours only through tokens with fallbacks. */

/* A legal note under a deposit rule or the written-contract caveat ("General information, not legal advice."). */
.qt-legal { margin: 0; font: 400 12px/1.5 var(--qt-sans); color: var(--neutral-600, #6b7280); }

/* What happens next, on an accepted quote (Compare and the proposal page). */
.qt-ns { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--success-200, #bbf7d0); border-radius: var(--radius-md, 12px); background: var(--success-50, #f0fdf4); }
.qt-ns-h { margin: 0; font: 700 18px/1.3 var(--qt-display); color: var(--neutral-900, #1f2933); }
.qt-ns-step { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--success-200, #bbf7d0); }
.qt-ns-step > p { margin: 0; font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-800, #333d47); }
/* Each label on its own row, its value and Copy on the row under it: a phone keeps the value's full width. */
.qt-ns-bank { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; margin: 0; font: 400 14px/1.5 var(--qt-sans); text-align: start; }
.qt-ns-bank dt { grid-column: 1 / -1; color: var(--neutral-600, #6b7280); }
.qt-ns-bank dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.qt-ns-bank dd > button { white-space: nowrap; }
.qt-ns-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Paying a deposit by card (the Stripe Payment Element mounts in .qt-pay-el). */
.qt-pay { display: grid; gap: 12px; }
.qt-pay-el { min-height: 120px; }

/* Compare: one card per quote, one column on a phone, up to three on a wide screen. auto-fit, so one or two quotes share
   the width instead of sitting in a third of it beside empty tracks; a lone quote is capped at 720px, not stretched
   across 1009px. */
.qt-cmp { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.qt-cmp:has(> .qt-cmp-card:only-child) { grid-template-columns: minmax(0, 720px); }
.qt-cmp-card { display: grid; gap: 12px; min-width: 0; scroll-margin-top: 80px; }
.qt-cmp-head { display: grid; gap: 6px; padding: 12px 16px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
.qt-cmp-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-800, #333d47); }
.qt-cmp-foot { display: flex; flex-wrap: wrap; gap: 8px; }
/* Three across from 992px of content (so three at 1320 beside the sidebar); one column under 720px. */
@media (max-width: 719.98px) { .qt-cmp { grid-template-columns: minmax(0, 1fr); } }

/* The business's deposit panel, its ledger and the deposit settings card. */
.qt-dep { display: grid; gap: 8px; }
.qt-led { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.qt-led-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-800, #333d47); }
.qt-set { display: grid; gap: 12px; }

/* ---- Quoting phase 6: My Quotes, the quote page, revise, invoice and schedule ---- */
/* The phase 6 catalogue (contract 8.9): nothing else is styled here, colours only through tokens with fallbacks, every
   target at least 44px, nothing wider than a 300px phone. Everything else on these pages uses the phase 3-5 classes
   (qt-btn, qt-pill, qt-box, qt-banner, qt-fld, qt-lbl, qt-in, qt-hint, qt-err, qt-state, qt-sv-, qt-rm-, qt-lk-, qt-dep).

   My Quotes' rows (one markup, the container query does the rest). Each row's direct children are its cells:
     <li class="qt-mq-row">
       <div class="qt-mq-title"><a href>Title</a> <span class="qt-mq-num">Q-00012 v2</span> <span class="qt-mq-chip">Direct</span></div>
       <p class="qt-mq-who">Cass, Parramatta</p>   <p class="qt-mq-total">$1,100.00 <small>inc GST</small></p>
       <span class="qt-pill ...">Sent</span>   <ol class="qt-trk">...</ol>
       <p class="qt-mq-latest">...</p>   <p class="qt-mq-valid">3 days left</p>   <div class="qt-mq-next">...</div>
     </li>
   Every cell but the pill has its own place; the pill takes the one place left (the stage). Each cell may start with a
   qt-mq-cell-label for screen readers (the column header, qt-mq-cols, is aria-hidden). On a phone the row is a card:
   title and total, who, stage and track, latest, valid, next; from 1200px of the list it is one ledger row under the header.

   The quote page: qt-qp-main ("What's happened") and qt-qp-side ("The quote") are the two children of one plain wrapper
   inside .qt-sv. On a phone the tabs (qt-qp-tabs) show one at a time (the other carries the hidden attribute); from 1000px
   of the view both show side by side and the tabs go. */

/* My Quotes: the summary, Needs you, the tools. */
.qt-mq { container: qt-mq / inline-size; display: grid; gap: 16px; min-width: 0; font-family: var(--qt-sans); color: var(--neutral-900, #1f2933); }
/* From 768px the quick-tools launcher stays on My Quotes (fixed 22px from the bottom right, 58px square, above the page),
   and it sat over the last row's right-hand end ("Remind Cara" at 1320) with nothing left to scroll: room under the list,
   as the editor keeps beside its pinned total, lets every row scroll clear of it. 22 + 58 + 16 of air = 96px. */
@media (min-width: 768px) {
    .qt-mq { padding-bottom: 96px; }
}
.qt-mq-sum { display: grid; gap: 4px; margin: 0; padding: 12px 16px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
.qt-mq-sum-line { margin: 0; font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.qt-mq-sum-line > strong { font-weight: 600; color: var(--neutral-900, #1f2933); }
.qt-mq-win { margin: 0; font: 400 13px/1.5 var(--qt-sans); color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.qt-mq-needs { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--warning-200, #fde68a); border-radius: var(--radius-md, 12px); background: var(--warning-50, #fffbeb); }
.qt-mq-needs-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font: 700 16px/1.3 var(--qt-display); color: var(--neutral-900, #1f2933); }
.qt-mq-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; min-width: 0; }
/* The search and the two selects are wrappers: a label (qt-lbl) over its field (qt-in). */
.qt-mq-search { display: grid; gap: 4px; flex: 2 1 240px; min-width: 0; }
.qt-mq-select { display: grid; gap: 4px; flex: 1 1 150px; min-width: 0; }
.qt-mq-search > input, .qt-mq-select > select { width: 100%; min-width: 0; }

/* The list: a card per thread on a phone. */
.qt-mq-list { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.qt-mq-cols { display: none; }
.qt-mq-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 12px; min-width: 0;
    grid-template-areas: "title total" "who who" "stage stage" "track track" "latest latest" "valid valid" "next next";
    padding: 12px 16px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.qt-mq-row--needs { border-color: var(--warning-200, #fde68a); box-shadow: inset 3px 0 0 var(--warning-600, #d97706); }
.qt-mq-title { grid-area: title; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
.qt-mq-title > a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 0; max-width: 100%;
    font: 600 16px/1.35 var(--qt-sans); color: var(--brand-700, #1d4ed8); text-decoration: none; overflow-wrap: anywhere;
}
.qt-mq-title > a:hover { text-decoration: underline; }
.qt-mq-num { font: 400 13px/1.4 var(--qt-sans); color: var(--neutral-600, #6b7280); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qt-mq-chip {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--radius-pill, 999px);
    background: var(--neutral-100, #f4f4f2); color: var(--neutral-700, #4b5563); font: 600 12px/1.5 var(--qt-sans); white-space: nowrap;
}
.qt-mq-who { grid-area: who; min-width: 0; margin: 0; font: 400 14px/1.4 var(--qt-sans); color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.qt-mq-total { grid-area: total; align-self: center; margin: 0; text-align: end; font: 700 16px/1.35 var(--qt-sans); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--neutral-900, #1f2933); }
.qt-mq-total > small { display: block; font: 400 12px/1.3 var(--qt-sans); color: var(--neutral-600, #6b7280); }
/* On a phone the four pips have a row of their own: beside the stage they took the title's width. The stage pill is the
   row's only direct span; it sits in the stage cell on both layouts, as wide as its words. */
.qt-mq-row > .qt-trk { grid-area: track; justify-self: start; }
.qt-mq-row > span { grid-area: stage; justify-self: start; }
.qt-mq-latest { grid-area: latest; min-width: 0; margin: 0; font: 400 14px/1.45 var(--qt-sans); color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.qt-mq-valid { grid-area: valid; margin: 0; font: 600 13px/1.4 var(--qt-sans); color: var(--warning-800, #92400e); }
.qt-mq-next { grid-area: next; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* For screen readers only: each cell's column name (the visible header row is aria-hidden). */
.qt-mq-cell-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.qt-mq-more { justify-self: center; margin: 4px 0 0; }
.qt-mq-empty {
    display: grid; justify-items: start; gap: 8px; padding: 24px 16px; border: 1px dashed var(--neutral-300, #e5e7eb);
    border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7); font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-800, #333d47);
}
/* From 1200px of the list: A's ledger, Quote | Inc GST | Stage | Track | Latest | Valid until | Next, under a header row.
   Its five fixed columns and gaps take 722px, so at a 1320px desktop with the sidebar (a 1009px list) the quote and the
   latest line shared about 250px and the titles wrapped four lines: below 1200px of the list each row stays a card. */
@container qt-mq (min-width: 1200px) {
    .qt-mq-cols {
        display: grid; grid-template-columns: minmax(0, 2.2fr) 110px 110px 150px minmax(0, 2fr) 110px 170px; gap: 0 12px;
        margin: 0; padding: 0 17px; font: 600 12px/1.4 var(--qt-sans); color: var(--neutral-600, #6b7280);
    }
    .qt-mq-row {
        grid-template-columns: minmax(0, 2.2fr) 110px 110px 150px minmax(0, 2fr) 110px 170px; align-items: center;
        grid-template-areas: "title total stage track latest valid next" "who total stage track latest valid next";
        gap: 0 12px;
    }
    .qt-mq-total { text-align: start; }
    .qt-mq-row > .qt-trk { justify-self: start; }
    .qt-mq-next { justify-content: flex-end; }
}

/* The four-pip track: Sent, Opened, Reminded, Decided. */
.qt-trk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.qt-trk-pip { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.3 var(--qt-sans); color: var(--neutral-600, #6b7280); }
.qt-trk-pip::before {
    content: ""; flex: none; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%;
    border: 2px solid var(--neutral-400, #cbd0d6); background: var(--neutral-0, #ffffff);
}
.qt-trk-pip--done { color: var(--neutral-800, #333d47); }
.qt-trk-pip--done::before { border-color: var(--brand-600, #2563eb); background: var(--brand-600, #2563eb); }
.qt-trk-pip--current { color: var(--brand-800, #1e40af); }
.qt-trk-pip--current::before { border-color: var(--brand-600, #2563eb); background: var(--brand-50, #eff6ff); }
.qt-trk-pip--ok { color: var(--success-800, #166534); }
.qt-trk-pip--ok::before { border-color: var(--success-700, #15803d); background: var(--success-700, #15803d); }
.qt-trk-pip--warn { color: var(--warning-800, #92400e); }
.qt-trk-pip--warn::before { border-color: var(--warning-600, #d97706); background: var(--warning-600, #d97706); }
.qt-trk-pip--muted { color: var(--neutral-600, #6b7280); }
.qt-trk-pip--muted::before { border-color: var(--neutral-400, #cbd0d6); background: var(--neutral-400, #cbd0d6); }
.qt-trk-label { white-space: nowrap; }
.qt-trk-count { font-variant-numeric: tabular-nums; color: var(--neutral-700, #4b5563); }

/* The quote page: the phone tabs, the two panes, the money summary. */
.qt-qp-tabs { display: flex; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: var(--radius-md, 12px); background: var(--neutral-100, #f4f4f2); }
.qt-qp-tab {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-sm, 8px);
    background: transparent; color: var(--neutral-700, #4b5563); font: 600 15px/1.2 var(--qt-sans); cursor: pointer;
}
.qt-qp-tab--active { background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); box-shadow: inset 0 0 0 1px var(--neutral-300, #e5e7eb); }
.qt-qp-main { display: grid; gap: 16px; min-width: 0; }
.qt-qp-side { display: grid; gap: 12px; min-width: 0; align-content: start; }
/* A jump to a panel (Go to reminders, Go to the deposit, a My Quotes link with #deposit) lands below the pinned top bar:
   the panels' own ids, and the pane's direct children, the boxes a link from another page lands on (QuoteSentView's
   LandAsync brings one to the top of the window). */
.qt-qp-main [id], .qt-qp-main > * { scroll-margin-top: calc(var(--topbar-height, 72px) + 16px); }
.qt-qp-sum {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 12px 16px;
    border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); font: 400 14px/1.5 var(--qt-sans);
}
.qt-qp-sum dt { color: var(--neutral-700, #4b5563); }
.qt-qp-sum dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
/* A row's link ("Open your schedule") is a 44px target, on its own line under the row's words. */
.qt-qp-sum dd > a { display: inline-flex; align-items: center; min-height: 44px; }
@container qt-sv (max-width: 479.98px) {
    .qt-qp-sum { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .qt-qp-sum dd { margin: 0 0 6px; }
}
@container qt-sv (min-width: 1000px) {
    .qt-qp-tabs { display: none; }
    :has(> .qt-qp-main):has(> .qt-qp-side) { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
    /* The pane not chosen on the phone tabs keeps its hidden attribute, and Bootstrap's reboot hides [hidden] with
       !important: only !important shows both panes side by side. */
    .qt-qp-main[hidden], .qt-qp-side[hidden] { display: grid !important; }
    .qt-qp-side { position: sticky; top: calc(var(--topbar-height, 72px) + 12px); }
}

/* The Next node: the one thing to do now, drawn as the timeline's dashed last node. */
.qt-nx { display: grid; gap: 8px; min-width: 0; padding: 12px 16px; border: 2px dashed var(--brand-300, #93c5fd); border-radius: var(--radius-md, 12px); background: var(--brand-50, #eff6ff); }
.qt-nx-h { margin: 0; font: 700 16px/1.3 var(--qt-display); color: var(--brand-800, #1e40af); }
.qt-nx-text { margin: 0; font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.qt-nx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }

/* What's happened: oldest first, a version divider above each later version, long runs of opens folded. */
.qt-tl { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; scroll-margin-top: calc(var(--topbar-height, 72px) + 16px); }
.qt-tl-item { position: relative; display: grid; gap: 2px; min-width: 0; padding: 0 0 16px 24px; }
.qt-tl-item::before {
    content: ""; position: absolute; left: 3px; top: 5px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%;
    border: 2px solid var(--brand-600, #2563eb); background: var(--brand-600, #2563eb);
}
.qt-tl-item::after { content: ""; position: absolute; left: 8px; top: 21px; bottom: 2px; border-left: 2px solid var(--neutral-200, #e9e9e6); }
.qt-tl-item:last-child::after { display: none; }
.qt-tl-when { font: 400 12px/1.4 var(--qt-sans); color: var(--neutral-600, #6b7280); font-variant-numeric: tabular-nums; }
.qt-tl-text { margin: 0; font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.qt-tl-by { font: 400 12px/1.4 var(--qt-sans); color: var(--neutral-700, #4b5563); }
.qt-tl-ver { margin: 0 0 12px; padding: 4px 0 0 24px; border-top: 1px solid var(--neutral-200, #e9e9e6); font: 600 13px/1.4 var(--qt-sans); color: var(--neutral-700, #4b5563); }
.qt-tl-fold {
    display: inline-flex; align-items: center; justify-self: start; min-height: 44px; padding: 0; border: 0; background: transparent;
    color: var(--brand-700, #1d4ed8); font: 600 14px/1.3 var(--qt-sans); text-decoration: underline; cursor: pointer;
}
.qt-tl-next { padding-bottom: 0; }
.qt-tl-next::before { border-style: dashed; background: var(--neutral-0, #ffffff); }

/* Booking an accepted quote in: date, start time and hours side by side from 480px of the panel. */
.qt-sch { container: qt-sch / inline-size; display: grid; gap: 12px; min-width: 0; scroll-margin-top: calc(var(--topbar-height, 72px) + 16px); }
.qt-sch-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
@container qt-sch (min-width: 480px) {
    .qt-sch-row { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* A visible focus ring on phase 6's own controls. */
.qt-qp-tab:focus-visible, .qt-tl-fold:focus-visible, .qt-mq-title > a:focus-visible {
    outline: 2px solid var(--brand-600, #2563eb); outline-offset: 2px;
}

/* ---- Quoting phase 7: saved items ---- */
/* The phase 7 catalogue (contract 8.9): nothing else is styled here, colours only through tokens with fallbacks, every
   target at least 44px with a visible focus ring, nothing wider than a 300px phone, every cell that holds text can shrink.
   Everything else on these pages uses the phase 3-6 classes (qt-btn, qt-pill, qt-box, qt-banner, qt-fld, qt-lbl, qt-in,
   qt-hint, qt-err, qt-state, qt-seg, qt-si-).

   The library's rows (one markup, the container query does the rest). Each row's direct children are its cells:
     <li class="qt-lib-row">
       <div class="qt-lib-name"><a href>Name</a> <button class="qt-lib-fav" aria-pressed>star</button>
         <span class="qt-lib-starter-label">A starting point. Set your own prices.</span></div>
       <p class="qt-lib-price">$1,100.00 <small>inc GST</small></p>   (or qt-lib-price qt-lib-price--todo: 2 prices to set)
       <span class="qt-lib-chip">Bundle · 4 lines</span>   <p class="qt-lib-trade">Electrician</p>
       <p class="qt-lib-win" title="the full sentence"><strong>Won 60%</strong> <span>the full sentence</span></p>
       <p class="qt-lib-used">Used on 3 sent quotes</p>   <div class="qt-lib-actions">buttons</div>
     </li>
   Each cell may start with a qt-lib-cell-label for screen readers (the column header, qt-lib-cols, is aria-hidden). On a
   phone the row is a card: name and price, kind and trade, the win rate's full sentence, the usage, the actions. From 1000px
   of the list (a 1320px laptop with the sidebar) it is one table row under the header, the kind chip under the name, the
   win rate's short figure showing and its sentence in the title. Five fixed columns, their gaps and the row's padding take
   794px, so the name keeps at least 206px. (A column for the kind as well left the name no room below 1200px of the list,
   which only a 1500px screen gives.)

   The editor: .qt-sie > .qt-sie-grid > (.qt-sie-details, .qt-sie-lines), then .qt-sie-bar, the actions, inside .qt-sie: pinned
   to the bottom at every width, as the quote editor's Send is, so Save never sits below ten fields on a laptop. From 1000px
   of the editor the details sit left (360px) and the lines right.

   The sheets: MoneySheet Placement="side" puts is-side on qt-sheet and qt-sheet-panel: still a bottom sheet on a phone, a
   full-height panel on the right from 768px. The insert sheet adds its tools, chips, prices and links to phase 3's qt-si-;
   the save sheet is qt-ss: a list of qt-ss-line labels, each a checkbox and the line's words. */

/* The library: its tabs and tools. */
.qt-lib { container: qt-lib / inline-size; display: grid; gap: 16px; min-width: 0; font-family: var(--qt-sans); color: var(--neutral-900, #1f2933); }
/* From 768px the quick-tools launcher stays on the page (fixed 22px from the bottom right, 58px square): room under the
   list lets every row's actions scroll clear of it, as on My Quotes. 22 + 58 + 16 of air = 96px. */
@media (min-width: 768px) {
    .qt-lib { padding-bottom: 96px; }
}
.qt-lib-tabs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0; padding: 4px; border-radius: var(--radius-md, 12px); background: var(--neutral-100, #f4f4f2); }
.qt-lib-tab {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px;
    padding: 0 12px; border: 0; border-radius: var(--radius-sm, 8px); background: transparent; color: var(--neutral-700, #4b5563);
    font: 600 15px/1.2 var(--qt-sans); text-align: center; text-decoration: none; overflow-wrap: anywhere; cursor: pointer;
}
.qt-lib-tab:hover { color: var(--neutral-900, #1f2933); }
.qt-lib-tab--active { background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); box-shadow: inset 0 0 0 1px var(--neutral-300, #e5e7eb); }
.qt-lib-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; min-width: 0; }
/* The search and the selects are wrappers: a label (qt-lbl) over its field (qt-in). */
.qt-lib-search { display: grid; gap: 4px; flex: 2 1 240px; min-width: 0; }
.qt-lib-select { display: grid; gap: 4px; flex: 1 1 150px; min-width: 0; }
.qt-lib-search > input, .qt-lib-select > select { width: 100%; min-width: 0; min-height: 44px; }

/* The list: a card per item on a phone. */
.qt-lib-list { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.qt-lib-cols { display: none; }
.qt-lib-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px 12px; min-width: 0;
    grid-template-areas: "name name price" "chip trade trade" "win win win" "used used used" "actions actions actions";
    padding: 12px 16px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.qt-lib-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; min-width: 0; }
.qt-lib-name > a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 0; max-width: 100%;
    font: 600 16px/1.35 var(--qt-sans); color: var(--brand-700, #1d4ed8); text-decoration: none; overflow-wrap: anywhere;
}
.qt-lib-name > a:hover { text-decoration: underline; }
.qt-lib-fav {
    flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
    border-radius: var(--radius-sm, 8px); background: transparent; color: var(--neutral-500, #9aa3ad); font-size: 18px; cursor: pointer;
}
.qt-lib-fav:hover { background: var(--neutral-100, #f4f4f2); color: var(--neutral-800, #333d47); }
.qt-lib-fav[aria-pressed="true"] { color: var(--warning-600, #d97706); }
.qt-lib-chip {
    grid-area: chip; justify-self: start; display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px;
    border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #f4f4f2); color: var(--neutral-700, #4b5563);
    font: 600 12px/1.5 var(--qt-sans); white-space: nowrap;
}
.qt-lib-trade { grid-area: trade; align-self: center; min-width: 0; margin: 0; font: 400 14px/1.4 var(--qt-sans); color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.qt-lib-price { grid-area: price; align-self: center; min-width: 0; margin: 0; text-align: end; font: 700 16px/1.35 var(--qt-sans); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--neutral-900, #1f2933); }
.qt-lib-price > small { display: block; font: 400 12px/1.3 var(--qt-sans); color: var(--neutral-600, #6b7280); }
.qt-lib-price--todo { font: 600 13px/1.4 var(--qt-sans); color: var(--warning-800, #92400e); }
/* On a card the win rate's full sentence shows; on a table row its short figure, the sentence in the title. */
.qt-lib-win { grid-area: win; min-width: 0; margin: 0; font: 400 13px/1.5 var(--qt-sans); color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.qt-lib-win > strong { display: none; font-weight: 600; color: var(--neutral-900, #1f2933); }
.qt-lib-used { grid-area: used; min-width: 0; margin: 0; font: 400 13px/1.5 var(--qt-sans); color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.qt-lib-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* For screen readers only: each cell's column name (the visible header row is aria-hidden). */
.qt-lib-cell-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.qt-lib-more { justify-self: center; margin: 4px 0 0; }
.qt-lib-empty {
    display: grid; justify-items: start; gap: 8px; min-width: 0; padding: 24px 16px; border: 1px dashed var(--neutral-300, #e5e7eb);
    border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7); font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-800, #333d47);
}
.qt-lib-empty > h2, .qt-lib-empty > h3 { margin: 0; font: 700 18px/1.3 var(--qt-display); color: var(--neutral-900, #1f2933); }
.qt-lib-empty > p { margin: 0; overflow-wrap: anywhere; }
/* Free: the one note, never a wall. */
.qt-lib-note {
    display: grid; justify-items: start; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--brand-200, #bfdbfe);
    border-radius: var(--radius-md, 12px); background: var(--brand-50, #eff6ff); font: 400 15px/1.5 var(--qt-sans); color: var(--neutral-900, #1f2933);
}
.qt-lib-note > h2, .qt-lib-note > h3 { margin: 0; font: 700 18px/1.3 var(--qt-display); color: var(--brand-800, #1e40af); }
.qt-lib-note > p { margin: 0; overflow-wrap: anywhere; }
/* From 1000px of the list: Name (the kind under it) | Trade | Price | Win rate | Used | Actions, under a header row. */
@container qt-lib (min-width: 1000px) {
    .qt-lib-cols {
        display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px 110px 120px 210px; gap: 0 12px;
        margin: 0; padding: 0 17px; font: 600 12px/1.4 var(--qt-sans); color: var(--neutral-600, #6b7280);
    }
    /* The header's second name, Kind, has no column of its own: the chip sits under each name. */
    .qt-lib-cols > :nth-child(2) { display: none; }
    .qt-lib-row {
        grid-template-columns: minmax(0, 1fr) 120px 140px 110px 120px 210px; align-items: center;
        grid-template-areas: "name trade price win used actions" "chip trade price win used actions";
        gap: 0 12px;
    }
    /* The name and its chip stay together in the middle of a row the actions make taller. */
    .qt-lib-name { align-self: end; }
    .qt-lib-chip { align-self: start; }
    .qt-lib-price { text-align: start; }
    .qt-lib-win > strong { display: inline; }
    .qt-lib-win > span { display: none; }
    .qt-lib-actions { justify-content: flex-end; }
}

/* The starter library: cards of trade jobs, structure only, no prices. */
.qt-lib-starter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.qt-lib-starter-card {
    display: grid; align-content: start; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--neutral-300, #e5e7eb);
    border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); font: 400 14px/1.5 var(--qt-sans); color: var(--neutral-800, #333d47);
}
.qt-lib-starter-card > h2, .qt-lib-starter-card > h3 { margin: 0; font: 700 16px/1.35 var(--qt-display); color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.qt-lib-starter-card > p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.qt-lib-starter-card > :last-child { justify-self: start; margin-top: 6px; }
.qt-lib-starter-label { flex-basis: 100%; min-width: 0; margin: 0; font: 600 13px/1.45 var(--qt-sans); color: var(--brand-800, #1e40af); overflow-wrap: anywhere; }

/* The editor: one column on a phone, details left and lines right from 1000px; the actions pinned below at every width. */
.qt-sie { container: qt-sie / inline-size; display: grid; gap: 16px; min-width: 0; font-family: var(--qt-sans); color: var(--neutral-900, #1f2933); }
.qt-sie-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.qt-sie-details { display: grid; align-content: start; gap: 12px; min-width: 0; }
.qt-sie-lines { display: grid; align-content: start; gap: 12px; min-width: 0; }
.qt-sie-stats {
    display: grid; gap: 4px; min-width: 0; margin: 0; padding: 12px 16px; border: 1px solid var(--neutral-300, #e5e7eb);
    border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7); font: 400 13px/1.5 var(--qt-sans); color: var(--neutral-800, #333d47);
}
.qt-sie-stats > * { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.qt-sie-banner {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; min-width: 0; padding: 12px 16px;
    border: 1px solid var(--brand-200, #bfdbfe); border-radius: var(--radius-md, 12px); background: var(--brand-50, #eff6ff);
    font: 600 14px/1.5 var(--qt-sans); color: var(--brand-800, #1e40af);
}
.qt-sie-banner > * { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.qt-sie-bar {
    position: sticky; bottom: 0; z-index: var(--z-sticky, 1000); display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    min-width: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--neutral-300, #e5e7eb);
    background: var(--neutral-0, #ffffff);
}
.qt-sie-bar > * { min-width: 0; }
/* From 768px the quick-tools launcher stays: the pinned bar keeps its right-hand end clear of it, and the page has room under
   it (22 + 58 + 16 of air = 96px). */
@media (min-width: 768px) {
    .qt-sie { padding-bottom: 96px; }
    .qt-sie-bar { padding-right: 96px; }
}
@container qt-sie (min-width: 1000px) {
    .qt-sie-grid { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
}

/* The insert sheet's additions to phase 3's qt-si-: the kind filter, each item's kind and price, the links when it's empty. */
.qt-si-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.qt-si-chip {
    display: inline-flex; align-items: center; justify-self: start; min-height: 22px; padding: 0 8px; border-radius: var(--radius-pill, 999px);
    background: var(--neutral-100, #f4f4f2); color: var(--neutral-700, #4b5563); font: 600 12px/1.5 var(--qt-sans); white-space: nowrap;
}
.qt-si-price { min-width: 0; font: 700 15px/1.35 var(--qt-sans); font-variant-numeric: tabular-nums; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.qt-si-price--todo { font: 600 13px/1.4 var(--qt-sans); color: var(--warning-800, #92400e); }
.qt-si-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; min-width: 0; }
.qt-si-links > a { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px/1.3 var(--qt-sans); color: var(--brand-700, #1d4ed8); }

/* The save sheet: every line of the quote with a checkbox; hire lines shown, off. */
.qt-ss { display: grid; gap: 12px; min-width: 0; }
.qt-ss-list { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.qt-ss-line {
    display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--neutral-300, #e5e7eb);
    border-radius: var(--radius-sm, 8px); background: var(--neutral-0, #ffffff); font: 400 14px/1.4 var(--qt-sans); color: var(--neutral-900, #1f2933); cursor: pointer;
}
.qt-ss-line > input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--brand-600, #2563eb); }
.qt-ss-line > :not(input) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qt-ss-line--off { background: var(--neutral-50, #f8f8f7); color: var(--neutral-600, #6b7280); cursor: not-allowed; }
.qt-ss-done {
    display: grid; justify-items: start; gap: 4px; min-width: 0; padding: 12px 16px; border: 1px solid var(--success-200, #bbf7d0);
    border-radius: var(--radius-md, 12px); background: var(--success-50, #f0fdf4); font: 400 14px/1.5 var(--qt-sans); color: var(--success-800, #166534);
}
.qt-ss-done > p { margin: 0; overflow-wrap: anywhere; }
.qt-ss-done > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--brand-700, #1d4ed8); }

/* MoneySheet Placement="side": a bottom sheet on a phone; from 768px a full-height panel on the right, the scrim kept. */
@media (min-width: 768px) {
    .qt-sheet.is-side { align-items: stretch; justify-content: flex-end; padding: 0; }
    .qt-sheet.is-side .qt-sheet-panel { max-width: 440px; height: 100%; max-height: none; border-radius: 0; }
}

/* A visible focus ring on phase 7's own controls. */
.qt-lib-tab:focus-visible, .qt-lib-fav:focus-visible, .qt-lib-name > a:focus-visible, .qt-si-links > a:focus-visible,
.qt-ss-done > a:focus-visible, .qt-ss-line:focus-within {
    outline: 2px solid var(--brand-600, #2563eb); outline-offset: 2px;
}

/* ---- Approved My Quotes workspace, 10 October 2026 --------------------------------------
   Deliberately scoped to the overview. Shared quote controls and progress tracks elsewhere
   retain their existing appearance. The server remains the source of every stage and pip. */
.qt-mq-page {
    --mq-ink: #11194a;
    --mq-muted: #596783;
    --mq-line: #dfe6f0;
    display: grid; gap: 14px; min-width: 0; min-height: calc(100dvh - 72px); padding: 14px 24px 24px;
    background: #f8fafc; color: var(--mq-ink); font-family: var(--qt-sans);
}
.qt-mq-page > *, .qt-mq-page .qt-mq > * { min-width: 0; }
.qt-mq-page .qt-mq-hero {
    position: relative; isolation: isolate; display: flex; align-items: center; min-height: 182px;
    overflow: hidden; border: 1px solid #e6e8ea; border-radius: 7px; background: #fffcf6;
}
.qt-mq-page .qt-mq-hero > img {
    position: absolute; z-index: -1; inset: 0 0 0 auto; width: 55%; height: 100%; object-fit: cover;
    object-position: center 57%; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}
.qt-mq-page .qt-mq-hero-copy { width: 64%; min-width: 0; padding: 18px 20px; }
.qt-mq-page .qt-mq-eyebrow {
    display: block; margin: 0 0 12px; color: var(--brand-700, #1d4ed8); font-size: 12px; font-weight: 700;
    line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
}
.qt-mq-page .qt-mq-hero h1 {
    max-width: none; margin: 0 0 7px; font: 750 clamp(25px, 2.1vw, 33px)/1.15 var(--qt-display);
    letter-spacing: -.045em; color: var(--mq-ink); text-wrap: balance;
}
.qt-mq-page .qt-mq-hero-copy > p:not(.qt-mq-eyebrow) {
    max-width: 51ch; margin: 0; font-size: 16px; line-height: 1.45; color: #2546a7;
}
.qt-mq-page .qt-mq-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.qt-mq-page .qt-mq-hero-actions .qt-btn { min-height: 42px; padding-inline: 17px; border-radius: 5px; font-size: 14px; }
.qt-mq-page .qt-mq-hero-actions .qt-btn.is-secondary { background: #fffdfa; border-color: #95b9ff; }
.qt-mq-page .qt-mq-nav {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; margin-top: -4px;
    border-bottom: 1px solid var(--mq-line);
}
.qt-mq-page .qt-mq-nav > a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
    margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--brand-700, #1d4ed8);
    font-size: 14px; font-weight: 500; text-decoration: none;
}
.qt-mq-page .qt-mq-nav > a:hover { background: #f5f8ff; }
.qt-mq-page .qt-mq-nav > a.is-active { border-bottom-color: var(--brand-600, #2563eb); font-weight: 700; }
.qt-mq-page .qt-mq-nav > [data-tour], .qt-mq-page .qt-mq-nav > .page-tabbar-wrap { min-width: 0; max-width: 100%; }
.qt-mq-page .qt-mq-nav .page-tabbar-wrap { margin: 0; }
.qt-mq-page .qt-mq-nav .page-tabbar { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0; border-radius: 0; background: transparent; overflow: visible; mask-image: none; }
.qt-mq-page .qt-mq-nav .page-tabbar .hero-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: -1px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--brand-700, #1d4ed8) !important; font-size: 14px; font-weight: 500; text-decoration: none; }
.qt-mq-page .qt-mq-nav .page-tabbar .hero-tab:hover { background: #f5f8ff; }
.qt-mq-page .qt-mq-nav .page-tabbar .hero-tab-active { border-bottom-color: var(--brand-600, #2563eb); font-weight: 700; }
.qt-mq-page .qt-mq-nav .page-tabbar .hero-tab > i { display: none; }
.qt-mq-page .qt-mq-nav .page-tabbar .hero-tab:focus-visible { outline: 2px solid var(--brand-600, #2563eb); outline-offset: -3px; }
.qt-mq-page .qt-mq-guide { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--brand-700, #1d4ed8); font-size: 13px; }
.qt-mq-page .qt-mq-guide .tour-launch { width: 44px; height: 44px; border: 0; border-radius: 5px; background: transparent; color: inherit; }
.qt-mq-page .qt-mq { gap: 14px; color: var(--mq-ink); }
.qt-mq-page .qt-mq-support { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: 10px; }
.qt-mq-page .qt-mq-support:empty { display: none; }
.qt-mq-page .qt-mq-support .qt-notice,
.qt-mq-page .qt-mq-support .tour-invite {
    align-items: center; gap: 9px; margin: 0; padding: 9px 12px; border: 1px solid var(--mq-line);
    border-radius: 6px; background: #fff; box-shadow: none; font-size: 13px; line-height: 1.4;
}
.qt-mq-page .qt-mq-support .qt-notice-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.qt-mq-page .qt-mq-support .qt-notice-text { flex: 1 1 230px; }
.qt-mq-page .qt-mq-support .qt-notice-link { flex: none; font-size: 13px; }
.qt-mq-page .qt-mq-support .tour-invite-icon { width: 28px; height: 28px; font-size: 16px; background: #eef3fc; }
.qt-mq-page .qt-mq-support .tour-invite-title { font-size: 13px; font-weight: 600; }
.qt-mq-page .qt-mq-support .tour-invite-sub { font-size: 13px; line-height: 1.4; color: var(--mq-muted); }
.qt-mq-page .qt-mq-support .tour-invite-go,
.qt-mq-page .qt-mq-support .tour-invite-no { min-height: 44px; padding: 5px 8px; font-size: 13px; box-shadow: none; }
.qt-mq-page .qt-mq-support .tour-invite-go { background: transparent; color: var(--brand-700, #1d4ed8); }
.qt-mq-page .qt-mq-support .tour-invite-go:hover { background: #eef3fc; }
.qt-mq-page .qt-mq-sum {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 16px 0;
    border: 1px solid var(--mq-line); border-radius: 6px; background: #fff;
}
.qt-mq-page .qt-mq-stat { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0 20px; }
.qt-mq-page .qt-mq-stat + .qt-mq-stat { border-left: 1px solid var(--mq-line); }
.qt-mq-page .qt-mq-stat > i { flex: none; color: var(--brand-600, #2563eb); font-size: 28px; line-height: 1; }
.qt-mq-page .qt-mq-stat > .bi-check-circle, .qt-mq-page .qt-mq-stat > .bi-check2-circle { color: #24824b; }
.qt-mq-page .qt-mq-stat > div { min-width: 0; }
.qt-mq-page .qt-mq-stat small { display: block; color: var(--mq-muted); font-size: 13px; line-height: 1.45; }
.qt-mq-page .qt-mq-stat-value { display: block; color: var(--mq-ink); font-size: 23px; line-height: 1.35; font-weight: 700; font-variant-numeric: tabular-nums; }
.qt-mq-page .qt-mq-stat-value small { display: inline; font-weight: 400; }
.qt-mq-page .qt-mq-stat-note { margin: 2px 0 0; color: var(--mq-muted); font-size: 13px; line-height: 1.45; }
.qt-mq-page .qt-mq-stat a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -4px; font-size: 14px; text-underline-offset: 3px; }
.qt-mq-page .qt-mq-summary-note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 14px; margin: 7px 2px 0; font-size: 13px; line-height: 1.5; color: var(--mq-muted); }
.qt-mq-page .qt-mq-summary-note summary { width: fit-content; min-height: 28px; padding: 3px 0; color: var(--mq-muted); cursor: pointer; }
.qt-mq-page .qt-mq-basis[open] { flex-basis: 100%; }
.qt-mq-page .qt-mq-summary-note p { max-width: 100ch; margin: 0 0 6px; }
.qt-mq-page .qt-mq-needs { gap: 9px; padding: 2px 0 0; border: 0; border-radius: 0; background: transparent; }
.qt-mq-page .qt-mq-needs-h,
.qt-mq-page .qt-mq-needs > h2 { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 21px/1.3 var(--qt-display); letter-spacing: -.035em; color: var(--mq-ink); }
.qt-mq-page .qt-mq-needs-h > span,
.qt-mq-page .qt-mq-needs > h2 > span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 50%; background: #edf3ff; color: var(--brand-700, #1d4ed8); box-shadow: none; font-size: 16px; }
.qt-mq-page .qt-mq-needs > .qt-mq-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qt-mq-page .qt-mq-priority {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icon copy" "icon next";
    align-content: start; align-items: start; gap: 0 12px; min-width: 0; padding: 13px 15px 7px;
    border: 1px solid var(--mq-line); border-radius: 6px; background: #fff; box-shadow: none;
}
.qt-mq-page .qt-mq-priority-icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 50px; border: 1px solid #dde8fa; border-radius: 5px; background: #f5f8fd; color: var(--brand-700, #1d4ed8); font-size: 23px; }
.qt-mq-page .qt-mq-priority-icon .bi-check-circle, .qt-mq-page .qt-mq-priority-icon .bi-check2-circle { color: #24824b; }
.qt-mq-page .qt-mq-priority-copy { grid-area: copy; min-width: 0; }
.qt-mq-page .qt-mq-priority-copy > a { color: var(--mq-ink); font-size: 14px; line-height: 1.4; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.qt-mq-page .qt-mq-priority-copy > a:hover { text-decoration: underline; }
.qt-mq-page .qt-mq-priority-copy > p { margin: 4px 0 0; color: var(--mq-muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.qt-mq-page .qt-mq-priority .qt-mq-next { justify-content: flex-start; gap: 2px; }
.qt-mq-page .qt-mq-priority .qt-mq-next .qt-btn { justify-content: flex-start; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: var(--brand-700, #1d4ed8); font-size: 14px; font-weight: 600; text-align: left; }
.qt-mq-page .qt-mq-priority .qt-mq-next .qt-btn:hover:not(:disabled) { color: var(--brand-800, #1e40af); text-decoration: underline; }
.qt-mq-page .qt-mq-priority .qt-mq-next .qt-btn::after { content: "\2192"; margin-left: 6px; font-size: 18px; }
.qt-mq-page .qt-mq-ledger { display: grid; gap: 0; min-width: 0; padding: 11px 12px 12px; border: 1px solid var(--mq-line); border-radius: 7px; background: #fff; }
.qt-mq-page .qt-mq-tools { align-items: center; gap: 10px; }
.qt-mq-page .qt-mq-tools > h2 { flex: 1 1 160px; margin: 0; font: 700 19px/1.3 var(--qt-display); letter-spacing: -.035em; color: var(--mq-ink); }
.qt-mq-page .qt-mq-search { flex: 0 1 300px; }
.qt-mq-page .qt-mq-select { flex: 0 1 146px; }
.qt-mq-page .qt-mq-tools .qt-in { min-height: 40px; height: 40px; padding-block: 6px; border-color: #d4dfef; border-radius: 4px; font-size: 13px; background-color: #fff; }
.qt-mq-page .qt-mq-tools .qt-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.qt-mq-page .qt-mq-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 10px; min-width: 0; margin-top: 6px; border-bottom: 1px solid var(--mq-line); }
.qt-mq-page .qt-mq-tabs > button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--mq-muted); font: 500 13px/1.3 var(--qt-sans); cursor: pointer; }
.qt-mq-page .qt-mq-tabs > button:hover { background: #f6f8fc; }
.qt-mq-page .qt-mq-tabs > button.is-active { border-bottom-color: var(--brand-600, #2563eb); color: var(--brand-700, #1d4ed8); font-weight: 650; }
.qt-mq-page .qt-mq-tabs > button > span { display: inline-grid; place-items: center; min-width: 23px; min-height: 23px; padding: 1px 5px; border-radius: 50%; background: #eef3fc; color: #294a94; font-size: 12px; }
.qt-mq-page .qt-mq-ledger > .qt-mq-list { gap: 9px; margin-top: 12px; }
.qt-mq-page .qt-mq-row:not(.qt-mq-priority) {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identity total" "stage stage" "track track" "latest latest" "valid valid" "next next";
    gap: 9px 12px; padding: 12px; border-color: var(--mq-line); border-radius: 5px; box-shadow: none;
}
.qt-mq-page .qt-mq-identity { grid-area: identity; display: flex; align-items: center; gap: 10px; min-width: 0; }
.qt-mq-page .qt-mq-identity > div { min-width: 0; }
.qt-mq-page .qt-mq-document { display: inline-grid; flex: none; place-items: center; width: 35px; height: 39px; border-radius: 5px; background: #edf2f8; color: #263758; font-size: 20px; }
.qt-mq-page .qt-mq-title { gap: 0 6px; }
.qt-mq-page .qt-mq-title > a { flex-basis: 100%; min-height: 0; color: var(--mq-ink); font-size: 14px; line-height: 1.4; font-weight: 650; }
.qt-mq-page .qt-mq-num { color: var(--mq-muted); font-size: 13px; white-space: normal; }
.qt-mq-page .qt-mq-chip { min-height: 0; padding: 0; border-radius: 0; background: transparent; color: var(--mq-muted); font-size: 13px; font-weight: 400; }
.qt-mq-page .qt-mq-chip::before { content: "\00b7"; margin-right: 6px; }
.qt-mq-page .qt-mq-who { margin-top: 1px; color: var(--mq-muted); font-size: 13px; }
.qt-mq-page .qt-mq-total { color: var(--mq-ink); font-size: 15px; }
.qt-mq-page .qt-mq-total > small { font-size: 13px; color: var(--mq-muted); }
.qt-mq-page .qt-mq-row > .qt-pill { font-size: 13px; line-height: 1.4; white-space: normal; }
.qt-mq-page .qt-mq-latest { color: var(--mq-ink); font-size: 13px; line-height: 1.45; }
.qt-mq-page .qt-mq-valid { color: var(--mq-muted); font-size: 13px; font-weight: 400; }
.qt-mq-page .qt-mq-next .qt-btn { min-height: 44px; padding: 6px 11px; border-radius: 4px; border-color: #9abaff; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.qt-mq-page .qt-mq-next .qt-hint, .qt-mq-page .qt-mq-next .qt-err { flex-basis: 100%; font-size: 13px; }
.qt-mq-page .qt-mq-ledger > .qt-hint { margin: 10px 0 0; color: var(--mq-muted); font-size: 13px; }
.qt-mq-page .qt-mq-list-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; color: var(--mq-muted); font-size: 13px; line-height: 1.4; }
.qt-mq-page .qt-mq-more { margin-top: 12px; }
.qt-mq-page .qt-mq-row > .qt-trk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 272px); gap: 0; align-items: start; }
.qt-mq-page .qt-trk-pip { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 5px; min-width: 0; padding-top: 0; font-size: 13px; line-height: 1.3; text-align: center; }
.qt-mq-page .qt-trk-pip::before { position: relative; z-index: 1; width: 17px; height: 17px; border-width: 1.5px; }
.qt-mq-page .qt-trk-pip:not(:last-child)::after { content: ""; position: absolute; top: 8px; left: calc(50% + 10px); width: calc(100% - 20px); border-top: 1px solid #d7e0ee; }
.qt-mq-page .qt-trk-pip--done::before, .qt-mq-page .qt-trk-pip--ok::before { content: "\2713"; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.qt-mq-page .qt-trk-label { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.qt-mq-page .qt-trk-count { font-size: 12px; line-height: 1.2; }
.qt-mq-page .qt-mq-nav > a:focus-visible,
.qt-mq-page .qt-mq-tabs > button:focus-visible,
.qt-mq-page .qt-mq-priority-copy > a:focus-visible { outline: 2px solid var(--brand-600, #2563eb); outline-offset: 3px; }

@container qt-mq (min-width: 1180px) {
    .qt-mq-page .qt-mq-cols,
    .qt-mq-page .qt-mq-row:not(.qt-mq-priority) { grid-template-columns: minmax(170px, 1.65fr) 90px 103px 272px minmax(110px, 1fr) 80px 132px; gap: 0 10px; }
    .qt-mq-page .qt-mq-cols { display: grid; padding: 12px 8px 7px; margin: 0; color: #425982; font-size: 13px; font-weight: 500; line-height: 1.4; }
    .qt-mq-page .qt-mq-row:not(.qt-mq-priority) { grid-template-areas: "identity total stage track latest valid next"; align-items: center; min-height: 82px; padding: 8px; border: 0; border-bottom: 1px solid var(--mq-line); border-radius: 0; }
    .qt-mq-page .qt-mq-row:not(.qt-mq-priority):last-child { border-bottom: 0; }
    .qt-mq-page .qt-mq-ledger > .qt-mq-list { gap: 0; margin-top: 0; border: 1px solid var(--mq-line); border-radius: 5px; overflow: hidden; }
    .qt-mq-page .qt-mq-row:not(.qt-mq-priority):hover { background: #fcfdff; }
    .qt-mq-page .qt-mq-total { text-align: left; }
    .qt-mq-page .qt-mq-row > .qt-pill { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .qt-mq-page .qt-mq-next { justify-content: stretch; }
    .qt-mq-page .qt-mq-next > .qt-btn { flex: 1 1 auto; }
}
@container qt-mq (max-width: 900px) {
    .qt-mq-page .qt-mq-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .qt-mq-page .qt-mq-stat:nth-child(3) { border-left: 0; }
    .qt-mq-page .qt-mq-needs > .qt-mq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qt-mq-page .qt-mq-tools > h2 { flex-basis: 100%; }
    .qt-mq-page .qt-mq-search { flex: 2 1 220px; }
    .qt-mq-page .qt-mq-select { flex: 1 1 135px; }
}
@media (max-width: 900px) {
    .qt-mq-page .qt-mq-hero-copy { width: 72%; }
    .qt-mq-page .qt-mq-hero > img { width: 44%; opacity: .5; }
    .qt-mq-page .qt-mq-hero h1 { font-size: 28px; }
}
@media (max-width: 600px) {
    .qt-mq-page { gap: 11px; padding: 12px 12px 90px; }
    .qt-mq-page .qt-mq-hero { min-height: 0; }
    .qt-mq-page .qt-mq-hero-copy { width: 100%; padding: 18px 16px; background: linear-gradient(90deg, #fffcf6 56%, #fffcf6e8); }
    .qt-mq-page .qt-mq-hero > img { width: 100%; clip-path: none; opacity: .35; }
    .qt-mq-page .qt-mq-eyebrow { margin-bottom: 10px; }
    .qt-mq-page .qt-mq-hero h1 { font-size: 27px; max-width: 21ch; }
    .qt-mq-page .qt-mq-hero-copy > p:not(.qt-mq-eyebrow) { font-size: 14px; }
    .qt-mq-page .qt-mq-hero-actions { gap: 7px; }
    .qt-mq-page .qt-mq-hero-actions .qt-btn { flex: 1 1 auto; min-height: 44px; padding-inline: 10px; font-size: 13px; }
    .qt-mq-page .qt-mq-nav { gap: 0; }
    .qt-mq-page .qt-mq-nav > a,
    .qt-mq-page .qt-mq-nav .page-tabbar .hero-tab { padding-inline: 9px; font-size: 13px; }
    .qt-mq-page .qt-mq-nav > [data-tour] { flex: 1 1 240px; min-width: 0; }
    .qt-mq-page .qt-mq-nav .page-tabbar { width: 100%; min-width: 0; max-width: 100%; flex-wrap: nowrap; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
    .qt-mq-page .qt-mq-nav .page-tabbar .hero-tab { min-width: max-content; white-space: nowrap; }
    .qt-mq-page .qt-mq-guide { margin-left: 0; padding-left: 2px; }
    .qt-mq-page .qt-mq-support .tour-invite { flex-wrap: wrap; }
    .qt-mq-page .qt-mq-support .tour-invite-body { flex: 1 1 170px; order: 0; }
    .qt-mq-page .qt-mq-stat { align-items: flex-start; gap: 8px; padding-inline: 11px; }
    .qt-mq-page .qt-mq-stat > i { margin-top: 3px; font-size: 22px; }
    .qt-mq-page .qt-mq-stat-value { font-size: 20px; }
    .qt-mq-page .qt-mq-summary-note summary { min-height: 44px; padding-block: 10px; }
    .qt-mq-page .qt-mq-needs > .qt-mq-list { grid-template-columns: minmax(0, 1fr); }
    .qt-mq-page .qt-mq-ledger { padding: 11px 10px; }
    .qt-mq-page .qt-mq-search { flex-basis: 100%; }
    .qt-mq-page .qt-mq-tools .qt-in { min-height: 44px; height: 44px; font-size: 14px; }
    .qt-mq-page .qt-mq-tabs { gap: 0; }
    .qt-mq-page .qt-mq-tabs > button { gap: 5px; padding-inline: 8px; }
    .qt-mq-page .qt-mq-row:not(.qt-mq-priority) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identity" "total" "stage" "track" "latest" "valid" "next"; }
    .qt-mq-page .qt-mq-total { display: flex; align-items: baseline; gap: 6px; text-align: left; }
    .qt-mq-page .qt-mq-next > .qt-btn { flex: 1 1 auto; }
    .qt-mq-page .qt-mq-priority .qt-mq-next > .qt-btn { flex: 0 1 auto; }
    .qt-mq-page .qt-mq-title > a, .qt-mq-page .qt-mq-priority-copy > a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .qt-mq-page .qt-mq-nav > a, .qt-mq-page .qt-mq-tabs > button,
    .qt-mq-page .qt-mq-support .tour-invite-go, .qt-mq-page .qt-mq-support .tour-invite-no { transition: none; }
}

/* ---- Approved quote builder workbench, 10 October 2026 ----------------------------------
   Presentation stays within this editor. The existing line, save, checklist and proposal
   components keep their behavior, including folded phone cards and server-derived checks. */
.qt-builder {
    --qb-ink: #142341; --qb-muted: #596981; --qb-line: #dce4ee;
    min-width: 0; min-height: calc(100dvh - 72px); padding: 14px 24px 24px;
    background: #f6f8fb; color: var(--qb-ink); font-family: var(--qt-sans);
}
.qt-builder > *, .qt-builder .qt-builder-layout > *, .qt-builder .qt-builder-main > * { min-width: 0; }
.qt-builder [hidden] { display: none !important; }
.qt-builder .qt-builder-header {
    position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px 20px; min-height: 112px; padding: 15px 20px; overflow: visible;
    border: 1px solid #e4e7ed; border-radius: 6px; background: #fdfaf4;
}
.qt-builder .qt-builder-header > img { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 200px; height: 100%; border-radius: 0 5px 5px 0; object-fit: cover; opacity: .5; mask-image: linear-gradient(90deg, transparent, #000 48%); }
.qt-builder .qt-builder-heading { flex: 1 1 330px; min-width: 0; }
.qt-builder .qt-builder-heading h1 { margin: 4px 0 5px; color: var(--qb-ink); font: 700 26px/1.2 var(--qt-display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.qt-builder .qt-builder-heading > p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--qb-muted); overflow-wrap: anywhere; }
.qt-builder .qt-builder-heading > a,
.qt-builder .qt-builder-breadcrumb { color: var(--brand-700, #1d4ed8); font-size: 13px; line-height: 1.4; text-decoration: none; }
.qt-builder .qt-builder-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.qt-builder .qt-builder-header-actions .qt-btn { min-height: 40px; padding: 6px 12px; background: #fff; border-color: #cbd7e8; border-radius: 4px; color: #233857; font-size: 13px; }
.qt-builder .qt-builder-header-actions .tour-launch { width: 40px; height: 40px; border-radius: 4px; border-color: #cbd7e8; background: #fff; color: #233857; }
.qt-builder .qt-ed { padding: 0; color: var(--qb-ink); }
.qt-builder .qt-builder-nav {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; min-width: 0; margin: 0 0 12px;
    padding: 5px 0 0; border-bottom: 1px solid var(--qb-line);
}
.qt-builder .qt-builder-nav > button,
.qt-builder .qt-builder-nav > [role="tablist"] > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 0; margin-bottom: -1px; padding: 0 11px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: #435772; font: 500 14px/1.3 var(--qt-sans); cursor: pointer; }
.qt-builder .qt-builder-nav > [role="tablist"] { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.qt-builder .qt-builder-nav > button:hover,
.qt-builder .qt-builder-nav > [role="tablist"] > button:hover { background: #edf3fc; }
.qt-builder .qt-builder-nav > button.is-active,
.qt-builder .qt-builder-nav > button[aria-selected="true"],
.qt-builder .qt-builder-nav > [role="tablist"] > button[aria-selected="true"] { border-bottom-color: var(--brand-600, #2563eb); color: var(--brand-700, #1d4ed8); font-weight: 700; }
.qt-builder .qt-builder-view-switch { display: inline-flex; align-items: stretch; gap: 0; margin: 3px 0 7px auto; padding: 0; border: 1px solid #d7e1ee; border-radius: 4px; background: #fff; }
.qt-builder .qt-builder-view-switch > button { min-height: 44px; padding: 0 11px; border: 0; border-radius: 3px; background: transparent; color: var(--qb-ink); font-size: 13px; cursor: pointer; }
.qt-builder .qt-builder-view-switch > button[aria-pressed="true"], .qt-builder .qt-builder-view-switch > button.is-active { background: #eaf2ff; color: var(--brand-700, #1d4ed8); font-weight: 600; }
.qt-builder .qt-builder-context { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; min-width: 0; margin: 0 0 12px; padding: 5px 13px; border: 1px solid var(--qb-line); border-radius: 5px; background: #fff; font-size: 13px; line-height: 1.45; }
.qt-builder .qt-builder-context > strong { color: var(--qb-ink); font-weight: 650; }
.qt-builder .qt-builder-client { display: inline-flex; align-items: center; gap: 7px; min-width: 0; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: var(--brand-700, #1d4ed8); font: inherit; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.qt-builder .qt-builder-client:hover { text-decoration: underline; text-underline-offset: 3px; }
.qt-builder .qt-builder-client:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 3px; border-radius: 3px; }
.qt-builder .qt-builder-channel { font-size: 12px; }
.qt-builder .qt-builder-context > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #435772; overflow-wrap: anywhere; }
.qt-builder .qt-builder-context > .qt-btn { margin-left: auto; min-height: 44px; padding: 4px 12px; border-color: #d6e0ed; border-radius: 4px; font-size: 13px; }
.qt-builder .qt-builder-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; min-width: 0; }
.qt-builder .qt-builder-main { display: grid; align-content: start; gap: 14px; min-width: 0; }
.qt-builder .qt-builder-main > section:not([hidden]) { display: block; }
.qt-builder .qt-ed-card { min-width: 0; padding: 14px; border: 1px solid var(--qb-line); border-radius: 6px; background: #fff; }
.qt-builder .qt-ed-card > .qt-box-h { display: block; }
.qt-builder .qt-box-h { margin-bottom: 11px; color: var(--qb-ink); font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.qt-builder .qt-ed-caption, .qt-builder .qt-hint { font-size: 13px; color: var(--qb-muted); line-height: 1.45; }
.qt-builder .qt-btn { min-height: 44px; border-radius: 4px; font-size: 14px; }
.qt-builder .qt-in, .qt-builder .qt-ta { border-color: #cbd7e5; border-radius: 4px; font-size: 14px; }
.qt-builder .qt-in { min-height: 44px; }
.qt-builder .qt-lbl { color: #435772; font-size: 13px; font-weight: 600; }
.qt-builder .qt-seg { gap: 0; padding: 0; border: 1px solid #d8e2ef; border-radius: 4px; background: #fff; }
.qt-builder .qt-seg-btn { min-height: 38px; padding-inline: 12px; border-radius: 3px; color: #53637d; font-size: 13px; font-weight: 500; }
.qt-builder .qt-seg-btn[aria-pressed="true"] { color: var(--brand-700, #1d4ed8); box-shadow: inset 0 0 0 1px var(--brand-500, #3b82f6); background: #f7faff; }
.qt-builder .qt-builder-pricing-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.qt-builder .qt-builder-pricing-tools h2,
.qt-builder .qt-builder-pricing-tools h3 { margin: 0; color: var(--qb-ink); font: 700 20px/1.3 var(--qt-display); letter-spacing: -.035em; }
.qt-builder .qt-builder-library-search { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin-bottom: 12px; }
.qt-builder .qt-builder-library-search > i { position: absolute; top: 22px; left: 12px; transform: translateY(-50%); color: var(--qb-muted); font-size: 16px; pointer-events: none; }
.qt-builder .qt-builder-library-search .qt-in { flex: 1 1 250px; width: auto; min-width: 0; }
.qt-builder .qt-builder-library-search > .qt-in { padding-left: 36px; }
.qt-builder .qt-builder-library-search > .qt-fld { flex: 1 1 250px; min-width: 0; }
.qt-builder .qt-builder-library-search > .qt-btn { flex: none; }
.qt-builder .qt-builder-library { display: grid; gap: 10px; min-width: 0; margin: 0 0 14px; padding: 12px; border: 1px solid #d5e1f0; border-radius: 5px; background: #f8faff; }
.qt-builder .qt-builder-library .qt-si-list { max-height: 330px; overflow-y: auto; overscroll-behavior: contain; }
.qt-builder .qt-builder-preview { display: none; min-width: 0; padding: 13px; border: 1px solid var(--qb-line); border-radius: 6px; background: #fff; }
.qt-builder .qt-builder-preview > header,
.qt-builder .qt-builder-preview-head,
.qt-builder .qt-builder-preview-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; margin-bottom: 5px; }
.qt-builder .qt-builder-preview > h2, .qt-builder .qt-builder-preview > h3,
.qt-builder .qt-builder-preview-head > h2,
.qt-builder .qt-builder-preview-heading > h2 { margin: 0; color: var(--qb-ink); font: 650 14px/1.4 var(--qt-sans); text-transform: uppercase; letter-spacing: .02em; }
.qt-builder .qt-builder-preview-heading > .qt-btn { width: 44px; min-height: 36px; padding: 0; }
.qt-builder .qt-builder-preview .qt-ed-caption { margin: 0 0 10px; }
.qt-builder .qt-builder-preview .qt-ps { border: 1px solid #d5dce6; box-shadow: none; }
.qt-builder .qt-builder-readiness { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--qb-line); border-radius: 6px; background: #fff; }
.qt-builder .qt-builder-readiness > h2,
.qt-builder .qt-builder-readiness > h3 { margin: 0; color: var(--qb-ink); font: 700 18px/1.3 var(--qt-display); letter-spacing: -.02em; }
.qt-builder .qt-builder-readiness > p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--qb-muted); }
.qt-builder .qt-builder-readiness .qt-btn { justify-self: start; }
.qt-builder .qt-builder-back { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.qt-builder .qt-builder-tools { position: relative; }
.qt-builder .qt-builder-tools > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 12px; border: 1px solid #cbd7e8; border-radius: 4px; background: #fff; color: #233857; font-size: 13px; cursor: pointer; list-style: none; }
.qt-builder .qt-builder-tools > summary::-webkit-details-marker { display: none; }
.qt-builder .qt-builder-tools > div { position: absolute; z-index: 1200; top: calc(100% + 6px); right: 0; display: grid; gap: 3px; width: 245px; max-width: calc(100vw - 48px); padding: 7px; border: 1px solid #d4dfed; border-radius: 5px; background: #fff; box-shadow: 0 8px 24px #2238541a; }
.qt-builder .qt-builder-tools > div > a,
.qt-builder .qt-builder-tools > div > button { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 7px 9px; border: 0; border-radius: 3px; background: transparent; color: #2e4464; font-size: 13px; line-height: 1.4; text-align: left; text-decoration: none; }
.qt-builder .qt-builder-tools > div > a:hover,
.qt-builder .qt-builder-tools > div > button:hover { background: #edf3fc; }
.qt-builder .qt-builder-tools summary:focus-visible { outline: 2px solid var(--brand-600, #2563eb); outline-offset: 2px; }
.qt-builder .qt-ed-card > h2 { margin: 0 0 12px; color: var(--qb-ink); font: 700 20px/1.3 var(--qt-display); letter-spacing: -.025em; }
.qt-builder .qt-ed-card > .qt-rc { padding: 0; border: 0; border-radius: 0; }
.qt-builder .qt-ed-card > .qt-rc + .qt-btn { margin-top: 6px; }
.qt-builder .qt-builder-preview > .qt-builder-readiness { margin-top: 14px; padding: 13px 0 0; border: 0; border-top: 1px solid var(--qb-line); border-radius: 0; }
.qt-builder .qt-builder-readiness .qt-ck { gap: 7px; }
.qt-builder .qt-builder-readiness .qt-ck-item { gap: 5px 8px; padding: 9px; border-radius: 4px; font-size: 13px; }
.qt-builder .qt-builder-readiness .qt-ck-fix { padding: 3px 0; min-height: 44px; font-size: 13px; }
.qt-builder .qt-builder-review .qt-ck { gap: 8px; }
.qt-builder .qt-builder-review .qt-ck-item { border-radius: 5px; }
.qt-builder .qt-builder-review-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--qb-line); }
.qt-builder .qt-builder-tour { margin-top: 14px; }
.qt-builder .qt-builder-tour .tour-invite { gap: 10px; margin: 0; padding: 10px 13px; border-color: var(--qb-line); border-radius: 5px; background: #fff; box-shadow: none; }
.qt-builder .qt-builder-tour .tour-invite-title { font-size: 14px; }
.qt-builder .qt-builder-tour .tour-invite-sub { font-size: 13px; }
.qt-builder .qt-builder-tour .tour-invite-go,
.qt-builder .qt-builder-tour .tour-invite-no { min-height: 44px; font-size: 13px; }
.qt-builder .qt-builder-tour .tour-invite-go { background: #eef4ff; color: var(--brand-700, #1d4ed8); box-shadow: none; }
.qt-builder .qt-builder-option-intro h2 { margin: 0 0 5px; font: 700 18px/1.3 var(--qt-display); color: var(--qb-ink); letter-spacing: -.02em; }
.qt-builder .qt-builder-option-intro p { margin: 0; color: var(--qb-muted); font-size: 13px; line-height: 1.5; }
.qt-builder .qt-builder-option-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; min-width: 0; }
.qt-builder .qt-builder-option-card { display: flex; flex-wrap: wrap; align-content: start; align-items: center; gap: 7px; min-width: 0; min-height: 142px; padding: 14px; border: 1px solid var(--qb-line); border-radius: 5px; background: #fff; color: var(--qb-ink); text-align: left; cursor: pointer; }
.qt-builder .qt-builder-option-card:hover { border-color: #92b9f5; background: #fcfdff; }
.qt-builder .qt-builder-option-card.is-selected { border-color: #609bfa; background: #f2f7ff; box-shadow: inset 0 0 0 1px #609bfa; }
.qt-builder .qt-builder-option-name { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.qt-builder .qt-builder-option-recommended { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 3px; background: #e0ecff; color: #245ab2; font-size: 12px; line-height: 1.3; }
.qt-builder .qt-builder-option-price { flex-basis: 100%; font: 700 22px/1.3 var(--qt-display); font-variant-numeric: tabular-nums; }
.qt-builder .qt-builder-option-tax,
.qt-builder .qt-builder-option-description,
.qt-builder .qt-builder-option-incomplete,
.qt-builder .qt-builder-option-selected { flex-basis: 100%; font-size: 13px; line-height: 1.5; }
.qt-builder .qt-builder-option-tax, .qt-builder .qt-builder-option-description { color: var(--qb-muted); }
.qt-builder .qt-builder-option-description { padding-top: 5px; border-top: 1px solid #e1e9f4; white-space: pre-line; overflow-wrap: anywhere; }
.qt-builder .qt-builder-option-incomplete { color: #805d22; }
.qt-builder .qt-builder-option-selected { margin-top: auto; padding-top: 4px; color: var(--brand-700, #1d4ed8); font-weight: 600; }
.qt-builder .qt-builder-option-card:focus-visible,
.qt-builder .qt-builder-extras-toggle:focus-visible { outline: 2px solid var(--brand-600, #2563eb); outline-offset: 3px; }
.qt-builder .qt-fp-extras { padding-top: 0; border-top: 0; }
.qt-builder .qt-builder-extras-toggle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 12px; width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--qb-line); border-radius: 4px; background: #f6f8fb; color: #344967; font: 500 13px/1.4 var(--qt-sans); text-align: left; cursor: pointer; }
.qt-builder .qt-builder-extras-toggle > span { display: flex; align-items: center; gap: 8px; }
.qt-builder .qt-builder-extras-toggle > span:first-child { color: var(--qb-ink); font-weight: 600; }
.qt-builder .qt-builder-extras-toggle small { min-width: 20px; text-align: center; font-size: 13px; color: var(--qb-muted); }
.qt-builder .qt-builder-extras-body:not([hidden]) { padding: 11px 0 0; }
.qt-builder #qt-builder-cost-option { width: min(100%, 320px); margin: 5px 0 15px; }
.qt-builder .qt-builder-costs { display: grid; gap: 12px; min-width: 0; }
.qt-builder .qt-builder-cost-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.qt-builder .qt-builder-cost-header > div { flex: 1 1 260px; min-width: 0; }
.qt-builder .qt-builder-cost-header h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; color: var(--qb-ink); font: 700 20px/1.3 var(--qt-display); letter-spacing: -.025em; }
.qt-builder .qt-builder-cost-header h2 > i { color: #516580; font-size: 18px; }
.qt-builder .qt-builder-cost-header p,
.qt-builder .qt-builder-cost-basis,
.qt-builder .qt-builder-cost-footer p { margin: 0; color: var(--qb-muted); font-size: 13px; line-height: 1.5; }
.qt-builder .qt-builder-cost-status { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 9px; border: 1px solid #dce4ee; border-radius: 4px; color: #425572; background: #f6f8fb; font-size: 13px; line-height: 1.4; }
.qt-builder .qt-builder-cost-status.is-complete { border-color: #cbe3d4; background: #f1f8f4; color: #267346; }
.qt-builder .qt-builder-cost-status.is-incomplete { border-color: #e7dcca; background: #fbf8f1; color: #805d22; }
.qt-builder .qt-builder-cost-option { margin: 0; padding: 9px 11px; border: 1px solid var(--qb-line); border-radius: 4px; background: #f8fafc; color: #435772; font-size: 14px; line-height: 1.5; }
.qt-builder .qt-builder-cost-option strong { color: var(--qb-ink); }
.qt-builder .qt-builder-cost-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 13px 0; border-block: 1px solid var(--qb-line); }
.qt-builder .qt-builder-cost-summary > div { display: flex; flex-wrap: wrap; align-content: start; align-items: baseline; gap: 3px 7px; min-width: 0; padding: 0 13px; }
.qt-builder .qt-builder-cost-summary > div:first-child { padding-left: 0; }
.qt-builder .qt-builder-cost-summary > div + div { border-left: 1px solid var(--qb-line); }
.qt-builder .qt-builder-cost-summary span { flex: 1 1 100%; color: var(--qb-muted); font-size: 13px; line-height: 1.4; }
.qt-builder .qt-builder-cost-summary strong { color: var(--qb-ink); font: 700 23px/1.4 var(--qt-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.qt-builder .qt-builder-cost-summary small { color: var(--qb-muted); font-size: 14px; }
.qt-builder .qt-builder-cost-summary .is-negative strong,
.qt-builder .qt-builder-cost-table .is-negative { color: #b43c42; }
.qt-builder .qt-builder-cost-notice { margin: 0; padding: 9px 11px; border-left: 3px solid #c99340; background: #fcfaf6; color: #705528; font-size: 13px; line-height: 1.5; }
.qt-builder .qt-builder-cost-notice > span + span { margin-left: .25em; }
.qt-builder .qt-builder-cost-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--qb-line); border-radius: 5px; }
.qt-builder .qt-builder-cost-scroll:focus-visible { outline: 2px solid var(--brand-600, #2563eb); outline-offset: 2px; }
.qt-builder .qt-builder-cost-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.qt-builder .qt-builder-cost-table th,
.qt-builder .qt-builder-cost-table td { padding: 10px 12px; border-bottom: 1px solid #e7ecf3; vertical-align: middle; }
.qt-builder .qt-builder-cost-table thead th { background: #f5f7fa; color: #435772; font-size: 13px; font-weight: 600; text-align: left; }
.qt-builder .qt-builder-cost-table tbody th { min-width: 200px; font-weight: 500; text-align: left; }
.qt-builder .qt-builder-cost-table tbody th > strong { display: block; color: var(--qb-ink); font-weight: 600; }
.qt-builder .qt-builder-cost-table tbody th > small { display: block; margin-top: 3px; color: var(--qb-muted); font-size: 13px; font-weight: 400; }
.qt-builder .qt-builder-cost-table td { color: #263c59; font-variant-numeric: tabular-nums; }
.qt-builder .qt-builder-cost-table td:nth-child(n + 3) { width: 116px; white-space: nowrap; }
.qt-builder .qt-builder-cost-table tr:last-child > * { border-bottom: 0; }
.qt-builder .qt-builder-cost-input { position: relative; width: 145px; min-width: 0; }
.qt-builder .qt-builder-cost-input > span { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: var(--qb-muted); font-size: 14px; pointer-events: none; }
.qt-builder .qt-builder-cost-input > .qt-in { width: 100%; padding-left: 25px; font-size: 14px; }
.qt-builder .qt-builder-cost-footer { display: grid; gap: 5px; }
.qt-builder .qt-builder-cost-empty { margin: 0; padding: 20px 14px; border: 1px dashed #cbd7e5; border-radius: 5px; color: var(--qb-muted); font-size: 14px; line-height: 1.5; }
.qt-builder .qt-ed-note, .qt-builder .qt-notice { padding: 10px 12px; border-radius: 5px; font-size: 13px; line-height: 1.45; }
.qt-builder .qt-js { margin-bottom: 0; border-radius: 5px; }
.qt-builder .qt-le-head { gap: 4px 10px; margin-bottom: 9px; }
.qt-builder .qt-le-title { color: var(--qb-ink); font-size: 16px; }
.qt-builder .qt-le-summary { color: var(--qb-muted); font-size: 13px; }
.qt-builder .qt-le-line { border-radius: 5px; }
.qt-builder .qt-le-fold { min-height: 44px; border-radius: 4px; background: #f6f8fb; }
.qt-builder .qt-le-fold > strong { font-size: 14px; }
.qt-builder .qt-le-add { gap: 7px; margin-top: 9px; padding: 0; border: 0; border-radius: 0; }
.qt-builder .qt-le-add-btn { min-height: 44px; padding: 0 12px; border-color: #b4cef4; border-radius: 4px; color: var(--brand-700, #1d4ed8); font-size: 13px; font-weight: 500; }
.qt-builder .qt-le-add > span:first-child { color: var(--qb-muted); font-size: 13px; }
.qt-builder .qt-le-kind, .qt-builder .qt-le-menu-btn, .qt-builder .qt-le-qty, .qt-builder .qt-le-price-in { border-radius: 4px; }
.qt-builder .qt-le-cost { align-items: center; gap: 6px 12px; padding: 4px 8px; border: 0; border-radius: 3px; background: #f8fafc; }
.qt-builder .qt-le-cost > .qt-fld { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.qt-builder .qt-le-cost > .qt-fld > .qt-le-price { flex: 0 0 112px; width: 112px; min-width: 0; }
.qt-builder .qt-le-cost > .qt-fld > .qt-err { flex-basis: 100%; margin: 0; }
.qt-builder .qt-le-cost > .qt-only-you { padding: 2px 0; border-radius: 0; background: transparent; color: var(--qb-muted); font-size: 13px; }
.qt-builder .qt-le-amt { color: var(--qb-ink); }
.qt-builder .qt-ot { gap: 9px; padding: 2px 1px 10px; }
.qt-builder .qt-ot > [role="tablist"] { gap: 9px; }
.qt-builder .qt-ot-chip { min-height: 66px; min-width: 130px; gap: 5px; padding: 10px 14px; border-radius: 5px; border-color: var(--qb-line); }
.qt-builder .qt-ot-chip[aria-selected="true"] { border-color: #609bfa; background: #f7faff; box-shadow: inset 0 0 0 1px #609bfa; }
.qt-builder .qt-ot-total { color: #415774; font-size: 14px; }
.qt-builder .qt-ot-add { width: 44px; height: 66px; border-radius: 5px; }
.qt-builder .qt-ot-edit { padding: 11px; border-radius: 5px; background: #f8fafc; }
.qt-builder .qt-tb--sticky { margin-top: 15px; padding: 12px 16px; border-color: var(--qb-line); border-radius: 5px 5px 0 0; box-shadow: 0 -3px 14px #14234108; }
.qt-builder .qt-tb-sum { flex: 1 1 260px; gap: 3px; }
.qt-builder .qt-tb-total { color: var(--qb-ink); font-size: 21px; font-weight: 700; }
.qt-builder .qt-tb-actions > .qt-btn { min-height: 44px; }
.qt-builder .qt-tb-actions > [data-money-send] { min-width: 190px; }
.qt-builder .qt-tb-meta { font-size: 13px; }
.qt-builder .qt-builder-nav button:focus-visible, .qt-builder .qt-builder-view-switch button:focus-visible { outline: 2px solid var(--brand-600, #2563eb); outline-offset: -3px; }

@container qt-ed (min-width: 1100px) {
    .qt-builder .qt-builder-layout:not(.is-focus) { grid-template-columns: minmax(0, 1fr) 340px; }
    .qt-builder .qt-builder-layout:not(.is-focus) > .qt-builder-preview { display: block; position: sticky; top: calc(var(--topbar-height, 72px) + 12px); max-height: calc(100dvh - var(--topbar-height, 72px) - 30px); overflow-y: auto; overscroll-behavior: contain; }
    .qt-builder .qt-builder-layout.is-focus { grid-template-columns: minmax(0, 1fr); }
}

/* An 802px editor keeps a 320px description and 44px action targets. Narrower panels retain
   the original expanding cards. These rules intentionally do not alter other LineEditors. */
@container qt-le (min-width: 802px) {
    .qt-builder .qt-le-cols { display: grid; grid-template-columns: 44px minmax(220px, 1fr) 82px 82px 100px 94px 44px; column-gap: 6px; padding: 9px 0; border-block: 1px solid var(--qb-line); background: #f5f7fa; color: #344b6b; font: 600 13px/1.3 var(--qt-sans); }
    .qt-builder .qt-le-cols > span:nth-child(6) { text-align: right; }
    .qt-builder .qt-le-fold, .qt-builder .qt-le-sum, .qt-builder .qt-le-done,
    .qt-builder .qt-le-step, .qt-builder .qt-le-kind-text { display: none; }
    .qt-builder .qt-le[data-foldable] .qt-le-head > .qt-le-title { display: block; }
    .qt-builder .qt-le[data-foldable] .qt-le-head > .qt-le-summary { display: inline; }
    .qt-builder .qt-le[data-folded] .qt-le-list, .qt-builder .qt-le[data-folded] .qt-le-add { display: flex; }
    .qt-builder .qt-le[data-folded] .qt-le-empty, .qt-builder .qt-le[data-folded] .qt-le-limit { display: block; }
    .qt-builder .qt-le-list { gap: 0; }
    .qt-builder .qt-le-line, .qt-builder .qt-le-line.is-open, .qt-builder .qt-le-line.has-error:not(.is-open) { padding: 5px 0; border: 0; border-bottom: 1px solid #e7ecf3; border-radius: 0; background: #fff; box-shadow: none; }
    .qt-builder .qt-le-line.is-optional { border-bottom-style: dashed; }
    .qt-builder .qt-le-line:not(.is-open) .qt-le-fields { display: grid; }
    .qt-builder .qt-le-fields { grid-template-columns: 44px minmax(220px, 1fr) 82px 82px 100px 94px 44px; align-items: start; column-gap: 6px; row-gap: 6px; padding: 0; }
    .qt-builder .qt-le-fields > .qt-le-top, .qt-builder .qt-le-nums { display: contents; }
    .qt-builder .qt-le-top > .qt-le-kind { grid-column: 1; grid-row: 1; width: 44px; padding: 0; background: transparent; }
    .qt-builder .qt-le-fields > .qt-le-desc { grid-column: 2; grid-row: 1; }
    .qt-builder .qt-le-nums > .qt-fld:nth-child(1) { grid-column: 3; grid-row: 1; }
    .qt-builder .qt-le-nums > .qt-fld:nth-child(2) { grid-column: 4; grid-row: 1; }
    .qt-builder .qt-le-nums > .qt-fld:nth-child(3) { grid-column: 5; grid-row: 1; }
    .qt-builder .qt-le-top .qt-le-amt { display: block; grid-column: 6; grid-row: 1; align-self: center; margin: 0; font-size: 14px; font-weight: 600; text-align: right; }
    .qt-builder .qt-le-fields > .qt-le-menu-btn { grid-column: 7; grid-row: 1; color: var(--brand-600, #2563eb); }
    .qt-builder .qt-le-fields > .qt-le-cost, .qt-builder .qt-le-fields > .qt-le-panel, .qt-builder .qt-le-fields > .qt-le-tags { grid-column: 2 / 8; }
    .qt-builder .qt-le-fields .qt-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
    .qt-builder .qt-le-cost .qt-lbl { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
    .qt-builder .qt-le-qty { display: block; min-height: 0; border: 0; background: transparent; }
    .qt-builder .qt-le-qty-in, .qt-builder .qt-le-qty-in:only-child { width: 100%; min-width: 0; min-height: 44px; padding: 0 6px; border: 1px solid #cbd7e5; border-radius: 4px; background: #fff; font-size: 14px; font-weight: 400; text-align: right; }
    .qt-builder .qt-le-qty-in[aria-invalid="true"] { border-color: var(--danger-600, #dc2626); }
    .qt-builder .qt-le-unit { min-width: 0; min-height: 44px; padding: 0 5px; font-size: 14px; }
    .qt-builder .qt-le-price { min-width: 0; }
    .qt-builder .qt-le-cur { left: 8px; font-size: 14px; }
    .qt-builder .qt-le-price-in { min-height: 44px; padding: 0 7px 0 22px; font-size: 14px; text-align: right; }
    .qt-builder .qt-le-desc .qt-in { font-size: 14px; }
    .qt-builder .qt-le-cost .qt-le-price-in { text-align: left; }
    .qt-builder .qt-le-line.is-readonly { grid-template-columns: 10px minmax(0, 1fr) auto; padding: 8px 0; }
}
@media (max-width: 767.98px) {
    .qt-builder { padding: 12px 12px 20px; }
    .qt-builder .qt-builder-header { min-height: 0; gap: 8px; padding: 10px 14px; }
    .qt-builder .qt-builder-header > img { width: 140px; opacity: .25; }
    .qt-builder .qt-builder-heading { flex-basis: 100%; }
    .qt-builder .qt-builder-heading h1 { font-size: 22px; }
    /* Save status remains in the pinned total; avoid a duplicate row above the first line. */
    .qt-builder .qt-builder-header-actions > span[aria-hidden="true"] { display: none; }
    .qt-builder .qt-builder-header-actions .qt-btn,
    .qt-builder .qt-builder-header-actions .tour-launch { min-height: 44px; }
    .qt-builder .qt-builder-nav { flex-wrap: nowrap; gap: 0; padding-top: 0; margin-bottom: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
    .qt-builder .qt-builder-nav > button,
    .qt-builder .qt-builder-nav > [role="tablist"] > button { flex: none; padding-inline: 10px; font-size: 13px; white-space: nowrap; }
    .qt-builder .qt-builder-nav > [role="tablist"] { flex-wrap: nowrap; }
    .qt-builder .qt-builder-view-switch { flex: none; margin-left: 8px; white-space: nowrap; }
    .qt-builder .qt-builder-view-switch > button { min-height: 44px; }
    .qt-builder .qt-builder-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin-bottom: 8px; padding: 4px 10px; }
    .qt-builder .qt-builder-client { grid-column: 1; grid-row: 1; }
    .qt-builder .qt-builder-client > i { flex: none; }
    .qt-builder .qt-builder-client-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .qt-builder .qt-builder-context > span { grid-row: 2; }
    .qt-builder .qt-builder-context > .qt-btn { grid-column: 2; grid-row: 1; min-height: 44px; }
    .qt-builder .qt-ed-card { padding: 12px; }
    .qt-builder .qt-builder-pricing-tools { align-items: flex-start; }
    .qt-builder .qt-builder-pricing-tools h2, .qt-builder .qt-builder-pricing-tools h3 { font-size: 19px; }
    .qt-builder .qt-builder-library-search { margin-bottom: 8px; }
    .qt-builder .qt-ed-card > .qt-box-h { margin-bottom: 8px; }
    .qt-builder .qt-builder-library-search .qt-in { flex-basis: 132px; }
    .qt-builder .qt-in, .qt-builder .qt-ta, .qt-builder .qt-le-desc .qt-in { font-size: 16px; }
    .qt-builder .qt-seg-btn, .qt-builder .qt-le-add-btn { min-height: 44px; }
    .qt-builder .qt-tb--sticky { bottom: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .qt-builder .qt-tb-actions > [data-money-send] { min-width: 0; }
    .qt-builder .qt-tb-sum { flex-basis: 100%; }
    .qt-builder .qt-tb-total { font-size: 19px; }
}
@media (max-width: 600px) {
    .qt-builder .qt-builder-cost-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .qt-builder .qt-builder-cost-summary > div { padding: 0; }
    .qt-builder .qt-builder-cost-summary > div + div { padding-top: 10px; border-left: 0; border-top: 1px solid var(--qb-line); }
    .qt-builder .qt-builder-cost-input > .qt-in { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .qt-builder .qt-builder-nav button, .qt-builder .qt-builder-view-switch button { transition: none; }
}