/* Note: this is a plain <style> tag, not <style type="text/tailwindcss">,
           so the Tailwind CDN script's runtime compiler never resolves @apply
           rules placed here -- browsers silently discard @apply as invalid CSS.
           These four rules were long-standing no-ops (labels rendered as default
           inline elements, inputs/cards had zero applied styling) until this fix
           replaced them with literal CSS matching each rule's intended Tailwind
           utility values. */
        .section-title { font-size: 1rem; font-weight: 600; color: #334155; margin-bottom: 0.5rem; }
        .input { width: 100%; border: 1px solid #cbd5e1; border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; box-sizing: border-box; color: var(--metal-text, #0f172a); background-color: #ffffff; }
        .input:focus { outline: none; box-shadow: 0 0 0 1px var(--metal-accent); border-color: var(--metal-accent); }
        .input::placeholder { color: var(--metal-muted, #94a3b8); opacity: 1; }
        .label { display: block; font-size: 0.75rem; font-weight: 500; color: #475569; margin-bottom: 0.125rem; }
        .req-star { color: #dc2626; }
        .field-error { color: #dc2626; font-size: 0.7rem; margin-top: 0.15rem; line-height: 1.2; }
        .field-error.hidden { display: none; }
        .input.input-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 1px #dc2626 !important; }
        #tips-sidebar-card {
            position: fixed;
            top: 8rem;
            right: 1.25rem;
            width: 13.5rem;
            z-index: 40;
        }
        #tips-sidebar-text { transition: opacity 0.25s ease; min-height: 2.6rem; }
        #tips-sidebar-card:hover { box-shadow: 0 10px 26px rgba(15,23,42,0.16); }
        .card { background-color: #ffffff; border: 1px solid #e6ebf1; border-radius: 0.875rem; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04), 0 12px 28px -20px rgba(16, 24, 40, 0.22); padding: 1rem; }
        .total-box {
            background: radial-gradient(120% 90% at 50% -8%, #15304a 0%, #0f172a 60%);
            color: #f8fafc;
            border-radius: 1rem;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 24px 50px -30px rgba(4, 10, 20, 0.8);
        }
        .total-box .total-label { color: #94a3b8; }
        .total-box .total-sub { color: #94a3b8; }
        .total-box #price-status { color: #cbd5e1; }
        .total-box #price-status.price-warning { color: #fbbf24; }
        .total-box #price-status.price-critical { color: #f87171; }
        .total-box #qty-discount-note { color: #34d399; }
        .total-box #qty-discount-note.hidden { display: none !important; }
        .total-box #rush-fee-note { color: #fbbf24; }
        .total-box #rush-fee-note.hidden { display: none !important; }

        /* Inline form-level banner (CRO pass, CW-5, 2026-07-13): replaces the
           alert()/confirm() at the "no line items" / critical-sanity / submit-
           failure decision moments with a calm, dismissible, on-brand banner
           that sits right above Submit inside the dark total-box. Teal for
           info (matches --metal-accent-on-dark / #9cc9e8), existing
           price-warning amber / price-critical red tones for the other two
           kinds so it stays visually consistent with #price-status above it. */
        .form-banner {
            border-radius: 0.5rem;
            padding: 0.6rem 0.8rem;
            margin: 0.75rem auto 0;
            max-width: 26rem;
            text-align: left;
            font-size: 0.78rem;
            line-height: 1.35;
        }
        .form-banner.hidden { display: none !important; }
        .form-banner-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
        .form-banner-text { flex: 1; }
        .form-banner-dismiss {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
            padding: 0 0.15rem;
            opacity: 0.7;
            color: inherit;
        }
        .form-banner-dismiss:hover { opacity: 1; }
        .form-banner-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; justify-content: flex-end; }
        .form-banner-btn { font-size: 0.72rem; padding: 0.3rem 0.75rem; border-radius: 0.375rem; cursor: pointer; font-weight: 600; }
        .form-banner-btn-outline { background: transparent; border: 1px solid currentColor; color: inherit; }
        .form-banner-btn-primary { border: none; background: var(--metal-process); color: #faf6ec; }
        .form-banner-btn-primary:hover { background: var(--metal-accent-hover); }
        .form-banner-info {
            background: rgba(94, 234, 212, 0.12);
            border: 1px solid rgba(94, 234, 212, 0.4);
            color: var(--metal-accent-on-dark, #9cc9e8);
        }
        .form-banner-warning {
            background: rgba(251, 191, 36, 0.12);
            border: 1px solid rgba(251, 191, 36, 0.4);
            color: #fbbf24;
        }
        .form-banner-error {
            background: rgba(248, 113, 113, 0.12);
            border: 1px solid rgba(248, 113, 113, 0.4);
            color: #f87171;
        }

        .btn-total-outline {

            padding: 0.375rem 1.25rem;
            font-size: 0.875rem;
            border-radius: 0.375rem;
            border: 1px solid var(--metal-accent);
            color: #f8fafc;
            background: var(--metal-accent-soft);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }
        .btn-total-outline:hover { background: var(--metal-accent-ring); }
        .btn-total-primary {
            padding: 0.375rem 1.25rem;
            font-size: 0.875rem;
            border-radius: 0.375rem;
            border: 1px solid var(--metal-accent);
            color: #0f172a;
            background: var(--metal-accent);
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }
        .btn-total-primary:hover { background: var(--metal-accent-hover); border-color: var(--metal-accent-hover); }
        .btn-total-submit {
            width: 100%;
            justify-content: center;
            padding: 0.8rem 1.5rem;
            font-size: 0.98rem;
            border-radius: 0.7rem;
            border: none;
            color: #04211e;
            background: var(--metal-accent, #2f5f86);
            font-weight: 800;
            letter-spacing: 0.01em;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            box-shadow: 0 10px 22px -10px rgba(47, 95, 134, 0.55);
            transition: background 0.15s ease, transform 0.06s ease;
        }
        .btn-total-submit:hover { background: var(--metal-accent-hover, #274f6e); }
        .btn-total-submit:active { transform: translateY(1px); }
        a.btn-total-primary, a.btn-total-outline { text-decoration: none; }
        #total-actions-submitted.hidden { display: none !important; }
        #total-actions-draft.hidden { display: none !important; }
        /* Same @apply-in-a-plain-<style>-tag bug as above -- both were no-ops. */
        .line-item { border: 1px solid #e6ebf1; border-radius: 0.875rem; padding: 1rem 1.1rem; margin-bottom: 0.75rem; background-color: #ffffff; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04), 0 12px 28px -20px rgba(16, 24, 40, 0.22); transition: box-shadow 0.18s ease, border-color 0.18s ease; }
        .line-item:hover { border-color: #d7e0ea; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 16px 34px -20px rgba(16, 24, 40, 0.28); }
        /* CUSTOMER_EDIT_SAVE_PLAN.md (2026-07-16): locked/"Accepted" piece --
           applyLineLockState() (line-render.js) toggles this class and sets
           input[disabled] whenever line._editing is falsy. Subtle visual cue
           (muted card + disabled-looking inputs) so a locked piece doesn't
           read as "broken", just "not currently being edited". */
        .line-item.line-item-locked { background-color: #f8fafc; }
        .line-item.line-item-locked input:disabled,
        .line-item.line-item-locked select:disabled {
            background-color: #f1f5f9;
            color: #64748b;
            cursor: default;
            opacity: 0.85;
        }

        /* Moonshot skinny quote row: the collapsed card keeps only the four
           decisions a customer needs at a glance. Expanded editing chrome stays
           below this row and is toggled by line-render.js. */
        .skinny-quote-card {
            display: grid;
            grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1.25fr) auto auto;
            align-items: end;
            gap: 0.55rem 0.8rem;
            padding-top: 0.65rem;
            border-top: 1px solid #e2e8f0;
        }
        .skinny-card-cell {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .skinny-card-label {
            color: #64748b;
            font-size: 0.625rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            line-height: 1;
            text-transform: uppercase;
        }
        .skinny-card-value {
            color: #334155;
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.25rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* Buyer-critical Face metrics need their complete dimensions and finish
           at a glance. Let only those cells grow to a second line; price and
           compact status values retain the ordinary single-line treatment. */
        .skinny-card-value--readable {
            line-height: 1.05rem;
            overflow: visible;
            overflow-wrap: anywhere;
            text-overflow: clip;
            white-space: normal;
        }
        /* MARK-CHIP-END-BUFFER: do not shrink the mark id into
           the padding box. Content-box + padding-inline leaves a last-glyph
           buffer on the quote-card chip and sibling .part-mark-input pills. */
        .skinny-card-mark-input,
        .part-mark-input {
            min-width: 4ch;
            padding-inline: 0.5rem;
            box-sizing: content-box;
            overflow: visible;
            overflow-x: visible;
            text-overflow: clip;
        }
        .skinny-card-mark-input {
            height: 2rem;
            padding: 0.3rem 0.5rem;
            padding-inline: 0.5rem;
            font-family: var(--metal-font-mono, ui-monospace, monospace);
            font-size: 0.78rem;
            font-weight: 700;
        }
        .skinny-card-question {
            align-self: center;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            color: #92400e;
            background: #fffbeb;
            border: 1px solid #fcd34d;
            border-radius: 999px;
            padding: 0.32rem 0.55rem;
            font-size: 0.68rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .skinny-card-actions {
            align-self: end;
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 0.45rem;
        }
        .skinny-quote-card > .line-summary-chips {
            grid-column: 1 / -1;
        }
        .line-item > .face-first-honesty-summary {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 0.45rem;
            padding: 0.65rem;
            border: 1px solid var(--metal-accent-border, #9fb7c9);
            border-radius: 0.6rem;
            background: var(--metal-accent-soft, rgba(47, 95, 134, 0.08));
        }
        .face-first-honesty-summary .face-first-authored-size,
        .face-first-honesty-summary .face-first-default-review {
            grid-column: 1 / -1;
        }
        .face-first-honesty-summary .face-first-authored-size {
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 0.5rem 0.65rem;
            border-color: var(--metal-accent, #2f5f86);
            background: #fff;
            color: #1e293b;
            font-size: 0.82rem;
            white-space: normal;
        }
        .face-first-honesty-summary .face-first-authored-size strong {
            color: var(--metal-accent-on-light, #234862);
            font-size: 1.05rem;
            line-height: 1.2;
        }
        .face-first-honesty-summary .face-first-shape-note {
            color: #64748b;
            font-family: var(--metal-font-sans, ui-sans-serif, system-ui, sans-serif);
            font-size: 0.7rem;
            font-weight: 600;
        }
        .face-first-honesty-summary .face-first-applied-spec {
            align-items: flex-start;
            flex-direction: column;
            justify-content: flex-start;
            padding: 0.45rem 0.55rem;
            background: #fff;
            line-height: 1.35;
            white-space: normal;
        }
        .face-first-honesty-summary .face-first-default-review {
            display: block;
            padding: 0.5rem 0.65rem;
            border-color: #f2c66d;
            background: #fffbeb;
            color: #78350f;
            line-height: 1.35;
            white-space: normal;
        }
        .skinny-read-room {
            align-self: end;
            min-height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.42rem;
            color: #fff;
            background: var(--metal-accent, #2f5f86);
            border: 1px solid var(--metal-accent, #2f5f86);
            border-radius: 0.45rem;
            padding: 0.38rem 0.8rem;
            font-size: 0.75rem;
            font-weight: 800;
            text-decoration: none;
            white-space: nowrap;
        }
        .skinny-read-room:hover {
            color: #fff;
            background: var(--metal-accent-hover, #274f6e);
            text-decoration: none;
        }
        @media (max-width: 820px) {
            .skinny-quote-card {
                grid-template-columns: minmax(7.5rem, 0.8fr) minmax(11rem, 1.2fr) minmax(12rem, 1.25fr);
            }
            .skinny-card-question,
            .skinny-card-actions,
            .skinny-read-room { justify-self: start; }
        }
        @media (max-width: 560px) {
            .skinny-quote-card { grid-template-columns: 1fr 1fr; }
            .skinny-card-mark,
            [data-skinny-metal-thickness] { grid-column: span 2; }
            .skinny-card-separator { display: block; height: 0; overflow: hidden; }
            .line-item > .face-first-honesty-summary { grid-template-columns: 1fr; }
            .face-first-honesty-summary .face-first-authored-size,
            .face-first-honesty-summary .face-first-default-review { grid-column: 1; }
        }

        /* CRO polish (2026-07-14): brief teal flash + border highlight when a

           piece lands via the Sterling chat bridge (window.addSterlingPart),
           so the customer visually confirms "it landed" beyond just the toast.
           Not applied to the manual "Add Piece" button -- that already moves
           focus into the new leg input, a different (typing-cue) affordance. */
        @keyframes sterling-part-landed {
            0% { box-shadow: 0 0 0 3px var(--metal-accent-ring, rgba(47, 95, 134,0.35)); border-color: var(--metal-accent); background-color: var(--metal-accent-soft, rgba(47, 95, 134,0.14)); }
            100% { box-shadow: 0 0 0 0 rgba(47, 95, 134,0); border-color: #e2e8f0; background-color: #ffffff; }
        }
        .sterling-part-landed { animation: sterling-part-landed 1.6s ease-out; }

        .leg-input { width: 3.5rem; border: 1px solid #cbd5e1; border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; text-align: center; box-sizing: border-box; color: var(--metal-text, #0f172a); background-color: #ffffff; }
        .leg-input:focus { outline: none; box-shadow: 0 0 0 1px var(--metal-accent); }
        .leg-input::placeholder { color: var(--metal-muted, #94a3b8); opacity: 1; }
        .pro-header { background: linear-gradient(to right, #0f172a, #1e2937); }

        /* ============================================================
           Customer "Request Submission" visual redesign (redesign-v2)
           Namespaced .cust-* rules only — customer-portal.css is loaded
           ONLY by customer.html, so these can't leak to other pages.
           Presentation only; no ids/onclick/field names changed.
           ============================================================ */

        /* Dark appbar: clean near-black structure + teal underline + tighter
           brand mark. Background overrides .pro-header's blue-gray gradient
           (this rule is later in the same stylesheet, so it wins the cascade). */
        .cust-appbar {
            background: linear-gradient(180deg, #0d1526 0%, #0a111f 100%);
            border-bottom: 1px solid var(--metal-accent-border, #26547a);
            box-shadow: 0 1px 0 rgba(47, 95, 134, 0.25), 0 8px 24px rgba(4, 10, 20, 0.18);
        }
        .cust-brand-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.6rem;
            background: linear-gradient(135deg, rgba(47, 95, 134, 0.22), rgba(47, 95, 134, 0.05));
            border: 1px solid rgba(94, 234, 212, 0.35);
            box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            flex-shrink: 0;
        }
        /* Portal subtitle under the wordmark: mono, teal-on-dark (reads cleaner
           on the near-black bar than the brighter --metal-accent). */
        .cust-appbar-sub {
            font-family: var(--metal-font-mono, ui-monospace, monospace);
        }

        /* Hero */
        .cust-hero {
            background:
                radial-gradient(ellipse 70% 130% at 100% 0%, rgba(47, 95, 134, 0.10), transparent 60%),
                linear-gradient(180deg, #ffffff, #f8fafc);
            border: 1px solid var(--metal-border-soft, #dce3eb);
            border-radius: var(--metal-radius-lg, 0.75rem);
            box-shadow: var(--metal-shadow-sm, 0 1px 2px rgba(11,15,20,0.06));
            padding: 1.25rem;
        }
        @media (min-width: 640px) {
            .cust-hero { padding: 1.75rem; }
        }
        .cust-hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--metal-accent-on-light, #2c5578);
            background: var(--metal-accent-soft, rgba(47, 95, 134,0.14));
            border-radius: 9999px;
            padding: 0.25rem 0.7rem;
            margin-bottom: 0.6rem;
        }
        .cust-hero-title { color: var(--metal-text, #0f172a); }
        .cust-hero-lede {
            color: #334155;
            font-size: 1.075rem;
            line-height: 1.5;
            max-width: 40rem;
        }
        .cust-hero-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }

        /* Copy and manual/import starts share the desktop top edge; all stack on narrow screens. */
        .cust-hero-layout { display: grid; gap: 1.25rem; align-items: start; }
        .cust-hero-layout > * { min-width: 0; }
        /* Compact manual starts sit beside the right Import panel, then stack above it. */
        .cust-start-import-grid { display: grid; gap: 1.25rem; align-items: start; }
        .cust-start-import-grid > * { min-width: 0; }
        .cust-build-draft-column {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.5rem;
            min-width: 0;
        }
        .cust-marks-help {
            margin: 0;
            max-width: 100%;
            font-size: 0.875rem;
            line-height: 1.4;
            color: #334155;
        }
        .cust-build-draft {
            position: relative; padding: 1.25rem; border: 1px solid #cbd5e1;
            border-radius: .75rem; background: #fff;
        }
        /* IMPORT-BUILD-CHROME: same 1.1rem title scale + accent as Import. */
        .cust-build-draft-title { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--metal-accent-on-light, #2c5578); }
        .cust-build-draft-label { margin: .75rem 0 .5rem; font-size: .875rem; font-weight: 600; color: #475569; }
        .cust-build-draft-actions { display: flex; flex-wrap: wrap; align-items: start; gap: .5rem; }
        .cust-build-draft-actions > button, .cust-build-draft-actions > details > summary { min-height: 2.75rem; }
        @media (min-width: 1024px) {
            .cust-hero-layout { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); }
            /* Below 1280, stack Import under the widened Build/Draft so Marks help
               keeps a 2–3 line measure. Side-by-side 30rem + 24rem starts at 1280. */
            .cust-start-import-grid { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
        }
        @media (min-width: 1280px) {
            .cust-start-import-grid { grid-template-columns: minmax(0, 30rem) 24rem; justify-content: end; }
        }

        /* Import panel — same type scale as Build/Draft; padding keeps the
           title and dashed drop zones off the outer border (import-build-chrome-1). */
        .cust-import-panel { padding: 1.25rem; }
        .cust-import-panel-head {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0;
            text-transform: none;
            color: var(--metal-accent-on-light, #2c5578);
            margin-bottom: 0.5rem;
        }
        .cust-import-panel-head i { color: var(--metal-accent, #2f5f86); }
        .cust-import-panel #email-import-zone { margin-top: 0.5rem; }

        /* Base dropzone refinements (works with existing .sketch-dropzone
           states .drag-over / .importing toggled by import.js) */
        .cust-dropzone-ico {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.4rem;
            height: 2.4rem;
            border-radius: 0.6rem;
            background: var(--metal-accent-soft, rgba(47, 95, 134,0.14));
            color: var(--metal-accent, #2f5f86);
            font-size: 1.05rem;
            flex-shrink: 0;
        }
        .cust-dropzone-ico--sm {
            width: 2rem;
            height: 2rem;
            font-size: 0.9rem;
        }
        .cust-dropzone-browse {
            color: var(--metal-accent-on-light, #2c5578);
            font-weight: 600;
            text-decoration: underline;
        }
        /* Primary sketch dropzone: solid teal-tinted card that reads as the
           recommended path, while keeping the dashed drag affordance. */
        .cust-dropzone--primary {
            border-style: dashed;
            border-color: var(--metal-accent-border, #26547a);
            background:
                linear-gradient(180deg, rgba(47, 95, 134,0.06), rgba(47, 95, 134,0.02));
        }
        .cust-dropzone--primary:hover {
            border-color: var(--metal-accent, #2f5f86);
            box-shadow: 0 4px 16px rgba(47, 95, 134, 0.14);
        }

        /* "This request includes" chips */
        .cust-include-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--metal-text-secondary, #475569);
            background: #ffffff;
            border: 1px solid var(--metal-border-soft, #dce3eb);
            border-radius: 9999px;
            padding: 0.35rem 0.7rem;
            min-height: 2rem;
        }
        .cust-include-chip i { color: var(--metal-accent-on-light, #2c5578); }
        .cust-include-chip:has(input:checked) {
            border-color: var(--metal-accent, #2f5f86);
            background: var(--metal-accent-soft, rgba(47, 95, 134,0.14));
            color: var(--metal-accent-on-light, #2c5578);
        }
        .cust-include-chip input { width: 0.95rem; height: 0.95rem; }

        /* Mode tabs: keep JS-driven .quote-mode-btn-active styling; just tidy radius */
        .cust-mode-tabs { border-radius: 0.6rem; }

        /* Brake-shape thumbnail (redesign-v2 "brake-fig"): a small fabrication
           glyph rendered by brakeThumbSVG()/brakeThumbBoxHTML() (line-render.js)
           into each piece card's header, so a line reads as a real bent object
           rather than a bare form row. Mirrors portal.css's .portal-brake-fig box
           (72×52 paper, #245b83 frame) but namespaced .cust-* so it can't
           leak off customer.html. Presentation only. */
        .cust-brake-thumb {
            width: 4.5rem;
            height: 3.25rem;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            background: #fffdf6;
            border: 2px solid #245b83;
            border-radius: 8px;
            padding: 8px;
            transition: border-color 150ms ease;
        }
        .cust-brake-thumb svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        /* Mobile-first: on narrow phones the header row (title + Ask AI / View /
           Edit / Remove controls) is tight, so drop the decorative thumbnail
           rather than let it crowd the tap targets. It's purely presentational,
           so hiding it loses no information. */
        @media (max-width: 480px) {
            .cust-brake-thumb { display: none; }
        }

        /* Mobile: keep inputs at 16px to prevent iOS auto-zoom, and ensure
           tap targets on the include chips / dropzones stay comfortable. */
        @media (max-width: 640px) {
            .input,
            #import-assistant-input,
            .leg-input,
            #sharpen-target-amount { font-size: 16px; }
            .cust-hero { padding: 1.1rem; }
            .cust-include-chip { min-height: 2.25rem; }
        }
        #grand-total.price-pending { opacity: 0.55; transition: opacity 0.2s ease; }
        .sketch-dropzone {
            border: 2px dashed #cbd5e1;
            border-radius: 0.5rem;
            background: #f8fafc;
            transition: border-color 0.15s ease, background 0.15s ease;
        }
        .sketch-dropzone.drag-over {
            border-color: var(--metal-accent);
            background: #faf6ec;
        }
        .sketch-dropzone.importing {
            opacity: 0.85;
            border-color: var(--metal-accent);
        }
        .sketch-import-progress-track {
            width: 100%;
            height: 6px;
            border-radius: 999px;
            background: #e2e8f0;
            overflow: hidden;
        }
        .sketch-import-progress-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--metal-accent), var(--metal-process));
            transition: width 0.25s ease;
        }
        .sketch-import-progress-fill.indeterminate {
            width: 35% !important;
            animation: sketch-import-progress-indeterminate 1.1s ease-in-out infinite;
        }
        @keyframes sketch-import-progress-indeterminate {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(285%); }
        }
        /* Guided empty-state "3 ways to start" tiles (CRO pass, 2026-07-14):
           see renderLines()'s !lines.length branch. */
        .empty-start-tile {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.3rem;
            text-align: left;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 0.6rem;
            padding: 0.85rem 1rem;
            cursor: pointer;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
        }
        .empty-start-tile:hover, .empty-start-tile:focus-visible {
            border-color: var(--metal-accent);
            box-shadow: 0 4px 14px rgba(47, 95, 134, 0.15);
            transform: translateY(-1px);
            outline: none;
        }
        .empty-start-icon {
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 999px;
            background: var(--metal-accent-soft);
            color: var(--metal-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }
        .empty-start-title { font-size: 0.82rem; font-weight: 600; color: #1e293b; }
        .empty-start-sub { font-size: 0.72rem; color: #64748b; line-height: 1.35; }
        /* Brief teal pulse on the sketch dropzone when the empty-state "Import
           a sketch or PDF" tile scrolls it into view (see focusSketchImportZone()). */
        @keyframes sketch-zone-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(47, 95, 134, 0); }
            30% { box-shadow: 0 0 0 4px var(--metal-accent-ring, rgba(47, 95, 134, 0.35)); }
        }
        .sketch-zone-pulse { animation: sketch-zone-pulse 1.4s ease-in-out 2; }
        /* App-bar nav links: quieter, borderless pills that light up on hover
           (matches the approved mockup); the "Discard & exit" button keeps its
           own outline treatment for contrast. */
        .header-nav-link {
            font-size: 0.8rem;
            padding: 0.4rem 0.7rem;
            border: 1px solid transparent;
            border-radius: 0.5rem;
            color: #b9c6d4;
            text-decoration: none;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .header-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
        /* Paint Portal Master Plan Phase 1 (§1a): Fab+Paint / Paint-only mode toggle */
        .quote-mode-btn {
            color: #64748b;
            background: transparent;
            transition: background-color 0.15s ease, color 0.15s ease;
        }
        .quote-mode-btn:hover { background: #f1f5f9; }
        .quote-mode-btn-active, .quote-mode-btn-active:hover {
            background: #0f172a;
            color: #fff;
        }
        #line-items-container.paint-only-mode .fab-only-field { display: none !important; }

        .builder-leg-chain { display:flex; align-items:flex-start; gap:8px; overflow-x:auto; padding:6px 0 12px; }
        .builder-leg { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:5px; }
        .builder-leg-label, .builder-bend label { font-size:11px; color:#64748b; white-space:nowrap; }
        .builder-leg-value { display:flex; align-items:center; border:1px solid #cbd5e1; border-radius:5px; background:white; color: var(--metal-text, #0f172a); }
        .builder-bend { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; margin-top:18px; }
        .builder-bend>div { white-space:nowrap; border:1px solid #cbd5e1; border-radius:5px; padding:3px; background:#f8fafc; color: var(--metal-text, #0f172a); }
        .builder-bend .bend-angle { width:48px; text-align:center; background:transparent; font-size:12px; color: var(--metal-text, #0f172a); }
        .builder-bend .bend-angle::placeholder { color: var(--metal-muted, #94a3b8); opacity: 1; }
        .leg-ref-select { color: var(--metal-text, #0f172a); }
        .builder-hem-controls { display:flex; align-items:center; gap:6px; font-size:11px; }
        .builder-hem-controls .hem-type { width:auto; min-width:85px; padding:4px 22px 4px 6px; font-size:12px; }
        .builder-add-leg { flex:0 0 auto; margin-top:23px; padding:5px 7px; border:1px solid #cbd5e1; border-radius:5px; font-size:11px; white-space:nowrap; }
        .builder-add-hem, .builder-leg-chain .bend-dir { color:var(--metal-accent-on-light); font-size:11px; }
        .line-item .endcap-num { width:auto; min-width:90px; padding-right:25px; }
        .line-item .endcap-method { width:auto; min-width:120px; padding-right:25px; }
        .line-item .sheet-production-hold-note, .line-item .piece-fabrication-error { color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:5px; padding:6px 8px; }
        /* Mirror: fab-only quotes hide paint-only fields (the Finish selector).
           Safe because pricing.py fab-only forces finish="None" server-side, so
           the hidden control never affects the quote — this just stops paint UI
           from bleeding into a fab-only request. */
        #line-items-container.fab-only-mode .paint-only-field { display: none !important; }

        /* Quote workspace: Mark cards own the center, with independent help
           and price rails. On smaller screens Stace floats at the left edge. */
        .cust-quote-shell { max-width: 104rem; }
        .cust-quote-grid { display: grid; gap: 1rem; align-items: start; }
        .cust-col-main, .cust-col-stace, .cust-col-rail { min-width: 0; }
        .cust-col-stace:has(#quote-support-slot:empty) { display: none; }
        .quote-honesty-banner { margin-bottom: 1rem; padding: .75rem 1rem; border: 1px solid #dbe5ec; border-radius: .75rem; background: #f5f9fc; color: #526779; font-size: .8rem; line-height: 1.5; }
        .quote-honesty-banner.has-review { border-color: #f1d4ad; background: #fffbf4; color: #8a5d26; }
        .quote-honesty-banner #price-status:empty { display: none; }
        .quote-honesty-banner #price-status:not(:empty) { margin-top: .2rem; }
        .quote-honesty-banner .price-critical, .quote-honesty-banner .price-warning { color: #975b19; }
        .quote-sky-total { color: #7dd3fc; font-size: clamp(2rem, 3.7vw, 3.25rem); line-height: 1.15; overflow-wrap: anywhere; }
        .quote-draft-actions { display: flex; flex-direction: column; gap: .7rem; width: 100%; }
        .quote-draft-actions.hidden { display: none; }
        .quote-save-discard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
        .quote-save-discard .btn-total-outline { padding: .6rem .3rem; font-size: .71rem; line-height: 1.4; }
        .quote-save-discard .btn-total-outline:disabled { opacity: .45; cursor: not-allowed; }
        #discard-this-read:disabled { color: #94a3b8; border-color: #475569; background: #1e293b; opacity: 1; cursor: not-allowed; }
        .quote-budgetary-footer { color: #a9bbc9; font-size: .7rem; line-height: 1.5; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid #334155; }
        #quote-support-slot #support-chat-root { margin-top: 0 !important; align-items: stretch !important; text-align: left !important; }
        #quote-support-slot #sc-toggle { justify-content: center; border-radius: .75rem !important; box-shadow: none !important; background: #edf7fd !important; border: 1px solid #badff3 !important; color: #03618c !important; }
        #quote-support-slot #sc-panel { width: 100% !important; max-width: none !important; box-shadow: 0 4px 16px #0f172a0a !important; }
        #quote-support-slot #sc-input { min-width: 0; }
        .cust-col-rail .total-box { padding: 1.25rem .9rem; }
        .cust-col-rail .portal-total-sticky { position: static; }
        @media (max-width: 1023px) {
            .cust-col-stace { position: fixed; left: 12px; bottom: var(--sc-float-bottom, 12px); z-index: 9998; width: min(340px, calc(100vw - 24px)); pointer-events: none; }
            #quote-support-slot #support-chat-root { align-items: flex-start !important; }
            #quote-support-slot #sc-toggle, #quote-support-slot #sc-panel { pointer-events: auto; }
            #quote-support-slot #sc-panel { box-sizing: border-box; max-height: min(460px, calc(100dvh - 96px), var(--sc-float-height, 460px)) !important; }
            #portal-scrolltop-btn { z-index: 9997; }
        }
        @media (min-width: 1024px) {
            .cust-quote-grid {
                grid-template-columns: 14rem minmax(0, 1fr) 18rem;
            }
            .cust-col-stace { grid-column: 1; grid-row: 1; }
            .cust-col-main { grid-column: 2; grid-row: 1; }
            .cust-col-rail { grid-column: 3; grid-row: 1; }
            .cust-col-stace,
            .cust-col-rail {
                position: sticky;
                top: 1rem;
                display: flex;
                flex-direction: column;
                align-self: start;
            }
            .cust-col-rail .portal-total-sticky { position: static; box-shadow: var(--metal-shadow-md); }
            body[data-customer-visibility="customer_piece"] .cust-quote-grid { grid-template-columns: minmax(0, 1fr) 18rem; }
            body[data-customer-visibility="customer_piece"] .cust-col-main { grid-column: 1; }
            body[data-customer-visibility="customer_piece"] .cust-col-rail { grid-column: 2; }
        }

        .cust-jobspec { margin-bottom: 0.75rem; }
        /* Compact job facts immediately above the first Mark. */
        .cust-jobspec .section-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--metal-muted); }
        .cust-spec-row { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.55rem 0; border-top: 1px solid var(--metal-border-soft); }
        .cust-spec-row:first-child { border-top: 0; padding-top: 0.15rem; }
        .cust-spec-k { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--metal-muted); width: 5rem; flex: 0 0 auto; padding-top: 0.28rem; }
        .cust-spec-v { font-family: var(--metal-font-mono); font-size: 0.8rem; color: var(--metal-text); padding-top: 0.12rem; }
        .cust-spec-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
        /* Spec chips: refined mono pills — a touch more legible, softer square
           radius, and clearer count subscript (matches the approved mockup). */
        .cust-spec-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--metal-font-mono); font-size: 0.72rem; padding: 0.22rem 0.55rem; border-radius: 0.5rem; border: 1px solid var(--metal-border-soft); background: var(--metal-surface); color: #38485a; white-space: nowrap; }
        .cust-spec-chip-n { color: var(--metal-muted); font-size: 0.64rem; }

        /* ============================================================
           Step indicator (Add -> Review -> Details -> Submit) — hero head.
           redesign-v2 polish (2026-07-27), matches the approved mockup.
           Static visual guide; namespaced .cust-step* (customer.html only).
           ============================================================ */
        .cust-steps {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem;
        }
        .cust-step {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--metal-text-secondary, #5a6b7b);
            background: #ffffff;
            border: 1px solid var(--metal-border-soft, #e4e9ef);
            border-radius: 9999px;
            padding: 0.28rem 0.75rem 0.28rem 0.32rem;
            white-space: nowrap;
        }
        .cust-step-dot {
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 9999px;
            display: grid;
            place-items: center;
            font-family: var(--metal-font-mono, ui-monospace, monospace);
            font-size: 0.66rem;
            font-weight: 700;
            background: #eef2f6;
            color: var(--metal-text-secondary, #5a6b7b);
            flex-shrink: 0;
        }
        /* Completed step (not used in the static default, but ready for JS to
           toggle .is-done as the customer progresses). */
        .cust-step.is-done {
            color: var(--metal-accent-on-light, #2c5578);
            border-color: #b9ece5;
            background: var(--metal-accent-soft, rgba(47, 95, 134, 0.14));
        }
        .cust-step.is-done .cust-step-dot {
            background: var(--metal-accent, #2f5f86);
            color: #04211e;
        }
        .cust-step.is-active {
            color: var(--metal-text, #0f172a);
            border-color: var(--metal-text, #0f172a);
        }
        .cust-step.is-active .cust-step-dot {
            background: var(--metal-text, #0f172a);
            color: #ffffff;
        }
        .cust-step-sep {
            color: var(--metal-muted, #8a97a6);
            font-size: 0.8rem;
            line-height: 1;
            user-select: none;
        }
        /* Phones: the arrow separators crowd the pills; drop them and let the
           chips wrap on their own. */
        @media (max-width: 480px) {
            .cust-step-sep { display: none; }
            .cust-steps { gap: 0.35rem; }
        }

        /* The pan picker is anchored to the Build/Draft launcher. */
        #pan-shape-library > summary { cursor: pointer; list-style: none; }
        #pan-shape-library > summary::-webkit-details-marker { display: none; }
        #pan-shape-library[open] .pan-library-chevron { transform: rotate(180deg); }
        .pan-library-panel {
            position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
            margin-top: .5rem; padding: 1rem; border: 1px solid #cbd5e1;
            border-radius: .75rem; background: #fff;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .15);
        }
        .pan-library-heading { font-size: .95rem; font-weight: 700; color: #1e293b; }
        .pan-library-intro { margin: .25rem 0 .75rem; font-size: .75rem; color: #64748b; }
        .pan-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
        .pan-library-shape {
            display: flex; flex-direction: column; align-items: center; gap: .35rem;
            padding: .75rem; border: 1px solid #cbd5e1; border-radius: .5rem;
            background: #f8fafc; color: #334155; text-align: center; cursor: pointer;
        }
        .pan-library-shape:hover { border-color: var(--metal-accent, #2f5f86); background: #eff6ff; }
        .pan-library-shape:focus-visible, #pan-shape-library > summary:focus-visible {
            outline: 2px solid var(--metal-accent, #2f5f86); outline-offset: 3px;
        }
        .pan-library-shape svg { width: 100%; max-width: 120px; height: 80px; }
        .pan-library-face { fill: #f1f5f9; stroke: #475569; stroke-width: 1.5; }
        .pan-library-return { fill: #a8c9de; stroke: #2f5f86; stroke-width: 1.5; }
        .pan-library-shape-name { font-size: .85rem; font-weight: 700; }
        .pan-library-description { font-size: .7rem; line-height: 1.4; color: #64748b; }
        @media (max-width: 560px) {
            .pan-library-grid { grid-template-columns: 1fr; }
            .pan-library-shape {
                display: grid; grid-template-columns: 80px minmax(0, 1fr);
                column-gap: .75rem; text-align: left; padding: .5rem .75rem;
            }
            .pan-library-shape svg { grid-row: span 2; height: 60px; }
            .pan-library-shape-name { align-self: end; }
            .pan-library-description { align-self: start; }
        }
/* Shop shape cards share the Mark Profile | 3D view, with their own scroll area. */
.shape-library-dialog {
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 22px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    color: #1e293b;
    box-shadow: 0 24px 70px #0f172a55;
}
.shape-library-dialog::backdrop { background: #0f172a88; }
.shape-library-section + .shape-library-section { border-top: 1px solid #e2e8f0; margin-top: 18px; padding-top: 18px; }
.shape-library-section > h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.shape-library-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.shape-library-dialog #shape-library-preset-status:empty { display: none; }
.shape-library-head, .shape-library-card > header, .shape-library-card > footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.shape-library-head { margin-bottom: 16px; align-items: flex-start; }
.shape-library-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.shape-library-dialog p { margin: 5px 0; font-size: 13px; color: #64748b; }
.shape-library-dialog button { border: 1px solid #cbd5e1; border-radius: 7px; padding: 7px 12px; font-size: 13px; font-weight: 600; }
.shape-library-dialog button:hover { background: #f1f5f9; }
.shape-library-dialog button:disabled, [data-shape-library-save]:disabled { opacity: .5; cursor: not-allowed; }
.shape-library-dialog button:focus-visible, .shape-library-dialog input:focus-visible, .shape-library-dialog select:focus-visible { outline: 2px solid #287eb5; outline-offset: 2px; }
.shape-library-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
#shape-library-review-controls:not(:empty) { max-width: 260px; margin-bottom: 14px; }
.shape-library-dialog label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; }
.shape-library-dialog input:not([type="checkbox"]), .shape-library-dialog select {
    width: 100%; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 9px; color: #1e293b; background: white;
}
.shape-library-filters label:first-child { flex: 1; min-width: 150px; }
.shape-library-filters label:nth-child(2) { min-width: 150px; }
.shape-library-dialog .shape-library-check { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.shape-library-check input { width: 16px; height: 16px; accent-color: #287eb5; }
.shape-library-dialog .shape-library-status { min-height: 22px; margin: 12px 0 8px; }
.shape-library-dialog .shape-library-error { color: #b91c1c; }
.shape-library-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-height: 63dvh; overflow-y: auto; padding: 2px 8px 4px 2px; }
.shape-library-card { min-width: 0; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; background: #f8fafc; }
.shape-library-card > header, .shape-library-card > footer { padding: 12px; }
.shape-library-card h3 { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.shape-library-card [data-shape-favorite] { font-size: 24px; line-height: 1; padding: 7px; color: #946614; }
.shape-library-scope { display: block; margin: 0 12px 8px; color: #475569; font-size: 11px; }
.shape-library-dialog .shape-library-geometry-note { margin: 0 12px 12px; }
.shape-library-visuals.quote-card-visual-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: #cbd5e1; }
.shape-library-visuals > section { min-width: 0; background: white; }
.shape-library-view-title { padding: 5px 8px; color: #315c79; background: #edf5fa; font-size: 11px; font-weight: 700; }
.shape-library-profile, .shape-library-three-wrap { height: 170px; overflow: hidden; position: relative; }
.shape-library-profile { padding: 8px; display: flex; align-items: center; justify-content: center; }
.shape-library-profile svg { width: 100%; height: 100%; }
.shape-library-three-wrap { background: #0b0f14; }
.shape-library-three-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.shape-library-three-wrap [data-shape-three-status] { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; color: #cbd5e1; font-size: 12px; text-align: center; pointer-events: none; }
.shape-library-three-wrap [data-shape-three-status][hidden], .shape-library-dialog [hidden] { display: none; }
.shape-library-empty { padding: 24px 8px; grid-column: 1 / -1; }
.shape-library-save-dialog { width: min(470px, calc(100vw - 32px)); }
.shape-library-save-dialog form > label { margin: 14px 0; }
.shape-library-save-dialog footer { display: flex; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 760px) {
    .shape-library-dialog { padding: 16px; }
    .shape-library-cards { grid-template-columns: minmax(0, 1fr); max-height: 56dvh; }
    .shape-library-profile, .shape-library-three-wrap { height: 150px; }
}

/* The existing Stace seat moves into the draft Work Bench. */
#guided-profile-slot #support-chat-root { align-items: stretch !important; text-align: left !important; }
#guided-profile-slot #sc-panel { width: 100% !important; max-width: none !important; box-shadow: none !important; }
#guided-profile-slot #sc-input { min-width: 0; }
#guided-profile-slot #sc-email, #guided-profile-slot #sc-scope-clear { display: none; }
#guided-profile-slot [data-guided-confirm]:disabled { opacity: .55; cursor: not-allowed; }


/* Launcher V2: keep the existing library and quote visual-window chrome. */
#shape-library-starts[hidden] { display: none; }
#shape-library-starts { display: flex; flex-wrap: wrap; align-items: start; gap: 12px; }
#shape-library-starts #pan-shape-library { flex: 1; min-width: min(100%, 260px); }
#shape-library-starts .pan-library-panel { position: static; box-shadow: none; }
#draft-workbench { box-sizing: border-box; width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: 92dvh; padding: 0; border: 1px solid #94a3b8; border-radius: 12px; color: #0f172a; background: #f1f5f9; }
#draft-workbench:not([open]) { display: none; }
#draft-workbench::backdrop { background: #0f172a88; }
#draft-workbench > header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; background: #0f172a; color: #fff; }
#draft-workbench > header button { border: 1px solid #64748b; border-radius: 6px; padding: 7px 12px; }
.draft-workbench-grid { overflow: auto; min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; gap: 16px; padding: 16px; }
.draft-workbench-left { display: grid; gap: 14px; min-width: 0; }
.draft-workbench-pane { min-width: 0; padding: 12px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; }
.draft-workbench-pane h3 { margin: 0 0 8px; font-weight: 700; }
#draft-workbench [data-draft-profile] { min-height: 160px; position: relative; display: grid; place-items: center; background: #fffdf6; border: 1px solid #245b83; border-radius: 8px; color: #173b54; }
#draft-workbench [data-draft-profile] svg { width: 100%; height: 220px; }
#draft-workbench [data-draft-dimensions] { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
#draft-workbench [data-draft-profile] .rr-empty-state { background: transparent; border: 0; border-left: 0; box-shadow: none; color: #5f6c7c; }
#draft-workbench [data-draft-profile] .rr-empty-state-title { color: #173b54; }
#draft-workbench [data-draft-profile] .rr-empty-state-copy { color: #5f6c7c; }
#draft-workbench [data-draft-dimensions] label { display: grid; gap: 4px; }
#draft-workbench [data-draft-dimensions] input { width: 105px; padding: 6px; border: 1px solid #94a3b8; border-radius: 4px; color: #0f172a; background: #ffffff; }
#draft-workbench [data-draft-dimensions] input::placeholder { color: #94a3b8; opacity: 1; }
.draft-workbench-three { height: 250px; position: relative; background: #0b0f14; border-radius: 6px; overflow: hidden; }
.draft-workbench-three canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.draft-workbench-three p { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 16px; color: #cbd5e1; }
#draft-workbench [hidden] { display: none; }
#draft-workbench #guided-profile-slot { min-width: 0; position: sticky; top: 0; }
#draft-workbench #sc-panel { height: 620px !important; max-height: 76dvh !important; }
#draft-workbench .custom-profile-sketch { margin: 0; }
@media (max-width: 700px) {
    #draft-workbench { width: calc(100vw - 16px); max-height: 96dvh; }
    .draft-workbench-grid { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 12px; }
    #draft-workbench #guided-profile-slot { position: static; }
    #draft-workbench #sc-panel { height: 440px !important; }
}

#draft-workbench[data-mode="custom"][data-proposal="false"] [data-draft-profile-pane] { display: none; }
#draft-workbench[data-mode="custom"] .custom-profile-sketch svg { height: 220px; min-height: 220px; }
#draft-workbench[data-mode="custom"] .draft-workbench-three { height: 220px; }

#draft-workbench [data-draft-preview-note] { margin: 0 0 8px; font-size: 12px; color: #475569; }
#draft-workbench [data-draft-preview-note]:empty { display: none; }
#draft-workbench input:invalid { border-color: #b91c1c; }

/* Same draft surface in a full detached window; closing the window docks it. */
.draft-workbench-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#draft-workbench > header { flex-wrap: wrap; }
#draft-workbench [data-draft-popup-status] { padding: 12px 18px; color: #713f12; background: #fef9c3; }
#draft-workbench [data-draft-popup-status] button { margin-left: 12px; padding: 6px 12px; border: 1px solid currentColor; border-radius: 6px; }
[data-desk-placeholder="draft"] { padding: 16px; display: flex; gap: 12px; background: #e2e8f0; color: #0f172a; }
[data-desk-placeholder="draft"] button { padding: 8px 12px; border: 1px solid #64748b; border-radius: 6px; }
.draft-workbench-window { margin: 0; background: #f1f5f9; }
.draft-workbench-window #draft-workbench { position: static; display: flex; flex-direction: column; margin: 0; width: 100%; min-height: 100dvh; height: auto; max-height: none; border: 0; border-radius: 0; }
.draft-workbench-window .draft-workbench-grid { overflow: visible; }
.draft-workbench-window #draft-workbench #sc-panel { max-height: none !important; }

/* ============================================================
   GlassBuild first impression (2026-09-19 Estimate tokens).
   Scoped to /customer landing chrome only: page, header, hero,
   Build/Draft + Import, quote-desk header/totals/meta, empty
   states. Does not restyle quote Visual Lines, Read Room, or
   Work Bench. Radius 8–10, sky left bar, 8px rhythm, 120–180ms.
   ============================================================ */
body.cust-first-impression {
    --cage-page: #0d1017;
    --cage-ink: #12161f;
    --cage-line: #1e2633;
    --cage-sky: #38bdf8;
    --cage-sky-soft: #7dd3fc;
    --cage-text: #e7edf4;
    --cage-muted: #8f9dae;
    --cage-faint: #5f6c7c;
    --cage-radius: 9px;
    --cage-space: 8px;
    --cage-motion: 150ms;
    background-color: var(--cage-page);
    color: var(--cage-text);
}
body.cust-first-impression .cust-quote-shell {
    --cage-page: #0d1017;
    --cage-ink: #12161f;
    --cage-line: #1e2633;
    --cage-sky: #38bdf8;
    --cage-sky-soft: #7dd3fc;
    --cage-radius: 9px;
    --cage-motion: 150ms;
}
body.cust-first-impression .cage-ink-card,
body.cust-first-impression .cust-hero,
body.cust-first-impression .cust-build-draft,
body.cust-first-impression .cust-import-panel,
body.cust-first-impression .cust-jobspec,
body.cust-first-impression .card,
body.cust-first-impression .total-box,
body.cust-first-impression .cust-empty-state,
body.cust-first-impression .quote-honesty-banner {
    background: var(--cage-ink);
    border: 1px solid var(--cage-line);
    border-radius: var(--cage-radius);
    border-left: 3px solid var(--cage-sky);
    box-shadow: none;
    transition: border-color var(--cage-motion) ease, box-shadow var(--cage-motion) ease;
}
body.cust-first-impression .cust-appbar {
    background: var(--cage-page);
    border-bottom: 1px solid var(--cage-line);
    box-shadow: none;
}
body.cust-first-impression .cust-hero {
    background: var(--cage-ink);
    padding: 16px;
}
body.cust-first-impression .cust-hero-title { color: var(--cage-text); }
body.cust-first-impression .cust-hero-lede {
    color: #c9d3de;
    font-size: 1.075rem;
}
body.cust-first-impression .cust-build-draft-column { gap: 8px; }
body.cust-first-impression .cust-marks-help {
    color: #c5ced8;
    font-size: 0.875rem;
    line-height: 1.4;
}
body.cust-first-impression .cust-hero-eyebrow {
    color: var(--cage-sky-soft);
    background: rgba(56, 189, 248, 0.12);
    margin-bottom: 8px;
}
body.cust-first-impression .cust-build-draft {
    padding: 16px;
    background: var(--cage-ink);
    border: 1px solid var(--cage-line);
    border-radius: var(--cage-radius);
    border-left: 3px solid var(--cage-sky);
}
/* IMPORT-BUILD-CHROME: Import + Build/Draft share 1.1rem / sky-soft.
   Import panel padding matches Build/Draft so the title and dashed
   drop zones do not kiss the outer border. */
body.cust-first-impression .cust-build-draft-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cage-sky-soft);
}
body.cust-first-impression .cust-build-draft-label {
    margin: 8px 0 8px;
    color: var(--cage-muted);
    font-size: 0.75rem;
    font-weight: 600;
}
body.cust-first-impression .cust-build-draft-actions { gap: 8px; }
body.cust-first-impression .cust-import-panel {
    padding: 16px;
    background: var(--cage-ink);
    border: 1px solid var(--cage-line);
    border-radius: var(--cage-radius);
    border-left: 3px solid var(--cage-sky);
}
body.cust-first-impression .cust-import-panel-head {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cage-sky-soft);
    margin-bottom: 8px;
}
body.cust-first-impression .cust-import-panel-head i { color: var(--cage-sky); }
body.cust-first-impression #email-import-zone { margin-top: 8px; }
body.cust-first-impression .cust-dropzone,
body.cust-first-impression .sketch-dropzone {
    background: var(--cage-page);
    border-color: var(--cage-line);
    border-radius: var(--cage-radius);
    transition: border-color var(--cage-motion) ease, background var(--cage-motion) ease;
}
body.cust-first-impression .cust-dropzone--primary {
    border-color: rgba(56, 189, 248, 0.42);
    background: rgba(56, 189, 248, 0.06);
}
body.cust-first-impression .cust-dropzone--primary:hover {
    border-color: var(--cage-sky);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18);
}
body.cust-first-impression .cust-dropzone-ico {
    background: rgba(56, 189, 248, 0.12);
    color: var(--cage-sky);
}
body.cust-first-impression .cust-import-panel .text-slate-800,
body.cust-first-impression .cust-import-panel .text-slate-700 { color: var(--cage-text) !important; }
body.cust-first-impression .cust-import-panel .text-slate-600,
body.cust-first-impression .cust-import-panel .text-slate-500,
body.cust-first-impression .cust-import-panel .text-slate-400 { color: var(--cage-muted) !important; }
body.cust-first-impression #sketch-staged-wrap {
    background: var(--cage-page);
    border-color: var(--cage-line);
}
body.cust-first-impression .section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cage-muted);
    margin-bottom: 8px;
}
body.cust-first-impression .cust-jobspec .section-title { color: var(--cage-faint); }
body.cust-first-impression .cust-jobspec { margin-bottom: 8px; padding: 16px; }
body.cust-first-impression .cust-spec-k,
body.cust-first-impression .cust-spec-chip-n { color: var(--cage-faint); }
body.cust-first-impression .cust-spec-v { color: var(--cage-text); }
body.cust-first-impression .cust-spec-chip {
    background: var(--cage-page);
    border-color: var(--cage-line);
    color: var(--cage-text);
}
body.cust-first-impression .cust-spec-row { border-top-color: var(--cage-line); }
body.cust-first-impression #marks-add { margin-bottom: 8px; gap: 8px; }
body.cust-first-impression #marks-add .text-slate-500,
body.cust-first-impression #marks-add .text-slate-600 { color: var(--cage-muted) !important; }
body.cust-first-impression .cust-mode-tabs {
    background: var(--cage-page);
    border-color: var(--cage-line);
}
body.cust-first-impression .quote-mode-btn { color: var(--cage-muted); }
body.cust-first-impression .quote-mode-btn:hover { background: rgba(56, 189, 248, 0.08); color: var(--cage-text); }
body.cust-first-impression .quote-mode-btn-active,
body.cust-first-impression .quote-mode-btn-active:hover {
    background: var(--cage-ink);
    color: var(--cage-sky-soft);
}
body.cust-first-impression #quote-mode-hint { color: var(--cage-faint); }
body.cust-first-impression .cust-include-chip {
    background: var(--cage-page);
    border-color: var(--cage-line);
    color: var(--cage-muted);
}
body.cust-first-impression .cust-include-chip:has(input:checked) {
    border-color: var(--cage-sky);
    background: rgba(56, 189, 248, 0.12);
    color: var(--cage-sky-soft);
}
body.cust-first-impression .cust-include-chip i { color: var(--cage-sky); }
body.cust-first-impression .quote-honesty-banner {
    color: var(--cage-muted);
    margin-bottom: 16px;
    padding: 8px 16px;
}
body.cust-first-impression .total-box {
    background: var(--cage-ink);
    color: var(--cage-text);
    border-radius: var(--cage-radius);
    padding: 16px;
}
body.cust-first-impression .total-box .total-label,
body.cust-first-impression .total-box .total-sub { color: var(--cage-muted); }
body.cust-first-impression .quote-sky-total {
    color: var(--cage-sky-soft);
    font-size: clamp(32px, 3.2vw, 40px);
    line-height: 1.15;
    overflow-wrap: anywhere;
}
body.cust-first-impression .quote-budgetary-footer {
    color: var(--cage-faint);
    font-size: 0.7rem;
    margin-top: 16px;
    padding-top: 16px;
    border-top-color: var(--cage-line);
}
body.cust-first-impression .cust-empty-state {
    text-align: center;
    padding: 24px 16px;
}
body.cust-first-impression .cust-empty-state--inline {
    text-align: left;
    padding: 8px 0;
    background: transparent;
    border: 0;
    border-left: 0;
    border-radius: 0;
    color: var(--cage-muted);
    font-size: 0.75rem;
}
body.cust-first-impression .cust-empty-state-ico {
    color: var(--cage-sky);
    font-size: 1.5rem;
    margin-bottom: 8px;
}
body.cust-first-impression .cust-empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cage-text);
}
body.cust-first-impression .cust-empty-state-copy {
    margin: 8px auto 0;
    max-width: 28rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cage-muted);
}
body.cust-first-impression .card .label,
body.cust-first-impression .card .text-slate-500,
body.cust-first-impression .card .text-slate-400 { color: var(--cage-muted) !important; }
body.cust-first-impression .card .input {
    background: var(--cage-page);
    border-color: var(--cage-line);
    color: var(--cage-text);
}
/* DRAFT-INPUT-CONTRAST (2026-09-20): first-impression paints the page with
   --cage-text (#e7edf4). Quote-card piece editors stay white (.line-item),
   so Material / Length / Finish / legs / O.D.–I.D. / angles inherited that
   light ink onto white fields. Labels already have explicit dark colors.
   Re-assert dark value ink on the light piece surface; Cage-ink .card .input
   (dark fill + --cage-text) stays inverted on purpose. */
body.cust-first-impression .line-item .input,
body.cust-first-impression .line-item select.input,
body.cust-first-impression .line-item .leg-input,
body.cust-first-impression .line-item .bend-angle,
body.cust-first-impression .line-item .leg-ref-select,
body.cust-first-impression .line-item .hem-type {
    color: var(--metal-text, #0f172a);
}
body.cust-first-impression .line-item .input::placeholder,
body.cust-first-impression .line-item .leg-input::placeholder,
body.cust-first-impression .line-item .bend-angle::placeholder {
    color: var(--metal-muted, #94a3b8);
    opacity: 1;
}
body.cust-first-impression .line-item .builder-leg-value,
body.cust-first-impression .line-item .builder-bend > div {
    color: var(--metal-text, #0f172a);
}
body.cust-first-impression #account-company-block {
    background: var(--cage-page);
    border-color: var(--cage-line);
}
body.cust-first-impression .header-nav-link {
    transition: background var(--cage-motion) ease, color var(--cage-motion) ease;
}
@media (max-width: 639px) {
    body.cust-first-impression .portal-total-sticky .total-box #grand-total {
        font-size: clamp(32px, 8.6vw, 40px) !important;
    }
}

/* GlassBuild booth phones (~375–430px). Sticky sky total + Submit stay
   tappable above the home indicator. 8px rhythm. Cage ink unchanged. */
@media (max-width: 430px) {
    body.cust-first-impression {
        --glassbuild-mobile: 430px;
        --sc-float-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    body.cust-first-impression .cust-quote-shell {
        overflow-x: hidden;
        max-width: 100%;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
    body.cust-first-impression .cust-appbar {
        padding-left: 8px;
        padding-right: 8px;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
    }
    body.cust-first-impression .cust-hero,
    body.cust-first-impression .cust-jobspec,
    body.cust-first-impression .card,
    body.cust-first-impression .total-box,
    body.cust-first-impression .quote-honesty-banner {
        padding: 8px;
        margin-bottom: 8px;
    }
    /* RECUT-1: hero descendants keep 8px padding, not margin-bottom.
       `.cust-import-panel` / `.cust-build-draft` sit inside `.cust-hero`;
       last-child 8px margin leaked outside the hero box and failed
       test_start_cards_align_with_hero_column by exactly 8px at 320/390.
       Rhythm stays via `.cust-start-import-grid { gap: 8px }` below. */
    body.cust-first-impression .cust-build-draft,
    body.cust-first-impression .cust-import-panel {
        padding: 8px;
        margin-bottom: 0;
    }
    body.cust-first-impression .cust-hero-layout,
    body.cust-first-impression .cust-start-import-grid,
    body.cust-first-impression .cust-quote-grid,
    body.cust-first-impression .cust-build-draft-column {
        gap: 8px;
    }
    body.cust-first-impression .cust-build-draft-actions { gap: 8px; }
    body.cust-first-impression .cust-build-draft-actions > button,
    body.cust-first-impression .cust-build-draft-actions > details > summary {
        min-height: 44px;
    }
    body.cust-first-impression .cust-empty-state {
        padding: 16px 8px;
        min-height: 72px;
    }
    body.cust-first-impression .cust-empty-state--inline {
        padding: 8px 0;
        min-height: 0;
    }
    body.cust-first-impression .cust-empty-state-copy {
        margin: 8px auto 0;
        font-size: 0.75rem;
    }
    body.cust-first-impression .section-title,
    body.cust-first-impression .cust-build-draft-label,
    body.cust-first-impression .total-box .total-label,
    body.cust-first-impression .total-box .total-sub {
        font-size: 0.75rem;
        color: var(--cage-muted);
        margin-bottom: 8px;
    }
    body.cust-first-impression .quote-sky-total,
    body.cust-first-impression .portal-total-sticky .total-box #grand-total {
        font-size: clamp(32px, 8.6vw, 40px) !important;
        line-height: 1.15;
    }
    body.cust-first-impression .cust-col-rail .portal-total-sticky,
    body.cust-first-impression .portal-total-sticky {
        position: sticky;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        z-index: 30;
        margin-left: 0;
        margin-right: 0;
        box-shadow: none;
    }
    /* Compact sticky on .portal-total-sticky only. Do not sticky the
       whole .cust-col-rail — at 375px that bar is ~350px tall and
       covers the hero after scroll. */
    body.cust-first-impression .cust-col-rail {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--cage-page);
    }
    body.cust-first-impression .btn-total-submit,
    body.cust-first-impression .quote-save-discard .btn-total-outline {
        min-height: 44px;
    }
    body.cust-first-impression .quote-save-discard { gap: 8px; }
    body.cust-first-impression .quote-draft-actions { gap: 8px; }
    body.cust-first-impression #total-actions { gap: 8px; margin-top: 8px; }
    body.cust-first-impression #mobile-nav-toggle { min-height: 44px; min-width: 44px; }
    body.cust-first-impression #mobile-nav-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px;
    }
}

/* GlassBuild RR/WB chrome — draft Work Bench empty/degraded copy only.
   First-impression landing tokens above stay untouched. */
#draft-workbench .rr-empty-state,
.draft-workbench-window .rr-empty-state {
    margin: 8px 0;
    padding: 16px;
    text-align: left;
    background: transparent;
    border: 0;
    color: #5f6c7c;
}
#draft-workbench .rr-empty-state-title,
.draft-workbench-window .rr-empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: #173b54;
}
#draft-workbench .rr-empty-state-copy,
.draft-workbench-window .rr-empty-state-copy {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #5f6c7c;
}