/* quoteiq.css — the look of every manager screen, built against the Claude Design exports in design_html\ (01_frame, 03_leads, 05_sent; 2026-08-23). The tokens are the design system's own (Brand Standards 4.2/4.3/4.7 plus Brand Guidelines §5); the component measurements are copied from the component source inside the export (Sidebar, TopBar, DataTable, StatusPill, InlineMessage, Button, PriceBlock …). Plain CSS, no build step. Class names are short and the comment above each block names the design component it stands in for. The rules that never bend, whatever the screen: - a status is never a bare coloured dot: .pill always carries a word - money is right-aligned and set in Space Grotesk (.figure / td.num) - the price block (.price-block) takes no brand colour — Brand Guidelines §0 rule 2 - Coral is never body text on white The colour assignment (owner's decision 2026-08-25, QUOTEIQ_UI_RESEARCH §3): brand blue at rest lives ONLY on the primary button, the sidebar chrome, and selected things (row, tab, sort, base box, switch, preview tab) — plus the focus ring, and blue as hover/focus feedback. Headings, links, figures and secondary buttons are ink or grey. The hex values themselves never change. */ /* ---------- tokens (Brand Standards 4.2 — do not add a colour) ---------- */ :root { --cg-blue: #2F3192; --cg-coral: #F9674B; --cg-charcoal: #1A1A2E; --cg-slate: #4A4A68; --cg-cool-gray: #8B8BA3; --cg-light-gray: #E8E8F0; --cg-off-white: #F8F8FC; --cg-white: #FFFFFF; --cg-success: #22C55E; --cg-warning: #F59E0B; --cg-error: #EF4444; --cg-info: #3B82F6; /* derived shades, blue and coral mixed against charcoal or white — no new hues */ --cg-blue-press: #24266F; --cg-blue-hover: #282A7E; --cg-blue-tint: #EDEDF7; --cg-coral-press: #DA4E33; --cg-coral-hover: #E85940; --cg-coral-tint: #FEEDE9; --cg-success-tint: #E7F8EE; --cg-warning-tint: #FEF3E2; --cg-error-tint: #FDECEC; --cg-info-tint: #EAF2FE; /* the text colours the design system uses ON the tints (they pass 4.5:1 on white too) */ --fg-success: #158244; --fg-warning: #96620A; --fg-error: #B32626; --fg-info: #1D5FCB; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-data: 'Space Grotesk', var(--font-sans); --size-h1: 36px; --size-h2: 28px; --size-h3: 22px; --size-body-lg: 18px; --size-body: 16px; --size-body-sm: 15px; --size-caption: 14px; --size-label: 13px; --leading-heading: 1.2; --leading-body: 1.55; --tracking-button: 0.02em; --tracking-label: 0.04em; --tracking-data: -0.01em; --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --sidebar-width: 232px; --topbar-height: 56px; --control-height: 38px; --control-height-sm: 30px; /* tool sizes, not marketing sizes (research §9 item 14) — 24px was the website value */ --page-gutter: 16px; --card-padding: 16px; /* row density — three steps the person picks; quoteiq.js stores the choice on */ --row-h: 36px; --row-pad: 12px; --row-text: 14px; --row-head: 32px; --radius-control: 6px; --radius-button: 8px; --radius-card: 10px; --radius-pill: 999px; --border-hairline: 1px solid var(--cg-light-gray); --border-input: var(--cg-cool-gray); --focus-ring: 0 0 0 2px var(--cg-white), 0 0 0 4px var(--cg-blue); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-overlay: 0 12px 32px rgba(26, 26, 46, 0.18); --ease: cubic-bezier(0.2, 0, 0.2, 1); --duration-fast: 90ms; --duration: 140ms; /* a heading is structure, not an action (research §3.3) — ink, never brand */ --text-heading: var(--cg-charcoal); --text-body: var(--cg-charcoal); --text-secondary: var(--cg-slate); --text-tertiary: var(--cg-cool-gray); --text-link: var(--cg-charcoal); /* links are ink with an underline; blue arrives on hover/focus as feedback */ --surface-page: var(--cg-off-white); --surface-card: var(--cg-white); --surface-sunken: var(--cg-off-white); --surface-row-hover: var(--cg-off-white); --surface-row-selected: var(--cg-blue-tint); --surface-disabled: var(--cg-light-gray); } html[data-density="comfortable"] { --row-h: 44px; --row-pad: 14px; --row-text: 15px; --row-head: 34px; } html[data-density="tight"] { --row-h: 30px; --row-pad: 10px; --row-text: 13px; --row-head: 28px; } /* ---------- element defaults ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--size-body); line-height: var(--leading-body); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--text-heading); line-height: var(--leading-heading); margin: 0; font-weight: 600; } h1 { font-size: var(--size-h3); } h2 { font-size: var(--size-body-lg); margin: var(--space-7) 0 var(--space-4); } h3 { font-size: var(--size-body); font-weight: 500; margin: var(--space-6) 0 var(--space-3); } p { margin: 0 0 var(--space-5); max-width: 78ch; } a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--cg-blue); } small, .muted { font-size: var(--size-caption); color: var(--text-secondary); } code, .figure, .num, td.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-data); } td.num, th.num { text-align: right; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); } pre { white-space: pre-wrap; font-family: var(--font-data); font-size: var(--size-caption); } hr { border: 0; border-top: var(--border-hairline); margin: var(--space-6) 0; } /* ---------- the frame: sidebar + top bar + banner + content (01_frame) ---------- */ .qi { display: flex; min-height: 100vh; background: var(--surface-page); } .qi-side { width: var(--sidebar-width); flex: 0 0 auto; display: flex; flex-direction: column; background: var(--cg-blue); color: var(--cg-white); position: sticky; top: 0; height: 100vh; } .qi-brand { padding: 18px var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: 6px; } .qi-brand .logo { max-width: 150px; max-height: 40px; display: block; } .qi-brand .company { font-size: var(--size-caption); font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.86); } .qi-brand .product { font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cg-coral); font-weight: 600; } .qi-nav { list-style: none; margin: 0; padding: 0 var(--space-4); display: flex; flex-direction: column; gap: 2px; flex: 1; } .qi-nav a { display: flex; align-items: center; gap: var(--space-4); padding: 9px 12px; border-radius: var(--radius-control); color: rgba(255,255,255,0.78); text-decoration: none; font-size: var(--size-body-sm); transition: background var(--duration-fast) var(--ease); } .qi-nav a:hover { background: rgba(255,255,255,0.07); color: var(--cg-white); } .qi-nav a.on { background: rgba(255,255,255,0.14); color: var(--cg-white); font-weight: 600; } .qi-nav a .ph { font-size: 18px; } .qi-nav a span { flex: 1; } .qi-nav a .count { flex: 0 0 auto; font-family: var(--font-data); font-size: var(--size-label); font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.7); } .qi-nav a.on .count { color: var(--cg-white); } /* a group's heading (2026-08-30): a word above its items, never a link, nothing to open or close */ .qi-nav .group { margin-top: var(--space-5); padding: 0 12px 4px; font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.5); } .qi-side-foot { padding: var(--space-5) var(--space-6); border-top: 1px solid rgba(255,255,255,0.14); font-size: var(--size-caption); color: rgba(255,255,255,0.72); display: flex; flex-direction: column; gap: 10px; } .qi-side-foot .btn { align-self: flex-start; } /* The collapsed left menu (OWNER_RULINGS_2026-09-03 C6, built 2026-09-04): the button under the items shrinks the sidebar to its icons; each link's title is the name a hover shows; the count rides the icon as a small badge; a group's heading becomes a thin line; the store's name in the foot goes. html.nav-folded is put on before the first paint by the one-line script in the page head (web.ts) and toggled by quoteiq.js, which remembers it in the browser. Desktop only — under 800px the sidebar is the phone drawer and none of this applies. No slide: nothing to freeze (T21). */ .qi-fold { margin: var(--space-3) var(--space-4) var(--space-4); height: auto; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-4); padding: 9px 12px; border: 0; border-radius: var(--radius-control); background: transparent; color: rgba(255,255,255,0.6); font-family: var(--font-sans); font-size: var(--size-caption); font-weight: 500; letter-spacing: 0; cursor: pointer; text-align: left; } .qi-fold:hover { background: rgba(255,255,255,0.07); color: var(--cg-white); } .qi-fold .ph { font-size: 18px; } .qi-fold .narrow { display: none; } @media (min-width: 801px) { html.nav-folded .qi-side { width: 64px; } html.nav-folded .qi-brand { min-height: var(--topbar-height); padding: 0; } html.nav-folded .qi-brand .logo, html.nav-folded .qi-brand .company, html.nav-folded .qi-brand .product { display: none; } html.nav-folded .qi-nav { padding: 0 var(--space-3); } html.nav-folded .qi-nav a { justify-content: center; padding: 9px 0; position: relative; } html.nav-folded .qi-nav a span:not(.count) { display: none; } html.nav-folded .qi-nav a .count { position: absolute; top: 1px; right: 3px; font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 999px; background: rgba(255,255,255,0.18); color: var(--cg-white); } html.nav-folded .qi-nav .group { height: 0; padding: 0; margin: var(--space-4) 8px 0; border-top: 1px solid rgba(255,255,255,0.14); overflow: hidden; color: transparent; font-size: 0; } html.nav-folded .qi-fold { justify-content: center; padding: 9px 0; margin: var(--space-3) var(--space-3) var(--space-4); } html.nav-folded .qi-fold span, html.nav-folded .qi-fold .wide { display: none; } html.nav-folded .qi-fold .narrow { display: inline; } html.nav-folded .qi-side-foot { display: none; } } .qi-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .qi-top { height: var(--topbar-height); flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--page-gutter); background: var(--surface-card); border-bottom: var(--border-hairline); } .qi-top .ph-storefront { font-size: 17px; color: var(--cg-slate); } .qi-top .store { font-size: var(--size-body-sm); font-weight: 600; color: var(--text-body); } .qi-top form.store { display: inline-flex; align-items: center; gap: var(--space-3); } .qi-top form.store .label { font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); font-weight: 400; } .qi-top form.store select { height: var(--control-height-sm); padding: 0 8px; border: var(--border-hairline); border-radius: var(--radius-control); background: var(--surface-card); font: inherit; font-weight: 600; color: var(--text-body); cursor: pointer; } .qi-top .spacer { flex: 1; } .qi-top .who { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--size-caption); color: var(--text-secondary); white-space: nowrap; } .qi-top .who b, .qi-top .who a.name { color: var(--text-body); font-weight: 600; text-decoration: none; } .qi-top .who a.name:hover { text-decoration: underline; } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--cg-light-gray); color: var(--cg-slate); display: inline-flex; align-items: center; justify-content: center; font-size: var(--size-label); font-weight: 600; flex: 0 0 auto; } .qi-menu, .qi-top-brand, .qi-scrim { display: none; } .qi-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .qi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--page-gutter) var(--space-5); } .qi-head .meta { margin-top: 4px; font-size: var(--size-caption); color: var(--text-secondary); } .qi-head .actions { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; } .qi-body { padding: 0 var(--page-gutter) var(--space-8); } .qi-body > p:last-child a { text-decoration: none; } .qi-body .msg, .qi-body .warn, .qi-body .bad, .qi-body .good { margin-bottom: var(--space-5); } /* the feed banner: full width, square, directly under the bar, the loudest thing on the page. A healthy feed renders nothing at all. */ .qi-banner { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); padding: 14px var(--page-gutter); } .qi-banner.stale { background: var(--cg-warning-tint); border-bottom: 1px solid var(--cg-warning); box-shadow: inset 0 3px 0 var(--cg-warning); } .qi-banner.never { background: var(--cg-error-tint); border-bottom: 1px solid var(--cg-error); box-shadow: inset 0 3px 0 var(--cg-error); } .qi-banner .ph-fill { font-size: 22px; } .qi-banner.stale .ph-fill { color: var(--cg-warning); } .qi-banner.never .ph-fill { color: var(--cg-error); } .qi-banner .words { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-4); } .qi-banner .title { font-size: var(--size-body); font-weight: 600; } .qi-banner.stale .title { color: var(--fg-warning); } .qi-banner.never .title { color: var(--fg-error); } .qi-banner .body { font-size: var(--size-caption); color: var(--text-body); } /* the read-only note: the words always travel with the greyed state */ .viewonly { display: inline-flex; align-items: center; gap: var(--space-3); padding: 5px 10px; border-radius: var(--radius-pill); background: var(--cg-light-gray); color: var(--cg-slate); font-size: var(--size-caption); font-weight: 600; white-space: nowrap; } .viewonly .ph { font-size: 15px; } /* ---------- Button ---------- */ .btn, button, input[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); height: var(--control-height); padding: 0 24px; border-radius: var(--radius-button); font-family: var(--font-sans); font-size: var(--size-body-sm); font-weight: 600; letter-spacing: var(--tracking-button); cursor: pointer; border: 2px solid transparent; background: var(--cg-blue); color: var(--cg-white); white-space: nowrap; text-decoration: none; transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); } .btn:hover, button:hover { background: var(--cg-blue-hover); color: var(--cg-white); } .btn:active, button:active { background: var(--cg-blue-press); } .btn.sm, button.sm, form.inline button, td button, .qi-top button, .qi-side-foot button { height: var(--control-height-sm); padding: 0 14px; font-size: var(--size-caption); } .btn.secondary, button.secondary { background: transparent; color: var(--text-body); border-color: var(--cg-cool-gray); } .btn.secondary:hover, button.secondary:hover { background: var(--surface-row-hover); color: var(--text-body); border-color: var(--cg-slate); } .btn.ghost, button.ghost { background: transparent; color: var(--text-body); } .btn.ghost:hover, button.ghost:hover { background: var(--surface-row-hover); color: var(--text-body); } .btn.accent, button.accent { background: var(--cg-coral); } .btn.accent:hover, button.accent:hover { background: var(--cg-coral-hover); } .btn.danger, button.danger { background: var(--cg-error); } .btn[aria-disabled=true], button:disabled { background: var(--surface-disabled); color: var(--text-tertiary); cursor: not-allowed; border-color: transparent; } .btn .ph, button .ph { font-size: 17px; } .btn.sm .ph, button.sm .ph { font-size: 15px; } form.inline { display: inline; } /* IconButton — size follows the row density inside a table */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: var(--radius-control); border: 1px solid transparent; background: transparent; color: var(--cg-slate); text-decoration: none; } .icon-btn:hover { background: var(--cg-blue-tint); color: var(--cg-slate); } .icon-btn .ph { font-size: 16px; } html[data-density="comfortable"] td .icon-btn { width: 34px; height: 34px; } html[data-density="comfortable"] td .icon-btn .ph { font-size: 18px; } html[data-density="tight"] td .icon-btn { width: 24px; height: 24px; } html[data-density="tight"] td .icon-btn .ph { font-size: 14px; } /* ---------- forms: Input, Select, Textarea, Field ---------- */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea { font-family: var(--font-sans); font-size: var(--size-body-sm); color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-input); border-radius: var(--radius-control); height: var(--control-height); padding: 0 10px; } textarea { height: auto; padding: 10px 12px; line-height: var(--leading-body); width: 100%; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border: 2px solid var(--cg-blue); box-shadow: none; } input[type=number], input.num { font-family: var(--font-data); text-align: right; font-variant-numeric: tabular-nums; } select { padding-right: 28px; cursor: pointer; } input:disabled, select:disabled, textarea:disabled, input[readonly] { background: var(--surface-disabled); color: var(--text-secondary); } label { font-size: var(--size-caption); color: var(--text-secondary); } .search { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding: 0 10px; background: var(--surface-card); border: 1px solid var(--border-input); border-radius: var(--radius-control); } .search:focus-within { border: 2px solid var(--cg-blue); } .search .ph { font-size: 16px; color: var(--cg-cool-gray); } .search input { border: 0; height: auto; padding: 0; flex: 1; min-width: 0; background: transparent; } .search input:focus { border: 0; } /* the filter bar over a table: selects that submit on change, a sort note, the density control */ .filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-5) 0 var(--space-4); } .filters .spacer { flex: 1; } .filters .note { font-size: var(--size-label); color: var(--text-tertiary); white-space: nowrap; } .filters select { width: 168px; } .filters select.narrow { width: 140px; } .chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: 0 0 var(--space-5); } .chips .label { font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--text-secondary); margin-right: 4px; } /* DensityControl: three buttons, the chosen one blue-tinted */ .density { display: inline-flex; height: var(--control-height); padding: 2px; gap: 2px; background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-control); flex: 0 0 auto; } .density button { height: auto; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font-size: var(--size-caption); font-weight: 400; gap: var(--space-2); } .density button:hover { background: var(--cg-blue-tint); color: var(--cg-blue); } .density button[aria-pressed=true] { background: var(--surface-row-selected); color: var(--cg-blue); font-weight: 600; } .density button .ph { font-size: 15px; } /* ---------- Tabs ---------- */ .tabs { display: flex; flex-wrap: wrap; gap: var(--space-6); border-bottom: var(--border-hairline); padding: 0 var(--page-gutter); } /* wraps on a phone: six tabs (Do today, job 9) do not fit 390 px on one line */ .tabs a { padding: 10px 0 9px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: var(--size-body-sm); color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3); } .tabs a.on { border-bottom-color: var(--cg-blue); color: var(--cg-blue); font-weight: 600; } .tabs a .count { font-family: var(--font-data); font-size: var(--size-label); color: var(--text-tertiary); } /* ---------- Card ---------- */ .card { background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--card-padding); } .card.flush { padding: 0; overflow: hidden; } .card > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 12px var(--card-padding); border-bottom: var(--border-hairline); margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--space-5); } .card > header h3 { margin: 0; font-size: var(--size-body-lg); font-weight: 600; color: var(--text-heading); } /* ---------- DataTable ---------- */ .tbl-wrap { width: 100%; overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: var(--row-text); } th { text-align: left; padding: 0 var(--row-pad); height: var(--row-head); background: var(--surface-sunken); border-bottom: var(--border-hairline); color: var(--text-secondary); font-size: var(--size-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; position: sticky; top: 0; z-index: 1; } th .ph { font-size: 11px; color: var(--cg-cool-gray); vertical-align: middle; } td { padding: 0 var(--row-pad); height: var(--row-h); border-bottom: var(--border-hairline); color: var(--text-body); vertical-align: middle; white-space: nowrap; background: var(--surface-card); } td.wrap { white-space: normal; } tr[data-href] { cursor: pointer; } tbody tr:hover td, tr[data-href]:hover td { background: var(--surface-row-hover); } tr.selected td { background: var(--surface-row-selected); } tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--cg-blue); } td .sub, .two .sub { display: block; font-size: 13px; color: var(--text-tertiary); line-height: 1.15; } .two { display: flex; flex-direction: column; line-height: 1.15; } html[data-density="tight"] .two { display: inline; } html[data-density="tight"] .two .sub { display: inline; } html[data-density="tight"] .two .sub::before { content: " · "; } td.empty { padding: var(--space-8); text-align: center; color: var(--text-tertiary); white-space: normal; } /* the older screens draw their own small tables inside the body; keep them readable without the card */ .qi-body > table, .qi-body form table { width: auto; margin: var(--space-4) 0; } .qi-body > table td, .qi-body form table td { white-space: normal; } /* ---------- StatusPill: a word beside its colour, never a bare dot; hold carries the reason ---------- */ .pill { display: inline-flex; align-items: baseline; gap: var(--space-3); min-width: 0; max-width: 100%; } .pill .word { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 2px 9px; border-radius: var(--radius-pill); font-size: var(--size-label); font-weight: 600; } .pill .word::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 1; } .pill .why { font-size: var(--size-caption); color: var(--text-secondary); white-space: normal; line-height: 1.25; } .pill.sent .word { background: var(--cg-success-tint); color: var(--fg-success); } .pill.sent .word::before { background: var(--cg-success); } .pill.hold .word { background: var(--cg-warning-tint); color: var(--fg-warning); } .pill.hold .word::before { background: var(--cg-warning); } .pill.blocked .word { background: var(--cg-error-tint); color: var(--fg-error); } .pill.blocked .word::before { background: var(--cg-error); } .pill.note .word { background: var(--cg-info-tint); color: var(--fg-info); } .pill.note .word::before { background: var(--cg-info); } .pill.readonly .word, .pill.draft .word { background: var(--cg-light-gray); color: var(--cg-slate); } .pill.readonly .word::before, .pill.draft .word::before { background: var(--cg-cool-gray); } html[data-density="tight"] .pill .why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tag: how a message left */ .tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px 10px; border-radius: var(--radius-control); border: var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-size: var(--size-caption); white-space: nowrap; } .tag .ph { font-size: 13px; color: var(--cg-slate); } /* ---------- InlineMessage (and the older .warn/.bad/.good boxes, same look) ---------- */ .msg, .warn, .bad, .good { display: flex; gap: var(--space-4); align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-control); font-size: var(--size-caption); line-height: var(--leading-body); color: var(--text-body); } .msg .ph-fill { font-size: 18px; margin-top: 1px; flex: 0 0 auto; } .msg .text { flex: 1; min-width: 0; } .msg .title { display: block; font-size: var(--size-body-sm); font-weight: 600; margin-bottom: 2px; } .msg .action { flex: 0 0 auto; } .msg.info { background: var(--cg-info-tint); border: 1px solid var(--cg-info); } .msg.info .title, .msg.info .ph-fill { color: var(--fg-info); } .msg.info .ph-fill { color: var(--cg-info); } .msg.warning, .warn { background: var(--cg-warning-tint); border: 1px solid var(--cg-warning); } .msg.warning .title { color: var(--fg-warning); } .msg.warning .ph-fill { color: var(--cg-warning); } .msg.error, .bad { background: var(--cg-error-tint); border: 1px solid var(--cg-error); } .msg.error .title { color: var(--fg-error); } .msg.error .ph-fill { color: var(--cg-error); } .msg.success, .good { background: var(--cg-success-tint); border: 1px solid var(--cg-success); } .msg.success .title { color: var(--fg-success); } .msg.success .ph-fill { color: var(--cg-success); } .block { background: var(--surface-sunken); border: var(--border-hairline); padding: var(--space-5); font-family: var(--font-data); font-size: var(--size-caption); white-space: pre-wrap; line-height: 1.6; } .lock { color: var(--text-secondary); font-size: var(--size-label); } /* EmptyState */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-9) var(--space-7); text-align: center; } .empty-state .ph { font-size: 28px; color: var(--cg-cool-gray); } .empty-state .title { font-size: var(--size-body-sm); font-weight: 600; color: var(--text-body); } .empty-state .words { font-size: var(--size-caption); color: var(--text-secondary); max-width: 46ch; } /* ---------- the sealed-record panel (05 slide-over / 06 page) ---------- */ .scrim { position: fixed; inset: 0; background: rgba(26,26,46,.45); z-index: 40; display: block; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw; background: var(--surface-card); box-shadow: var(--shadow-overlay); z-index: 41; display: flex; flex-direction: column; } .drawer .record { flex: 1; overflow: auto; } .record-head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: var(--border-hairline); } .record-head .ref { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--text-heading); } .record-head .kept { font-size: var(--size-caption); color: var(--text-secondary); } .record-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .record-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); } .facts { display: grid; grid-template-columns: 132px 1fr; gap: 10px var(--space-5); font-size: 14px; line-height: 1.45; } .facts .k { color: var(--text-secondary); } .facts .v { min-width: 0; overflow-wrap: anywhere; } .section-label { font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--text-secondary); } .section { display: flex; flex-direction: column; gap: var(--space-3); } .copy-box { border: var(--border-hairline); background: var(--surface-sunken); padding: var(--space-5); font-size: 14px; line-height: 1.6; white-space: pre-wrap; font-family: var(--font-sans); } .events { display: flex; flex-direction: column; } .events .ev { display: flex; gap: 16px; padding: 8px 0; font-size: 14px; align-items: baseline; border-top: var(--border-hairline); } .events .ev:first-child { border-top: 0; } .events .at { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-secondary); width: 72px; flex: 0 0 auto; } .events .vendor { font-family: var(--font-data); font-size: 13px; color: var(--text-secondary); line-height: 1.45; display: block; margin-top: 4px; } .html-as-sent { border: var(--border-hairline); padding: 10px; background: #fff; overflow: auto; } /* ⛔ PriceBlock — the legal price block. No brand colour, no accent, no icon, no radius, no shadow. Charcoal on white, hairline rules, the doc-fee-inclusive figure at least as heavy as the total. */ .price-block { border: 1px solid #E8E8F0; background: #FFFFFF; padding: 20px; max-width: 520px; font-family: 'Inter', sans-serif; color: #1A1A2E; } .price-block .row { display: flex; justify-content: space-between; gap: 24px; padding: 6px 0; font-size: 15px; } .price-block .row .n { font-family: 'Space Grotesk', monospace; font-variant-numeric: tabular-nums; text-align: right; } .price-block .row.total { border-top: 1px solid #E8E8F0; margin-top: 8px; padding-top: 10px; font-weight: 600; font-size: 17px; } .price-block .row.incl { font-weight: 700; font-size: 17px; } .price-block .foot { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #4A4A68; } /* ---------- pages with no frame: log in, forgot, reset, errors (design_html/02_login.html) ---------- The lockup sits above one 420px card on the page colour. Inside the card everything is spaced by one 18px gap; forms space their own rows at 16px. The heading is small (17px) — the lockup is the only big thing on the page. */ .bare { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px 96px; } .bare .auth { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; } .bare .brand { display: flex; flex-direction: column; gap: 6px; align-items: center; padding-bottom: 6px; } .bare .brand .product { font-size: 27px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--cg-blue); } .bare .brand .company { font-size: var(--size-label); color: var(--cg-slate); } .bare .brand .company b { font-weight: 600; } .bare .card { padding: 28px; display: flex; flex-direction: column; gap: 18px; } .bare .card > *, .bare form > * { margin: 0; } .bare h1 { font-size: 17px; font-weight: 600; color: var(--cg-charcoal); } .bare .sub { font-size: var(--size-caption); color: var(--cg-slate); line-height: 1.55; margin-top: -12px; } .bare .msg, .bare .warn, .bare .bad, .bare .good { margin-bottom: 0; } .bare form { display: flex; flex-direction: column; gap: 16px; } .bare .field { display: flex; flex-direction: column; gap: 6px; } .bare .field > .lblrow, .bare .field > label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--size-label); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.01em; } .bare .pw-toggle { height: auto; padding: 0; border: 0; background: none; color: var(--cg-blue); font-size: var(--size-label); font-weight: 600; cursor: pointer; } .bare .pw-toggle:hover { background: none; color: var(--cg-blue); text-decoration: underline; } .bare input[type=text], .bare input[type=email], .bare input[type=password] { width: 100%; } .bare .pw-help { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--size-label); color: var(--cg-slate); } .bare .pw-help .count { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--cg-cool-gray); white-space: nowrap; } .bare .field-err { font-size: var(--size-caption); color: var(--fg-error); line-height: 1.5; } .bare form button[type=submit], .bare form > p > button { width: 100%; } .bare .lock-line { font-size: var(--size-label); color: var(--cg-slate); text-align: center; } .bare .lock-line .clock { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--cg-charcoal); } .bare .links { display: flex; gap: 18px; justify-content: center; font-size: var(--size-caption); } .bare .links a { font-weight: 500; } /* ---------- phone width (≤ 800px): the rail becomes a drawer over a 45% charcoal scrim ---------- */ @media (max-width: 800px) { .qi-side { position: fixed; left: 0; top: 0; bottom: 0; width: 258px; transform: translateX(-100%); transition: transform var(--duration) var(--ease); z-index: 51; box-shadow: none; } html.nav-open .qi-side { transform: none; box-shadow: var(--shadow-overlay); } html.nav-open .qi-scrim { display: block; position: fixed; inset: 0; background: rgba(26,26,46,.45); z-index: 50; } .qi-fold { display: none; } /* the drawer never folds; the phone's menu is the drawer itself (C6) */ .qi-nav a { min-height: 44px; } .qi-menu { display: inline-flex; width: 38px; height: 38px; padding: 0; border: 0; background: transparent; color: var(--cg-slate); border-radius: var(--radius-control); } .qi-menu:hover { background: var(--surface-row-hover); color: var(--cg-slate); } .qi-menu .ph { font-size: 22px; } .qi-top { padding: 0 12px; gap: var(--space-4); } .qi-top .ph-storefront, .qi-top > .store, .qi-top > form.store, .qi-top .who .name, .qi-top .who .role, .qi-top .viewonly, .qi-top > form.logout { display: none; } .msg { flex-wrap: wrap; } .msg .action { width: 100%; } .qi-top-brand { display: flex; flex: 1; min-width: 0; flex-direction: column; } .qi-top-brand .product { font-size: var(--size-caption); font-weight: 600; color: var(--cg-blue); } .qi-top-brand .store { font-size: var(--size-label); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qi-banner { align-items: flex-start; padding: 12px 16px; } .qi-banner .words { flex-direction: column; align-items: flex-start; } .qi-banner .btn { display: none; } .qi-head, .qi-body { padding-left: 16px; padding-right: 16px; } .tabs { padding: 0 16px; gap: var(--space-5); } .drawer { width: 100vw; } .facts { grid-template-columns: 100px 1fr; } } /* ---------- small additions the built screens need ---------- */ .late { color: var(--fg-error); } /* a waiting time past the store's reminder line — #B32626, 6.52:1 on white */ .phone-only { display: none; } .qi-side-foot button.reversed { border-color: rgba(255,255,255,0.5); color: var(--cg-white); background: transparent; } .qi-side-foot button.reversed:hover { background: rgba(255,255,255,0.1); } .record-page { max-width: 760px; } .record-body .actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .ellipsis { display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .ellipsis a { text-decoration: none; color: var(--text-body); } .ellipsis a:hover { text-decoration: underline; } td .figure { font-size: inherit; } .qi-body form .filters, .qi-body .filters { padding-top: 0; } @media (max-width: 800px) { .qi-side-foot .phone-only { display: block; } } /* column widths the two designed tables need so the words that matter stay readable (design: Status 208, Source 108, Delivery 320) */ td.status { min-width: 210px; } td.source, td.customer .sub, td.to .sub, td.to { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } td.to { max-width: 220px; } td.car { min-width: 190px; } td.delivery { min-width: 250px; } td.delivery .sub.figure { display: block; max-width: 296px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- held leads: a cause card is a
whose summary is the card face (07_held) ---------- */ .cause-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .cause-section > p { margin: -4px 0 2px; max-width: 78ch; font-size: 14px; } .cause-head { display: flex; align-items: baseline; gap: 10px; } .cause-head h2 { margin: 0; font-size: 16px; color: var(--text-body); } details.cause { background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; } details.cause > summary { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 20px; padding: 16px 20px; cursor: pointer; align-items: flex-start; } details.cause > summary::-webkit-details-marker { display: none; } details.cause > summary:hover { background: var(--surface-row-hover); } .cause-count { flex: 0 0 76px; display: flex; flex-direction: column; } .cause-count .figure { font-size: 28px; font-weight: 600; line-height: 1; color: var(--text-body); } .cause-body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .cause-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .cause-line .sentence { font-size: 16px; font-weight: 600; line-height: 1.35; } .code { flex-shrink: 0; font-family: var(--font-data); font-size: 12px; letter-spacing: 0.02em; color: var(--text-tertiary); background: var(--cg-off-white); border: var(--border-hairline); border-radius: 4px; padding: 1px 6px; white-space: nowrap; } .newcode { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--cg-coral-press); background: var(--cg-coral-tint); border-radius: 999px; padding: 2px 8px; } .fixedby { display: flex; align-items: baseline; gap: 7px; font-size: 14px; color: var(--text-secondary); } .fixedby .ph { font-size: 15px; position: relative; top: 2px; flex-shrink: 0; } .timing { font-size: 13px; } .cause-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; } details.cause .toggle .hide, details.cause[open] .toggle .show { display: none; } details.cause[open] .toggle .hide { display: inline; } details.cause[open] .toggle .ph { transform: rotate(180deg); } .cause-leads { border-top: var(--border-hairline); } /* The Held lead tables fit the screen: a fixed layout with the long cells wrapping, so "Open lead" is never off the right edge and nothing scrolls sideways at 1440 (the Held walk, 2026-08-27: the flat view scrolled 150px). */ table.held-tbl { table-layout: fixed; width: 100%; } table.held-tbl td, table.held-tbl th { overflow: hidden; } table.held-tbl th:nth-child(1), table.held-tbl td:nth-child(1) { width: 110px; } table.held-tbl td:nth-child(2) .two, table.held-tbl td:nth-child(2) .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.held-tbl th:nth-child(3), table.held-tbl td:nth-child(3) { width: 160px; } table.held-tbl th:nth-child(4), table.held-tbl td:nth-child(4) { width: 96px; } table.held-tbl th:nth-child(5), table.held-tbl td:nth-child(5) { width: 90px; } table.held-tbl th:last-child, table.held-tbl td:last-child { width: 132px; } /* the "Open lead" button is 103px wide plus the cell's padding */ table.held-tbl.flat th:nth-child(6), table.held-tbl.flat td:nth-child(6) { width: 180px; } table.held-tbl.flat th:nth-child(7), table.held-tbl.flat td:nth-child(7) { width: 190px; font-size: 12px; } table.held-tbl:not(.flat) th:nth-child(6), table.held-tbl:not(.flat) td:nth-child(6) { width: 230px; font-size: 12px; } table.held-tbl td.wrap { overflow-wrap: normal; word-break: keep-all; } /* Sent quotes: seven columns that fit 1440 with the price on the screen (the Sent walk, 2026-08-27) */ table.sent-tbl { table-layout: fixed; width: 100%; } table.sent-tbl td, table.sent-tbl th { overflow: hidden; } table.sent-tbl th:nth-child(1), table.sent-tbl td:nth-child(1) { width: 84px; } table.sent-tbl th:nth-child(2), table.sent-tbl td:nth-child(2) { width: 150px; } table.sent-tbl td:nth-child(2) .two, table.sent-tbl td:nth-child(2) .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.sent-tbl th:nth-child(3), table.sent-tbl td:nth-child(3) { width: 190px; } table.sent-tbl td.wrap { white-space: normal; overflow-wrap: anywhere; } table.sent-tbl td .pill { flex-wrap: wrap; row-gap: 2px; } /* the why drops under the word instead of wrapping four deep */ table.sent-tbl td.delivery .sub.figure { max-width: 100%; } table.sent-tbl th:nth-child(5), table.sent-tbl td:nth-child(5) { width: 124px; } table.sent-tbl th:nth-child(6), table.sent-tbl td:nth-child(6) { width: 108px; font-size: 13px; } table.sent-tbl th:nth-child(7), table.sent-tbl td:nth-child(7) { width: 172px; } table.sent-tbl td:nth-child(7) .figure { font-size: 12px; } table.sent-tbl td:nth-child(7) .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Quote records (/records): six fixed columns that fit 1440, the fingerprint last */ table.records-tbl { table-layout: fixed; width: 100%; } table.records-tbl td, table.records-tbl th { overflow: hidden; } table.records-tbl th:nth-child(1), table.records-tbl td:nth-child(1) { width: 96px; } table.records-tbl th:nth-child(2), table.records-tbl td:nth-child(2) { width: 236px; } table.records-tbl td.wrap { white-space: normal; overflow-wrap: anywhere; } table.records-tbl th:nth-child(4), table.records-tbl td:nth-child(4) { width: 118px; } table.records-tbl th:nth-child(5), table.records-tbl td:nth-child(5) { width: 232px; } table.records-tbl td:nth-child(5) .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.records-tbl th:nth-child(6), table.records-tbl td:nth-child(6) { width: 118px; } table.records-tbl .fp { font-size: 12px; } .noalert { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-error); font-weight: 600; } .noalert .ph-fill { font-size: 15px; color: var(--cg-error); } .density a.seg { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 4px; color: var(--text-secondary); text-decoration: none; font-size: var(--size-caption); font-weight: 600; } .density a.seg.on { background: var(--surface-row-selected); color: var(--cg-blue); } .density a.seg .ph { font-size: 15px; } /* ---------- car flags: the load card and the two severity cards (09_cars_flags) ---------- */ .load-top { display: flex; align-items: flex-start; gap: 24px; padding: 16px 24px; border-bottom: var(--border-hairline); flex-wrap: wrap; } .load-what { min-width: 280px; flex: 1; display: flex; flex-direction: column; gap: 7px; } .load-label { display: flex; align-items: center; gap: 10px; } .load-what .file { font-size: var(--size-body-sm); overflow-wrap: anywhere; } .load-counts { display: flex; gap: 32px; padding-top: 2px; } .load-counts > div { display: flex; flex-direction: column; gap: 3px; min-width: 96px; } .figure.big { font-size: 22px; font-weight: 600; color: var(--text-heading); } .load-reject { padding: 14px 24px; display: flex; gap: 10px; align-items: flex-start; background: var(--surface-sunken); font-size: var(--size-caption); line-height: var(--leading-body); } .load-reject .section-label { flex-shrink: 0; padding-top: 2px; } .sev-head { display: flex; align-items: center; gap: 12px; padding: 13px 24px; border-bottom: var(--border-hairline); flex-wrap: wrap; } .sev-head h2 { margin: 0; font-size: var(--size-body-lg); } .sev-head .spacer { flex: 1; min-width: 20px; } /* the Cars screen's table: fixed columns measured at 1440 (the Cars walk), the flag and the feed's words wrapping, the detail column taking what is left */ table.flags { table-layout: fixed; width: 100%; } table.flags td.flag-cell, table.flags td.veh { white-space: normal; } table.flags td.flag-cell .two, table.flags td.veh .two { line-height: 1.15; } /* the Stores list (13_stores): five measured columns, the store's name taking what is left; the name and the feed pill wrap instead of scrolling the card sideways */ /* Users (the Users walk, 2026-08-28): seven measured columns so nothing scrolls sideways at 1440 (before: 295 px, the Actions column off the card), and the design's small link-style row buttons in place of full ghost buttons */ table.invoices { table-layout: fixed; width: 100%; } table.invoices th, table.invoices td { padding-left: 8px; padding-right: 8px; } table.invoices td.by { white-space: normal; } table.invoices td.vehicle .two { min-width: 0; } table.invoices td.vehicle .two > span, table.invoices td.vehicle .two .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Factory options (the Factory options walk, 2026-08-28): seven measured columns so the row's boxes and its Save fit the card at 1440 (before: 1607 px in an 1135 px card, Save off the edge); the invoice's spelling ellipsised with the whole line on hover; a refused box red */ table.options { table-layout: fixed; width: 100%; } table.options th, table.options td { padding-left: 8px; padding-right: 8px; } table.options td .two { min-width: 0; } table.options td .two > span, table.options td .two .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.options td input[type=text], table.options td select { width: 100%; min-width: 0; } table.options td input.invalid { border-color: var(--cg-error); } table.options td.wrap { white-space: normal; } /* Model aliases (the walk, 2026-08-28): an auto-layout table ran 21 px past the card with one long evidence note; the columns are measured and the evidence wraps */ table.aliases { table-layout: fixed; width: 100%; } table.aliases th, table.aliases td { padding-left: 8px; padding-right: 8px; } table.aliases th { white-space: normal; line-height: 1.2; } table.aliases td.wrap { white-space: normal; overflow-wrap: anywhere; } table.aliases td .pill { flex-wrap: wrap; } table.users { table-layout: fixed; width: 100%; } table.users th, table.users td { padding: 0 8px; } table.users td.store, table.users td.last, table.users td.by { white-space: normal; } table.users td.person .two { min-width: 0; } table.users td.person .two > b, table.users td.person .two .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.users td.do .acts { display: inline-flex; flex-wrap: wrap; gap: 2px 4px; justify-content: flex-end; max-width: 100%; } table.users td.do .acts button { height: 26px; padding: 0 8px; font-size: 13px; font-weight: 500; background: transparent; color: var(--text-link); border: 1px solid transparent; border-radius: var(--radius-button); } table.users td.do .acts button:hover { background: var(--cg-blue-tint); color: var(--text-link); } table.users td.do .you { display: block; font-size: 13px; white-space: normal; text-align: right; line-height: 1.2; } table.stores { table-layout: fixed; width: 100%; } table.stores td.name, table.stores td.feed, table.stores td.spam { white-space: normal; } /* the spam cell's "look at this store" line wraps in its 160 px (the Stores walk, 2026-09-01: nowrap pushed the table sideways) */ table.stores td.name .store-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; line-height: 1.2; } table.stores td.name .sub { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 2px; } .filters label.search { width: 260px; flex-shrink: 0; } .filters label.search input { border: 0; outline: 0; background: transparent; width: 100%; font: inherit; } th a.sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } th a.sort.on { color: var(--cg-blue); } .btn.disabled { pointer-events: none; background: transparent; color: var(--text-tertiary); border-color: var(--cg-light-gray); } /* ---------- the pricing grid (08_pricing_grid) ---------- */ .strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; } .strip > div { padding: 14px 16px; border-left: var(--border-hairline); font-size: 13px; line-height: 1.4; } .strip > div:first-child { border-left: 0; } .strip .step { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: var(--size-body-sm); } .strip .step .figure { font-size: 13px; font-weight: 600; color: var(--text-body); } .strip .noquote { background: var(--cg-error-tint); color: var(--fg-error); } .strip .noquote .figure, .strip .noquote b { color: var(--fg-error); } .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--size-label); font-weight: 600; white-space: nowrap; } .badge.neutral { background: var(--cg-light-gray); color: var(--cg-slate); } .badge.brand { background: var(--cg-blue-tint); color: var(--cg-blue); } .badge.info { background: var(--cg-info-tint); color: var(--fg-info); } .badge.warning { background: var(--cg-warning-tint); color: var(--fg-warning); } .outside { color: var(--fg-warning); } .picked { display: inline-block; background: var(--cg-blue-tint); color: var(--cg-blue); padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; } .typed { display: inline-block; border: 1px dashed var(--border-input); color: var(--text-secondary); padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; } .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .grid2.wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: start; gap: 24px; } .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: var(--size-label); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.01em; } .field .hint { font-size: var(--size-caption); color: var(--text-tertiary); } .field .error { font-size: var(--size-caption); color: var(--fg-error); } .field .ro { font-size: var(--size-caption); color: var(--text-tertiary); } .field input[type=text], .field select, .field textarea { width: 100%; } /* Required, and wrong: a person must be able to tell a box that MUST be filled in from one that need not be, before the save is refused — and a refused box must be findable at a glance. */ .req { font-size: var(--size-caption); font-weight: 500; color: var(--text-tertiary); text-transform: none; letter-spacing: 0; } .field-wrong > label, .field-wrong .error { color: var(--fg-error); } .field-wrong input[type=text], .field-wrong select, .field-wrong textarea { border-color: var(--cg-error); box-shadow: 0 0 0 3px var(--cg-error-tint); } .field .error::before, .radios + .error::before, .section-label + .error::before { content: "\26A0"; margin-right: 6px; } .msg.error ul a { color: var(--fg-error); } /* "Set up by CognitGo": the plumbing, one level down. NN/g's progressive disclosure — show what everyone needs, defer the rest behind a clearly-labelled second level, and never a third. */ .setup-summary { cursor: pointer; font-size: var(--size-body-sm); color: var(--text-secondary); list-style: none; display: flex; align-items: center; gap: 8px; } .setup-summary::-webkit-details-marker { display: none; } .setup-summary::before { content: "\25B8"; color: var(--text-tertiary); transition: transform 120ms; } details[open] > .setup-summary::before { transform: rotate(90deg); } .setup-summary:hover { color: var(--text-body); } .radios { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; } .radios label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--size-body-sm); color: var(--text-body); } .sends { margin-top: 20px; padding: 16px; background: var(--surface-sunken); border: var(--border-hairline); border-radius: 8px; font-size: var(--size-body-sm); line-height: 1.5; } .sends .section-label { display: block; margin-bottom: 6px; } .hist { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: var(--border-hairline); font-size: var(--size-caption); } .hist > div:first-child { flex: 1; min-width: 0; } .savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 16px; padding: 16px var(--page-gutter); margin: 0 calc(-1 * var(--page-gutter)); background: var(--surface-card); border-top: var(--border-hairline); } .savebar .spacer { flex: 1; } button.danger-text { color: var(--fg-error); } button.danger-text:hover { background: var(--cg-error-tint); color: var(--fg-error); } /* ---------- the quote tool (04_quote_tool) ---------- */ .tool { display: flex; flex-direction: column; gap: 20px; max-width: 1180px; } .tool .card > header { margin-bottom: var(--space-5); } .k { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--text-tertiary); margin-bottom: 4px; } .lead-grid { display: grid; grid-template-columns: minmax(220px, 260px) minmax(240px, 1fr) minmax(240px, 300px); gap: 24px; align-items: start; } blockquote.wrote { margin: 0; border-left: 1px solid var(--border-subtle); padding: 0 0 0 14px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; } .tab-body { padding: 16px 24px 24px; } .tabs a { white-space: nowrap; } .thumb { width: 44px; height: 28px; object-fit: cover; border: var(--border-hairline); display: block; } .thumb.none { display: grid; place-items: center; font-size: 9px; color: var(--text-tertiary); } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; } .dashed { border: 1px dashed var(--border-input); border-radius: 10px; padding: 24px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); } .confirm { border: var(--border-hairline); border-radius: 10px; background: var(--surface-card); padding: 20px; } .confirm .src { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); } .confirm .src .ph { font-size: 16px; color: var(--cg-slate); } .grid2.tight { gap: 12px 20px; margin-bottom: 16px; font-size: 14px; } .grid2.tight .k { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; margin-bottom: 0; } .grid2.boxes { gap: 12px; } .box { border: 1px solid var(--border-input); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .box .figure.big { font-size: 18px; color: var(--text-body); } .basebox { display: flex; justify-content: space-between; align-items: baseline; border: var(--border-hairline); border-radius: 6px; padding: 10px 12px; margin-bottom: 6px; font-size: 14px; color: var(--text-secondary); } .basebox.on { border-color: var(--cg-blue); background: var(--cg-blue-tint); color: var(--text-body); font-weight: 600; } .basebox .figure { font-size: 15px; } .offer-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 30px; gap: 8px; align-items: center; padding: 6px 0; font-size: 14px; } .offer-row .figure { text-align: right; } .offer-row.net { border-top: var(--border-hairline); font-weight: 600; } .offer-row.add { grid-template-columns: minmax(0, 1fr) 150px auto; } .reminder { display: flex; align-items: center; gap: 14px; border: var(--border-hairline); border-radius: 6px; background: var(--surface-card); padding: 10px 14px; font-size: 14px; } .reminder button { margin-left: auto; } .strip-photos { margin-top: 12px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .strip-photos a { flex: 0 0 auto; width: 104px; text-decoration: none; color: var(--text-secondary); font-size: 12px; } .strip-photos img { width: 104px; height: 64px; object-fit: cover; border: var(--border-hairline); display: block; } .strip-photos img.main { outline: 2px solid var(--cg-blue); } .strip-photos span { display: block; margin-top: 4px; line-height: 1.2; } .mainmark { font-size: 11px; font-weight: 600; color: var(--cg-blue); border: 1px solid var(--cg-blue); border-radius: 999px; padding: 0 6px; } details > summary.btn { list-style: none; display: inline-flex; } details > summary.btn::-webkit-details-marker { display: none; } .html-as-sent { max-width: 640px; } /* ---------- installed items (10), users (11), settings (12) ---------- */ .car-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface-sunken); border: var(--border-hairline); border-radius: var(--radius-control); } .car-strip .spacer { flex: 1; } .item-head, .item-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 92px 38px; gap: 12px; align-items: center; } .item-head { padding: 0 2px 6px; font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--text-secondary); } .item-row { margin-bottom: 8px; } .item-row input.invalid, .item-row .search:has(input.invalid), .field textarea.invalid, .field input.invalid { border-color: var(--cg-error); } .items-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; } .items-list > div { display: flex; align-items: baseline; gap: 8px; } .locked-line { display: flex; align-items: center; gap: 12px; align-self: end; padding: 9px 12px; border: var(--border-hairline); border-radius: var(--radius-control); background: var(--surface-page); font-size: var(--size-body-sm); } .locked-line .ph { font-size: 16px; color: var(--cg-slate); } .swatch { width: 200px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-control); } .swatch.light { background: var(--cg-white); border: var(--border-hairline); } .swatch.dark { background: var(--cg-charcoal); } .swatch img { max-width: 180px; max-height: 48px; } .week { display: grid; grid-template-columns: repeat(7, minmax(104px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 2px; } .day { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: var(--border-hairline); border-radius: var(--radius-control); background: var(--surface-card); } input.switch { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--cg-cool-gray); position: relative; cursor: pointer; padding: 0; margin: 0; border: 0; flex: 0 0 auto; transition: background var(--duration) var(--ease); } input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--cg-white); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: left var(--duration) var(--ease); } input.switch:checked { background: var(--cg-blue); } input.switch:checked::after { left: 18px; } input.switch:disabled { background: var(--surface-disabled); cursor: not-allowed; } input[type=file] { font-size: 13px; } /* the drop box (2026-09-02): the whole field is the target, not the 13px native widget inside it */ .field.drop { border: 2px dashed var(--cg-cool-gray); border-radius: var(--radius-control); padding: 10px 12px; transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); } .field.drop > label { cursor: pointer; } .field.drop.dropping { border-color: var(--cg-blue); background: var(--cg-blue-tint); } /* ---------- templates list (14) and the block editor (15) ---------- */ .tthumb { width: 44px; height: 32px; background: #fff; border: var(--border-hairline); border-radius: 3px; padding: 4px; display: flex; flex-direction: column; gap: 2.5px; } .tthumb i { display: block; width: 100%; height: 2px; background: var(--cg-light-gray); border-radius: 1px; } .tthumb i:first-child { background: var(--cg-cool-gray); } .tthumb b { margin-top: auto; width: 55%; height: 5px; background: var(--cg-slate); opacity: .35; display: block; } .tthumb.retired { opacity: .5; } form.starter { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: var(--border-hairline); border-radius: var(--radius-control); background: var(--surface-page); } form.starter input { width: 100%; } .editor { display: flex; gap: 16px; align-items: flex-start; } .editor .blocks { width: 300px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; } .editor form.card { flex: 1; min-width: 380px; } .editor .pv { width: 420px; flex: 0 0 auto; display: flex; flex-direction: column; } .block { cursor: pointer; padding: 12px 14px; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--cg-light-gray); box-shadow: var(--shadow-card); transition: background var(--duration-fast) var(--ease); } .block:hover { background: var(--surface-row-hover); } .block.on { border-color: var(--cg-blue); box-shadow: inset 3px 0 0 var(--cg-blue); } .block.refused { border: 2px solid var(--cg-error); } .block.refused.on { box-shadow: inset 3px 0 0 var(--cg-error); } .block.price { background: #F1F1F6; border-color: #D6D6E2; } .block-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; } .block-sum { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .block-err { margin: 6px 0 2px; display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; background: var(--cg-error-tint); border: 1px solid #F6BDBD; border-radius: 6px; font-size: 13px; line-height: 1.45; } .block-err .ph-bold { font-size: 15px; color: var(--cg-error); margin-top: 1px; } .lockpill { font-size: 12px; font-weight: 400; color: var(--cg-slate); display: inline-flex; align-items: center; gap: 5px; background: #fff; border: var(--border-hairline); border-radius: 999px; padding: 2px 8px 2px 6px; } .lockpill .ph-fill { font-size: 13px; } .price-mini { border: 1px solid #D6D6E2; background: #fff; padding: 10px 12px; opacity: .72; margin-top: 8px; } .price-mini > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #4A4A68; padding: 2px 0; } .price-mini > div.tot { color: #1A1A2E; font-weight: 700; padding-top: 6px; margin-top: 4px; border-top: 1px solid #E8E8F0; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .panel-head h2 { margin: 0; font-size: 17px; } .chip-editor { min-height: 150px; padding: 12px 14px; border-radius: 6px; font-size: 15px; line-height: 1.6; background: var(--surface-card); border: var(--border-hairline); white-space: pre-wrap; outline: none; } .chip-editor:focus { border: 2px solid var(--cg-blue); } .chip-editor.refused { border-color: var(--cg-error); } .chip-editor[contenteditable="false"], .chip-editor:not([contenteditable]) { background: var(--surface-sunken); color: var(--text-secondary); } .chip { display: inline-block; padding: 1px 8px; margin: 0 1px; border-radius: 999px; font-size: 13px; line-height: 1.5; white-space: nowrap; background: var(--cg-blue-tint); color: var(--cg-blue); border: 1px solid #D6D6EE; cursor: default; } .chip.photo { background: var(--cg-coral-tint); color: var(--cg-charcoal); border-color: var(--cg-coral); } .tags { display: flex; flex-wrap: wrap; gap: 6px; } .tagbtn { height: auto; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 400; letter-spacing: 0; border: 1px solid #D6D6EE; background: var(--cg-blue-tint); color: var(--cg-blue); } .tagbtn:hover { background: var(--cg-blue-tint); color: var(--cg-blue-press); } .tagbtn.photo { border-color: var(--cg-coral); background: var(--cg-coral-tint); color: var(--cg-charcoal); } .tagbtn:disabled { border: 1px dashed var(--cg-light-gray); background: var(--surface-page); color: var(--text-tertiary); } .switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: var(--border-hairline); } .switch-row > div { max-width: 46ch; } .pvtab { height: auto; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; border: 1px solid var(--cg-light-gray); background: var(--surface-card); color: var(--text-secondary); } .pvtab:hover { background: var(--surface-row-hover); color: var(--text-body); } .pvtab.on { border-color: var(--cg-blue); background: var(--cg-blue); color: #fff; } .pvtab:disabled { border: 1px dashed var(--cg-light-gray); background: var(--surface-page); color: var(--text-tertiary); } .pv-well { background: var(--cg-light-gray); border: var(--border-hairline); border-radius: 10px; padding: 16px; display: flex; justify-content: center; max-height: 70vh; overflow: auto; } .pv-frame { width: 600px; max-width: 100%; background: #fff; border: var(--border-hairline); align-self: flex-start; } .pv-frame.phone { width: 360px; } .pv-html { padding: 12px; } .pv-text { margin: 0; padding: 22px; font-family: var(--font-data); font-size: 13px; line-height: 1.65; color: var(--cg-charcoal); white-space: pre-wrap; } details.versions { position: relative; } details.versions > summary { list-style: none; } details.versions > summary::-webkit-details-marker { display: none; } details.versions .menu { position: absolute; top: 40px; right: 0; width: 340px; background: #fff; border: var(--border-hairline); border-radius: 10px; box-shadow: var(--shadow-overlay); z-index: 40; overflow: hidden; } details.versions .menu-head { padding: 12px 16px; border-bottom: var(--border-hairline); display: flex; justify-content: space-between; align-items: center; } details.versions .ver { padding: 11px 16px; border-bottom: var(--border-hairline); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; } details.versions .menu-foot { padding: 10px 16px; font-size: 12px; background: var(--surface-page); } td.tpl { max-width: 320px; } td.tpl .two .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Under ~1200px the editor's three fixed columns cannot fit side by side: stack them — blocks, then the fields, then the preview — instead of making the whole page scroll sideways (caught by the 390px screenshot). */ @media (max-width: 1200px) { .editor { flex-direction: column; } .editor .blocks, .editor .pv { width: 100%; } .editor form.card { min-width: 0; width: 100%; } } /* ================================================================ the quote screen (design_html/"QuoteIQ Quote Screen (standalone).html", built 2026-08-25). Three regions side by side, each scrolling on its own: find the car, the money, the email. The export came back in Neuron's names and neutrals; everything here is mapped onto the existing QuoteIQ tokens — no second naming scheme, no new hex. */ .qt-default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; border: 0; background: none; } .qt-viewonly { margin-bottom: 10px; } .qtool-grid { display: grid; grid-template-columns: 300px 410px minmax(0, 1fr); background: var(--surface-card); border: var(--border-hairline); height: calc(100vh - var(--topbar-height) - 108px); min-height: 520px; } .qt-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: var(--border-hairline); } .qt-col:last-child { border-right: 0; } .qt-email { background: var(--surface-page); } .qt-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px 8px; } .qt-col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px 14px; } .qt-eyebrow { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .14em; color: var(--text-tertiary); } /* R-G2 (T25/T26): the grid editor's type-to-filter comboboxes. At most ten rows, never a scrollbar inside. */ .combo { position: relative; display: block; } .combo input { width: 100%; } .combo-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30; background: var(--surface-card); border: 1px solid var(--border-input); border-radius: 6px; box-shadow: var(--shadow-card); } .combo-list .opt { padding: 6px 10px; font-size: 13.5px; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .combo-list .opt.active, .combo-list .opt:hover { background: var(--surface-row-hover); } .combo-list .opt .yrs { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; } .combo-list .more, .combo-list .none { padding: 6px 10px; font-size: 13px; color: var(--text-secondary); } .combo-why { display: block; margin-top: 4px; font-size: 13px; color: var(--fg-warning); } .qt-seg { display: flex; width: 100%; border: 1px solid var(--border-input); border-radius: 6px; overflow: hidden; } .qt-seg a { flex: 1; text-align: center; padding: 5px 0; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none; border-right: var(--border-hairline); white-space: nowrap; } .qt-seg a:last-child { border-right: 0; } .qt-seg a:hover { background: var(--surface-row-hover); color: var(--text-body); } .qt-seg a.on { background: var(--cg-charcoal); color: var(--cg-white); } .qt-search { width: 100%; margin-bottom: 6px; } .qt-count { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); padding-bottom: 6px; } .qt-rows { border-top: var(--border-hairline); margin: 0 -14px; } .qt-rows .dashed { margin: 10px 14px; } .qt-row, .qt-leadrow { display: flex; gap: 9px; align-items: center; padding: 7px 14px; border-bottom: var(--border-hairline); text-decoration: none; color: var(--text-body); } .qt-row:hover, .qt-leadrow:hover { background: var(--surface-row-hover); color: var(--text-body); } .qt-row.on, .qt-leadrow.on { background: var(--surface-row-selected); box-shadow: inset 3px 0 0 var(--cg-blue); } .qt-thumb { width: 48px; height: 34px; flex: 0 0 48px; object-fit: cover; border: var(--border-hairline); border-radius: 3px; } .qt-thumb.none { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); } .qt-row-words { min-width: 0; display: flex; flex-direction: column; } .qt-row-words b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qt-row-words .sub { font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qt-row-words .badge { align-self: flex-start; margin-top: 2px; } .qt-stack { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; } .qt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .qt-note { font-size: 12.5px; margin: 6px 0 0; line-height: 1.5; } .qt-cust { flex: 0 0 auto; border-top: var(--border-hairline); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; max-height: 42%; overflow-y: auto; } .qt-cust .field { margin: 0; } .qt-cust-head { display: flex; align-items: baseline; gap: 8px; } .qt-cust-head .muted { font-size: 11px; } .qt-cust-name { font-size: 15px; font-weight: 600; } .qt-wrote { font-size: 13px; max-height: 130px; overflow-y: auto; } .qt-held .msg { margin: 6px 0 0; } .qt-history summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); } .qt-carhead { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0 10px; border-bottom: var(--border-hairline); margin-bottom: 10px; } .qt-carphoto { width: 78px; height: 54px; flex: 0 0 78px; object-fit: cover; border: var(--border-hairline); border-radius: 3px; } .qt-carphoto.none { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); } .qt-carwords { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .qt-carwords b { font-size: 15px; line-height: 1.2; } .qt-carwords .sub { font-size: 11px; color: var(--text-secondary); } .qt-why summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); text-decoration: underline; margin-top: 4px; } .qt-why .qt-note { margin-top: 4px; } .qt-photopick summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); text-decoration: underline; } /* The confirm card's "On this car" list: every factory package with its printed bullets, no money. A package the factory invoice bills as (DEALER INSTALLED) carries a small tag; the code sits last, small. */ .qt-oncar { margin-top: 12px; border-top: var(--border-hairline); padding-top: 10px; } .qt-oncar .section-label .muted { font-weight: 400; text-transform: none; letter-spacing: 0; } .qt-oncar-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; } .qt-oncar-list > li { padding: 5px 0; border-bottom: 1px solid var(--cg-light-gray); } .qt-oncar-list > li:last-child { border-bottom: 0; } .qt-oncar-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .qt-oncar-name b { font-weight: 600; } .qt-oncar-name .code { font-family: var(--font-data); font-size: 11px; color: var(--text-tertiary); margin-left: auto; } .qt-oncar-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--cg-info-tint, var(--surface-sunken)); color: var(--fg-info, var(--text-secondary)); } .qt-oncar-list ul { margin: 3px 0 0 16px; padding: 0; color: var(--text-secondary); font-size: 12.5px; } .qt-oncar-list ul li { padding: 1px 0; } .qt-oncar .qt-note { margin-top: 8px; } .qt-planboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .qt-points { display: flex; flex-direction: column; margin-bottom: 8px; } .qt-points a.basebox { text-decoration: none; color: var(--text-secondary); cursor: pointer; } .qt-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qt-edit-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); } .qt-adjust { width: 130px; } .qt-ladder { border-top: 1px solid var(--cg-light-gray); margin-top: 10px; } .lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 26px; column-gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--cg-light-gray); font-size: 13px; } .lrow .ll { text-align: right; color: var(--text-secondary); } .lrow .lnote { display: block; font-size: 11px; color: var(--text-tertiary); } .lrow .lv { text-align: right; min-width: 104px; font-size: 13px; color: var(--text-body); } .lrow.big { padding: 10px 0; } .lrow.big .ll { font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-body); } .lrow.big .lv { font-weight: 700; font-size: 21px; } .lrow.net { font-weight: 600; } .lrow .lx { width: 26px; } .qt-addlines { margin-top: 10px; } .qt-addlines summary, .qt-items-d summary, .qt-leadpick summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); } /* "Pick a lead instead", inside THE CUSTOMER card. Its rows are the finder column's own row style, so they need the same negative gutter the car list uses to reach the card edges. */ .qt-leadpick { margin-top: 8px; } .qt-leadpick .qt-search { margin-top: 8px; } .qt-leadpick .qt-rows { max-height: 260px; overflow-y: auto; } .qt-addrow { display: flex; gap: 6px; align-items: center; margin-top: 8px; } .qt-addrow input[type=text] { flex: 1; min-width: 0; } .qt-amount { width: 130px; flex: 0 0 130px; } .qt-notebox { width: 100%; margin-top: 6px; } .qt-saveline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 12.5px; } .qt-items, .qt-items-d { margin-top: 10px; } .qt-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 40px 20px; margin-top: 20px; border: 1px dashed var(--border-input); border-radius: 10px; color: var(--text-secondary); font-size: 14px; } .qt-empty .ph { font-size: 28px; color: var(--text-tertiary); } .qt-sealed { font-family: var(--font-data); font-size: 12.5px; max-height: 60vh; overflow-y: auto; } .qt-zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; } .qt-zoom .figure { font-size: 11px; color: var(--text-secondary); min-width: 36px; text-align: center; } .qt-zoom button { height: 24px; padding: 0 8px; } .qt-wording { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; } .qt-wording-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); } .qt-wording-pick select { flex: 1; min-width: 0; } /* the favorite wordings (051): up to five buttons, the chosen one lit */ .qt-fav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; } .qt-fav .ghost.on { border-color: var(--cg-blue); background: var(--cg-blue-tint); color: var(--cg-blue); } .qt-pv { overflow: auto; } .qt-pv-frame { transform-origin: top left; width: 660px; background: var(--cg-white); } .qt-plain summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; } .qt-actions { flex: 0 0 auto; border-top: var(--border-hairline); background: var(--surface-card); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; } .qt-actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Under ~1150px the three columns stack; the page scrolls normally. */ @media (max-width: 1150px) { .qtool-grid { grid-template-columns: 1fr; height: auto; } .qt-col { border-right: 0; border-bottom: var(--border-hairline); } .qt-col-body { overflow: visible; } .qt-cust { max-height: none; } } /* ================================================================ the leads split view (design_html/"QuoteIQ Leads.html", built 2026-08-25): the dense table on the left, the selected lead in full on the right, one screen. Same token mapping rule as the quote screen — Neuron's neutrals became the QuoteIQ tokens, nothing new. */ .leads-split { display: grid; grid-template-columns: minmax(0, 62fr) minmax(360px, 38fr); background: var(--surface-card); border-top: var(--border-hairline); min-height: 0; height: calc(100vh - var(--topbar-height) - 150px); } .ls-list { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: var(--border-hairline); } .ls-list .filters { flex: 0 0 auto; padding: 8px var(--page-gutter); border-bottom: var(--border-hairline); margin: 0; } .ls-list .tbl-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .ls-list .empty-state { margin: 24px; } .leads-tbl td.asked { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-secondary); } .ls-detail { min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; background: var(--surface-page); display: flex; flex-direction: column; gap: 12px; } .ld-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ld-head h2 { margin: 2px 0 2px; font-size: 22px; line-height: 1.1; } .ld-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .ld-meta { background: var(--surface-card); border: var(--border-hairline); border-radius: 8px; padding: 10px 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ld-meta .ld-fact:nth-child(4) { grid-column: 1 / -1; } /* the VIN gets the whole width: 17 characters do not fit a quarter of the pane, and a VIN broken over three lines cannot be read */ .ld-fact .k { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; } .ld-fact { font-size: 13px; min-width: 0; overflow-wrap: break-word; } .ld-card { background: var(--surface-card); border: var(--border-hairline); border-radius: 8px; padding: 12px 14px; } .ld-card .qt-eyebrow { margin-bottom: 8px; } .ld-card .msg { margin: 0; } .ld-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 2px; } @media (max-width: 1100px) { .leads-split { grid-template-columns: 1fr; height: auto; } .ls-list { border-right: 0; border-bottom: var(--border-hairline); } .ls-list .tbl-wrap { max-height: 50vh; } .ld-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* fixed column widths so all six leads columns stay visible without sideways scroll */ .leads-tbl table { table-layout: fixed; width: 100%; } .leads-tbl th:nth-child(1), .leads-tbl td:nth-child(1) { width: 118px; } .leads-tbl th:nth-child(3), .leads-tbl td:nth-child(3) { width: 158px; } .leads-tbl th:nth-child(4), .leads-tbl td:nth-child(4) { width: 74px; } .leads-tbl th:nth-child(5), .leads-tbl td:nth-child(5) { width: 92px; } /* the time on its own line ("7:00 am"; another day is date over time) — at 84px "1:00 pm" lost its am/pm */ .leads-tbl th:nth-child(6), .leads-tbl td:nth-child(6) { width: 168px; } .leads-tbl td.customer b { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .leads-tbl td.car .two, .leads-tbl td.car .two .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leads-tbl td.source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .leads-tbl td.status .pill .why { overflow: hidden; text-overflow: ellipsis; } /* The pricing grid's two tables fit 1440 without sideways scroll (the grid walk, 2026-08-27: the common-builds table was 1410px in an 1135px wrap — max-width on a td does nothing in an auto layout). Long cells wrap. */ table.rules-tbl, table.builds-tbl { table-layout: fixed; width: 100%; } table.rules-tbl td, table.rules-tbl th, table.builds-tbl td, table.builds-tbl th { overflow: hidden; } table.rules-tbl td.wrap, table.builds-tbl td.wrap { overflow-wrap: anywhere; } table.rules-tbl td:nth-child(8), table.builds-tbl td:nth-child(9) { white-space: normal; } table.rules-tbl th:nth-child(1) { width: 126px; } /* the "Store default" badge needs 121 */ table.rules-tbl th:nth-child(2) { width: 96px; } table.rules-tbl th:nth-child(3) { width: 60px; } table.rules-tbl th:nth-child(4) { width: 130px; } table.rules-tbl th:nth-child(5) { width: 110px; } table.rules-tbl th:nth-child(6) { width: 150px; } table.rules-tbl th:nth-child(8) { width: 200px; } /* "Sam Admin · Aug 27 · 8:03 am" — 170px clipped it to "8:" */ table.rules-tbl th:last-child { width: 56px; } /* the history icon button needs 54 */ table.builds-tbl th:nth-child(1) { width: 106px; } table.builds-tbl th:nth-child(2) { width: 76px; } table.builds-tbl th:nth-child(3) { width: 120px; } table.builds-tbl th:nth-child(4) { width: 70px; } table.builds-tbl th:nth-child(6), table.builds-tbl th:nth-child(7) { width: 92px; } table.builds-tbl th:nth-child(9) { width: 200px; } table.builds-tbl th:last-child { width: 56px; } /* job 12: the trade percent's table (the markup grid's twin) and its row page's percent boxes */ table.trade-tbl { table-layout: fixed; width: 100%; } table.trade-tbl td, table.trade-tbl th { overflow: hidden; } table.trade-tbl td.wrap { overflow-wrap: anywhere; white-space: normal; } table.trade-tbl th:nth-child(1) { width: 90px; } table.trade-tbl th:nth-child(3) { width: 120px; } table.trade-tbl th:nth-child(4) { width: 172px; } table.trade-tbl th:nth-child(5) { width: 222px; } /* "Outside the app · Sep 4 · 11:37 pm" — 200 clipped the time in the film */ table.trade-tbl th:last-child { width: 56px; } .trade-pct { display: flex; align-items: center; gap: 8px; } .trade-pct input { width: 110px; } /* Factory offers: five columns that fit 1440 with the standing on the screen (the Factory offers walk, 2026-08-27: the old six-column table scrolled 1,838px sideways with Ends, Standing and Fine print off the edge). The fine print sits in a fold on its own full-width row under each offer, so it never squeezes a column. */ table.offers-tbl { table-layout: fixed; width: 100%; } table.offers-tbl td, table.offers-tbl th { overflow: hidden; } table.offers-tbl td.wrap { white-space: normal; overflow-wrap: anywhere; vertical-align: top; } table.offers-tbl th:nth-child(1), table.offers-tbl td:nth-child(1) { width: 200px; } table.offers-tbl th:nth-child(2), table.offers-tbl td:nth-child(2) { width: 230px; } table.offers-tbl th:nth-child(4), table.offers-tbl td:nth-child(4) { width: 160px; } table.offers-tbl th:nth-child(5), table.offers-tbl td:nth-child(5) { width: 236px; } table.offers-tbl td .pill { flex-wrap: wrap; row-gap: 2px; } table.offers-tbl td .sub { display: block; font-size: 12px; color: var(--text-secondary); } table.offers-tbl tr.fine td { padding-top: 0; padding-bottom: 10px; border-top: 0; font-size: 12px; color: var(--text-secondary); white-space: normal; } table.offers-tbl tr.fine details > summary { cursor: pointer; color: var(--text-secondary); list-style: none; } table.offers-tbl tr.fine details > summary::-webkit-details-marker { display: none; } table.offers-tbl tr.fine details > summary::before { content: "▸ "; } table.offers-tbl tr.fine details[open] > summary::before { content: "▾ "; } table.offers-tbl tr.fine details p { margin: 6px 0 0; color: var(--text-body); } table.offers-tbl tr.fine + tr td { border-top: var(--border-hairline); } table.offers-tbl tr.expired td { color: var(--text-secondary); } /* ================================================================ the lead page (design_html/19_lead_page.html, JOB1 final R10): the right pane of the leads list at desktop width, the whole screen on a phone. Status, the customer's words and Send sit above the fold on a 390×844 screen; Send is pinned to the bottom bar. */ .ld-story .ld-story-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; padding: 6px 0; border-top: var(--border-hairline); font-size: 13px; line-height: 1.4; } .ld-story .qt-eyebrow + .ld-story-row { border-top: 0; padding-top: 0; } .ld-story .ld-story-row:last-child { padding-bottom: 0; } .ld-story .k { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 3px; } .ld-story .v { min-width: 0; overflow-wrap: anywhere; color: var(--text-body); } .ld-story .v > div + div { margin-top: 3px; } .ld-car { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; background: var(--surface-card); border: var(--border-hairline); border-radius: 8px; padding: 10px 12px; } .ld-car .ph { font-size: 18px; color: var(--cg-slate); flex: 0 0 auto; } .ld-num { font-family: var(--font-data); color: var(--cg-cool-gray); letter-spacing: .04em; margin-right: 8px; } .ld-back { display: none; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-decoration: none; } .ld-picker .ld-pick { margin: 0; } .ld-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; height: auto; padding: 8px 10px; border: 0; border-bottom: var(--border-hairline); border-radius: 0; background: transparent; color: var(--text-body); font-weight: 400; text-align: left; white-space: normal; letter-spacing: 0; } .ld-pick-row:hover { background: var(--surface-row-hover); color: var(--text-body); } .ld-pick-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; } .ld-pick-words .muted { font-size: 12.5px; } .ld-pick-row .figure { flex: 0 0 auto; font-size: 14px; } .ld-stock { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .ld-stock input { flex: 1; min-width: 0; height: 38px; } .ld-quote .price-block { max-width: none; } /* job 2 (design 20): 02 THEY WROTE BACK — the customer's replies, the Reply box under them, the unmatched row atop Leads */ /* the tag beside the eyebrow: the title stays on one line and the tag drops under it when the phone is too narrow for both; the tag keeps the pill's own face — the eyebrow's data face and .14em tracking leaked into it (the reply walk's screenshot) */ .ld-replies .qt-eyebrow { flex-wrap: wrap; row-gap: 6px; } .ld-replies .qt-eyebrow > span:first-child { white-space: nowrap; } .ld-replies .qt-eyebrow .pill { margin-left: auto; font-family: var(--font-sans); letter-spacing: normal; } .ld-reply { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: var(--border-hairline); } .ld-reply:first-of-type { border-top: 0; padding-top: 0; } .ld-reply-auto blockquote { color: var(--text-tertiary); } /* the store's own answers, kept as history among the customer's replies: set in from the edge, a blue hairline */ .ld-reply-ours { padding-left: 16px; border-left: 2px solid var(--cg-info); } .ld-reply-form { margin-top: 10px; padding-top: 10px; border-top: var(--border-hairline); } /* two lines growing to six (design 20) — both classes named, or .ld-greeting's 96 px cap below wins the tie (the reply walk) */ .ld-greeting.ld-reply-form textarea { min-height: 60px; max-height: 160px; } .ls-unmatched { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--cg-warning); border-radius: 8px; background: var(--cg-warning-tint); font-size: 13.5px; line-height: 1.5; color: var(--text-body); } .ls-unmatched .ph { font-size: 18px; color: var(--cg-warning); flex: 0 0 auto; margin-top: 1px; } .ls-unmatched .figure { font-size: 13px; } /* job 8 B9: who has the lead, under the status pill on the list */ .ls-owner { font-size: 12px; line-height: 1.4; color: var(--text-muted); margin-top: 3px; white-space: nowrap; } .ls-nudge { font-size: 12px; line-height: 1.4; color: var(--text-body); font-weight: 600; margin-top: 3px; white-space: normal; } /* DO TODAY (job 9, nudge.ts): the action big, the fact under it, one tap at the foot */ .ld-nudge { border-left: 4px solid var(--cg-slate); } .ld-nudge-do { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 2px 0 6px; } .ld-nudge-why { font-size: 14px; line-height: 1.45; } .ld-nudge-how { font-size: 13px; line-height: 1.45; margin-top: 4px; } .ld-nudge-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .ld-nudge-q { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .ld-nudge-q blockquote { margin: 0; } .ld-nudge-q .ld-act { margin: 0; align-self: flex-start; } .ld-nudge-paused { border-left-color: var(--text-tertiary); } .ld-nudge-foot .ld-act { margin: 0; } .ld-greeting { display: flex; flex-direction: column; gap: 6px; } .ld-greeting textarea { min-height: 42px; max-height: 96px; font-size: 15px; } .ld-greeting-help { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-tertiary); line-height: 1.4; } .ld-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .ld-actions .ld-act { margin: 0; } .ld-actions .btn, .ld-actions button { height: 40px; } .ld-trail { display: flex; flex-direction: column; gap: 5px; padding-top: 8px; border-top: var(--border-hairline); font-size: 12px; line-height: 1.5; color: var(--text-tertiary); } .ld-trail > div { display: flex; gap: 10px; } .ld-trail .figure { flex: 0 0 96px; font-size: 12px; } .ld-send { display: flex; align-items: center; gap: 12px; position: sticky; bottom: 0; margin: 4px -18px -18px; padding: 12px 18px; background: var(--surface-card); border-top: var(--border-hairline); } .ld-send .ld-send-btn { height: 48px; font-size: 16px; flex: 1; } .ld-send .muted { font-size: 13px; } /* one row per weekday on the hours strips; the mode word under the times (R4) */ .day select { height: 30px; padding: 0 6px; font-size: 13px; } td.texts, td.texts .two, td.texts .two .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ld-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-secondary); max-width: 640px; } .ld-warn .ph-fill { color: var(--cg-warning); font-size: 16px; margin-top: 2px; } .ld-warn b { color: var(--fg-warning); font-weight: 600; } .ld-legend { display: flex; flex-direction: column; gap: 6px; background: var(--surface-sunken); border: var(--border-hairline); border-radius: 6px; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); max-width: 680px; } .ld-legend b { color: var(--text-heading); } .ld-people { display: flex; flex-direction: column; gap: 8px; } .ld-people label { display: flex; align-items: center; gap: 10px; font-size: var(--size-body-sm); } .ld-people label .ph { font-size: 16px; color: var(--cg-cool-gray); } .ld-people label .ph-device-mobile, .ld-people label .ph.on { color: var(--cg-blue); } /* ALREADY A CUSTOMER (job 5, design 24): one block per car — the title with the payment at its right, the reading as a muted badge, then labeled short lines in a 112 px label column. The label column holds at every width; long lines wrap, never shorten. Two people on one email: each under their own name. */ .ld-own .qt-eyebrow, .ld-trade .qt-eyebrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .ld-own .ld-own-match, .ld-trade .ld-own-match { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-tertiary); } .ld-own .ld-own-asof, .ld-own .ld-own-two { margin-top: -4px; } .ld-own .ld-own-two { margin-top: 6px; } .ld-own-person { margin-top: 12px; padding-top: 12px; border-top: var(--border-hairline); } .ld-own-name { font-size: 14px; font-weight: 600; color: var(--text-heading); } .ld-own-car { margin-top: 12px; padding-top: 12px; border-top: var(--border-hairline); } .ld-own-person .ld-own-car:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; } .ld-own-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .ld-own-title { font-size: 15px; font-weight: 600; color: var(--text-heading); } .ld-own-fig { font-size: 14px; font-weight: 600; color: var(--text-body); white-space: nowrap; } .ld-own-badge { display: inline-block; margin-top: 6px; padding: 1px 9px; border-radius: 999px; background: var(--surface-sunken); border: var(--border-hairline); font-size: 12px; font-weight: 600; color: var(--text-secondary); } .ld-own-rows { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 12px; margin-top: 10px; font-size: 14px; line-height: 1.45; } .ld-own-rows .k { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; margin: 0; color: var(--text-tertiary); } /* job 12: the TRADE card — ALREADY A CUSTOMER's grid, plus the note line, the VIN and miles boxes, and the staff foot in the rows' own size */ .ld-trade .ld-trade-data { margin-top: 2px; } .ld-trade .ld-trade-note { margin: 10px 0 0; font-size: 14px; line-height: 1.45; } .ld-trade .ld-trade-foot { margin: 12px 0 0; padding-top: 10px; border-top: var(--border-hairline); font-size: 14px; line-height: 1.45; color: var(--text-secondary); } .ld-trade-ask { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; } .ld-trade-ask label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-tertiary); } .ld-trade-ask input[name=vin] { width: 200px; font-family: var(--font-mono, monospace); text-transform: uppercase; } .ld-trade-ask input[name=miles] { width: 100px; } /* the design's labels are plain words, not the global .k's small caps */ .ld-own-rows .v { min-width: 0; overflow-wrap: anywhere; color: var(--text-body); } /* job 5 step 5: the same-payment lines close each car's block — a hairline above the first, the figure line in the body weight */ .ld-own-rows .ld-own-move-first { margin-top: 6px; padding-top: 6px; border-top: var(--border-hairline); } .ld-own-rows .v.ld-own-move { color: var(--text-body); } .ld-own-foot { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: var(--border-hairline); } .ld-own-hidden { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.5; } .ld-own-hidden .ld-act { display: inline; } .ld-own-show { padding: 0; border: 0; background: none; height: auto; font-size: 14px; font-weight: 600; color: var(--cg-blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .ld-own-name-only .qt-eyebrow { color: var(--text-tertiary); } .ld-own-caution { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); max-width: 62ch; } @media (max-width: 800px) { /* the pane IS the page: the list folds away when a lead is named in the address, and comes back through "Back to the list" */ .leads-split { height: auto; } .leads-split.ls-open .ls-list, .leads-split:not(.ls-open) .ls-detail { display: none; } /* the pane's own scroll box would swallow the sticky Send bar (sticky sits against the nearest scrolling ancestor, and at phone width the pane is as tall as its content) — the page scrolls, so Send pins to the phone's screen (the lead-page walk) */ .ls-detail { padding: 12px 14px 0; gap: 12px; overflow: visible; } .ld-back { display: inline-flex; } .ld-head h2 { font-size: 22px; } /* the head stacks: the name on its own line, the status pill under it with its why wrapping — side by side, a long why ("not in stock, and no common build to quote instead") squeezed the name into two lines and "from the lead page" pushed past 390 px (the lead-page walk) */ .ld-head { flex-direction: column; align-items: stretch; gap: 8px; } .ld-head > div { min-width: 0; } .ld-head .pill { flex-wrap: wrap; } /* with a lead open the list's banner, tabs and meta line fold away with the list — the person came for the lead */ .qi-content.ls-open .ls-top, .qi-content.ls-open .qi-head .meta { display: none; } .qi-content.ls-open .qi-head { padding-bottom: 4px; } .ld-actions { flex-direction: column; align-items: stretch; } .ld-actions .ld-act, .ld-actions .btn, .ld-actions button { width: 100%; } .ld-actions .btn, .ld-actions button { height: 48px; font-size: 15px; } /* Send reply is a thumb's button too: full width, 48 px (it was the 30 px desktop size on the phone — the reply walk) */ .ld-reply-form button { width: 100%; height: 48px; font-size: 15px; } /* Record and Save note the same: 48 px, sharing the row (they were the 40 px desktop size on the phone — the notes walk) */ .ld-notes .ld-note-btns button { flex: 1; height: 48px; font-size: 15px; } /* two classes: the desktop 40 px rule sits later in this file */ .ld-actions .qt-note { order: 99; text-align: center; } .ld-send { margin: 4px -14px 0; padding: 12px 14px; } .ld-trail .figure { flex-basis: 62px; } /* the records card on a phone: the payment drops under a long title instead of squeezing it; the button is a thumb's */ .ld-own-head { flex-wrap: wrap; } .ld-own .ld-own-foot .ld-act, .ld-own .ld-own-foot button { width: 100%; } /* two classes: the desktop size rule sits later in this file */ .ld-own .ld-own-foot button { height: 48px; font-size: 15px; } } /* Is this store live? (migration 041) — practice is the loud state, because a store that thinks it is live when it is not would let a real shopper hear nothing and nobody would notice. */ .pill.live { background: var(--cg-success-tint); color: var(--fg-success); border: 1px solid var(--cg-success); } .pill.practice { background: var(--cg-warning-tint); color: var(--fg-warning); border: 1px solid var(--cg-warning); } .pill.live, .pill.practice { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--size-caption); font-weight: 600; flex: 0 0 auto; } .practicebar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--cg-warning-tint); color: var(--fg-warning); border: 1px solid var(--cg-warning); font-size: var(--size-caption); font-weight: 600; } /* Store settings, 2026-08-31: the readiness list at the top, the feed check under the items question, a box filled in from a website. */ .card.ready .ready-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .card.ready .ready-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--size-body-sm); line-height: 1.5; color: var(--text-body); max-width: 78ch; } .card.ready .ready-list li .ph-fill { font-size: 18px; margin-top: 2px; flex: 0 0 auto; } .card.ready .ready-list li.done .ph-fill { color: var(--cg-success); } .card.ready .ready-list li.todo .ph-fill { color: var(--cg-warning); } .card.ready .ready-list li.todo b { color: var(--fg-warning); } .card.ready.all-done { border-color: var(--cg-success); } .feed-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-control); background: var(--cg-info-tint); border: 1px solid var(--cg-info); font-size: 13px; line-height: 1.5; color: var(--text-body); max-width: 78ch; } .feed-check .ph-fill { color: var(--cg-info); font-size: 16px; margin-top: 2px; flex: 0 0 auto; } .guess { font-size: var(--size-caption); font-weight: 500; color: var(--fg-info); text-transform: none; letter-spacing: 0; } .field-guess input[type=text] { border-color: var(--cg-info); box-shadow: 0 0 0 3px var(--cg-info-tint); } /* The lead page's NOTES (design 20 piece 3, JOB3): the saved notes newest first, the box, Record and Save note. */ .ld-notes .ld-note { padding: 8px 0; border-top: var(--border-hairline); } .ld-notes .ld-note:first-of-type { border-top: 0; padding-top: 0; } .ld-note-words { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.45; } .ld-note-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: var(--border-hairline); } .ld-note-form textarea { min-height: 42px; max-height: 220px; font-size: 15px; } .ld-note-help { font-size: 12.5px; line-height: 1.4; } .ld-note-help.warn { color: var(--cg-charcoal); background: var(--cg-warning-tint); padding: 5px 8px; border-radius: 6px; } .ld-note-help.rec { color: var(--cg-error); font-weight: 600; } .ld-note-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .ld-note-btns button { height: 40px; } .ld-note-rec.on, .ld-note-rec.on:hover { background: var(--cg-error); border-color: var(--cg-error); color: var(--cg-white); } /* ---------- help (NEXT_PHASE job 22, 2026-09-02): the "i" mark and its pop-up, the Help button and panel, the page tour ---------- The words come from src/help.ts; the look is provisional until the owner's prompt 27 HTML returns (hard rule 11). Every surface opens on a click, never a hover (BRAND §5.3). The pop-up and the panel are native popovers — the browser draws them in the top layer, above every scroll box (T22), closes them on Escape and on a click outside. */ .help-i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin-left: 6px; border: 0; border-radius: 50%; background: none; color: var(--cg-info); font-size: 17px; line-height: 1; cursor: pointer; vertical-align: middle; flex: 0 0 auto; } .help-i:hover, .help-i:focus-visible { background: var(--cg-info-tint); outline: none; } .help-i:focus-visible { box-shadow: var(--focus-ring); } h3 .help-i, .qt-eyebrow .help-i { font-weight: 400; letter-spacing: 0; text-transform: none; } .help-pop[popover] { position: fixed; inset: auto; margin: 0; width: 300px; max-width: calc(100vw - 24px); padding: 12px 34px 12px 14px; border: var(--border-hairline); border-radius: 10px; background: var(--surface-card); box-shadow: var(--shadow-overlay); color: var(--text-body); font-size: var(--size-caption); line-height: var(--leading-body); font-weight: 400; text-transform: none; letter-spacing: 0; } .help-pop[popover]::backdrop { background: transparent; } .help-pop .help-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--text-secondary); font-size: 15px; cursor: pointer; border-radius: 50%; } .help-pop .help-x:hover { background: var(--cg-light-gray); } /* the browser without popover support (old) gets a plain open/close from quoteiq.js */ .help-pop.open { display: block; z-index: 45; } .qi-help { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* the bar must never push the page sideways (the menu walk, 2026-09-02, the read-only login in practice: two pills, the Help button and the name): the pills and the person's role give way with an ellipsis before anything overflows */ .qi-top .practicebar, .qi-top .who { min-width: 0; } .qi-top .practicebar > span, .qi-top .who .role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .qi-top .who .name { flex: 0 0 auto; } .qi-help .ph { font-size: 16px; } .help-panel[popover] { position: fixed; inset: 0 0 0 auto; margin: 0; width: 440px; max-width: 100vw; height: 100vh; padding: 0; border: 0; border-left: var(--border-hairline); background: var(--surface-card); box-shadow: var(--shadow-overlay); color: var(--text-body); flex-direction: column; } .help-panel[popover]:popover-open { display: flex; } .help-panel.open { display: flex; z-index: 45; } .help-panel::backdrop { background: rgba(26,26,46,.35); } .help-panel .hp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 20px; border-bottom: var(--border-hairline); flex: 0 0 auto; } .help-panel .hp-head h2 { margin: 0; font-size: var(--size-body-lg); font-weight: 600; color: var(--text-heading); } .help-panel .hp-body { flex: 1 1 auto; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .help-panel .hp-body > .section-label { margin-top: 6px; } .help-panel .hp-what { margin: 0; font-size: var(--size-body-sm); color: var(--text-secondary); } .help-topics { display: flex; flex-direction: column; } .help-topic { border-bottom: var(--border-hairline); } .help-topic > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: var(--size-body-sm); font-weight: 600; color: var(--text-heading); cursor: pointer; } .help-topic > summary::-webkit-details-marker { display: none; } .help-topic > summary::before { content: ""; width: 0; height: 0; border-left: 6px solid var(--text-secondary); border-top: 5px solid transparent; border-bottom: 5px solid transparent; flex: 0 0 auto; } .help-topic[open] > summary::before { transform: rotate(90deg); } .help-topic ol { margin: 0 0 12px; padding-left: 24px; font-size: var(--size-caption); line-height: var(--leading-body); } .help-topic ol li { margin: 4px 0; } .help-topic ol li b { font-weight: 600; } .help-topic video { display: block; width: 100%; margin: 0 0 12px; border-radius: 6px; background: #000; } .help-none { margin: 0; font-size: var(--size-caption); } .help-others { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--size-caption); } .help-others a { color: var(--text-link); } .help-support { flex: 0 0 auto; padding: 12px 20px; border-top: var(--border-hairline); font-size: var(--size-caption); color: var(--text-secondary); } .help-page .help-topics { max-width: 720px; } .help-page .help-topic > summary { font-size: var(--size-body); } @media (max-width: 800px) { .help-panel[popover] { width: 100vw; border-left: 0; } .qi-top .qi-help span { display: none; } } /* the tour: a ring around the lit part (its shadow dims the rest), a click-catcher under it, the pop-up beside it. No transition anywhere — a parked tab never advances one (T21). */ .tour-scrim { position: fixed; inset: 0; z-index: 59; } .tour-ring { position: fixed; z-index: 60; border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(26,26,46,.45), 0 0 0 3px var(--cg-blue); pointer-events: none; } .tour-pop { position: fixed; z-index: 61; width: 320px; max-width: calc(100vw - 24px); padding: 12px 14px; border: 2px solid var(--cg-blue); border-radius: 10px; background: var(--surface-card); box-shadow: var(--shadow-overlay); color: var(--text-body); } .tour-pop .tour-title { font-size: var(--size-body-sm); font-weight: 600; color: var(--cg-blue); } .tour-pop .tour-words { margin: 4px 0 10px; font-size: var(--size-caption); line-height: var(--leading-body); } .tour-pop .tour-foot { display: flex; align-items: center; gap: 8px; } .tour-pop .tour-count { margin-right: auto; font-size: var(--size-label); color: var(--text-secondary); font-family: var(--font-data); } /* The Features card on Store settings (053): one row per feature, radios in two columns. */ .ft-cell { white-space: nowrap; } .ft-choice { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; font-size: 13px; } .ft-choice input { margin: 0; } /* 054 C1: the add-list control — the joined list as chips with a Remove each, an add box and Add (Store settings, Add a store) */ .addlist .chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; } .addlist .chip.addr { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; font-size: 13px; } .addlist .chip-x { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; padding: 0 5px; cursor: pointer; border-radius: 999px; } .addlist .chip-x:hover:not(:disabled) { background: rgba(0, 0, 0, 0.08); } .addlist .chip-x:disabled { display: none; } .addlist .addrow { display: flex; gap: 8px; align-items: center; max-width: 520px; } .addlist .addrow input { flex: 1; min-width: 0; } /* 054 C2: who is told about leads — one row per person, four radios */ table.alerts-people { width: auto; min-width: 520px; } table.alerts-people th, table.alerts-people td { padding: 6px 10px; } /* Job 15's texting screen (JOB15_TEXTING_SCREEN_DECISIONS_2026-09-05): the conversation on the lead page. A text out carries a small phone glyph line; a failed one is said under it in the warning colour (R10). The by-text choice sits above the Reply box; the earlier lead's texting folds at the top (R15). */ .ld-reply-failed blockquote { color: var(--text-tertiary); } .ld-reply-fail-note { font-size: 13px; line-height: 1.45; color: var(--fg-warning); } .ld-reply-how { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 4px; } .ld-reply-how label.muted { color: var(--text-tertiary); } .ld-earlier-texts { margin: 0 0 10px; font-size: 13.5px; } .ld-earlier-texts summary { cursor: pointer; color: var(--text-secondary); } .ld-earlier-texts .qt-note { margin: 4px 0 0 14px; } .ld-trade-ask-text { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: var(--border-hairline); } .ld-trade-ask-text blockquote { margin: 0; }