/* Extracted verbatim from templates/onboarding.html (Foundation Stage 3B-1, 2026-09-08). Contiguous slice, cascade-preserved. Do not reorder relative to the other onboarding/styles/*.css files. */ /* R4.1 §20-25 — two-layer left pane. #obCanvas used to BOTH scroll its own content (overflow-y:auto directly on it) AND host the item- detail modal as a normal child of that same scrolled content. Real- browser testing found this meant opening/closing the modal (via renderAdaptiveCanvas() → canvas.innerHTML = ...) reset #obCanvas's OWN scrollTop to 0 as a side effect of replacing its content — a merchant scrolled to the middle of a long catalog would see the modal "jump to the top" not because the modal itself moved, but because the element that scrolls the catalog was wholesale recreated. #obCanvas is now a stable, never-scrolled SHELL (overflow:hidden); the catalog itself scrolls inside the new #obCanvasScroll child; the detail modal renders into the new #obCanvasModalLayer sibling — a getSeparate DOM subtree that _ocSyncDetailModalLayer() (render.js) can update on its OWN, WITHOUT ever touching #obCanvasScroll, so opening/closing the modal no longer re-renders (and so never resets the scroll position of) the catalog at all. */ #obCanvas { --oc-ink: #14140f; --oc-ink-2: #35332c; --oc-muted: #8a8578; --oc-line: #e7e3d8; --oc-paper: #f5f3ec; --oc-paper-2: #faf8f2; --oc-bg: #fbfaf6; position: fixed; inset: 0; z-index: 60; overflow: hidden; background: var(--oc-bg); font: 400 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; color: var(--oc-ink-2); -webkit-font-smoothing: antialiased; } #obCanvas[hidden] { display: none; } #obCanvasScroll { position: relative; height: 100%; overflow-y: auto; } #obCanvasModalLayer { position: absolute; inset: 0; z-index: 70; pointer-events: none; } #obCanvasModalLayer:not(:empty) { pointer-events: auto; } #obCanvas .oc-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; position: sticky; top: 0; background: linear-gradient(var(--oc-bg) 68%, transparent); } #obCanvas .oc-brand { display: flex; align-items: center; gap: 9px; } #obCanvas .oc-brand img { height: 22px; width: auto; } #obCanvas .oc-brand span { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--oc-ink); } #obCanvas .oc-top-actions { display: flex; align-items: center; gap: 10px; } #obCanvas .oc-clear-restart { border: none; background: none; color: var(--oc-muted); font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px 4px; } #obCanvas .oc-clear-restart:hover { color: #b23b3b; } #obCanvas .oc-save { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-ink-2); border-radius: 999px; padding: 8px 15px; font-size: 12.5px; cursor: pointer; } #obCanvas .oc-save:hover { border-color: var(--oc-ink); color: var(--oc-ink); } #obCanvas .oc-stage { max-width: 760px; margin: 0 auto; padding: clamp(28px, 7vh, 90px) 26px 200px; animation: ocFade .22s cubic-bezier(.22,.61,.36,1) both; } #obCanvas .oc-stage.wide { max-width: 980px; } /* Storefront Generation Stage S1 (2026-09-08) — full pane width, zero outer padding; every section inside owns its own horizontal rhythm (see static/business_profile/profile.css). */ #obCanvas .oc-stage.storefront { max-width: none; padding: 0 0 60px; } #obCanvas .oc-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--oc-muted); margin-bottom: 14px; } #obCanvas h1.oc-h { font-size: clamp(26px, 4.2vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; color: var(--oc-ink); margin: 0 0 12px; } #obCanvas p.oc-sub { font-size: 15px; color: var(--oc-muted); margin: 0 0 30px; max-width: 46ch; } /* IDENTIFY finder — XKROX R4.2 §4/§10/§29: a real, premium, bounded autocomplete dropdown anchored to the input, never a page navigation. */ #obCanvas .oc-find { position: relative; } #obCanvas .oc-find input { width: 100%; border: 1px solid var(--oc-line); background: #fff; border-radius: 16px; padding: 17px 18px; font: inherit; font-size: 16px; color: var(--oc-ink); outline: none; box-shadow: 0 1px 2px rgba(20,18,10,.04); } #obCanvas .oc-find input:focus { border-color: var(--oc-ink); box-shadow: 0 0 0 3px rgba(20,18,10,.06); } #obCanvas .oc-find-hint { font-size: 12.5px; color: var(--oc-muted); margin-top: 12px; } #obCanvas .oc-find-error { font-size: 12.5px; color: #9a3b12; background: #fdf1e9; border: 1px solid #f0c9a8; border-radius: 10px; padding: 9px 12px; margin-top: 10px; } /* §10 — bounded height, never reflows the page; §29 — premium/clean: name + secondary line, strong readable text, a real hover/active state, no repeated giant CTA per row. */ /* XKROX R4.5 (2026-09-10) §2 — tightened to the round's own explicit 280-340px target (was 360px) so the dropdown reads as a normal compact autocomplete overlay, never a second panel competing with the search input above it. */ #obCanvas .oc-find-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; background: #fff; border: 1px solid var(--oc-line); border-radius: 14px; box-shadow: 0 10px 32px -8px rgba(20,18,10,.16); max-height: 320px; overflow-y: auto; padding: 6px; } #obCanvas .oc-find-opt { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; background: none; border: none; cursor: pointer; padding: 11px 12px; border-radius: 10px; } #obCanvas .oc-find-opt + .oc-find-opt { margin-top: 1px; } #obCanvas .oc-find-opt:hover, #obCanvas .oc-find-opt.oc-find-opt-active { background: var(--oc-paper); } #obCanvas .oc-find-opt-name { font-size: 14.5px; font-weight: 550; color: var(--oc-ink); } #obCanvas .oc-find-opt-sec { font-size: 12.5px; color: var(--oc-muted); } /* XkroX UX1.1 (2026-09-08), §1 — CORRECTION: category chips no longer render on the canvas at all — they're structured message content inside the chat now (see styles/assistant.css's .obai-choices). The old .oc-catchips/.oc-catchip rules from UX1 are retired with them. */ #obCanvas .oc-linkbtn { border: none; background: none; color: var(--oc-ink); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0; } #obCanvas .oc-find-geonote { color: var(--oc-muted); font-size: 12.5px; } /* MATCH candidate list */ #obCanvas .oc-cands { display: flex; flex-direction: column; gap: 10px; max-width: 620px; } #obCanvas .oc-cand { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--oc-line); background: #fff; border-radius: 15px; padding: 16px 18px; text-align: left; cursor: pointer; font: inherit; width: 100%; transition: border-color .12s ease, transform .12s ease; } #obCanvas .oc-cand:hover, #obCanvas .oc-cand:focus-visible { border-color: var(--oc-ink); transform: translateY(-1px); } #obCanvas .oc-cand > span:first-child { min-width: 0; } #obCanvas .oc-cand .cn { display: block; font-size: 15px; font-weight: 550; color: var(--oc-ink); } #obCanvas .oc-cand .cs { display: block; font-size: 12.5px; color: var(--oc-muted); margin-top: 3px; line-height: 1.4; } #obCanvas .oc-cand .cgo { font-size: 12.5px; color: var(--oc-muted); flex: none; } /* BUILD progressive reveal */ #obCanvas .oc-build-name { font-size: clamp(24px, 3.6vw, 34px); font-weight: 600; letter-spacing: -.02em; color: var(--oc-ink); } #obCanvas .oc-status { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--oc-ink-2); margin-top: 10px; } #obCanvas .oc-status .oc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--oc-ink); flex: none; animation: ocPulse 1.5s ease-in-out infinite; } #obCanvas .oc-reveal { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; } #obCanvas .oc-block { border: 1px solid var(--oc-line); background: #fff; border-radius: 15px; padding: 17px 19px; animation: ocFade .28s ease both; } #obCanvas .oc-block .bt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--oc-muted); margin-bottom: 9px; } #obCanvas .oc-block .bmain { font-size: 15px; color: var(--oc-ink); } #obCanvas .oc-catnums { display: flex; gap: 26px; flex-wrap: wrap; margin: 4px 0 2px; } #obCanvas .oc-catnums b { font-size: 22px; font-weight: 600; color: var(--oc-ink); display: block; letter-spacing: -.01em; } #obCanvas .oc-catnums span { font-size: 12px; color: var(--oc-muted); } #obCanvas .oc-catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 30px; margin-top: 12px; } #obCanvas .oc-catrow { display: flex; justify-content: space-between; font-size: 13.5px; padding: 5px 0; border-bottom: 1px solid var(--oc-paper); } #obCanvas .oc-catrow span:last-child { color: var(--oc-muted); font-variant-numeric: tabular-nums; } /* R4 §14-17/§22-23 — the live discovery checklist over the canvas, high-contrast per §16 (dark ink text on a light paper card, real marks — never the faint chat-scoped .obai-disc-* palette). */ #obCanvas .oc-disc-card { border: 1px solid var(--oc-line); background: var(--oc-paper-2); border-radius: 16px; padding: 20px 22px; animation: ocFade .22s ease both; } #obCanvas .oc-disc-title { font-size: 16px; font-weight: 600; color: var(--oc-ink); margin-bottom: 14px; } #obCanvas .oc-disc-rows { display: flex; flex-direction: column; gap: 11px; } #obCanvas .oc-disc-row { display: flex; align-items: center; gap: 11px; font-size: 14.5px; } #obCanvas .oc-disc-mark { width: 20px; height: 20px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } #obCanvas .oc-disc-mark-done { background: var(--oc-ink); color: #fff; } #obCanvas .oc-disc-mark-active { background: #fff; border: 2px solid var(--oc-ink); animation: ocPulse 1.4s ease-in-out infinite; } #obCanvas .oc-disc-mark-pending { background: #fff; border: 2px solid var(--oc-line); } #obCanvas .oc-disc-row.oc-disc-done .oc-disc-label { color: var(--oc-ink); font-weight: 550; } #obCanvas .oc-disc-row.oc-disc-active .oc-disc-label { color: var(--oc-ink); font-weight: 600; } #obCanvas .oc-disc-row.oc-disc-pending .oc-disc-label { color: var(--oc-ink-2); } #obCanvas .oc-disc-done { border: 1px solid #cfe3d5; background: #eef6f0; color: #1d5b34; border-radius: 14px; padding: 14px 18px; font-size: 14.5px; font-weight: 550; animation: ocFade .22s ease both; } #obCanvas .oc-disc-fail { border: 1px solid #ecd6c2; background: #fbf1e7; color: #7a4318; border-radius: 14px; padding: 14px 18px; font-size: 14.5px; animation: ocFade .22s ease both; } /* XKROX R4.2 §1/§28 — the two-entry landing (IDENTIFY), one balanced two-column layout so both paths are visible on a single desktop viewport with no scrolling. #obCanvas .oc-stage.identity (set via render.js's own stageCls logic) gives this ONE focus real room. */ #obCanvas .oc-stage.identity { max-width: 1460px; } #obCanvas .oc-id-grid { display: flex; align-items: stretch; gap: 56px; min-height: 480px; } #obCanvas .oc-id-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } /* §2 — spacing + a hairline divider, deliberately NOT two giant rounded dashboard cards — the page stays minimal/premium/calm. */ #obCanvas .oc-id-vdivider { flex: none; width: 1px; background: var(--oc-line); align-self: stretch; } #obCanvas .oc-id-new .oc-h { margin-bottom: 22px; } #obCanvas #ocIdentifyComposerSlot { flex: 1; display: flex; min-height: 320px; } /* R4.1 §1-3 — the ONE real #obAiDock, relocated (never cloned) into #ocIdentifyComposerSlot while IDENTIFY is the active focus. Override ONLY #obAiDock's own outer position/sizing (fixed/floating chrome → normal inline flow, full slot width); every descendant rule scoped to #obAiDock itself (data-mode transitions, #obAiComposer/#obAiPanel styling in assistant.css) is untouched, since those selectors are relative to #obAiDock, not to whatever currently contains it. XKROX R4.2 §19/§20 — inline-mounted, the dock now fills its column (flex:1) with a FIXED, bounded height instead of the floating widget's own viewport-relative max-height — #obAiBody (assistant.css, flex:1; overflow-y:auto) is what scrolls internally as the conversation grows; the landing page itself never grows. The minimize/maximize header controls make no sense on a permanent, always-visible embedded panel (there's nothing to "restore" to), so they're hidden here — the merchant never sees a mode toggle for a surface that's never collapsed. */ #ocIdentifyComposerSlot #obAiDock, #obAiDock.oc-inline-mount { position: static; left: auto; right: auto; bottom: auto; top: auto; transform: none; width: 100%; max-width: none; z-index: auto; margin: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; } #obAiDock.oc-inline-mount #obAiPanel { flex: 1; max-height: none; min-height: 0; height: 100%; border-radius: 16px; box-shadow: none; } #obAiDock.oc-inline-mount #obAiHeadActions { display: none; } @media (max-width: 900px) { /* §22 — stack vertically on narrow screens; interaction semantics (dropdown search, pill+composer AI) stay identical. */ #obCanvas .oc-id-grid { flex-direction: column; gap: 40px; min-height: 0; } #obCanvas .oc-id-vdivider { display: none; } #obCanvas #ocIdentifyComposerSlot { min-height: 420px; } } /* VERIFY exceptions */ #obCanvas .oc-exc { display: flex; flex-direction: column; gap: 12px; } #obCanvas .oc-exc-item { border: 1px solid var(--oc-line); background: #fff; border-radius: 14px; padding: 15px 17px; } #obCanvas .oc-exc-item .en { font-size: 14.5px; font-weight: 550; color: var(--oc-ink); } #obCanvas .oc-exc-item .er { font-size: 12.5px; color: #a4632a; margin-top: 4px; } #obCanvas .oc-goodrow { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--oc-ink); } #obCanvas .oc-goodrow .ok { width: 22px; height: 22px; border-radius: 50%; background: #16150f; color: #fff; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; } /* recovery + primary actions */ #obCanvas .oc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; } #obCanvas .oc-btn { border: 1px solid var(--oc-line); background: #fff; color: var(--oc-ink); border-radius: 999px; padding: 11px 18px; font: inherit; font-size: 13.5px; cursor: pointer; } #obCanvas .oc-btn:hover { border-color: var(--oc-ink); } #obCanvas .oc-btn.primary { background: var(--oc-ink); color: #fff; border-color: var(--oc-ink); padding: 12px 22px; box-shadow: 0 2px 8px -2px rgba(20,18,10,.35); } #obCanvas .oc-btn.primary:hover { transform: translateY(-1px); } #obCanvas .oc-btn.ghost { border-color: transparent; color: var(--oc-muted); } /* PERSONALIZE preview */ #obCanvas .oc-personalize { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; } #obCanvas .oc-preview { border: 1px solid var(--oc-line); border-radius: 18px; overflow: hidden; background: var(--pv-bg, #0b0b0c); color: var(--pv-text, #f4f4f5); font-family: var(--pv-font, inherit); transition: background .2s ease, color .2s ease; } #obCanvas .oc-preview .pv-hero { padding: 30px 26px 22px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--pv-border, #26262a); } #obCanvas .oc-preview .pv-logo { width: 52px; height: 52px; border-radius: var(--pv-radius, 14px); object-fit: cover; flex: none; background: var(--pv-card, #141416); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--pv-accent, #f5a623); } #obCanvas .oc-preview .pv-name { font-size: 20px; font-weight: 650; letter-spacing: -.01em; } #obCanvas .oc-preview .pv-meta { font-size: 12.5px; color: var(--pv-muted, #9a9a9a); margin-top: 3px; } #obCanvas .oc-preview .pv-items { padding: 18px 26px 26px; display: flex; flex-direction: column; gap: 2px; } #obCanvas .oc-preview .pv-item { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--pv-border, #26262a); font-size: 13.5px; } #obCanvas .oc-preview .pv-item:last-child { border-bottom: none; } #obCanvas .oc-preview .pv-price { color: var(--pv-accent, #f5a623); font-variant-numeric: tabular-nums; } #obCanvas .oc-readycol .oc-block { margin-bottom: 12px; } #obCanvas .oc-checklist { display: flex; flex-direction: column; gap: 10px; } #obCanvas .oc-checkrow { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--oc-ink); } #obCanvas .oc-checkrow .cm { width: 20px; height: 20px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid var(--oc-line); color: var(--oc-muted); } #obCanvas .oc-checkrow.done .cm { background: #16150f; color: #fff; border-color: #16150f; } /* Business Space shell (XkroX UX1, 2026-09-08) — Stage BS1's own ~80-line black-card ruleset (.bs-hero/.bs-logo/.bs-name/.bs-item/…) is retired here; the real storefront visuals now live in static/business_profile/profile.css (a genuine reusable presentation layer, not another onboarding-only card — see business_space.js's own header comment). This file keeps only the thin onboarding-specific wrapper: the contextual task banner and the de-emphasized workspace link (§24 — success is "business created," not a dominant CTA). */ /* Storefront Generation Stage S1 (2026-09-08) — CORRECTION: the storefront is a WEBSITE, not a card. The old `.bs-profile-wrap` border+border-radius wrapper (an onboarding-preview-card treatment inherited from BS1's black card, never removed when the black card itself was) has been retired — it was exactly the "one giant rounded rectangle" the brief explicitly rejected. The task banner is now a plain top strip (no rounded top corners pretending to belong to a card below it); the profile/product surface underneath is unwrapped, full-bleed within its own container, so profile.css's own sections read as real page sections. */ #obCanvas .bs-shell { position: relative; } /* ══════════════════════════════════════════════════════════════════ XKROX Final Onboarding UX Consolidation round — .bs-header-row (identity + a MINIMAL empty-only setup flag, never a duplicate review CTA) → .bs-tabs-row (exactly two views — Website / Menu · N need review — + Continue-to-workspace) → EITHER .bs-actioncards (3 action cards) + .bs-findonline-status (real, observable Find-online job state) + .bs-website-head ("Your website" / the real preview) — no separate menu-preview strip anymore — OR .bs-menu-tab (the ONE full-catalog management view, with its own real empty state; its table/toolbar CSS lives in legacy.css, unchanged, reused verbatim). Current typography/palette/spacing tokens (--oc-ink/--oc-muted/ --oc-line/--oc-paper-2/--bp-serif) are reused throughout — this is a structural change, not a new visual design language. ══════════════════════════════════════════════════════════════════ */ /* ── §2 — business identity + compact status card, one row ── */ #obCanvas .bs-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px clamp(20px, 4vw, 56px) 18px; border-bottom: 1px solid var(--oc-line); } #obCanvas .bs-header-identity { min-width: 0; flex: 1 1 320px; } #obCanvas .bs-header-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--oc-muted); } #obCanvas .bs-header-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; } #obCanvas .bs-header-name { font-family: var(--bp-serif, serif); font-size: 30px; font-weight: 500; color: var(--oc-ink); margin: 0; } #obCanvas .bs-edit-details-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-ink); border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; } #obCanvas .bs-edit-details-btn svg { width: 13px; height: 13px; } #obCanvas .bs-edit-details-btn:hover { border-color: var(--oc-ink); } #obCanvas .bs-header-tagline { font-size: 13.5px; color: var(--oc-muted); margin-top: 6px; } /* ── the compact status CARD (right side of the header row) — no "failure banner" visual pattern exists anywhere in this file anymore; a genuine search failure reads exactly like a fresh, untouched menu (CLAUDE.md "XKROX — THE PREVIOUS UX CHANGE DID NOT MATCH THE APPROVED MOCKUP" §1). ── */ #obCanvas .bs-status-card { flex: 0 1 340px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--oc-line); border-radius: 14px; padding: 14px 16px; background: var(--oc-paper-2); } #obCanvas .bs-status-card.is-quiet, #obCanvas .bs-status-card.is-done { align-items: center; color: var(--oc-muted); } #obCanvas .bs-status-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(183,121,31,.14); color: #8a5a17; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } #obCanvas .bs-status-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--oc-line); border-top-color: var(--oc-ink); animation: ocDiscoverySpin .8s linear infinite; } @keyframes ocDiscoverySpin { to { transform: rotate(360deg); } } #obCanvas .bs-status-check { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #0f7a4f; color: #fff; font-size: 10px; line-height: 18px; text-align: center; } #obCanvas .bs-status-text { font-size: 13px; } #obCanvas .bs-status-body { min-width: 0; flex: 1 1 auto; } #obCanvas .bs-status-title { font-size: 13.5px; font-weight: 600; color: var(--oc-ink); } #obCanvas .bs-status-sub { font-size: 12.5px; color: var(--oc-muted); margin-top: 2px; } #obCanvas .bs-status-dismiss { display: block; border: none; background: none; color: var(--oc-muted); font: inherit; font-size: 11.5px; text-decoration: underline; cursor: pointer; padding: 6px 0 0; margin: 0; } #obCanvas .bs-status-dismiss:hover { color: var(--oc-ink); } #obCanvas .bs-status-btn { flex: none; border: 1px solid var(--oc-ink); background: var(--oc-ink); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 500; cursor: pointer; font: inherit; } #obCanvas .bs-status-btn:hover { opacity: .88; } /* FIND ONLINE SEMANTICS + DATA QUALITY round, §6 — a real but deliberately low-priority secondary link ("View all N"), never styled to compete with the primary "Review N items" CTA. */ #obCanvas .bs-status-viewall { flex: none; border: none; background: none; color: var(--oc-muted); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 8px 0; } #obCanvas .bs-status-viewall:hover { color: var(--oc-ink); } #obCanvas .bs-status-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; } @media (prefers-reduced-motion: reduce) { #obCanvas .bs-status-spin { animation: none; } } /* ── UX Cleanup round §3 — Find online's real, observable job-state panel. Reuses the same .bs-status-* tokens as the header's own status pieces (spinner/check/title/sub/button/dismiss) so running/success/ failure all read as one consistent visual language, in its own bordered compact result card on the Website tab, directly under the action row. A CSS GRID (not the old single flex-wrap row that concatenated icon+title+CTA+dismiss into one cramped, wrapping line) — icon + heading/sub/facts share row 1 (icon left, text right), the CTA row is always its own full-width row below, and Dismiss is a small, quiet, right-aligned row of its own beneath that — never squeezed inline with the result text. ── */ #obCanvas .bs-findonline-status { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 12px; align-items: start; /* FIND ONLINE SEMANTICS + DATA QUALITY round, §7 — real browser measurement (getBoundingClientRect, not just intended source values) proved the OLD `margin: 0 ... 18px` (zero top margin) sat this card's own top border directly against .bs-actioncards' border-bottom divider — a real, visible "touching the divider" defect, confirmed gapAbove=0px. 18px top (within the round's 16-20px minimum) gives the card its own visual boundary; 22px bottom (within the round's 20-24px range) separates it from "Your website" below. */ margin: 18px clamp(20px, 4vw, 56px) 22px; padding: 16px 18px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper-2); } /* Final Compact Premium Onboarding round (2026-09-20), Part 9 — roughly half the old vertical footprint: tighter outer margin/inner padding/row-gap, on top of the already-compressed single title + single stat-line body (business_space.js's own comment on this same round explains the content-side compression). */ #obCanvas .bs-findonline-status.is-compact { margin: 12px clamp(20px, 4vw, 56px) 14px; padding: 12px 14px; row-gap: 8px; } #obCanvas .bs-findonline-status.is-running { color: var(--oc-muted); } /* is-empty (zero result AND failure — no leading icon in either) spans both columns; is-running/is-done have a real leading icon, so their body sits in column 2 beside it. */ #obCanvas .bs-findonline-status .bs-status-body { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } #obCanvas .bs-findonline-status.is-running .bs-status-body, #obCanvas .bs-findonline-status.is-done .bs-status-body { grid-column: 2; grid-row: 1; } #obCanvas .bs-findonline-status.is-running .bs-status-spin, #obCanvas .bs-findonline-status.is-done .bs-status-check { grid-column: 1; grid-row: 1; margin-top: 1px; } #obCanvas .bs-findonline-status .bs-status-title { line-height: 1.35; } #obCanvas .bs-findonline-status .bs-status-sub { line-height: 1.4; } #obCanvas .bs-status-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } #obCanvas .bs-status-facts span { font-size: 11.5px; color: var(--oc-muted); background: var(--oc-paper); border: 1px solid var(--oc-line); border-radius: 999px; padding: 3px 9px; } #obCanvas .bs-findonline-status .bs-status-actions { grid-column: 1 / -1; margin-top: 0; } #obCanvas .bs-findonline-status .bs-status-dismiss { grid-column: 1 / -1; justify-self: end; margin-top: -4px; } /* ── "Your website" — immediately precedes the real webpage preview, no setup content in between (§2). ── */ #obCanvas .bs-website-head { padding: 4px clamp(20px, 4vw, 56px) 14px; } #obCanvas .bs-website-title { font-family: var(--bp-serif, serif); font-size: 20px; font-weight: 500; color: var(--oc-ink); } #obCanvas .bs-website-sub { font-size: 13px; color: var(--oc-muted); margin-top: 2px; } /* ── §1/§4 — exactly two tabs + the de-emphasized Continue link ── */ #obCanvas .bs-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--oc-line); } #obCanvas .bs-tabs { display: flex; gap: 22px; } #obCanvas .bs-tab { border: none; background: none; color: var(--oc-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; padding: 14px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; } #obCanvas .bs-tab.is-active { color: var(--oc-ink); border-bottom-color: var(--oc-ink); font-weight: 600; } #obCanvas .bs-tab:hover { color: var(--oc-ink); } #obCanvas .bs-continue-link { border: none; background: none; color: var(--oc-muted); font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 0; } #obCanvas .bs-continue-link:hover { color: var(--oc-ink); } /* Final Compact Premium Onboarding round (2026-09-20), Part B/5/6/15 — replaces the old 3-card grid (~120px tall, a title+subtitle paragraph baked into each card) with ONE compact, dense action bar: icon + short label only, ~44px buttons (well inside the round's own 48-64px total-height target once padding is included), subtle border/background — Stripe/Shopify-density, not three big boxes. `.bs-actioncard*`/`.bs-actioncards` class names are fully retired. */ #obCanvas .bs-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--oc-line); background: var(--oc-paper-2); } #obCanvas .bs-tb-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--oc-line); border-radius: 10px; padding: 9px 14px; background: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--oc-ink); line-height: 1; } #obCanvas .bs-tb-btn:hover { border-color: var(--oc-ink); } #obCanvas .bs-tb-btn[disabled] { opacity: .55; cursor: default; } #obCanvas .bs-tb-btn[disabled]:hover { border-color: var(--oc-line); } /* a healthy catalog de-emphasizes "Search web" (still clickable, never disabled — an optional double-check, not a blocking next step). */ #obCanvas .bs-tb-btn.is-secondary { opacity: .6; background: var(--oc-paper-2); } #obCanvas .bs-tb-btn.is-secondary:hover { opacity: .85; border-color: var(--oc-ink); } #obCanvas .bs-tb-icon { flex: none; display: flex; align-items: center; justify-content: center; color: var(--oc-muted); } #obCanvas .bs-tb-icon svg { width: 15px; height: 15px; } #obCanvas .bs-tb-btn:hover .bs-tb-icon, #obCanvas .bs-tb-btn:focus-visible .bs-tb-icon { color: var(--oc-ink); } #obCanvas .bs-tb-label { } /* the one small helper line that replaces the old in-card paragraph — never a permanent fixture, only rendered when there's something real to say (Part 5 — "do not put a paragraph inside the button"). */ #obCanvas .bs-toolbar-helper { padding: 0 clamp(20px, 4vw, 56px) 12px; margin-top: -2px; font-size: 12px; color: var(--oc-muted); background: var(--oc-paper-2); border-bottom: 1px solid var(--oc-line); } /* "+ Add" popover — same compact-menu visual language as the legacy Build screen's own .build-add-menu-dd (legacy.css), scoped under a new id/class pair so the two never collide. */ #obCanvas .bs-add-dd { position: relative; } #obCanvas .bs-add-dd-caret { font-size: 9px; opacity: .7; } #obCanvas .bs-add-dd-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 210px; background: #fff; border: 1px solid var(--oc-line); border-radius: 12px; padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.12); } #obCanvas .bs-add-dd-panel.is-open { display: block; } #obCanvas .bs-add-dd-panel button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; padding: 10px 11px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--oc-ink); cursor: pointer; } #obCanvas .bs-add-dd-panel button:hover { background: var(--oc-paper-2); } #obCanvas .bs-dd-item-icon { flex: none; width: 18px; text-align: center; font-size: 13px; } #obCanvas .bs-profile-wrap { position: relative; } /* ── §6 — a compact menu preview (max 5 items) under the webpage preview, with real item cards + honest, plain-language status badges (never a raw issue_type/enum), or an intentional empty state with its own 2 real actions. ── */ /* §2/§3 — the compact menu-preview strip a prior round added is retired outright: item content now renders ONLY inside the Menu tab, never a second time under the Website tab. .bs-menu-empty* below is reused there (Menu tab's own real empty state). */ #obCanvas .bs-menu-empty { text-align: center; padding: 32px 16px; } #obCanvas .bs-menu-empty-title { font-size: 15px; font-weight: 500; color: var(--oc-ink); } #obCanvas .bs-menu-empty-sub { font-size: 13px; color: var(--oc-muted); margin-top: 4px; } #obCanvas .bs-menu-empty-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; } #obCanvas .bs-action { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-ink); } #obCanvas .bs-action:hover { border-color: var(--oc-ink); } #obCanvas .bs-action-primary { background: var(--oc-ink); color: #fff; border-color: var(--oc-ink); } #obCanvas .bs-action-primary:hover { opacity: .88; border-color: var(--oc-ink); color: #fff; } /* ── §8 — the dedicated Menu-tab management view: a thin title/count header over the existing renderBuildWorkspace() (unchanged; its own status-tabs/toolbar/table CSS lives in legacy.css). ── */ /* §3 — "Menu / N items / N need review" header (the round's own literal layout: title left, a right-aligned two-line count block). */ #obCanvas .bs-menu-tab { padding: 20px clamp(20px, 4vw, 56px) 0; } #obCanvas .bs-menu-tab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } #obCanvas .bs-menu-tab-title { font-family: var(--bp-serif, serif); font-size: 20px; font-weight: 500; color: var(--oc-ink); } #obCanvas .bs-menu-tab-counts { text-align: right; } #obCanvas .bs-menu-tab-count { font-size: 13px; color: var(--oc-muted); } #obCanvas .bs-menu-tab-needreview { font-size: 12.5px; color: #8a5a17; font-weight: 500; margin-top: 1px; } /* §15 — the split desktop/AI-panel behavior below is untouched (min-width:901px / max-width:720px already handle it); this only keeps the NEW header/action-card grid usable at narrower widths within the left pane itself, never compressing both panes into unusable narrow columns. */ @media (max-width: 720px) { #obCanvas .bs-actioncards { grid-template-columns: 1fr; } #obCanvas .bs-header-row { flex-direction: column; } #obCanvas .bs-status-card { flex-basis: auto; width: 100%; } } @keyframes ocFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes ocPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ── Split Workbench (XkroX UX1, §7) ──────────────────────────────── Once identity exists, the AI dock is no longer a floating overlay — it becomes a real, non-overlapping right-hand column beside the Business Profile. Desktop only (>900px); mobile keeps the existing bottom-sheet-style dock (§19 — do not squeeze a miniature desktop split onto a phone). Toggled by renderAdaptiveOnboarding() exactly when the Business Space is the active surface. */ body.oc-split-active { overflow: hidden; height: 100vh; /* PRODUCTION CONTAINMENT INVARIANT (2026-09-10) — ONE source of truth for the AI pane's width. #obCanvas's right edge and #obAiDock's width used to be independently hardcoded (`right: 38%` vs `width: 38%; min-width: 320px; max-width: 480px`) — they diverge on very wide or very narrow viewports (canvas leaves a 38% gap while the dock is capped at 480px, or the dock's 320px min overlaps a 38% canvas). Every left/right split rule below now derives from this single clamped value so the two panes always meet exactly. */ --oc-ai-w: clamp(320px, 38%, 480px); --oc-overlay-gap: 16px; } body.oc-split-active #obCanvas { position: fixed; top: 0; left: 0; bottom: 0; right: var(--oc-ai-w); overflow-y: auto; /* Checkpoint C fix: NO z-index here — a z-index on a positioned element creates a new stacking context, which would trap any position:fixed overlay rendered inside #obCanvas (e.g. the cart drawer) below #obAiDock regardless of the overlay's own z-index, since a nested context's contents can never escape past their trapping ancestor at the top level. #obCanvas and #obAiDock don't visually overlap in split mode anyway (non-overlapping left/right regions), so no z-index ordering between them was ever needed. The cart drawer deliberately escapes #obCanvas entirely via a separate body-level portal (#obCartPortal, see render.js) for exactly this reason — it is NOT a descendant of #obCanvas, so it is unaffected by anything below. R4 §32-37 — item/product detail (.bp-detail, product_detail.js) IS a genuine #obCanvas descendant (rendered inline by renderBusinessSpace(), no portal) and used to be visually 'position:fixed; inset:0' relative to the whole VIEWPORT — meaning its backdrop covered the AI column too, and (since its z-index:100 sits below #obAiDock's z-index:900) rendered VISUALLY BEHIND the AI panel: exactly the reported "expands underneath the AI" defect. transform: translateZ(0) is a real, standard CSS mechanism that establishes a containing block for 'position:fixed' DESCENDANTS without any visible transform of its own (0 translation) — it deliberately reintroduces the same "creates a stacking context" trapping effect the z-index comment above warns about, but ONLY for .bp-detail (which has no portal and SHOULD be trapped/ contained to the left pane per §33) — never for the cart drawer (which already structurally can't be affected, being a portal sibling, not a descendant). Consumer Explore (consumer_shell.html, a completely separate template that never sets oc-split-active on its own ) is untouched — its .bp-detail stays genuinely viewport-fixed, per §34's own explicit mode distinction. */ transform: translateZ(0); } @media (min-width: 901px) { body.oc-split-active #obCanvas { transition: right .28s cubic-bezier(.22,.61,.36,1); } body.oc-split-active #obAiDock { position: fixed; inset: 0 0 0 auto; left: auto; right: 0; bottom: 0; top: 0; transform: none; width: var(--oc-ai-w); display: flex; flex-direction: column; z-index: 900; transition: transform .28s cubic-bezier(.22,.61,.36,1); } /* ── GLOBAL LEFT-PANE OVERLAY CONTAINMENT (2026-09-10) ────────────── Every editor / modal / confirm that BELONGS to the left pane must stay inside the left pane's visible box — never centred in the full viewport (where its right half hides behind the AI column) and never behind the AI column's z-index. #editModal (.modal-backdrop), #uploadModal / #startOverModal (.build-modal-backdrop) are all body-level `position: fixed; inset: 0` elements — NOT descendants of #obCanvas, so #obCanvas's own translateZ(0) containing block (which already contains the inline .bp-detail quick-view) does nothing for them. Re-confine them here to [0 .. var(--oc-ai-w)] so the backdrop and its centred box occupy only the space the merchant can actually see. Scoped to the split (desktop) layout only — narrow / mobile keeps the full-viewport modal, which is correct there (no AI column beside it). This is the ONE rule for the whole family; do not re-patch per dialog. */ body.oc-split-active #editModal.modal-backdrop, body.oc-split-active .build-modal-backdrop { left: 0; right: var(--oc-ai-w); width: auto; padding: var(--oc-overlay-gap); } /* The card itself can never exceed the confined backdrop, and only its body scrolls — header / footer actions stay reachable (§12). */ body.oc-split-active #editModal .modal-box, body.oc-split-active #editModal .im-modal-box, body.oc-split-active .build-modal { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; } body.oc-split-active #editModal .im-body { min-height: 0; flex: 1 1 auto; } body.oc-split-active #editModal .im-content, body.oc-split-active #editModal .modal-box > form, body.oc-split-active .build-modal-body { min-height: 0; overflow-y: auto; } /* Footer actions (Save / Cancel) always visible — never scrolled away. */ body.oc-split-active #editModal .im-footer, body.oc-split-active .build-modal-actions, body.oc-split-active .build-modal-head { flex: none; } /* NOTE: .bp-detail (item/product quick-view) is deliberately NOT listed here — it is an inline #obCanvas DESCENDANT and is already confined to the left pane by #obCanvas's own translateZ(0) containing block (see #obCanvas comment above). Re-confining it again would double-subtract the AI width and clip it on the left. */ body.oc-split-active #obAiPanel { flex: 1 1 auto; max-height: none !important; min-height: 0 !important; opacity: 1 !important; border-radius: 0; border-left: 1px solid var(--obai-line, #e6e2d6); border-right: none; border-top: none; border-bottom: none; height: 100%; display: flex; flex-direction: column; } /* §1 — the conversation thread is the ONE flexible area; header and composer stay their intrinsic size. #obAiBody already carries flex:1/overflow-y:auto (assistant.css) — this just guarantees the split layout doesn't override that with a competing height rule. */ body.oc-split-active #obAiHead { flex: none; } body.oc-split-active #obAiBody { flex: 1 1 auto; min-height: 0; } body.oc-split-active #obAiComposer { border-radius: 0; flex: none; } /* FIND ONLINE SEMANTICS + DATA QUALITY round (2026-09-15+), §10 — real browser inspection (getComputedStyle + matched-rules dump, not just source-string presence) proved this rule LOST a same- specificity cascade tie to assistant.css's `#obAiComposer .tools button { display: flex; }` (both (0,1,1,1) — assistant.css loads AFTER canvas.css, so its later same-specificity rule won): the button stayed visibly rendered, and — since split-active's own `#obAiPanel` rule above ALSO forces the panel open (max-height:none/min-height:0/opacity:1, all !important) — clicking it had zero visible effect either way. `!important` guarantees this hide wins regardless of stylesheet load order or any future same-specificity rule added to either file. */ body.oc-split-active #obAiExpandBtn { display: none !important; } /* ── §2 — intentional collapse control: the AI column closes and the storefront smoothly takes the full width. No reload, no lost conversation (the dock is only translated off-screen, never removed/re-rendered). ──────────────────────────────────────────── */ body.oc-split-active.oc-split-collapsed #obCanvas { right: 0; } body.oc-split-active.oc-split-collapsed #obAiDock { transform: translateX(100%); pointer-events: none; } #obAiSplitToggle { display: none; } body.oc-split-active #obAiSplitToggle { display: flex; } #obAiReopenTab { display: none; } body.oc-split-active.oc-split-collapsed #obAiReopenTab { display: flex; align-items: center; justify-content: center; position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 34px; height: 68px; z-index: 901; cursor: pointer; background: #fff; color: #16150f; border: 1px solid var(--obai-line, #e6e2d6); border-right: none; border-radius: 14px 0 0 14px; box-shadow: 0 4px 20px -6px rgba(20,18,10,.28); font-size: 16px; transition: width .16s ease; } #obAiReopenTab:hover { width: 40px; } } /* ── Chat-first entry (XkroX UX1.1, §1/§2/§6) ─────────────────────── Before any identity is confirmed, the AI dock IS the interface — a large, centered, always-open composer/chat, not the small bottom- fixed bar. The canvas shows only a quiet brand mark, vertically grouped just above it, so the two elements read as one calm composition rather than two competing surfaces. */ body.oc-hero-chat #obCanvas { display: flex; align-items: flex-end; justify-content: center; height: 46vh; min-height: 260px; pointer-events: none; } body.oc-hero-chat #obCanvas .oc-top { display: none; } body.oc-hero-chat #obCanvas .oc-stage { padding: 0; animation: none; text-align: center; } body.oc-hero-chat .oc-hero-mark { display: flex; justify-content: center; opacity: .92; } body.oc-hero-chat #obAiDock { position: fixed; left: 50%; right: auto; top: 46vh; bottom: auto; transform: translateX(-50%); width: min(640px, calc(100vw - 40px)); } body.oc-hero-chat #obAiPanel { max-height: min(46vh, 460px); } @media (max-width: 720px) { #obCanvas .oc-top { padding: 14px 18px; } #obCanvas .oc-stage, #obCanvas .oc-stage.wide { padding: 26px 18px 220px; } #obCanvas .oc-personalize { grid-template-columns: 1fr; } #obCanvas .oc-catgrid { grid-template-columns: 1fr; } #obCanvas .oc-brand span { display: none; } #obCanvas .bs-banner { padding: 11px 18px; } #obCanvas .bs-actionbar { padding: 10px 18px; } #obCanvas .bs-action { padding: 7px 12px; font-size: 12.5px; } .oc-catalog-head { padding: 14px 18px 6px; } .oc-catalog-progress { padding: 0 18px 12px; } body.oc-split-active { overflow: visible; height: auto; } body.oc-split-active #obCanvas { position: static; inset: auto; } /* R4.1 §20-25 — #obCanvasScroll's own height:100%/overflow-y:auto (desktop: a real internal scroll box) needs a definite-height ancestor to resolve against; #obCanvas becomes position:static; height:auto on mobile specifically so the PAGE scrolls naturally instead (the pre-existing "Mobile Responsiveness Pass" intent, unchanged) — #obCanvasScroll must follow the same intent here, not keep trying to be its own internal scroll box. */ body.oc-split-active #obCanvasScroll { height: auto; overflow-y: visible; } body.oc-hero-chat #obCanvas { height: 30vh; min-height: 160px; } body.oc-hero-chat #obAiDock { top: 30vh; width: min(560px, calc(100vw - 24px)); } } @media (prefers-reduced-motion: reduce) { #obCanvas .oc-stage, #obCanvas .oc-block { animation: none; } #obCanvas .oc-status .oc-dot { animation: none; } #obCanvas .oc-preview { transition: none; } #obCanvas .bs-action-pulse { animation: none; } }