@cboxdk/cbox-ui 0.9.0 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cboxdk/cbox-ui",
-    "version": "0.9.0",
+    "version": "0.10.1",
     "private": false,
     "description": "Cbox shared UI — layout primitives, design tokens, and brand assets used across every Cbox-family app (id, cortex, atlas, track, …).",
     "repository": {
@@ -41,14 +41,17 @@
         },
         "./tokens": "./tokens/cbox.css",
         "./tailwind": "./tailwind.preset.js",
-        "./assets/*": "./assets/*"
+        "./assets/*": "./assets/*",
+        "./shell.css": "./tokens/shell.css"
     },
     "scripts": {
         "build": "tsup",
         "dev": "tsup --watch",
         "test": "vitest run",
         "test:watch": "vitest",
-        "typecheck": "tsc --noEmit"
+        "typecheck": "tsc --noEmit",
+        "test:visual": "scripts/visual.sh",
+        "test:visual:update": "scripts/visual.sh --update-snapshots"
     },
     "peerDependencies": {
         "echarts": "^6.0.0",
@@ -70,6 +73,11 @@
         "tailwind-merge": "^3.0.0"
     },
     "devDependencies": {
+        "@axe-core/playwright": "4.11.0",
+        "@playwright/test": "^1.65.0",
+        "@testing-library/dom": "^10.4.2",
+        "@testing-library/react": "^16.3.3",
+        "@testing-library/user-event": "^14.6.9",
         "@types/node": "^22.0.0",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",

package/tokens/cbox.css

@@ -1,3 +1,6 @@
+/* The shell's own stylesheet (CboxShell). */
+@import './shell.css';
+
 /* Cbox colour tokens — cbox-ui structure, warmed toward cbox.dk's cream/ink palette
  * so the products share temperature with the brand site (and aren't a Linear clone).
  * Single deep-blue primary (matches the logo). Light default; dark under `.dark` or
@@ -242,41 +245,6 @@
     }
 }
 
-/* Workspace shell: one geometry for every product, including floating hover expansion. */
-.cbx-workspace{display:flex;height:100svh;overflow:hidden;font-family:var(--font-sans)}
-.cbx-rail-slot{position:relative;flex:0 0 64px;width:64px;z-index:40}
-.cbx-rail-slot[data-pinned=true]{flex-basis:222px;width:222px}
-.cbx-rail{position:absolute;inset:6px auto 6px 6px;width:52px;border:1px solid var(--border);border-radius:12px;background:var(--sidebar);display:flex;flex-direction:column;padding:6px;transition:width 200ms cubic-bezier(.4,0,.2,1)}
-.cbx-rail[data-open=true]{width:210px;box-shadow:0 1px 2px #0001,0 8px 24px #0001}
-.cbx-rail-brand{display:flex;align-items:center;justify-content:space-between;height:44px;flex-shrink:0;gap:4px}
-.cbx-rail-brand button,.cbx-subnav-header button,.cbx-mobile-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:8px}
-.cbx-rail nav{flex:1;overflow:auto;padding-top:12px}
-.cbx-workspace-link{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;margin-bottom:3px;border-radius:8px;font-size:13px;white-space:nowrap;color:var(--sidebar-foreground);text-decoration:none}
-.cbx-workspace-link span{overflow:hidden;text-overflow:ellipsis}
-.cbx-workspace-link:hover{background:var(--secondary)}
-.cbx-workspace-link.is-active{background:var(--accent-soft);font-weight:600}
-.cbx-workspace-link.is-active svg{color:var(--primary)}
-.cbx-rail-account{padding-top:8px;border-top:1px solid var(--border)}
-.cbx-workspace-column{display:flex;flex:1;min-width:0;flex-direction:column}
-.cbx-workspace-header{height:56px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--background);border-bottom:1px solid var(--border)}
-.cbx-workspace-context{min-width:0;flex:1}
-.cbx-workspace-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
-.cbx-workspace-body{display:flex;flex:1;min-height:0}
-.cbx-workspace-main{flex:1;min-width:0;overflow:auto}
-.cbx-subnav{width:210px;flex-shrink:0;background:var(--background);border-right:1px solid var(--border);overflow:auto;padding:12px 8px}
-.cbx-subnav[data-collapsed=true]{width:26px;padding:0}
-.cbx-subnav-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;margin-bottom:12px;padding:0 8px;font-size:13px}
-.cbx-subnav-strip{display:flex;align-items:center;gap:16px;padding:14px 4px;height:100%;width:26px;flex-direction:column;font-size:12px}
-.cbx-subnav-strip span{writing-mode:vertical-rl}
-.cbx-mobile-trigger{display:none}
-.cbx-workspace-mobile{margin:0;height:100svh;max-height:100svh;width:min(320px,90vw);padding:20px 12px;background:var(--background);color:var(--foreground);border-right:1px solid var(--border)}
-.cbx-workspace-mobile::backdrop{background:#0006}
-@media(max-width:1023px){.cbx-rail-slot,.cbx-subnav{display:none}.cbx-mobile-trigger{display:flex}.cbx-workspace-header{padding:0 12px;gap:8px}}
-@media(prefers-reduced-motion:reduce){.cbx-rail{transition:none}}
-
-.cbx-workspace-context [data-component=context-bar] button{max-width:100%}
-@media(max-width:639px){.cbx-workspace-header{flex-wrap:wrap;height:auto;min-height:56px;padding-block:8px}.cbx-workspace-context{order:3;flex-basis:100%;width:100%}.cbx-workspace-tools{margin-left:auto}.cbx-workspace-context [data-component=context-bar]>div{flex:1}}
-
 /* App icons come from Cbox ID's catalog: one light and one dark upload per app. The dark one
    shows under the same switch as the dark tokens. */
 .cbx-app-icon{display:block;object-fit:contain}

package/tokens/shell.css

@@ -0,0 +1,362 @@
+/* Cbox shell v1 (docs/specs/2026-11-10-shell-v1.md). Plain CSS on the shared tokens, so it needs
+ * no Tailwind scan of the package. Density follows §5.5: rows at least 40px, 12px row padding,
+ * 4px between rows, 8px around a list, 12px inside a pane, 12px above and 6px below a heading. */
+
+.cbx-shell {
+    --cbx-ease: cubic-bezier(.4, 0, .2, 1);
+    --cbx-shadow: 0 1px 2px oklch(0.2 0.02 75 / 0.06), 0 8px 24px oklch(0.2 0.02 75 / 0.12);
+    --cbx-tile-l: 0.9;
+    --cbx-tile-c: 0.06;
+    --cbx-tile-fg-l: 0.36;
+    --cbx-tone-production: var(--success);
+    --cbx-tone-sandbox: var(--warning);
+    --cbx-tone-neutral: oklch(0.62 0.01 80);
+    --cbx-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --cbx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --cbx-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
+    display: flex;
+    height: 100svh;
+    overflow: hidden;
+    font-family: var(--cbx-font-sans);
+    font-size: 14px;
+    line-height: 1.45;
+    color: var(--foreground);
+    background: var(--background);
+}
+:is(.dark, [data-theme='dark']) .cbx-shell,
+.cbx-shell:is(.dark, [data-theme='dark']) {
+    --cbx-shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 12px 32px oklch(0 0 0 / 0.45);
+    --cbx-tile-l: 0.36;
+    --cbx-tile-c: 0.08;
+    --cbx-tile-fg-l: 0.93;
+    --cbx-tone-neutral: oklch(0.6 0.01 80);
+}
+/* Resets carry no specificity (:where), so every component rule below wins over them. */
+:where(.cbx-shell, .cbx-overlay, .cbx-popover) *, :where(.cbx-shell, .cbx-overlay, .cbx-popover) *::before, :where(.cbx-shell, .cbx-overlay, .cbx-popover) *::after { box-sizing: border-box; }
+:where(.cbx-shell, .cbx-overlay, .cbx-popover) :where(button, input, textarea) { font: inherit; color: inherit; }
+:where(.cbx-shell, .cbx-overlay, .cbx-popover) :where(button) { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
+:where(.cbx-shell, .cbx-overlay, .cbx-popover) :where(a) { color: inherit; text-decoration: none; }
+:where(.cbx-shell, .cbx-overlay, .cbx-popover) :where(h1, h2, h3, p) { margin: 0; }
+:is(.cbx-shell, .cbx-overlay, .cbx-popover) :is(a, button, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+:is(.cbx-shell, .cbx-overlay, .cbx-popover) :is(input, textarea):focus-visible { outline-offset: 0; }
+.cbx-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cbx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+/* "Skip to content": the first focusable element, hidden until it has focus. */
+.cbx-skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground) !important; font-size: 14px; font-weight: 600; box-shadow: var(--cbx-shadow); transform: translateY(calc(-100% - 16px)); }
+.cbx-skip-link:focus, .cbx-skip-link:focus-visible { transform: none; }
+/* The skip link moves focus to <main>; the page container itself needs no ring. */
+.cbx-shell-main:focus, .cbx-shell-main:focus-visible { outline: none; }
+.cbx-kbd { font-family: var(--cbx-font-mono); font-size: 11px; line-height: 16px; padding: 0 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--secondary); color: var(--muted-foreground); white-space: nowrap; }
+.cbx-link { color: var(--primary); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
+.cbx-link:hover { text-decoration: underline; }
+.cbx-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 8px; color: var(--muted-foreground); transition: background 150ms var(--cbx-ease), color 150ms var(--cbx-ease); }
+.cbx-icon-button:hover { background: var(--secondary); color: var(--foreground); }
+
+/* ── Rail (tier 1) ───────────────────────────────────────────────────────────── */
+.cbx-rail-slot { position: relative; flex: 0 0 64px; width: 64px; z-index: 40; transition: flex-basis 300ms var(--cbx-ease), width 300ms var(--cbx-ease); }
+.cbx-rail-slot[data-pinned='true'] { flex-basis: 222px; width: 222px; }
+.cbx-rail { position: absolute; inset: 6px auto 6px 6px; width: 52px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--sidebar); color: var(--sidebar-foreground); overflow: hidden; transition: width 200ms var(--cbx-ease), box-shadow 200ms var(--cbx-ease); }
+.cbx-rail[data-open='true'] { width: 210px; }
+.cbx-rail-slot[data-pinned='false'] .cbx-rail[data-open='true'] { box-shadow: var(--cbx-shadow); }
+.cbx-rail-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 44px; flex: none; margin-bottom: 8px; }
+.cbx-rail-home { display: flex; align-items: center; gap: 7px; min-width: 0; height: 40px; padding: 0 3px; border-radius: 8px; }
+.cbx-app-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 9px; overflow: hidden; font-size: 12px; }
+.cbx-app-mark img { width: 100%; height: 100%; object-fit: contain; }
+.cbx-rail-brand { display: none; }
+.cbx-rail[data-open='true'] .cbx-rail-home { flex: 1; }
+.cbx-rail[data-open='true'] .cbx-rail-brand { display: contents; }
+.cbx-rail[data-open='true'] .cbx-app-mark { order: 2; width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
+.cbx-wordmark { order: 1; height: 19px; width: auto; display: block; }
+.cbx-wordmark-dark { display: none; }
+:is(.dark, [data-theme='dark']) .cbx-wordmark-light { display: none; }
+:is(.dark, [data-theme='dark']) .cbx-wordmark-dark { display: block; }
+.cbx-rail-app { order: 3; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cbx-rail-pin { display: none; width: 28px; height: 28px; }
+.cbx-rail[data-open='true'] .cbx-rail-pin { display: inline-flex; }
+.cbx-rail-slot[data-pinned='true'] .cbx-rail-pin { color: var(--primary); }
+.cbx-rail-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; }
+.cbx-rail-link { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--sidebar-muted); white-space: nowrap; flex: none; transition: background 150ms var(--cbx-ease), color 150ms var(--cbx-ease); }
+.cbx-rail-link svg { flex: none; }
+.cbx-rail-link:hover { background: var(--sidebar-accent); color: var(--sidebar-foreground); }
+.cbx-rail-link.is-active { background: var(--accent-soft); color: var(--primary); }
+.cbx-rail-link.is-active .cbx-rail-label { color: var(--sidebar-foreground); font-weight: 600; }
+.cbx-rail-label { opacity: 0; font-size: 13.5px; transition: opacity 150ms var(--cbx-ease); }
+.cbx-rail[data-open='true'] .cbx-rail-label { opacity: 1; }
+.cbx-rail-foot { flex: none; padding-top: 6px; border-top: 1px solid var(--border); }
+.cbx-rail-account { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 3px; border-radius: 10px; white-space: nowrap; }
+.cbx-rail-account:hover, .cbx-rail-account.is-open { background: var(--sidebar-accent); }
+.cbx-rail-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; opacity: 0; transition: opacity 150ms var(--cbx-ease); }
+.cbx-rail[data-open='true'] .cbx-rail-who { opacity: 1; }
+.cbx-rail-name { font-weight: 600; font-size: 13px; }
+.cbx-rail-sub { font-size: 12px; color: var(--muted-foreground); }
+.cbx-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 999px; overflow: hidden; background: var(--primary); color: var(--primary-foreground); font-weight: 700; font-size: 12px; }
+.cbx-avatar img { width: 100%; height: 100%; object-fit: cover; }
+
+/* ── Column, header, banner ─────────────────────────────────────────────────── */
+.cbx-shell-column { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; }
+.cbx-header { position: relative; z-index: 30; display: flex; align-items: center; gap: 12px; height: 56px; flex: none; padding: 0 16px 0 12px; background: var(--background); border-bottom: 1px solid var(--border); }
+.cbx-context { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; }
+.cbx-trigger { display: flex; align-items: center; gap: 8px; height: 32px; min-width: 0; max-width: 360px; padding: 0 6px 0 5px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--foreground); transition: background 150ms var(--cbx-ease); }
+.cbx-trigger:hover, .cbx-trigger.is-open { background: var(--secondary); }
+.cbx-trigger-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cbx-trigger-chevron { flex: none; color: var(--muted-foreground); }
+.cbx-trigger-dot { color: var(--border-strong); flex: none; }
+.cbx-trigger-env { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; }
+.cbx-separator { flex: none; margin: 0 4px; color: var(--border-strong); font-size: 18px; font-weight: 300; }
+.cbx-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; }
+.cbx-chip-solid { background: var(--primary); color: var(--primary-foreground); }
+.cbx-chip-soft { background: var(--accent-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--accent-edge); }
+/* In dark, --primary on its own soft tint is under 4.5:1; the chip's letters go lighter. */
+:is(.dark, [data-theme='dark']) .cbx-chip-soft { color: oklch(0.85 0.09 258); }
+.cbx-tone { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--cbx-tone-neutral); }
+.cbx-tone-production { background: var(--cbx-tone-production); }
+.cbx-tone-sandbox { background: var(--cbx-tone-sandbox); }
+.cbx-tools { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
+.cbx-search-button { display: flex; align-items: center; gap: 8px; width: 232px; height: 32px; padding: 0 6px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted-foreground); font-size: 13px; transition: border-color 150ms var(--cbx-ease), color 150ms var(--cbx-ease); }
+.cbx-search-button:hover { border-color: var(--border-strong); color: var(--foreground); }
+.cbx-search-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cbx-tool { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background 150ms var(--cbx-ease), border-color 150ms var(--cbx-ease); }
+.cbx-tool:hover { background: var(--secondary); border-color: var(--border-strong); }
+.cbx-tool.is-on { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--primary); }
+.cbx-tool-icon { width: 32px; padding: 0; justify-content: center; }
+.cbx-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--primary-foreground); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--background); }
+.cbx-count.is-inline { position: static; margin-left: auto; box-shadow: none; }
+.cbx-banner { display: flex; align-items: center; gap: 12px; flex: none; min-height: 36px; padding: 6px 20px; border-bottom: 1px solid var(--border); font-size: 13px; }
+.cbx-banner-sandbox { background: var(--warning-soft); color: var(--foreground); }
+.cbx-banner-sandbox::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--cbx-tone-sandbox); flex: none; }
+.cbx-banner-impersonation { background: var(--destructive-soft); }
+.cbx-banner-notice { background: var(--info-soft); }
+.cbx-banner-text { min-width: 0; }
+.cbx-banner-action { margin-left: auto; font-weight: 600; text-decoration: underline; white-space: nowrap; }
+.cbx-shell-body { display: flex; flex: 1; min-height: 0; }
+.cbx-shell-main { flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
+
+/* ── Subnav (tier 2) ────────────────────────────────────────────────────────── */
+.cbx-subnav { width: 210px; flex: none; overflow-y: auto; padding: 12px 8px; background: var(--background); border-right: 1px solid var(--border); overscroll-behavior: contain; }
+.cbx-subnav[data-collapsed='true'] { width: 26px; padding: 0; }
+.cbx-subnav-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 4px 0 12px; margin-bottom: 8px; font-size: 13px; }
+.cbx-subnav-list { display: flex; flex-direction: column; gap: 4px; }
+.cbx-subnav-link { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted-foreground); }
+.cbx-subnav-link:hover { background: var(--secondary); color: var(--foreground); }
+.cbx-subnav-link.is-active { background: var(--accent-soft); color: var(--foreground); font-weight: 600; }
+/* Nav page marks (lock, count) and group headings, in the subnav and the phone nav. */
+.cbx-subnav-link { gap: 8px; }
+.cbx-subnav-link > .cbx-truncate { flex: 1; }
+.cbx-nav-lock { display: inline-flex; align-items: center; flex: none; margin-left: auto; color: var(--muted-foreground); }
+.cbx-nav-count { flex: none; margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--secondary); color: var(--foreground); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
+.cbx-subnav-link.is-active .cbx-nav-count { background: var(--background); }
+.cbx-nav-run { display: flex; flex-direction: column; gap: 4px; }
+.cbx-nav-run + .cbx-nav-run { margin-top: 8px; }
+.cbx-nav-group { padding: 6px 12px 2px; font-family: var(--cbx-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cbx-subnav-strip { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 26px; height: 100%; padding: 14px 0; font-size: 12px; color: var(--muted-foreground); }
+.cbx-subnav-strip:hover { background: var(--secondary); color: var(--foreground); }
+.cbx-subnav-strip span { writing-mode: vertical-rl; }
+
+/* ── Menus (§5.3–§5.5) ──────────────────────────────────────────────────────── */
+.cbx-popover { z-index: 60; display: flex; flex-direction: column; overflow: hidden; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--cbx-shadow); font-family: var(--cbx-font-sans); font-size: 14px; line-height: 1.45; animation: cbx-pop 200ms var(--cbx-ease); }
+@keyframes cbx-pop { from { opacity: 0; transform: translateY(-4px); } }
+.cbx-menu { display: flex; min-height: 0; max-height: inherit; }
+.cbx-menu-org, .cbx-menu-single { width: 340px; }
+.cbx-menu-cascade { width: 680px; }
+.cbx-menu-account { width: 340px; flex-direction: column; overflow-y: auto; }
+.cbx-menu-apps { width: 440px; flex-direction: column; overflow-y: auto; padding: 12px; }
+.cbx-pane { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; padding: 12px; }
+.cbx-pane + .cbx-pane { border-left: 1px solid var(--border); }
+.cbx-pane-search { display: flex; align-items: center; gap: 10px; height: 40px; flex: none; margin: 0 0 4px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--muted-foreground); }
+.cbx-pane-search:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-soft); }
+.cbx-pane-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none !important; background: none; font-size: 14px; color: var(--foreground); }
+.cbx-pane-search input::placeholder { color: var(--muted-foreground); }
+.cbx-pane-search input::-webkit-search-cancel-button { display: none; }
+.cbx-pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 6px; padding: 0 12px; font-family: var(--cbx-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
+.cbx-pane-all { flex: none; font-family: var(--cbx-font-sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--primary); }
+.cbx-pane-all:hover { text-decoration: underline; }
+.cbx-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; margin: 0 -8px; padding: 8px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; outline: none; }
+.cbx-pane .cbx-list { flex: 1 1 auto; max-height: 360px; min-height: 96px; }
+.cbx-list-tall { max-height: 320px; }
+.cbx-list > li { display: block; }
+/* A pane's listbox sits inside its scroller, so the status notes can stay outside it. */
+.cbx-listbox { display: flex; flex-direction: column; gap: 4px; outline: none; }
+.cbx-listbox:empty { display: none; }
+.cbx-list-note { margin: 0; padding: 10px 12px; color: var(--muted-foreground); font-size: 13px; }
+.cbx-row { display: flex; align-items: center; gap: 4px; min-height: 40px; flex: none; border-radius: 8px; color: var(--foreground); transition: background 150ms var(--cbx-ease); }
+.cbx-row:hover, .cbx-row.is-active { background: var(--secondary); }
+.cbx-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 8px; cursor: pointer; }
+.cbx-row.is-current .cbx-row-name { font-weight: 600; }
+.cbx-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
+.cbx-row-label { flex: none; max-width: 40%; font-size: 12.5px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cbx-row-value { max-width: 45%; font-size: 13px; color: var(--muted-foreground); }
+.cbx-row-check { flex: none; color: var(--primary); }
+.cbx-row-chevron { flex: none; margin-right: 10px; color: var(--muted-foreground); }
+.cbx-row-trail { flex: none; color: var(--muted-foreground); }
+.cbx-row-icon { display: inline-flex; flex: none; width: 22px; justify-content: center; color: var(--muted-foreground); }
+.cbx-row-icon-gap { width: 16px; flex: none; }
+.cbx-row-gear { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-right: 4px; border-radius: 6px; color: var(--muted-foreground); opacity: 0; transition: opacity 150ms var(--cbx-ease); }
+.cbx-row:hover .cbx-row-gear, .cbx-row.is-active .cbx-row-gear, .cbx-row-gear:focus-visible { opacity: 1; }
+.cbx-row-gear:hover, .cbx-row-gear.is-active { background: var(--popover); color: var(--foreground); }
+.cbx-row-gear.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--ring); }
+.cbx-row-action { gap: 12px; width: 100%; padding: 0 12px; font-size: 14px; }
+.cbx-row-more .cbx-row-name { color: var(--primary); }
+.cbx-row-more { padding: 0 12px; cursor: pointer; }
+.cbx-pane-foot { flex: none; margin: 8px -12px -12px; padding: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
+.cbx-menu-apps > .cbx-pane-foot { margin: 12px -12px -12px; }
+.cbx-pane-foot > .cbx-row-action { color: var(--primary); font-weight: 500; }
+.cbx-pane-foot > .cbx-row-action svg { color: var(--primary); }
+.cbx-back { color: var(--muted-foreground); flex: none; width: auto; margin: 8px 8px 0; }
+.cbx-create { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 2px; }
+.cbx-create-label { padding: 0 2px; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }
+.cbx-create-row { display: flex; gap: 8px; }
+.cbx-create-error { margin: 0; padding: 0 2px; font-size: 12.5px; color: var(--destructive); }
+.cbx-input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--foreground); outline: none; }
+.cbx-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-soft); }
+textarea.cbx-input { height: auto; padding: 10px 12px; resize: vertical; min-height: 72px; line-height: 1.45; }
+.cbx-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
+.cbx-button-primary { background: var(--primary); color: var(--primary-foreground); }
+.cbx-button-primary:hover { filter: brightness(1.08); }
+.cbx-button:disabled { opacity: 0.55; cursor: default; filter: none; }
+
+/* Account menu */
+.cbx-account-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
+.cbx-account-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
+.cbx-account-name { font-weight: 600; }
+.cbx-account-sub { font-size: 12.5px; color: var(--muted-foreground); }
+.cbx-menu-account > .cbx-list { margin: 0; overflow: visible; }
+.cbx-menu-account > .cbx-pane { padding-top: 8px; }
+.cbx-list-foot { border-top: 1px solid var(--border); }
+.cbx-theme { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 6px 40px; }
+.cbx-theme-label { font-size: 14px; }
+.cbx-segmented { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--secondary); }
+.cbx-menu-account .cbx-row-name { flex: 1 0 auto; }
+.cbx-menu-account .cbx-row-value { flex: 0 1 auto; margin-left: auto; text-align: right; }
+.cbx-segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1; height: 30px; border-radius: 6px; font-size: 12.5px; color: var(--muted-foreground); text-align: center; }
+.cbx-segmented button.is-on { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px oklch(0 0 0 / 0.14); font-weight: 500; }
+.cbx-menu-account.is-inline { width: auto; border-top: 1px solid var(--border); margin-top: 8px; }
+.cbx-menu-account.is-inline .cbx-account-head { padding: 16px 12px 12px; border-bottom: 0; }
+.cbx-menu-account.is-inline > .cbx-list { margin: 0 -8px; }
+
+/* App switcher (§9) */
+.cbx-menu-apps .cbx-pane-heading { margin-top: 4px; }
+.cbx-menu-apps section + section .cbx-pane-heading { margin-top: 16px; }
+.cbx-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
+.cbx-app { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 14px 8px 12px; border: 1px solid transparent; border-radius: 12px; text-align: center; transition: background 150ms var(--cbx-ease); }
+.cbx-app:hover { background: var(--secondary); }
+.cbx-app.is-current { background: var(--accent-soft); border-color: var(--accent-edge); }
+.cbx-app-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 13px; overflow: hidden; background: oklch(var(--cbx-tile-l) var(--cbx-tile-c) var(--cbx-hue, 258)); color: oklch(var(--cbx-tile-fg-l) 0.12 var(--cbx-hue, 258)); font-family: var(--cbx-font-display); font-weight: 700; font-size: 16px; }
+.cbx-app-tile img { width: 70%; height: 70%; object-fit: contain; }
+.cbx-app-mark.cbx-app-tile { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
+.cbx-app-icon-dark { display: none; }
+:is(.dark, [data-theme='dark']) .cbx-app-icon-light { display: none; }
+:is(.dark, [data-theme='dark']) .cbx-app-icon-dark { display: block; }
+.cbx-app-name { max-width: 100%; font-size: 13px; font-weight: 600; line-height: 1.25; }
+.cbx-app-purpose { max-width: 100%; font-size: 12px; line-height: 1.25; color: var(--muted-foreground); }
+.cbx-app.is-elsewhere .cbx-app-tile { filter: saturate(0.3); }
+.cbx-app.is-elsewhere .cbx-app-name { color: var(--muted-foreground); font-weight: 500; }
+
+/* ── Palette (§6) ───────────────────────────────────────────────────────────── */
+.cbx-overlay { position: fixed; inset: 0; z-index: 70; font-family: var(--cbx-font-sans); font-size: 14px; line-height: 1.45; color: var(--foreground); }
+.cbx-palette-backdrop { display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: oklch(0.18 0.01 80 / 0.32); animation: cbx-fade 150ms var(--cbx-ease); }
+@keyframes cbx-fade { from { opacity: 0; } }
+.cbx-palette { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(560px, 76vh); overflow: hidden; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--cbx-shadow); outline: none; animation: cbx-pop 200ms var(--cbx-ease); }
+.cbx-palette-search { display: flex; align-items: center; gap: 12px; height: 56px; flex: none; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
+.cbx-palette-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none !important; background: none; font-size: 16px; color: var(--foreground); }
+.cbx-palette-search input::-webkit-search-cancel-button { display: none; }
+.cbx-palette-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; overscroll-behavior: contain; scroll-behavior: smooth; }
+.cbx-palette-group { display: flex; flex-direction: column; gap: 4px; }
+.cbx-palette-group .cbx-row { padding: 0 12px; gap: 12px; cursor: pointer; }
+.cbx-palette-busy { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary); animation: cbx-spin 800ms linear infinite; }
+@keyframes cbx-spin { to { transform: rotate(360deg); } }
+.cbx-palette-foot { display: flex; gap: 16px; flex: none; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
+.cbx-palette-foot .cbx-kbd + .cbx-kbd { margin-left: 2px; }
+
+/* ── Help column (§7) ───────────────────────────────────────────────────────── */
+.cbx-help { display: flex; flex-direction: column; flex: 0 0 360px; width: 360px; min-height: 0; background: var(--background); border-left: 1px solid var(--border); outline: none; }
+.cbx-help[hidden] { display: none; }
+/* Help left open from an earlier visit only shows docked: below 1280px it waits for the person,
+   also on the server-rendered first paint, before the client knows the width. */
+@media (max-width: 1279px) { .cbx-help[data-restored="true"] { display: none; } }
+@media (min-width: 1440px) { .cbx-help { flex-basis: 400px; width: 400px; } }
+@media (max-width: 1279px) {
+    .cbx-help { position: fixed; inset: 0; z-index: 65; width: auto; border-left: 0; animation: cbx-fade 150ms var(--cbx-ease); }
+}
+.cbx-help-head { display: flex; align-items: center; gap: 8px; height: 56px; flex: none; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); }
+.cbx-help-mark { color: var(--primary); flex: none; }
+.cbx-help-title { flex: 1; margin: 0; font-size: 15px; font-weight: 600; }
+.cbx-help-page { display: flex; flex-direction: column; gap: 2px; flex: none; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted-foreground); }
+.cbx-help-page strong { color: var(--foreground); font-weight: 600; }
+.cbx-help-page-label { font-family: var(--cbx-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
+.cbx-help-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 20px; overscroll-behavior: contain; scroll-behavior: smooth; }
+.cbx-help-section { margin-top: 8px; }
+.cbx-help-section .cbx-pane-heading { padding: 0; }
+.cbx-help-section .cbx-list { margin: 0 -8px; padding: 0 0 4px; }
+.cbx-help-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--warning-soft); font-size: 13px; }
+.cbx-help-notice svg { flex: none; margin-top: 2px; color: var(--warning-foreground); }
+.cbx-help-search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; margin-top: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--muted-foreground); }
+.cbx-help-search:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-soft); }
+.cbx-help-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none !important; background: none; font-size: 14px; color: var(--foreground); }
+.cbx-update { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 40px; padding: 10px 12px; border-radius: 8px; color: var(--foreground); }
+.cbx-update:hover { background: var(--secondary); }
+.cbx-update > svg { flex: none; margin-top: 2px; color: var(--muted-foreground); }
+.cbx-update-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.cbx-update-title { font-size: 14px; }
+.cbx-update.is-unread .cbx-update-title { font-weight: 600; }
+.cbx-update-excerpt { font-size: 12.5px; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.cbx-update-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; font-size: 12px; color: var(--muted-foreground); }
+.cbx-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
+.cbx-ask { display: flex; flex-direction: column; gap: 8px; }
+.cbx-ask .cbx-button { align-self: flex-end; }
+.cbx-chat-host { position: relative; }
+.cbx-chat-host cbox-support { position: fixed; bottom: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.cbx-help-article h3 { margin: 16px 0 8px; font-family: var(--cbx-font-display); font-size: 18px; line-height: 1.3; }
+.cbx-help-article p { margin: 0 0 12px; }
+.cbx-help-foot { display: flex; flex-direction: column; gap: 4px; flex: none; padding: 8px; border-top: 1px solid var(--border); }
+.cbx-help-foot .cbx-row-action:disabled { opacity: 0.55; cursor: default; }
+
+/* ── Sheets (phone) ─────────────────────────────────────────────────────────── */
+.cbx-sheet-backdrop { background: oklch(0.18 0.01 80 / 0.45); animation: cbx-fade 150ms var(--cbx-ease); }
+.cbx-sheet { position: absolute; display: flex; flex-direction: column; background: var(--popover); color: var(--popover-foreground); outline: none; box-shadow: var(--cbx-shadow); }
+.cbx-sheet-left { inset: 0 auto 0 0; width: min(340px, 88vw); border-right: 1px solid var(--border); animation: cbx-slide-left 200ms var(--cbx-ease); }
+.cbx-sheet-bottom { left: 0; right: 0; bottom: 0; max-height: 88svh; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; animation: cbx-slide-up 200ms var(--cbx-ease); }
+@keyframes cbx-slide-left { from { transform: translateX(-16px); opacity: 0; } }
+@keyframes cbx-slide-up { from { transform: translateY(16px); opacity: 0; } }
+.cbx-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; flex: none; padding: 0 8px 0 20px; border-bottom: 1px solid var(--border); }
+.cbx-sheet-head .cbx-back { margin: 0 0 0 -12px; }
+.cbx-sheet-title { font-size: 15px; }
+.cbx-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 24px; overscroll-behavior: contain; }
+.cbx-sheet-body > .cbx-list { margin: 0; }
+.cbx-sheet-body .cbx-menu-apps { width: auto; padding: 4px 0; }
+.cbx-sheet-pages { display: flex; flex-direction: column; gap: 4px; padding-left: 28px; }
+.cbx-sheet-area { display: flex; flex-direction: column; gap: 4px; }
+.cbx-sheet-area .cbx-row-action.is-current { background: var(--accent-soft); font-weight: 600; }
+.cbx-sheet-area .cbx-row-action.is-open { font-weight: 600; }
+.cbx-sheet-area .cbx-row-action.is-open svg { color: var(--primary); }
+.cbx-sheet-level .cbx-pane { padding: 4px 0 8px; }
+.cbx-sheet-level .cbx-pane .cbx-list { max-height: 228px; min-height: 0; }
+.cbx-sheet-level + .cbx-sheet-level { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 4px; }
+.cbx-sheet-level .cbx-pane-foot { margin: 4px 0 0; padding: 0; border-top: 0; }
+
+/* ── Breakpoints ────────────────────────────────────────────────────────────── */
+.cbx-only-mobile { display: none !important; }
+@media (max-width: 767px) {
+    .cbx-only-desktop { display: none !important; }
+    .cbx-only-mobile { display: inline-flex !important; }
+    .cbx-rail-slot, .cbx-subnav { display: none; }
+    .cbx-header { gap: 6px; padding: 0 8px; }
+    .cbx-context-mobile { flex: 1 1 auto; max-width: none; }
+    .cbx-search-button { width: 40px; height: 40px; justify-content: center; padding: 0; border-color: transparent; background: none; }
+    .cbx-search-button .cbx-search-label, .cbx-search-button .cbx-kbd { display: none; }
+    .cbx-tool { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: none; }
+    .cbx-tool-label { display: none; }
+    .cbx-icon-button { width: 40px; height: 40px; }
+    .cbx-banner { padding: 6px 12px; }
+}
+/* Touch targets: 44px on a coarse pointer (§12.2). */
+@media (pointer: coarse) {
+    .cbx-row, .cbx-row-main, .cbx-rail-link, .cbx-subnav-link { min-height: 44px; }
+    .cbx-icon-button, .cbx-row-gear, .cbx-tool, .cbx-search-button { min-width: 44px; min-height: 44px; }
+    .cbx-row-gear { opacity: 1; }
+    .cbx-pane-search, .cbx-help-search { height: 44px; }
+    .cbx-segmented button { height: 38px; }
+    .cbx-palette-foot { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .cbx-shell *, .cbx-overlay *, .cbx-popover, .cbx-rail, .cbx-rail-slot { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
+}