/* =================================================================== QUOTEE V3 — CHROME The .qt-nav top bar, sidebar, persona pill, mode switcher, breadcrumb. Appears on every authenticated surface. Two variants by surface: - data-chrome="app" → dense, agent-side (dashboard, builder, library) - data-chrome="document" → editorial, customer-side (proposal, dashboard) =================================================================== */ /* ═════════════════════════════════════════════════════════════════ PROGRESS RAIL — 3px gold sliver at the very top of every surface ═════════════════════════════════════════════════════════════════ */ .qt-rail { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: linear-gradient(90deg, var(--gold-deep), var(--gold) 30%, var(--gold-leaf) 60%, var(--gold) 90%); background-size: 200% 100%; z-index: 200; } .qt-rail.is-progress::after { content: ""; position: absolute; inset: 0; background: var(--rule); transform-origin: right center; transform: scaleX(calc(1 - var(--progress, 0))); transition: transform var(--dur-base) var(--ease-soft); } /* Custom-element wrappers (, ) must form NO box so the inner sticky child (.qt-nav, .qt-modebar) takes as its containing block. Without this, qt-modebar's wrapper computes display:block at 50px tall and becomes the inner .qt-modebar's containing block — the sub-nav scrolls off after the first 50px on deep scroll. qt-nav happened to survive because computes display:inline by accident; display:contents codifies the survival. Diagnosed + verified by Q-CRG2 via Playwright (rect.top stays at 59 through scrollY 25000 vs offscreen at -24944 before). */ qt-nav, qt-modebar { display: contents; } /* ═════════════════════════════════════════════════════════════════ TOP NAV Grid: brand · doc-ref · save · spacer · mode · persona · cta Always 56px tall (compact: 48, spacious: 64). Sticky. ═════════════════════════════════════════════════════════════════ */ .qt-nav { position: sticky; top: var(--topbar-h); z-index: 100; display: grid; grid-template-columns: auto auto 1fr auto auto auto; align-items: center; gap: var(--sp-4); height: var(--nav-h); padding: 0 var(--sp-5); background: var(--paper); border-bottom: 1px solid var(--rule); font-size: var(--t-small); } /* brand cluster */ .qt-nav__brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; } .qt-nav__brand img { display: block; height: 22px; width: auto; } .qt-nav__brand .sep { width: 1px; height: 18px; background: var(--rule-strong); } .qt-nav__brand .product { font-size: 13px; font-weight: var(--w-bold); color: var(--ink); letter-spacing: var(--tr-body); display: inline-flex; align-items: baseline; gap: 6px; } .qt-nav__brand .surface-tag { font-size: 9.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--gold-deep); background: var(--gold-pale); padding: 2px 6px; border-radius: var(--r-sm); font-feature-settings: "ss02"; } /* doc reference (where applicable) */ .qt-nav__doc { display: flex; align-items: center; gap: var(--sp-3); padding-left: var(--sp-4); border-left: 1px solid var(--rule); min-width: 0; } .qt-nav__doc .label { font-size: 9.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .qt-nav__doc .title { font-size: 13.5px; font-weight: var(--w-bold); color: var(--ink); letter-spacing: var(--tr-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } .qt-nav__doc .ref { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mid); white-space: nowrap; } /* Operator 2026-06-03: doc-ref moved from a separate right-side pill into the title line as a small monospace subline. Reads: Quote - CRG (label) Strategic Managed IT Proposal CRG-2026-05 (title + inline ref) Same data, tighter chrome, no floating pill. */ .qt-nav__doc .title .ref-inline { font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--w-medium); letter-spacing: 0.03em; color: var(--ink-mute); margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--rule); vertical-align: baseline; } /* Engagement picker affordances on the doc block */ .qt-nav__doc--pickable { cursor: pointer; padding: 4px 8px; margin: -4px -8px; border-radius: var(--r-md, 6px); transition: background 120ms ease; } .qt-nav__doc--pickable:hover, .qt-nav__doc--pickable:focus { background: var(--paper-2); outline: none; } .qt-nav__doc--pickable .label::after { content: ""; } .qt-nav__doc-chev { display: inline-block; color: var(--ink-mid); font-size: 10px; margin-left: 2px; vertical-align: middle; transform: translateY(-1px); } /* Engagement picker dropdown */ .qt-engagement-picker { position: fixed; inset: 0; z-index: 200; } .qt-engagement-picker__scrim { position: absolute; inset: 0; background: transparent; } .qt-engagement-picker__panel { position: absolute; width: 380px; max-width: calc(100vw - 24px); background: var(--paper-1, #fff); border: 1px solid var(--line-1, #e5e5e5); border-radius: var(--r-lg, 10px); box-shadow: 0 14px 36px rgba(15, 17, 22, 0.18), 0 2px 6px rgba(15, 17, 22, 0.06); overflow: hidden; font-family: var(--font-sans); } .qt-eng-picker__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line-1); } .qt-eng-picker__title { font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); } .qt-eng-picker__hint { font-size: 10px; color: var(--ink-mid); } .qt-eng-picker__list { max-height: 60vh; overflow-y: auto; } .qt-eng-picker__item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "customer mark" "doc mark" "meta mark"; gap: 2px 8px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line-1); padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; transition: background 100ms ease; } .qt-eng-picker__item:last-child { border-bottom: 0; } .qt-eng-picker__item:hover:not([disabled]) { background: var(--paper-2); } .qt-eng-picker__item.is-active { background: rgba(190, 152, 70, 0.06); } .qt-eng-picker__item.is-active:hover { background: rgba(190, 152, 70, 0.10); } .qt-eng-picker__item.is-unavailable { opacity: 0.5; cursor: not-allowed; } .qt-eng-picker__customer { grid-area: customer; font-weight: var(--w-bold); font-size: 13px; color: var(--ink-ink); } .qt-eng-picker__doc { grid-area: doc; font-size: 11.5px; color: var(--ink-mid); } .qt-eng-picker__doc .ref { font-family: var(--font-mono); font-size: 10.5px; margin-left: 4px; color: var(--ink-faint, #999); } .qt-eng-picker__meta { grid-area: meta; font-size: 10.5px; color: var(--ink-mid); display: flex; align-items: center; gap: 5px; } .qt-eng-picker__meta .sep { color: var(--ink-faint, #bbb); } .qt-eng-picker__status { font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9.5px; } .qt-eng-picker__status--signed { color: var(--ok, #2f8f4f); } .qt-eng-picker__status--discovery { color: var(--accent-gold, #be9846); } .qt-eng-picker__active-mark { grid-area: mark; align-self: center; color: var(--accent-gold, #be9846); font-size: 13px; font-weight: var(--w-bold); white-space: nowrap; } .qt-eng-picker__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--paper-2); border-top: 1px solid var(--line-1); } .qt-eng-picker__new, .qt-eng-picker__manage { background: transparent; border: 1px solid var(--line-1); border-radius: var(--r-md, 6px); padding: 6px 12px; font: inherit; font-size: 11.5px; color: var(--ink-ink); cursor: pointer; transition: background 100ms ease; } .qt-eng-picker__new:hover, .qt-eng-picker__manage:hover { background: var(--paper-1); } .qt-eng-picker__new .plus { display: inline-block; margin-right: 4px; color: var(--accent-gold, #be9846); font-weight: var(--w-bold); } /* save state */ .qt-nav__save { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-mid); padding: 4px 10px; border-radius: var(--r-pill); background: var(--paper-2); } .qt-nav__save .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); } .qt-nav__save.is-saving .dot { background: var(--gold); animation: pulse 1.2s var(--ease-soft) infinite; } /* mode switcher — Proposal | Quote */ .qt-mode { display: inline-flex; background: var(--paper-2); border-radius: var(--r-pill); padding: 3px; border: 1px solid var(--rule); gap: 0; } .qt-mode__opt { font-size: 12px; font-weight: var(--w-semibold); color: var(--ink-mid); padding: 5px 14px; border-radius: var(--r-pill); transition: color var(--dur-fast), background var(--dur-fast); letter-spacing: var(--tr-body); } .qt-mode__opt:hover { color: var(--ink); } .qt-mode__opt.is-active { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-gold); } [data-palette="contrast"] .qt-mode__opt.is-active { background: var(--ink); color: var(--ink-inverse); box-shadow: var(--shadow-2); } /* persona pill — Agent ▾ / Customer ▾ */ .qt-persona { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: var(--r-pill); background: transparent; border: 1px solid transparent; font-size: 12px; font-weight: var(--w-semibold); color: var(--ink-mid); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); } .qt-persona:hover { background: var(--paper-2); border-color: var(--rule); } .qt-persona .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); } .qt-persona.is-agent .live-dot { background: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-soft); } .qt-persona strong { color: var(--ink); font-weight: var(--w-bold); } .qt-persona .chev { color: var(--ink-faint); margin-left: 2px; } /* primary CTA — gold pill, the one place gold-on-ink is allowed */ .qt-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; font-size: 12.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-body); color: var(--ink); background: var(--gold); border: 1px solid var(--gold); border-radius: var(--r-md); box-shadow: var(--shadow-gold); transition: background var(--dur-fast), transform var(--dur-fast); cursor: pointer; } .qt-cta:hover { background: var(--gold-leaf); } .qt-cta:active { transform: translateY(1px); } .qt-cta--ghost { color: var(--ink); background: transparent; border-color: var(--rule-strong); box-shadow: none; } .qt-cta--ghost:hover { background: var(--paper-2); } .qt-cta--dark { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); box-shadow: var(--shadow-2); } .qt-cta--dark:hover { background: var(--graphite-2); } /* ═════════════════════════════════════════════════════════════════ SIDEBAR — agent surfaces (dashboard, library, settings) ═════════════════════════════════════════════════════════════════ */ .qt-side { position: sticky; top: calc(var(--nav-h) + var(--topbar-h)); height: calc(100vh - var(--nav-h) - var(--topbar-h)); width: var(--left-rail); padding: var(--sp-6) var(--sp-4); background: var(--paper); border-right: 1px solid var(--rule); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-5); } .qt-side__section + .qt-side__section { border-top: 1px solid var(--rule-soft); padding-top: var(--sp-4); } .qt-side__label { font-size: 9.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-mute); padding: 0 var(--sp-3) var(--sp-2); } .qt-side__list { display: flex; flex-direction: column; gap: 1px; } .qt-side__item { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: var(--sp-3); padding: 7px var(--sp-3); border-radius: var(--r-md); color: var(--ink-mid); font-size: 13.5px; font-weight: var(--w-medium); letter-spacing: var(--tr-body); text-decoration: none; border-left: 2px solid transparent; transition: background var(--dur-fast), color var(--dur-fast); cursor: pointer; } .qt-side__item:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; } .qt-side__item.is-active { background: var(--paper-2); color: var(--ink); font-weight: var(--w-semibold); border-left-color: var(--gold); padding-left: calc(var(--sp-3) - 2px); } .qt-side__item .ico { width: 16px; height: 16px; color: var(--ink-mute); } .qt-side__item.is-active .ico { color: var(--gold-deep); } .qt-side__item .count { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); background: var(--paper-2); padding: 1px 6px; border-radius: var(--r-pill); border: 1px solid var(--rule); } .qt-side__item.is-active .count { background: var(--gold-pale); color: var(--gold-deep); border-color: var(--gold-line); } /* sidebar footer — user block */ .qt-side__user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--rule); } .qt-side__user .ava { width: 32px; height: 32px; border-radius: 50%; background: var(--graphite); color: var(--ink-inverse); display: grid; place-items: center; font-size: 12px; font-weight: var(--w-bold); flex: 0 0 auto; } .qt-side__user .who { font-size: 12px; line-height: 1.3; min-width: 0; } .qt-side__user .who strong { display: block; color: var(--ink); font-weight: var(--w-bold); } .qt-side__user .who span { color: var(--ink-mute); font-size: 11px; } /* ═════════════════════════════════════════════════════════════════ BUTTONS, CHIPS, KBD — atom layer ═════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; height: var(--ctrl-h); padding: 0 14px; font-size: 12.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-body); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r-md); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); white-space: nowrap; } .btn:hover { background: var(--paper-2); border-color: var(--ink-mute); } .btn--gold { background: var(--gold); border-color: var(--gold); box-shadow: var(--shadow-gold); } .btn--gold:hover { background: var(--gold-leaf); } .btn--ink { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); } .btn--ink:hover { background: var(--graphite-2); } .btn--ghost { background: transparent; border-color: transparent; color: var(--ink-mid); } .btn--ghost:hover { background: var(--paper-2); color: var(--ink); } .btn--sm { height: calc(var(--ctrl-h) - 6px); padding: 0 10px; font-size: 11.5px; } .btn--icon { width: var(--ctrl-h); padding: 0; justify-content: center; } /* chip — tag, status, badge */ .chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; font-size: 10.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-mid); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-pill); font-feature-settings: "ss02"; white-space: nowrap; } .chip--gold { color: var(--gold-deep); background: var(--gold-pale); border-color: var(--gold-line); } .chip--emerald { color: var(--emerald); background: var(--emerald-soft); border-color: rgba(4,120,87,0.25); } .chip--cobalt { color: var(--cobalt); background: var(--cobalt-soft); border-color: rgba(29,78,216,0.25); } .chip--coral { color: var(--coral); background: var(--coral-soft); border-color: rgba(184,67,26,0.30); } .chip--violet { color: var(--violet); background: var(--violet-soft); border-color: rgba(91,33,182,0.25); } .chip--ink { color: var(--ink-inverse); background: var(--ink); border-color: var(--ink); } .chip--ghost { background: transparent; } .chip .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* kbd */ .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mid); background: var(--paper); border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: var(--r-sm); } /* search input */ .qt-search { display: flex; align-items: center; gap: 8px; height: var(--ctrl-h); padding: 0 12px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-md); color: var(--ink-mid); min-width: 240px; } .qt-search input { flex: 1; background: transparent; border: none; outline: none; font: inherit; color: var(--ink); font-size: 13px; min-width: 0; } .qt-search input::placeholder { color: var(--ink-mute); } .qt-search:focus-within { background: var(--paper); border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-glow); } /* breadcrumb */ .qt-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-mid); } .qt-crumb a { color: var(--ink-mid); } .qt-crumb a:hover { color: var(--ink); } .qt-crumb .sep { color: var(--ink-faint); } .qt-crumb .current { color: var(--ink); font-weight: var(--w-semibold); } /* card */ .card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .card--inset { background: var(--paper-2); box-shadow: none; } .card--editorial { border: none; background: var(--vellum); position: relative; } .card--editorial::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-leaf), transparent); } /* ═════════════════════════════════════════════════════════════════ CUSTOMER-VIEW GATING Customer persona hides margin, supplier, vendor, internal-only UI. Apply [data-persona="customer"] to ; these rules cascade. ═════════════════════════════════════════════════════════════════ */ [data-persona="customer"] .agent-only, [data-persona="customer"] [data-agent-only] { display: none !important; } [data-persona="agent"] .customer-only, [data-persona="agent"] [data-customer-only] { display: none !important; }