@vibes.diy/base 14.3.105 → 14.3.107

package/components/vibe-menu/parts/brief-faces-art.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brief-faces-art.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/parts/brief-faces-art.ts"],"names":[],"mappings":"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"}

package/components/vibe-menu/sketches/CodeTierAudition.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { type ScrollTabItem } from "../parts/ScrollTabRow.js";
+import type { CodeSlice, ViewerSlice } from "../slices.js";
+export type CodeRowItem = "agentLog" | "look" | "code" | "help";
+export declare function codeRowItems(gates: {
+    readonly owner: boolean;
+    readonly editor: boolean;
+    readonly codeModeAllowed: boolean;
+}): readonly CodeRowItem[];
+export type CodeTierKey = "code" | "files" | "data" | "app-settings" | "details" | "ai-requests" | "help" | "editText";
+export declare function codeTierItems(gates: {
+    readonly owner: boolean;
+    readonly editText: boolean;
+}): readonly CodeTierKey[];
+export declare const CODE_TIER_CSS = "\n[data-vibe-menu] .vm-tier[data-tier-mode] { flex: 1 1 auto; min-height: 0; }\n[data-vibe-menu] .vm-tier .vm-tier-ws {\n  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;\n}\n[data-vibe-menu] .vm-tier .vm-tier-ws > .vm-drill-sec:first-child,\n[data-vibe-menu] .vm-tier .vm-tier-ws > .vm-kicker:first-child { margin-top: 0; }\n[data-vibe-menu] .vm-tier[data-tier-mode] .vm-main > * { margin-top: var(--space-14); }\n[data-vibe-menu] .vm-tier .vm-srow + .vm-cnav { margin-top: 0; }\n";
+export type CodeTierOpen = CodeRowItem | null;
+export interface CodeTierState {
+    readonly open: CodeTierOpen;
+    readonly tab: CodeTierKey;
+    readonly editTextOn: boolean;
+}
+export interface CodeTierActions {
+    pick(item: CodeRowItem): void;
+    toggleLog(): void;
+    tierTab(key: CodeTierKey): void;
+    close(): void;
+}
+export declare function useCodeTierState(initial?: Partial<CodeTierState>): [CodeTierState, CodeTierActions];
+export declare function codeTierRowItems(items: readonly CodeTierKey[], editTextOn: boolean): readonly ScrollTabItem[];
+export interface CodeTierCardProps {
+    readonly viewer: ViewerSlice;
+    readonly code: CodeSlice;
+    readonly state: CodeTierState;
+    readonly actions: CodeTierActions;
+    readonly renderWorkspace?: (tab: CodeTierKey) => React.ReactNode;
+}
+export declare function CodeTierCard(props: CodeTierCardProps): React.ReactElement;
+export declare function codeTierShell(state: CodeTierState): {
+    readonly codeMode: boolean;
+    readonly logOpen: boolean;
+    readonly key: string;
+};

package/components/vibe-menu/sketches/CodeTierAudition.js

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { CODE_CARD_CSS } from "../cards/CodeCard.js";
+import { EDIT_TEXT_LABEL } from "../copy.js";
+import { currentMoment, withOpenLog } from "../moments.js";
+import { Suggestions } from "../parts/Chip.js";
+import { Composer } from "../parts/Composer.js";
+import { DoneButton } from "../parts/DoneButton.js";
+import { MomentLine } from "../parts/MomentLine.js";
+import { ScrollTabRow } from "../parts/ScrollTabRow.js";
+import { useComposerDraft } from "../parts/use-composer-draft.js";
+import { CARD_TAB_ROW_CSS, CardTabRow, MainAction, Stretch } from "../parts/CardTabRow.js";
+const ROW_FACE = Object.freeze({
+    agentLog: { label: "Agent log", glyph: "line-chart" },
+    look: { label: "Look", glyph: "palette" },
+    code: { label: "Code", glyph: "braces" },
+    help: { label: "Help", glyph: "help-circle" },
+});
+export function codeRowItems(gates) {
+    const items = [];
+    if (gates.editor)
+        items.push("agentLog");
+    if (gates.owner)
+        items.push("look");
+    if (gates.codeModeAllowed)
+        items.push("code");
+    else
+        items.push("help");
+    return items;
+}
+const TIER_FACE = Object.freeze({
+    code: { label: "Code", glyph: "braces" },
+    files: { label: "Files", glyph: "file" },
+    data: { label: "Data", glyph: "database" },
+    "app-settings": { label: "App settings", glyph: "sliders" },
+    details: { label: "App details", glyph: "app" },
+    "ai-requests": { label: "AI requests", glyph: "at-sign" },
+    help: { label: "Help", glyph: "help-circle" },
+    editText: { label: EDIT_TEXT_LABEL, glyph: "lines" },
+});
+export function codeTierItems(gates) {
+    const items = ["code", "files", "data", "app-settings"];
+    if (gates.owner)
+        items.push("details");
+    items.push("ai-requests", "help");
+    if (gates.editText)
+        items.push("editText");
+    return items;
+}
+export const CODE_TIER_CSS = `
+[data-vibe-menu] .vm-tier[data-tier-mode] { flex: 1 1 auto; min-height: 0; }
+[data-vibe-menu] .vm-tier .vm-tier-ws {
+  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
+}
+[data-vibe-menu] .vm-tier .vm-tier-ws > .vm-drill-sec:first-child,
+[data-vibe-menu] .vm-tier .vm-tier-ws > .vm-kicker:first-child { margin-top: 0; }
+[data-vibe-menu] .vm-tier[data-tier-mode] .vm-main > * { margin-top: var(--space-14); }
+[data-vibe-menu] .vm-tier .vm-srow + .vm-cnav { margin-top: 0; }
+`;
+export function useCodeTierState(initial) {
+    const [state, setState] = React.useState({
+        open: initial?.open ?? null,
+        tab: initial?.tab ?? "code",
+        editTextOn: initial?.editTextOn ?? false,
+    });
+    const actions = React.useMemo(() => ({
+        pick: (item) => setState((s) => ({ ...s, open: s.open === item ? null : item })),
+        toggleLog: () => setState((s) => ({ ...s, open: s.open === "agentLog" ? null : "agentLog" })),
+        tierTab: (key) => setState((s) => (key === "editText" ? { ...s, editTextOn: !s.editTextOn } : { ...s, tab: key })),
+        close: () => setState((s) => ({ ...s, open: null })),
+    }), []);
+    return [state, actions];
+}
+export function codeTierRowItems(items, editTextOn) {
+    return items.map((key) => {
+        const face = TIER_FACE[key];
+        if (key === "editText")
+            return { key, label: face.label, kind: "toggle", pressed: editTextOn };
+        return { key, label: face.label, glyph: face.glyph };
+    });
+}
+export function CodeTierCard(props) {
+    const { viewer, code, state, actions } = props;
+    const pending = viewer.identityPending === true;
+    const owner = viewer.role === "owner" && pending === false;
+    const editor = viewer.canEditSource === true && pending === false;
+    const codeModeAllowed = code.codeModeAvailable === true && pending === false;
+    const editTextOffered = editor && code.editText !== undefined && code.editText !== null;
+    const draft = useComposerDraft({ composer: code.composer, resetKey: viewer.appSlug });
+    const rowItems = codeRowItems({ owner, editor, codeModeAllowed });
+    const open = state.open !== null && rowItems.includes(state.open) ? state.open : null;
+    const css = React.createElement("style", null, CODE_CARD_CSS + CARD_TAB_ROW_CSS + CODE_TIER_CSS);
+    const row = (React.createElement(CardTabRow, { label: "Code tools", items: rowItems.map((key) => ({ key, label: ROW_FACE[key].label, glyph: ROW_FACE[key].glyph, kind: "drill" })), active: open, onDrill: (key) => actions.pick(key) }));
+    const placeholder = code.composer.cap === "Remix this" ? (code.remixHints[0] ?? "") : code.composer.placeholder;
+    const composer = React.createElement(Composer, { composer: code.composer, draft: draft, placeholder: placeholder });
+    if (open === "code") {
+        const tierItems = codeTierItems({ owner, editText: editTextOffered });
+        const tab = tierItems.includes(state.tab) && state.tab !== "editText" ? state.tab : "code";
+        let body;
+        if (tab === "details")
+            body = code.slots.details;
+        else if (tab === "help")
+            body = code.slots.help;
+        else
+            body = props.renderWorkspace?.(tab) ?? code.slots.workspace;
+        return (React.createElement("div", { className: "vm-code vm-ctab vm-xtab vm-tier", "data-card": "vibe", "data-tier-mode": "" },
+            css,
+            React.createElement("div", { className: "vm-tier-ws", "data-zone": "workspace", "data-tool": tab, role: "tabpanel", "aria-label": TIER_FACE[tab].label }, body),
+            React.createElement(MainAction, null, composer),
+            React.createElement(ScrollTabRow, { label: "Code mode tools", items: codeTierRowItems(tierItems, state.editTextOn), active: tab, onPick: (key) => actions.tierTab(key) }),
+            row));
+    }
+    if (open === "look" || open === "help") {
+        return (React.createElement("div", { className: "vm-code vm-ctab vm-xtab vm-tier", "data-card": "vibe" },
+            css,
+            React.createElement("div", { className: "vm-drill", "data-drill": open }, code.slots[open]),
+            React.createElement(DoneButton, { onDone: actions.close }),
+            row));
+    }
+    const queued = draft.queued.map((text) => ({ who: "you", text }));
+    const lines = [...code.log, ...queued];
+    const logOpen = open === "agentLog";
+    const moment = editor
+        ? withOpenLog(currentMoment(code.moments), { logOpen, hasLog: lines.length > 0, codeMode: false })
+        : { pinned: null, live: null };
+    const suggestions = moment.pinned === null ? (React.createElement(Suggestions, { items: code.suggestions.slice(0, 3), gold: code.goldSuggestion, onPick: code.onSuggestion, fastPaths: code.suggestionFastPaths, onToggleFastPath: owner ? code.onToggleFastPath : null })) : undefined;
+    const log = moment.live !== null ? { open: logOpen, onToggle: actions.toggleLog, lines, tail: suggestions } : null;
+    const hasMoment = moment.pinned !== null || moment.live !== null;
+    return (React.createElement("div", { className: "vm-code vm-ctab vm-xtab vm-tier", "data-card": "vibe" },
+        css,
+        React.createElement(Stretch, null, hasMoment ? React.createElement(MomentLine, { moment: moment, log: log, onAction: code.onMomentAction }) : null),
+        React.createElement(MainAction, null, composer),
+        row));
+}
+export function codeTierShell(state) {
+    return {
+        codeMode: state.open === "code",
+        logOpen: state.open === "agentLog",
+        key: `${state.open ?? ""}|${state.tab}`,
+    };
+}
+//# sourceMappingURL=CodeTierAudition.js.map

package/components/vibe-menu/sketches/CodeTierAudition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeTierAudition.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/sketches/CodeTierAudition.tsx"],"names":[],"mappings":"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"}

package/components/vibe-menu/slices.d.ts

@@ -30,11 +30,9 @@ export interface AccountSlice {
         avatarUrl?: string;
     }[];
     activeHandle: string | null;
-    needsHandle: boolean;
     handleBusy: boolean;
     onSelectHandle(slug: string): void;
     onAddHandle(slug: string): Promise<Result<void>>;
-    onClaimHandle(slug: string): Promise<Result<void>>;
     handleIdeas: {
         fromName: readonly string[];
         words: readonly string[];
@@ -60,6 +58,8 @@ export interface AccountSlice {
         onSignIn(): void;
     } | null;
     saveAsk?: SaveAskSlice | null;
+    readonly provisionalOnly?: boolean;
+    readonly tabRow?: boolean;
 }
 export interface CodeSlice {
     readonly firstBuildRequest?: string;
@@ -92,6 +92,7 @@ export interface CodeSlice {
     readonly survey?: CodeSurvey | null;
     readonly editText?: EditTextSlice | null;
     readonly tabRow?: boolean;
+    readonly latestSummary?: string;
 }
 export interface EditTextSlice {
     readonly on: boolean;
@@ -193,6 +194,7 @@ export interface ShareSlice {
         onSignIn(): void;
     } | null;
     saveAsk?: SaveAskSlice | null;
+    readonly tabRow?: boolean;
 }
 export interface SaveAskSlice {
     level: "soft" | "strong";
@@ -236,6 +238,7 @@ export interface VibeMenuProps {
     frameCap?: boolean;
     frame?: "viewport" | "contained";
     reducedMotion?: boolean;
+    homeTabRow?: boolean;
     firstBuild?: boolean;
     settledAtMount?: boolean;
 }

package/components/vibe-menu/slices.js.map

@@ -1 +1 @@
-{"version":3,"file":"slices.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/slices.ts"],"names":[],"mappings":"AAuTA,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC;IAC7C,UAAU,EAAE,qDAAqD;IACjE,eAAe,EAAE,sDAAsD;CAC/D,CAAC,CAAC"}
+{"version":3,"file":"slices.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/slices.ts"],"names":[],"mappings":"AA0UA,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC;IAC7C,UAAU,EAAE,qDAAqD;IACjE,eAAe,EAAE,sDAAsD;CAC/D,CAAC,CAAC"}

package/components/vibe-menu/vibe-menu.styles.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 export declare const VIBE_MENU_LIGHT_VARS = "\n  color-scheme: light;\n  --section-home: oklch(76.02% 0.1832 146.61);\n  --section-account: oklch(57.46% 0.2126 29.55);\n  --section-code: oklch(89.78% 0.1857 98.22);\n  --section-share: oklch(64.39% 0.1304 231.41);\n  --vibes-black: #000000;\n  --vibes-cream: #fffff0;\n  --menu-ink: #1a1a1a;\n  --card-bg: var(--vibes-cream);\n  --ink: #111111;\n  --muted: #555555;\n  --line: #111111;\n  --line-card: #111111;\n  --line-hairline: #1111112e;\n  --placeholder: var(--muted);\n  --suggest-border: #11111173;\n  --share-tint: #009ace1f;\n  --share-tint-strong: #009ace40;\n  --on-home: var(--menu-ink);\n  --on-account: var(--vibes-cream);\n  --on-code: var(--menu-ink);\n  --on-share: var(--menu-ink);\n  --badge: var(--section-account);\n  --on-badge: var(--vibes-cream);\n  --obsidian-fill: rgba(6, 9, 10, 0.94);\n  --obsidian-edge: rgba(255, 255, 255, 0.17);\n  --obsidian-highlight: rgba(255, 255, 255, 0.32);\n  --obsidian-rim: rgba(255, 255, 255, 0.1);\n  --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n  --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  --space-9: 9px;\n  --space-2: 2px;\n  --space-4: 4px;\n  --space-6: 6px;\n  --space-8: 8px;\n  --space-10: 10px;\n  --space-12: 12px;\n  --space-14: 14px;\n  --space-16: 16px;\n  --space-18: 18px;\n  --space-24: 24px;\n  --radius-card: 16px;\n  --radius-full: 999px;\n  --radius-bar-end: 25px;\n  --radius-access-line: 24px;\n  --radius-input: 22px;\n  --radius-done: 21px;\n  --radius-copy: 18px;\n  --radius-chip: 14px;\n  --radius-moment: 12px;\n  --radius-switch: 10px;\n  --radius-meter: 7px;\n  --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n  --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n  --stroke-rule: 2px;\n  --stroke-hairline: 1px;\n  --stroke-mini: 1.5px;\n  --stroke-focus: 3px;\n  --stroke-glyph: 2.4px;\n  --size-icon-circle: 28px;\n  --size-icon-circle-phone: 22px;\n  --size-glyph: 14px;\n  --size-glyph-cta: 20px;\n  --size-bar: 50px;\n  --size-tab: 176px;\n  --size-home-extra: 14px;\n  --size-bar-end: 63px;\n  --size-pill-w: 120px;\n  --size-pill-h: 44px;\n  --size-ring: 3px;\n  --size-edge: 24px;\n  --size-edge-phone: 16px;\n  --size-pill-flat-inset: 19px;\n  --size-band: 8px;\n  --size-row: 46px;\n  --size-row-compact: 42px;\n  --size-chip: 28px;\n  --size-copy: 36px;\n  --size-input: 44px;\n  --size-composer: 58px;\n  --size-access-line: 48px;\n  --size-segment: 32px;\n  --size-segment-mini: 24px;\n  --size-switch-w: 36px;\n  --size-meter: 14px;\n  --size-card-max: 480px;\n  --size-card-max-phone: 560px;\n  --size-log-max: 160px;\n  --size-code-mode-max-w: 1200px;\n  --opacity-tab-inactive: 0.73;\n  --opacity-row-disabled: 0.35;";
 export declare const VIBE_MENU_DARK_VARS = "\n  color-scheme: dark;\n  --card-bg: #1a1a1a;\n  --ink: #e0e0e0;\n  --muted: #a3a3a3;\n  --line-card: #e0e0e0;\n  --line-hairline: #e0e0e02e;\n  --suggest-border: #e0e0e073;\n  --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;";
-export declare const VIBE_MENU_CSS = "\n/* ---------- tokens (tokens.json), light, then both dark arms ----------\n   Detached layers (portalled out of the menu root) carry\n   data-vibe-menu-detached, so every token block lists them too. */\n[data-vibe-menu],\n[data-vibe-menu-detached] {\n  color-scheme: light;\n  --section-home: oklch(76.02% 0.1832 146.61);\n  --section-account: oklch(57.46% 0.2126 29.55);\n  --section-code: oklch(89.78% 0.1857 98.22);\n  --section-share: oklch(64.39% 0.1304 231.41);\n  --vibes-black: #000000;\n  --vibes-cream: #fffff0;\n  --menu-ink: #1a1a1a;\n  --card-bg: var(--vibes-cream);\n  --ink: #111111;\n  --muted: #555555;\n  --line: #111111;\n  --line-card: #111111;\n  --line-hairline: #1111112e;\n  --placeholder: var(--muted);\n  --suggest-border: #11111173;\n  --share-tint: #009ace1f;\n  --share-tint-strong: #009ace40;\n  --on-home: var(--menu-ink);\n  --on-account: var(--vibes-cream);\n  --on-code: var(--menu-ink);\n  --on-share: var(--menu-ink);\n  --badge: var(--section-account);\n  --on-badge: var(--vibes-cream);\n  --obsidian-fill: rgba(6, 9, 10, 0.94);\n  --obsidian-edge: rgba(255, 255, 255, 0.17);\n  --obsidian-highlight: rgba(255, 255, 255, 0.32);\n  --obsidian-rim: rgba(255, 255, 255, 0.1);\n  --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n  --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  --space-9: 9px;\n  --space-2: 2px;\n  --space-4: 4px;\n  --space-6: 6px;\n  --space-8: 8px;\n  --space-10: 10px;\n  --space-12: 12px;\n  --space-14: 14px;\n  --space-16: 16px;\n  --space-18: 18px;\n  --space-24: 24px;\n  --radius-card: 16px;\n  --radius-full: 999px;\n  --radius-bar-end: 25px;\n  --radius-access-line: 24px;\n  --radius-input: 22px;\n  --radius-done: 21px;\n  --radius-copy: 18px;\n  --radius-chip: 14px;\n  --radius-moment: 12px;\n  --radius-switch: 10px;\n  --radius-meter: 7px;\n  --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n  --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n  --stroke-rule: 2px;\n  --stroke-hairline: 1px;\n  --stroke-mini: 1.5px;\n  --stroke-focus: 3px;\n  --stroke-glyph: 2.4px;\n  --size-icon-circle: 28px;\n  --size-icon-circle-phone: 22px;\n  --size-glyph: 14px;\n  --size-glyph-cta: 20px;\n  --size-bar: 50px;\n  --size-tab: 176px;\n  --size-home-extra: 14px;\n  --size-bar-end: 63px;\n  --size-pill-w: 120px;\n  --size-pill-h: 44px;\n  --size-ring: 3px;\n  --size-edge: 24px;\n  --size-edge-phone: 16px;\n  --size-pill-flat-inset: 19px;\n  --size-band: 8px;\n  --size-row: 46px;\n  --size-row-compact: 42px;\n  --size-chip: 28px;\n  --size-copy: 36px;\n  --size-input: 44px;\n  --size-composer: 58px;\n  --size-access-line: 48px;\n  --size-segment: 32px;\n  --size-segment-mini: 24px;\n  --size-switch-w: 36px;\n  --size-meter: 14px;\n  --size-card-max: 480px;\n  --size-card-max-phone: 560px;\n  --size-log-max: 160px;\n  --size-code-mode-max-w: 1200px;\n  --opacity-tab-inactive: 0.73;\n  --opacity-row-disabled: 0.35;\n}\n@media (prefers-color-scheme: dark) {\n  [data-vibe-menu],\n  [data-vibe-menu-detached] {\n  color-scheme: dark;\n  --card-bg: #1a1a1a;\n  --ink: #e0e0e0;\n  --muted: #a3a3a3;\n  --line-card: #e0e0e0;\n  --line-hairline: #e0e0e02e;\n  --suggest-border: #e0e0e073;\n  --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n  }\n}\n.dark [data-vibe-menu],\n.dark [data-vibe-menu-detached] {\n  color-scheme: dark;\n  --card-bg: #1a1a1a;\n  --ink: #e0e0e0;\n  --muted: #a3a3a3;\n  --line-card: #e0e0e0;\n  --line-hairline: #e0e0e02e;\n  --suggest-border: #e0e0e073;\n  --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n}\n\n/* ---------- the root: the phone container ---------- */\n[data-vibe-menu] {\n  container-name: vibe-menu;\n  container-type: inline-size;\n  color: var(--ink);\n  font-family: var(--font-display);\n}\n\n/* Scrollbars (smoke F15): thin, in the menu's hairline, both themes, never the\n   native dark bar inside the cream card. The colour is set on the root AND\n   every descendant, for every scroller the menu hosts (drills, the Embed box,\n   injected panels): the app's global sheet sets scrollbar-color on *, which\n   beats a colour only inherited from the root. The width rule has zero\n   specificity so a part that hides its bar (the Code mode tab strip) still\n   wins. The webkit arm is for engines without the standard properties; Chrome\n   ignores it once they are set. */\n[data-vibe-menu],\n[data-vibe-menu] *,\n[data-vibe-menu-detached],\n[data-vibe-menu-detached] * {\n  scrollbar-color: var(--line-hairline) transparent;\n}\n:where([data-vibe-menu]),\n:where([data-vibe-menu]) :where(*) {\n  scrollbar-width: thin;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n  background: transparent;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar-thumb {\n  border-radius: var(--radius-full);\n  background: var(--line-hairline);\n}\n\n/* A section is set by data-section on any ancestor (or the root), using the\n   code keys: home | settings (Account) | vibe (Code) | share. It sets --accent\n   (the section colour) and --on-accent (its label colour). */\n[data-vibe-menu][data-section=\"home\"],\n[data-vibe-menu] [data-section=\"home\"] {\n  --accent: var(--section-home);\n  --on-accent: var(--on-home);\n}\n[data-vibe-menu][data-section=\"settings\"],\n[data-vibe-menu] [data-section=\"settings\"] {\n  --accent: var(--section-account);\n  --on-accent: var(--on-account);\n}\n[data-vibe-menu][data-section=\"vibe\"],\n[data-vibe-menu] [data-section=\"vibe\"] {\n  --accent: var(--section-code);\n  --on-accent: var(--on-code);\n}\n[data-vibe-menu][data-section=\"share\"],\n[data-vibe-menu] [data-section=\"share\"] {\n  --accent: var(--section-share);\n  --on-accent: var(--on-share);\n}\n\n[data-vibe-menu],\n[data-vibe-menu] * {\n  box-sizing: border-box;\n}\n/* the card's surface and side padding, so rows can bleed edge to edge */\n[data-vibe-menu] .vm-card-body {\n  position: relative;\n  padding: var(--space-14) var(--space-16) var(--space-16);\n  background: var(--card-bg);\n  color: var(--ink);\n  font: 400 14px/20px var(--font-display);\n}\n[data-vibe-menu] .vm-card-body.is-framed {\n  border: var(--stroke-rule) solid var(--line);\n  border-radius: var(--radius-card) var(--radius-card) 0 0;\n  overflow: hidden;\n}\n\n/* ---------- shared ---------- */\n/* Zero specificity: every vm-* rule wins over it, and so does any utility\n   class on content a host injects into the card (slots). */\n:where([data-vibe-menu]) :where(button) {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n  text-align: left;\n  touch-action: manipulation;\n}\n[data-vibe-menu] .vm-glyph {\n  width: var(--size-glyph);\n  height: var(--size-glyph);\n  fill: none;\n  stroke: currentColor;\n  stroke-width: var(--stroke-glyph);\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  flex: none;\n}\n[data-vibe-menu] .vm-label,\n[data-vibe-menu] .vm-seg button,\n[data-vibe-menu] .vm-chip {\n  font: 700 14px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n[data-vibe-menu] .vm-label.is-plain {\n  font: 700 16px/1.1 var(--font-display);\n  letter-spacing: 0;\n  text-transform: none;\n}\n[data-vibe-menu] .vm-kicker,\n[data-vibe-menu] .vm-subhead {\n  margin: 0 0 var(--space-8);\n  font: 700 10.5px/1.3 var(--font-tab);\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-subhead {\n  margin: var(--space-16) 0 0;\n  padding-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-sub {\n  margin: var(--space-8) 0 var(--space-14);\n  font-size: 13px;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-app-name {\n  white-space: nowrap;\n}\n[data-vibe-menu] .vm-busy {\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: var(--stroke-rule) solid var(--line-card);\n  border-top-color: transparent;\n  flex: none;\n  animation: vm-spin 0.9s linear infinite;\n}\n@keyframes vm-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-vibe-menu] .vm-busy {\n    animation: none;\n    border-top-color: var(--line-card);\n  }\n}\n\n/* ---------- SectionStrip: the bar ---------- */\n[data-vibe-menu] .vm-menu {\n  position: relative;\n}\n[data-vibe-menu] .vm-strip {\n  position: relative;\n  width: calc(var(--size-tab) * 4 + var(--size-home-extra) + var(--size-bar-end) + 2px);\n  height: var(--size-bar);\n}\n[data-vibe-menu] .vm-strip-slide {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: flex-end;\n  border: var(--stroke-rule) solid var(--line);\n  border-right: 0;\n  border-radius: var(--bar-tl, var(--radius-bar-end)) 0 0 var(--radius-bar-end);\n  overflow: hidden;\n  background: var(--card-bg);\n}\n[data-vibe-menu] .vm-tab {\n  position: relative;\n  width: var(--size-tab);\n  flex: none;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border: 0;\n  padding: 0 0 0 var(--space-9);\n  cursor: pointer;\n  background: var(--accent);\n}\n[data-vibe-menu] .vm-tab-circle {\n  width: var(--size-icon-circle);\n  height: var(--size-icon-circle);\n  border-radius: 50%;\n  background: var(--menu-ink);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n}\n[data-vibe-menu] .vm-tab svg {\n  width: calc(var(--size-icon-circle) / 2);\n  height: calc(var(--size-icon-circle) / 2);\n  fill: none;\n  stroke: var(--vibes-cream);\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  flex: none;\n}\n[data-vibe-menu] .vm-tab-label {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0 0 1.9px;\n  font-family: var(--font-tab);\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 1.9px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  pointer-events: none;\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] {\n  width: calc(var(--size-tab) + var(--size-home-extra));\n  padding-left: calc(var(--space-9) + var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] .vm-tab-label {\n  left: calc(var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"share\"] {\n  width: calc(var(--size-tab) + var(--size-bar-end));\n}\n[data-vibe-menu] .vm-tab[data-section=\"share\"] .vm-tab-label {\n  right: var(--size-bar-end);\n}\n[data-vibe-menu] .vm-tab:focus-visible {\n  outline: var(--stroke-focus) solid var(--line);\n  outline-offset: -3px;\n}\n/* Port change (smoke F5): the DS inset line ring vanished on the black pill\n   and drew square corners. The pill's ring is cream, sits in the obsidian\n   glass's 3px rim (offset 0), and follows the stadium (the pill's radius). */\n[data-vibe-menu] .vm-pill:focus-visible {\n  outline: var(--stroke-focus) solid var(--vibes-cream);\n  outline-offset: 0;\n}\n[data-vibe-menu] .vm-menu.has-card .vm-tab:not(.is-active) {\n  opacity: var(--opacity-tab-inactive);\n}\n[data-vibe-menu] .vm-badge {\n  position: absolute;\n  top: -4px;\n  right: 6px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: var(--radius-full);\n  background: var(--badge);\n  color: var(--on-badge);\n  font: 700 11px/18px var(--font-display);\n  text-align: center;\n}\n/* the bar sits against the pill: it runs half the glass under it */\n[data-vibe-menu] .vm-bar-anchor {\n  position: relative;\n  height: var(--size-bar);\n}\n[data-vibe-menu] .vm-bar-anchor .vm-strip {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n}\n[data-vibe-menu] .vm-bar-anchor .vm-glass {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n}\n/* phones: the bar spans the width; tabs sized to their content, icon above label */\n[data-vibe-menu] .vm-strip.is-phone {\n  width: 100%;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab {\n  width: auto;\n  flex: 1 1 auto;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-width: 0;\n  padding: 4px 2px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-circle {\n  width: var(--size-icon-circle-phone);\n  height: var(--size-icon-circle-phone);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab svg {\n  width: 12px;\n  height: 12px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"home\"] {\n  padding: 4px 2px 4px calc(2px + var(--size-home-extra) * 0.7);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"share\"] {\n  padding-right: var(--size-bar-end);\n  flex-grow: 1;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-label {\n  position: static;\n  display: block;\n  font-size: 9.6px;\n  letter-spacing: 1px;\n  padding: 0 0 0 1px;\n}\n\n/* ---------- VibesSwitch: the pill in its obsidian glass ---------- */\n[data-vibe-menu] .vm-glass {\n  position: relative;\n  width: calc(var(--size-pill-w) + 2 * var(--size-ring));\n  height: calc(var(--size-pill-h) + 2 * var(--size-ring));\n  border-radius: var(--radius-full);\n  flex: none;\n  background:\n    linear-gradient(to right, transparent, var(--obsidian-highlight), transparent) top / 100% 1px no-repeat,\n    linear-gradient(to bottom, var(--obsidian-highlight), transparent, var(--obsidian-edge)) left / 1px 100% no-repeat,\n    var(--obsidian-fill);\n  box-shadow: var(--obsidian-shadow);\n}\n[data-vibe-menu] .vm-pill {\n  position: absolute;\n  left: var(--size-ring);\n  top: var(--size-ring);\n  width: var(--size-pill-w);\n  height: var(--size-pill-h);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-full);\n  background: none;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-switch-art {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n[data-vibe-menu] .vm-pill .vm-badge {\n  top: -6px;\n  right: 4px;\n}\n/* #7079: the guest maker's save-time ask: a dot, not a count. */\n[data-vibe-menu] .vm-badge.is-dot {\n  min-width: 10px;\n  width: 10px;\n  height: 10px;\n  padding: 0;\n}\n[data-vibe-menu] .vm-chiclet {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: var(--radius-full);\n  background: var(--section-code);\n  /* Port change: bundle.css writes #111111 (ink); text on a section colour is\n     menu-ink (Global Constraints), which --on-code resolves to in both themes. */\n  color: var(--on-code);\n  font: 700 11px/18px var(--font-display);\n  letter-spacing: 0.06em;\n}\n/* #4291. The chiclet's shape, so the two read as one row \u2014 but in the badge\n   colour (the identity lane) so elevation never looks like a publish state. */\n[data-vibe-menu] .vm-admin-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: var(--radius-full);\n  background: var(--badge);\n  color: var(--on-badge);\n  font: 700 11px/18px var(--font-display);\n  letter-spacing: 0.06em;\n}\n\n/* ---------- MenuCard: the card, its band and the folder-tab join, drawn once ---------- */\n[data-vibe-menu] .vm-frame {\n  position: relative;\n}\n[data-vibe-menu] .vm-frame .vm-card {\n  position: absolute;\n  left: 0;\n  top: 0;\n  background: var(--card-bg);\n  color: var(--ink);\n  overflow: hidden;\n  border-radius: var(--radius-card) var(--radius-card) 0 0;\n}\n[data-vibe-menu] .vm-frame .vm-card .vm-card-body {\n  padding-bottom: calc(var(--space-16) + var(--size-band));\n}\n[data-vibe-menu] .vm-outline {\n  position: absolute;\n  left: 0;\n  top: 0;\n  overflow: visible;\n  pointer-events: none;\n}\n[data-vibe-menu] .vm-outline .vm-band,\n[data-vibe-menu] .vm-outline .vm-cover {\n  fill: var(--accent);\n}\n[data-vibe-menu] .vm-outline .vm-edge {\n  fill: none;\n  stroke: var(--line);\n  stroke-width: 2;\n  stroke-linejoin: miter;\n}\n\n/* ---------- ActionPill: the card's one main action ---------- */\n[data-vibe-menu] .vm-ask {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-12);\n  width: 100%;\n  padding: var(--space-14) var(--space-18);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-full);\n  background: var(--accent);\n  color: var(--on-accent);\n  font: 700 21px/1 var(--font-display);\n  letter-spacing: -0.02em;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-ask.is-solo {\n  margin-bottom: var(--space-14);\n}\n[data-vibe-menu] .vm-ask .vm-glyph {\n  width: var(--size-glyph-cta);\n  height: var(--size-glyph-cta);\n  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-ask:hover .vm-glyph {\n  transform: translateX(4px);\n}\n[data-vibe-menu] .vm-ask.is-phone {\n  font-size: 18px;\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) > span {\n  flex: 1;\n}\n\n/* ---------- Chip ---------- */\n[data-vibe-menu] .vm-chip {\n  height: var(--size-chip);\n  padding: 0 var(--space-12);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-chip);\n  background: var(--accent);\n  color: var(--on-accent);\n  font-size: 11px;\n  flex: none;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-chip.is-ghost {\n  background: transparent;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-chip.is-name {\n  font: 700 14px/1 var(--font-display);\n  letter-spacing: 0;\n  text-transform: none;\n}\n[data-vibe-menu] .vm-chip.vm-copy {\n  height: var(--size-copy);\n  padding: 0 var(--space-14);\n  border-radius: var(--radius-copy);\n  flex-shrink: 0;\n  align-self: center;\n  white-space: nowrap;\n}\n[data-vibe-menu] .vm-suggestions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-6);\n}\n/* Port change (smoke F9): codegen writes long chips, so a chip wraps inside\n   the card (DS \"text that can outgrow its track wraps\") instead of running\n   past its edge; a one-line chip keeps the 28px chip height. */\n[data-vibe-menu] .vm-suggest {\n  min-height: var(--size-chip);\n  max-width: 100%;\n  min-width: 0;\n  padding: var(--space-2) var(--space-12);\n  text-align: left;\n  overflow-wrap: anywhere;\n  border: var(--stroke-mini) solid var(--suggest-border);\n  border-radius: var(--radius-chip);\n  background: none;\n  color: var(--ink);\n  font: 400 13px/20px var(--font-display);\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-suggest:hover,\n[data-vibe-menu] .vm-suggest.is-hover {\n  border-color: var(--line-card);\n  background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n/* The gold option (#6768): the one capability the agent offered, a chip in the\n   same row and the same order as the others. It wears the lit state the others\n   take on hover, a full-ink outline and a filled star before the label, so it\n   reads as the offer without a second colour on the card. */\n[data-vibe-menu] .vm-suggest.is-gold {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-6);\n  border-color: var(--line-card);\n  background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n[data-vibe-menu] .vm-suggest.is-gold .vm-glyph {\n  flex: none;\n  fill: currentColor;\n}\n[data-vibe-menu] .vm-picks {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-6);\n}\n\n/* ---------- Composer: the logo pill's shape ---------- */\n[data-vibe-menu] .vm-composer {\n  display: flex;\n  align-items: stretch;\n  min-height: var(--size-composer);\n  margin-bottom: var(--space-16);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-full);\n  overflow: hidden;\n  background: var(--card-bg);\n}\n[data-vibe-menu] .vm-composer:focus-within,\n[data-vibe-menu] .vm-composer.is-focus {\n  box-shadow: 0 0 0 3px var(--accent);\n}\n[data-vibe-menu] .vm-composer textarea {\n  flex: 1;\n  min-width: 0;\n  align-self: center;\n  margin: 0 var(--space-12) 0 2px;\n  padding: 0;\n  resize: none;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--ink);\n  font: 700 18px/1.2 var(--font-display);\n  letter-spacing: -0.02em;\n  field-sizing: content;\n  max-height: 2.4em;\n}\n[data-vibe-menu] .vm-composer textarea::placeholder {\n  color: var(--placeholder);\n}\n[data-vibe-menu] .vm-composer .vm-attach {\n  order: -1;\n  width: var(--size-copy);\n  height: var(--size-copy);\n  margin-left: var(--space-10);\n  align-self: center;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  flex: none;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-composer .vm-attach:hover {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-composer .vm-glyph {\n  width: 16px;\n  height: 16px;\n}\n[data-vibe-menu] .vm-cap {\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--space-24) 0 20px;\n  border-left: var(--stroke-rule) solid var(--line-card);\n  background: var(--section-code);\n  color: var(--on-code);\n  font: 700 14px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-cap:hover {\n  background: color-mix(in oklch, var(--section-code), var(--menu-ink) 10%);\n}\n[data-vibe-menu] .vm-composer.is-building .vm-cap[data-send],\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-stop] {\n  display: none;\n}\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-send] {\n  display: flex;\n}\n[data-vibe-menu] .vm-queue-note {\n  display: none;\n  margin: -10px 0 12px 18px;\n  font-size: 12px;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-composer:has(textarea:not(:placeholder-shown)) + .vm-queue-note {\n  display: block;\n}\n[data-vibe-menu] .vm-composer.is-phone textarea {\n  margin-right: var(--space-6);\n  font-size: 16px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-attach {\n  margin-left: 4px;\n  width: 28px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-cap {\n  padding: 0 var(--space-18) 0 var(--space-14);\n}\n\n/* ---------- Row: the bar's tab grammar inside the card ---------- */\n[data-vibe-menu] .vm-group {\n  border-top: var(--stroke-rule) solid var(--line-card);\n  margin: 0 calc(-1 * var(--space-16));\n}\n[data-vibe-menu] .vm-group.is-flush {\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-12);\n  width: 100%;\n  height: var(--size-row);\n  padding: 0 var(--space-16);\n}\n[data-vibe-menu] .vm-row.is-compact {\n  height: var(--size-row-compact);\n}\n[data-vibe-menu] .vm-row + .vm-row {\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row .vm-label {\n  flex: 1;\n}\n[data-vibe-menu] .vm-dot {\n  width: var(--size-icon-circle);\n  height: var(--size-icon-circle);\n  border-radius: 50%;\n  background: var(--ink);\n  color: var(--card-bg);\n  display: grid;\n  place-items: center;\n  flex: none;\n}\n[data-vibe-menu] button.vm-row:hover .vm-dot:not(.vm-app),\n[data-vibe-menu] .vm-row.is-hover .vm-dot:not(.vm-app) {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-row.is-quiet .vm-dot {\n  background: transparent;\n  color: var(--ink);\n  box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] {\n  opacity: 0.35;\n  cursor: default;\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] .vm-dot {\n  background: var(--ink) !important;\n  color: var(--card-bg) !important;\n}\n[data-vibe-menu] .vm-app,\n[data-vibe-menu] .vm-initial {\n  font: 700 12px/1 var(--font-tab);\n  box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-app {\n  background: var(--app);\n  color: var(--menu-ink);\n}\n[data-vibe-menu] .vm-initial {\n  background: transparent;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-chev {\n  display: grid;\n  color: var(--muted);\n  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-chev.is-open {\n  transform: rotate(90deg);\n}\n[data-vibe-menu] .vm-count {\n  font: 700 12px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-count.is-handle {\n  max-width: 45%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  letter-spacing: 0.02em;\n}\n[data-vibe-menu] .vm-switch {\n  position: relative;\n  width: var(--size-switch-w);\n  height: 20px;\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-switch);\n  flex: none;\n}\n[data-vibe-menu] .vm-switch::after {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--ink);\n}\n[data-vibe-menu] .vm-switch.is-on {\n  background: var(--accent);\n}\n[data-vibe-menu] .vm-switch.is-on::after {\n  left: 18px;\n}\n\n/* ---------- BackRow and DoneButton: a drill-in's frame ---------- */\n[data-vibe-menu] .vm-back {\n  display: flex;\n  align-items: center;\n  gap: var(--space-12);\n  width: calc(100% + 2 * var(--space-16));\n  height: var(--size-row-compact);\n  margin: 0 calc(-1 * var(--space-16));\n  padding: 0 var(--space-16);\n  border-top: var(--stroke-rule) solid var(--line-card);\n  border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* A drill that replaces the whole card body (Share, Account) sits on the card's\n   top edge, which the outline already draws: no rule, and it takes the body's\n   top padding so no empty band shows above it (cards-hero.css .card-title + .h-back). */\n[data-vibe-menu] .vm-back.is-top {\n  margin-top: calc(-1 * var(--space-14));\n  border-top: 0;\n}\n[data-vibe-menu] .vm-back .vm-label {\n  flex: none;\n}\n[data-vibe-menu] .vm-back-name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font: 400 16px/1.1 var(--font-display);\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-back:hover .vm-dot,\n[data-vibe-menu] .vm-back.is-hover .vm-dot {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-drill {\n  padding-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-sec + .vm-drill-sec {\n  margin-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-line {\n  margin: 0 0 var(--space-14);\n  font: 700 18px/1.25 var(--font-display);\n  letter-spacing: -0.01em;\n}\n[data-vibe-menu] .vm-done {\n  display: block;\n  width: 100%;\n  height: var(--size-row-compact);\n  margin-top: var(--space-16);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-done);\n  background: var(--accent);\n  color: var(--on-accent);\n  text-align: center;\n  font: 700 14px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-textbtn {\n  display: block;\n  width: 100%;\n  height: 40px;\n  margin-top: var(--space-4);\n  text-align: center;\n  font: 700 12px/1 var(--font-tab);\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-textbtn:hover {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-faq {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-12);\n  width: 100%;\n  padding: var(--space-12) 0;\n  font: 400 16px/1.3 var(--font-display);\n}\n[data-vibe-menu] .vm-faq + .vm-faq {\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n\n/* ---------- MomentLine: the current moment ---------- */\n[data-vibe-menu] .vm-moments {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment {\n  margin: 0;\n  font: 400 16px/1.3 var(--font-display);\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-moment.is-pinned {\n  padding: var(--space-10) var(--space-12) var(--space-12) var(--space-14);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-left: var(--size-band) solid var(--accent);\n  border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-moment-text {\n  margin: 0 0 var(--space-10);\n}\n[data-vibe-menu] .vm-moment-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-6);\n}\n[data-vibe-menu] .vm-moment-hint {\n  font-size: 12px;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-progress,\n[data-vibe-menu] .vm-moment.is-summary {\n  display: flex;\n  align-items: center;\n  gap: var(--space-10);\n  padding: 0 var(--space-2);\n}\n[data-vibe-menu] .vm-moment.is-summary {\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-expander {\n  width: 100%;\n  gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment.is-expander:hover {\n  color: var(--ink);\n}\n/* The live line's link (the first build's real address, #6451 S9c): pointer\n   events back on, since the layer takes no hits of its own. */\n[data-vibe-menu] .vm-moment-link {\n  display: inline-block;\n  margin: 0 var(--space-2);\n  font: 400 14px/1.3 var(--font-display);\n  color: var(--ink);\n  text-decoration: underline;\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n  pointer-events: auto;\n}\n[data-vibe-menu] .vm-live .vm-chev {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-log-clip {\n  overflow: hidden;\n}\n/* Port addition (RULINGS R1): the log clip is always rendered (RECONCILE \u00A75c),\n   so the base stylesheet owns its shut and open states. The shell's per-frame\n   tween (T11) writes an inline height, which overrides these during motion.\n   C's VIBE_MENU_SHELL_CSS does not repeat them. */\n[data-vibe-menu] .vm-log-clip[data-open=\"false\"] {\n  height: 0;\n  overflow: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"] {\n  height: auto;\n  /* Known adjustment (plan header): room for .vm-log's own 160px cap plus its\n     8px margin-top and two hairline borders, so the clip never scrolls on top\n     of the log. */\n  max-height: calc(var(--size-log-max, 160px) + var(--space-8) + 2 * var(--stroke-hairline));\n  overflow: auto;\n  /* Smoke F15: the shell's height tween makes the clip overflow for a moment;\n     .vm-log scrolls itself, so the clip never shows a bar. */\n  scrollbar-width: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"]::-webkit-scrollbar {\n  display: none;\n}\n[data-vibe-menu] .vm-log {\n  max-height: var(--size-log-max);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  margin-top: var(--space-8);\n  padding: var(--space-10) 4px var(--space-10) var(--space-24);\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n  border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n  font-size: 13.5px;\n  line-height: 1.35;\n}\n[data-vibe-menu] .vm-log-line {\n  margin: 0;\n}\n[data-vibe-menu] .vm-log-line:first-child {\n  margin-top: auto;\n}\n[data-vibe-menu] .vm-log-line b {\n  font: 700 10px/1 var(--font-tab);\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--muted);\n  margin-right: 4px;\n}\n\n/* ---------- AccessToggle: Restricted | Public and its line ---------- */\n[data-vibe-menu] .vm-access {\n  display: flex;\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-full);\n  overflow: hidden;\n}\n[data-vibe-menu] .vm-access button {\n  flex: 1;\n  height: var(--size-bar);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-10);\n  text-align: center;\n  font: 700 24px/1 var(--font-display);\n  letter-spacing: -0.02em;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-access button + button {\n  border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-access button.is-active {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-access button:not(.is-active):hover {\n  background: color-mix(in srgb, var(--accent) 20%, transparent);\n}\n/* Settings still loading (preflight ruling P14): dimmed and inert. */\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] {\n  opacity: var(--opacity-row-disabled);\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button {\n  cursor: default;\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button:not(.is-active):hover {\n  background: transparent;\n}\n[data-vibe-menu] .vm-access button .vm-busy {\n  width: 16px;\n  height: 16px;\n}\n[data-vibe-menu] .vm-access-line {\n  display: flex;\n  align-items: center;\n  gap: var(--space-10);\n  min-height: var(--size-access-line);\n  margin: var(--space-10) 0 var(--space-12);\n  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-14);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-access-line);\n  background: var(--share-tint);\n  font-size: 16.5px;\n  line-height: 1.25;\n}\n[data-vibe-menu] .vm-access-line > span {\n  flex: 1;\n  min-width: 0;\n}\n[data-vibe-menu] .vm-access-line .vm-glyph {\n  width: 16px;\n  height: 16px;\n}\n[data-vibe-menu] .vm-publish {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  padding: 5px 5px 5px var(--space-10);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-left: var(--size-band) solid var(--accent);\n  border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-publish b {\n  font: 700 11px/1 var(--font-tab);\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n[data-vibe-menu] .vm-publish span {\n  flex: 1;\n  min-width: 0;\n  font-size: 13px;\n  line-height: 1.25;\n  color: var(--muted);\n}\n\n/* ---------- GrantControls ---------- */\n[data-vibe-menu] .vm-seg {\n  display: flex;\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-full);\n  overflow: hidden;\n}\n[data-vibe-menu] .vm-seg button {\n  flex: 1;\n  height: var(--size-segment);\n  text-align: center;\n  font-size: 11px;\n}\n[data-vibe-menu] .vm-seg button + button {\n  border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-seg button.is-active {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-seg.is-mini {\n  margin: 0;\n  border-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-seg.is-mini button {\n  flex: none;\n  height: var(--size-segment-mini);\n  padding: 0 var(--space-8);\n  font-size: 10px;\n}\n[data-vibe-menu] .vm-seg.is-mini button + button {\n  border-left-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-grants {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-6) var(--space-12);\n}\n[data-vibe-menu] .vm-grant-ctl {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n[data-vibe-menu] .vm-grant-name {\n  font: 700 10px/1 var(--font-tab);\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-grant-fixed {\n  font: 700 10px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--ink);\n}\n\n/* ---------- MemberRow ---------- */\n[data-vibe-menu] .vm-input {\n  width: 100%;\n  height: var(--size-input);\n  margin-bottom: var(--space-14);\n  padding: 0 var(--space-18);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-input);\n  background: transparent;\n  color: var(--ink);\n  font: inherit;\n}\n[data-vibe-menu] .vm-members-head {\n  margin-top: 0;\n  padding: 2px 0 var(--space-8);\n}\n[data-vibe-menu] .vm-members-head + .vm-input {\n  height: 40px;\n  margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-person {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-8) var(--space-12);\n  padding: var(--space-6) 0;\n}\n[data-vibe-menu] .vm-person + .vm-person {\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-person .vm-label {\n  flex: 1;\n  min-width: 0;\n}\n[data-vibe-menu] .vm-request {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-8) var(--space-12);\n  margin-bottom: 2px;\n  padding: var(--space-10) var(--space-12);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-card);\n  background: var(--share-tint-strong);\n}\n[data-vibe-menu] .vm-request-top {\n  flex: 1 0 auto;\n}\n[data-vibe-menu] .vm-request-actions {\n  display: flex;\n  gap: var(--space-6);\n  margin-left: auto;\n}\n[data-vibe-menu] .vm-who-block > .vm-row {\n  width: calc(100% + 2 * var(--space-16));\n  margin: 2px calc(-1 * var(--space-16)) 0;\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request-top {\n  flex-basis: 100%;\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request .vm-grants {\n  column-gap: var(--space-10);\n}\n/* stacking, as the prototype: card < bar < outline < glass and pill */\n[data-vibe-menu] .vm-frame .vm-card {\n  z-index: 1;\n}\n[data-vibe-menu] .vm-frame .vm-strip {\n  z-index: 2;\n}\n[data-vibe-menu] .vm-frame .vm-outline {\n  z-index: 3;\n}\n[data-vibe-menu] .vm-frame .vm-glass {\n  z-index: 4;\n}\n[data-vibe-menu] .vm-refresh {\n  display: grid;\n  place-items: center;\n  width: var(--size-icon-circle);\n  height: var(--size-icon-circle);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: 50%;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-refresh:hover {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n\n/* ---------- port additions: not in bundle.css ---------- */\n/* Rows and the action pill can be links (Home's rows, the credits action). */\n[data-vibe-menu] :where(a.vm-row, a.vm-ask) {\n  color: inherit;\n  text-decoration: none;\n}\n[data-vibe-menu] a.vm-row:hover .vm-dot:not(.vm-app) {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n/* A member's name drills into that member (spec \u00A78). */\n[data-vibe-menu] .vm-person button.vm-label {\n  text-align: left;\n}\n[data-vibe-menu] .vm-chip[aria-disabled=\"true\"],\n[data-vibe-menu] .vm-cap:disabled,\n[data-vibe-menu] .vm-composer .vm-attach:disabled {\n  opacity: var(--opacity-row-disabled);\n  cursor: default;\n}\n/* Staged attachments above the composer: name chips, no emoji. */\n[data-vibe-menu] .vm-attachments {\n  margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-attachments .vm-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-6);\n  max-width: 220px;\n}\n[data-vibe-menu] .vm-attachments .vm-chip > span:last-child {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n[data-vibe-menu] .vm-attachments .vm-chip[data-status=\"error\"] {\n  border-color: var(--section-account);\n}\n/* A suggestion's fast-path marks (RULINGS O4, production #2917 decorateChip).\n   Siblings of .vm-suggest, since a button can't nest a button. The owner's\n   toggle (FastPathToggle) is outline when not blessed, filled when blessed\n   (aria-pressed); the badges are the marks every viewer sees. */\n[data-vibe-menu] .vm-suggest-item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  max-width: 100%;\n  min-width: 0;\n}\n[data-vibe-menu] .vm-suggest-item > * {\n  flex: none;\n}\n[data-vibe-menu] .vm-suggest-item > .vm-suggest {\n  flex: 0 1 auto;\n}\n[data-vibe-menu] .vm-suggest-shield {\n  width: var(--size-chip);\n  height: var(--size-chip);\n  display: inline-grid;\n  place-items: center;\n  border-radius: var(--radius-full);\n  background: none;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-suggest-shield:hover {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] .vm-glyph {\n  fill: currentColor;\n}\n/* The non-interactive marks every viewer sees (production ChipShieldBadge,\n   ChipJumpBadge): a filled shield (\"stays in this app\", server-authoritative)\n   or an arrow (\"opens another app\"). Never both on one chip. */\n[data-vibe-menu] .vm-suggest-badge {\n  width: var(--size-chip);\n  height: var(--size-chip);\n  display: inline-grid;\n  place-items: center;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-badge.is-shield .vm-glyph {\n  fill: currentColor;\n}\n[data-vibe-menu] .vm-suggest-badge.is-jump {\n  color: var(--muted);\n}\n\n/* ---------- phones (cards-hero.css): the menu's width, not the viewport ---------- */\n@container vibe-menu (max-width: 480px) {\n  [data-vibe-menu] .vm-ask {\n    font-size: 18px;\n  }\n  /* the field keeps 16px (iOS zooms smaller fields); attach slims instead */\n  [data-vibe-menu] .vm-composer textarea {\n    margin-right: var(--space-6);\n    font-size: 16px;\n  }\n  [data-vibe-menu] .vm-composer .vm-attach {\n    margin-left: 4px;\n    width: 28px;\n  }\n  [data-vibe-menu] .vm-cap {\n    padding: 0 var(--space-18) 0 var(--space-14);\n  }\n  [data-vibe-menu] .vm-access button {\n    font-size: 21px;\n  }\n  /* the access line keeps its sentence to two lines beside the chip */\n  [data-vibe-menu] .vm-access-line {\n    padding-left: 12px;\n    gap: 8px;\n    font-size: 15.5px;\n  }\n  [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n    padding: 0 10px;\n  }\n  /* Data and Code drop under the handle on one line (two on the narrowest) */\n  [data-vibe-menu] .vm-person .vm-grants {\n    flex-basis: 100%;\n    column-gap: var(--space-10);\n  }\n  [data-vibe-menu] .vm-request .vm-grants {\n    column-gap: var(--space-10);\n  }\n  [data-vibe-menu] .vm-request-top {\n    flex-basis: 100%;\n  }\n  [data-vibe-menu] .vm-input {\n    font-size: 16px;\n  }\n}\n@container vibe-menu (max-width: 359px) {\n  [data-vibe-menu] .vm-access button {\n    font-size: 19px;\n  }\n  /* the line drops its icon here: the enclosure already marks it */\n  [data-vibe-menu] .vm-access-line > .vm-glyph {\n    display: none;\n  }\n  [data-vibe-menu] .vm-access-line {\n    margin: 8px 0 10px;\n    font-size: 14.5px;\n  }\n  [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n    padding: 0 8px;\n  }\n  /* the cap and attach slim so the field keeps room (REMIX THIS stays one line) */\n  [data-vibe-menu] .vm-cap {\n    padding: 0 13px 0 10px;\n    letter-spacing: 0.05em;\n  }\n  [data-vibe-menu] .vm-composer .vm-attach {\n    margin-left: 3px;\n    width: 24px;\n  }\n  /* 16px, not the prototype's 14px: no text field under 16px on phones (spec \u00A74.5) */\n  [data-vibe-menu] .vm-composer textarea {\n    margin: 0 4px 0 0;\n    font-size: 16px;\n  }\n  [data-vibe-menu] .vm-chip.vm-copy {\n    padding: 0 10px;\n    letter-spacing: 0.06em;\n  }\n}\n";
+export declare const VIBE_MENU_CSS = "\n/* ---------- tokens (tokens.json), light, then both dark arms ----------\n   Detached layers (portalled out of the menu root) carry\n   data-vibe-menu-detached, so every token block lists them too. */\n[data-vibe-menu],\n[data-vibe-menu-detached] {\n  color-scheme: light;\n  --section-home: oklch(76.02% 0.1832 146.61);\n  --section-account: oklch(57.46% 0.2126 29.55);\n  --section-code: oklch(89.78% 0.1857 98.22);\n  --section-share: oklch(64.39% 0.1304 231.41);\n  --vibes-black: #000000;\n  --vibes-cream: #fffff0;\n  --menu-ink: #1a1a1a;\n  --card-bg: var(--vibes-cream);\n  --ink: #111111;\n  --muted: #555555;\n  --line: #111111;\n  --line-card: #111111;\n  --line-hairline: #1111112e;\n  --placeholder: var(--muted);\n  --suggest-border: #11111173;\n  --share-tint: #009ace1f;\n  --share-tint-strong: #009ace40;\n  --on-home: var(--menu-ink);\n  --on-account: var(--vibes-cream);\n  --on-code: var(--menu-ink);\n  --on-share: var(--menu-ink);\n  --badge: var(--section-account);\n  --on-badge: var(--vibes-cream);\n  --obsidian-fill: rgba(6, 9, 10, 0.94);\n  --obsidian-edge: rgba(255, 255, 255, 0.17);\n  --obsidian-highlight: rgba(255, 255, 255, 0.32);\n  --obsidian-rim: rgba(255, 255, 255, 0.1);\n  --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n  --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  --space-9: 9px;\n  --space-2: 2px;\n  --space-4: 4px;\n  --space-6: 6px;\n  --space-8: 8px;\n  --space-10: 10px;\n  --space-12: 12px;\n  --space-14: 14px;\n  --space-16: 16px;\n  --space-18: 18px;\n  --space-24: 24px;\n  --radius-card: 16px;\n  --radius-full: 999px;\n  --radius-bar-end: 25px;\n  --radius-access-line: 24px;\n  --radius-input: 22px;\n  --radius-done: 21px;\n  --radius-copy: 18px;\n  --radius-chip: 14px;\n  --radius-moment: 12px;\n  --radius-switch: 10px;\n  --radius-meter: 7px;\n  --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n  --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n  --stroke-rule: 2px;\n  --stroke-hairline: 1px;\n  --stroke-mini: 1.5px;\n  --stroke-focus: 3px;\n  --stroke-glyph: 2.4px;\n  --size-icon-circle: 28px;\n  --size-icon-circle-phone: 22px;\n  --size-glyph: 14px;\n  --size-glyph-cta: 20px;\n  --size-bar: 50px;\n  --size-tab: 176px;\n  --size-home-extra: 14px;\n  --size-bar-end: 63px;\n  --size-pill-w: 120px;\n  --size-pill-h: 44px;\n  --size-ring: 3px;\n  --size-edge: 24px;\n  --size-edge-phone: 16px;\n  --size-pill-flat-inset: 19px;\n  --size-band: 8px;\n  --size-row: 46px;\n  --size-row-compact: 42px;\n  --size-chip: 28px;\n  --size-copy: 36px;\n  --size-input: 44px;\n  --size-composer: 58px;\n  --size-access-line: 48px;\n  --size-segment: 32px;\n  --size-segment-mini: 24px;\n  --size-switch-w: 36px;\n  --size-meter: 14px;\n  --size-card-max: 480px;\n  --size-card-max-phone: 560px;\n  --size-log-max: 160px;\n  --size-code-mode-max-w: 1200px;\n  --opacity-tab-inactive: 0.73;\n  --opacity-row-disabled: 0.35;\n}\n@media (prefers-color-scheme: dark) {\n  [data-vibe-menu],\n  [data-vibe-menu-detached] {\n  color-scheme: dark;\n  --card-bg: #1a1a1a;\n  --ink: #e0e0e0;\n  --muted: #a3a3a3;\n  --line-card: #e0e0e0;\n  --line-hairline: #e0e0e02e;\n  --suggest-border: #e0e0e073;\n  --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n  }\n}\n.dark [data-vibe-menu],\n.dark [data-vibe-menu-detached] {\n  color-scheme: dark;\n  --card-bg: #1a1a1a;\n  --ink: #e0e0e0;\n  --muted: #a3a3a3;\n  --line-card: #e0e0e0;\n  --line-hairline: #e0e0e02e;\n  --suggest-border: #e0e0e073;\n  --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n}\n\n/* ---------- the root: the phone container ---------- */\n[data-vibe-menu] {\n  container-name: vibe-menu;\n  container-type: inline-size;\n  color: var(--ink);\n  font-family: var(--font-display);\n}\n\n/* Scrollbars (smoke F15): thin, in the menu's hairline, both themes, never the\n   native dark bar inside the cream card. The colour is set on the root AND\n   every descendant, for every scroller the menu hosts (drills, the Embed box,\n   injected panels): the app's global sheet sets scrollbar-color on *, which\n   beats a colour only inherited from the root. The width rule has zero\n   specificity so a part that hides its bar (the Code mode tab strip) still\n   wins. The webkit arm is for engines without the standard properties; Chrome\n   ignores it once they are set. */\n[data-vibe-menu],\n[data-vibe-menu] *,\n[data-vibe-menu-detached],\n[data-vibe-menu-detached] * {\n  scrollbar-color: var(--line-hairline) transparent;\n}\n:where([data-vibe-menu]),\n:where([data-vibe-menu]) :where(*) {\n  scrollbar-width: thin;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n  background: transparent;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar-thumb {\n  border-radius: var(--radius-full);\n  background: var(--line-hairline);\n}\n\n/* A section is set by data-section on any ancestor (or the root), using the\n   code keys: home | settings (Account) | vibe (Code) | share. It sets --accent\n   (the section colour) and --on-accent (its label colour). */\n[data-vibe-menu][data-section=\"home\"],\n[data-vibe-menu] [data-section=\"home\"] {\n  --accent: var(--section-home);\n  --on-accent: var(--on-home);\n}\n[data-vibe-menu][data-section=\"settings\"],\n[data-vibe-menu] [data-section=\"settings\"] {\n  --accent: var(--section-account);\n  --on-accent: var(--on-account);\n}\n[data-vibe-menu][data-section=\"vibe\"],\n[data-vibe-menu] [data-section=\"vibe\"] {\n  --accent: var(--section-code);\n  --on-accent: var(--on-code);\n}\n[data-vibe-menu][data-section=\"share\"],\n[data-vibe-menu] [data-section=\"share\"] {\n  --accent: var(--section-share);\n  --on-accent: var(--on-share);\n}\n\n[data-vibe-menu],\n[data-vibe-menu] * {\n  box-sizing: border-box;\n}\n/* the card's surface and side padding, so rows can bleed edge to edge */\n[data-vibe-menu] .vm-card-body {\n  position: relative;\n  padding: var(--space-14) var(--space-16) var(--space-16);\n  background: var(--card-bg);\n  color: var(--ink);\n  font: 400 14px/20px var(--font-display);\n}\n[data-vibe-menu] .vm-card-body.is-framed {\n  border: var(--stroke-rule) solid var(--line);\n  border-radius: var(--radius-card) var(--radius-card) 0 0;\n  overflow: hidden;\n}\n\n/* ---------- shared ---------- */\n/* Zero specificity: every vm-* rule wins over it, and so does any utility\n   class on content a host injects into the card (slots). */\n:where([data-vibe-menu]) :where(button) {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n  text-align: left;\n  touch-action: manipulation;\n}\n[data-vibe-menu] .vm-glyph {\n  width: var(--size-glyph);\n  height: var(--size-glyph);\n  fill: none;\n  stroke: currentColor;\n  stroke-width: var(--stroke-glyph);\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  flex: none;\n}\n[data-vibe-menu] .vm-label,\n[data-vibe-menu] .vm-seg button,\n[data-vibe-menu] .vm-chip {\n  font: 700 14px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n[data-vibe-menu] .vm-label.is-plain {\n  font: 700 16px/1.1 var(--font-display);\n  letter-spacing: 0;\n  text-transform: none;\n}\n[data-vibe-menu] .vm-kicker,\n[data-vibe-menu] .vm-subhead {\n  margin: 0 0 var(--space-8);\n  font: 700 10.5px/1.3 var(--font-tab);\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-subhead {\n  margin: var(--space-16) 0 0;\n  padding-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-sub {\n  margin: var(--space-8) 0 var(--space-14);\n  font-size: 13px;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-app-name {\n  white-space: nowrap;\n}\n/* ---------- SectionStrip: the bar ---------- */\n[data-vibe-menu] .vm-menu {\n  position: relative;\n}\n[data-vibe-menu] .vm-strip {\n  position: relative;\n  width: calc(var(--size-tab) * 4 + var(--size-home-extra) + var(--size-bar-end) + 2px);\n  height: var(--size-bar);\n}\n[data-vibe-menu] .vm-strip-slide {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: flex-end;\n  border: var(--stroke-rule) solid var(--line);\n  border-right: 0;\n  border-radius: var(--bar-tl, var(--radius-bar-end)) 0 0 var(--radius-bar-end);\n  overflow: hidden;\n  background: var(--card-bg);\n}\n[data-vibe-menu] .vm-tab {\n  position: relative;\n  width: var(--size-tab);\n  flex: none;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border: 0;\n  padding: 0 0 0 var(--space-9);\n  cursor: pointer;\n  background: var(--accent);\n}\n[data-vibe-menu] .vm-tab-circle {\n  width: var(--size-icon-circle);\n  height: var(--size-icon-circle);\n  border-radius: 50%;\n  background: var(--menu-ink);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n}\n[data-vibe-menu] .vm-tab svg {\n  width: calc(var(--size-icon-circle) / 2);\n  height: calc(var(--size-icon-circle) / 2);\n  fill: none;\n  stroke: var(--vibes-cream);\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  flex: none;\n}\n[data-vibe-menu] .vm-tab-label {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0 0 1.9px;\n  font-family: var(--font-tab);\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 1.9px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  pointer-events: none;\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] {\n  width: calc(var(--size-tab) + var(--size-home-extra));\n  padding-left: calc(var(--space-9) + var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] .vm-tab-label {\n  left: calc(var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"share\"] {\n  width: calc(var(--size-tab) + var(--size-bar-end));\n}\n[data-vibe-menu] .vm-tab[data-section=\"share\"] .vm-tab-label {\n  right: var(--size-bar-end);\n}\n[data-vibe-menu] .vm-tab:focus-visible {\n  outline: var(--stroke-focus) solid var(--line);\n  outline-offset: -3px;\n}\n/* Port change (smoke F5): the DS inset line ring vanished on the black pill\n   and drew square corners. The pill's ring is cream, sits in the obsidian\n   glass's 3px rim (offset 0), and follows the stadium (the pill's radius). */\n[data-vibe-menu] .vm-pill:focus-visible {\n  outline: var(--stroke-focus) solid var(--vibes-cream);\n  outline-offset: 0;\n}\n[data-vibe-menu] .vm-menu.has-card .vm-tab:not(.is-active) {\n  opacity: var(--opacity-tab-inactive);\n}\n[data-vibe-menu] .vm-badge {\n  position: absolute;\n  top: -4px;\n  right: 6px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: var(--radius-full);\n  background: var(--badge);\n  color: var(--on-badge);\n  font: 700 11px/18px var(--font-display);\n  text-align: center;\n}\n/* the bar sits against the pill: it runs half the glass under it */\n[data-vibe-menu] .vm-bar-anchor {\n  position: relative;\n  height: var(--size-bar);\n}\n[data-vibe-menu] .vm-bar-anchor .vm-strip {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n}\n[data-vibe-menu] .vm-bar-anchor .vm-glass {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n}\n/* phones: the bar spans the width; tabs sized to their content, icon above label */\n[data-vibe-menu] .vm-strip.is-phone {\n  width: 100%;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab {\n  width: auto;\n  flex: 1 1 auto;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-width: 0;\n  padding: 4px 2px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-circle {\n  width: var(--size-icon-circle-phone);\n  height: var(--size-icon-circle-phone);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab svg {\n  width: 12px;\n  height: 12px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"home\"] {\n  padding: 4px 2px 4px calc(2px + var(--size-home-extra) * 0.7);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"share\"] {\n  padding-right: var(--size-bar-end);\n  flex-grow: 1;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-label {\n  position: static;\n  display: block;\n  font-size: 9.6px;\n  letter-spacing: 1px;\n  padding: 0 0 0 1px;\n}\n\n/* ---------- VibesSwitch: the pill in its obsidian glass ---------- */\n[data-vibe-menu] .vm-glass {\n  position: relative;\n  width: calc(var(--size-pill-w) + 2 * var(--size-ring));\n  height: calc(var(--size-pill-h) + 2 * var(--size-ring));\n  border-radius: var(--radius-full);\n  flex: none;\n  background:\n    linear-gradient(to right, transparent, var(--obsidian-highlight), transparent) top / 100% 1px no-repeat,\n    linear-gradient(to bottom, var(--obsidian-highlight), transparent, var(--obsidian-edge)) left / 1px 100% no-repeat,\n    var(--obsidian-fill);\n  box-shadow: var(--obsidian-shadow);\n}\n[data-vibe-menu] .vm-pill {\n  position: absolute;\n  left: var(--size-ring);\n  top: var(--size-ring);\n  width: var(--size-pill-w);\n  height: var(--size-pill-h);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-full);\n  background: none;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-switch-art {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n[data-vibe-menu] .vm-pill .vm-badge {\n  top: -6px;\n  right: 4px;\n}\n/* #7079: the guest maker's save-time ask: a dot, not a count. */\n[data-vibe-menu] .vm-badge.is-dot {\n  min-width: 10px;\n  width: 10px;\n  height: 10px;\n  padding: 0;\n}\n[data-vibe-menu] .vm-chiclet {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: var(--radius-full);\n  background: var(--section-code);\n  /* Port change: bundle.css writes #111111 (ink); text on a section colour is\n     menu-ink (Global Constraints), which --on-code resolves to in both themes. */\n  color: var(--on-code);\n  font: 700 11px/18px var(--font-display);\n  letter-spacing: 0.06em;\n}\n/* #4291. The chiclet's shape, so the two read as one row \u2014 but in the badge\n   colour (the identity lane) so elevation never looks like a publish state. */\n[data-vibe-menu] .vm-admin-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: var(--radius-full);\n  background: var(--badge);\n  color: var(--on-badge);\n  font: 700 11px/18px var(--font-display);\n  letter-spacing: 0.06em;\n}\n\n/* ---------- MenuCard: the card, its band and the folder-tab join, drawn once ---------- */\n[data-vibe-menu] .vm-frame {\n  position: relative;\n}\n[data-vibe-menu] .vm-frame .vm-card {\n  position: absolute;\n  left: 0;\n  top: 0;\n  background: var(--card-bg);\n  color: var(--ink);\n  overflow: hidden;\n  border-radius: var(--radius-card) var(--radius-card) 0 0;\n}\n[data-vibe-menu] .vm-frame .vm-card .vm-card-body {\n  padding-bottom: calc(var(--space-16) + var(--size-band));\n}\n[data-vibe-menu] .vm-outline {\n  position: absolute;\n  left: 0;\n  top: 0;\n  overflow: visible;\n  pointer-events: none;\n}\n[data-vibe-menu] .vm-outline .vm-band,\n[data-vibe-menu] .vm-outline .vm-cover {\n  fill: var(--accent);\n}\n[data-vibe-menu] .vm-outline .vm-edge {\n  fill: none;\n  stroke: var(--line);\n  stroke-width: 2;\n  stroke-linejoin: miter;\n}\n\n/* ---------- ActionPill: the card's one main action ---------- */\n[data-vibe-menu] .vm-ask {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-12);\n  width: 100%;\n  padding: var(--space-14) var(--space-18);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-full);\n  background: var(--accent);\n  color: var(--on-accent);\n  font: 700 21px/1 var(--font-display);\n  letter-spacing: -0.02em;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-ask.is-solo {\n  margin-bottom: var(--space-14);\n}\n[data-vibe-menu] .vm-ask .vm-glyph {\n  width: var(--size-glyph-cta);\n  height: var(--size-glyph-cta);\n  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-ask:hover .vm-glyph {\n  transform: translateX(4px);\n}\n[data-vibe-menu] .vm-ask.is-phone {\n  font-size: 18px;\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) > span {\n  flex: 1;\n}\n\n/* ---------- Chip ---------- */\n[data-vibe-menu] .vm-chip {\n  height: var(--size-chip);\n  padding: 0 var(--space-12);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-chip);\n  background: var(--accent);\n  color: var(--on-accent);\n  font-size: 11px;\n  flex: none;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-chip.is-ghost {\n  background: transparent;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-chip.is-name {\n  font: 700 14px/1 var(--font-display);\n  letter-spacing: 0;\n  text-transform: none;\n}\n[data-vibe-menu] .vm-chip.vm-copy {\n  height: var(--size-copy);\n  padding: 0 var(--space-14);\n  border-radius: var(--radius-copy);\n  flex-shrink: 0;\n  align-self: center;\n  white-space: nowrap;\n}\n[data-vibe-menu] .vm-suggestions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-6);\n}\n/* Port change (smoke F9): codegen writes long chips, so a chip wraps inside\n   the card (DS \"text that can outgrow its track wraps\") instead of running\n   past its edge; a one-line chip keeps the 28px chip height. */\n[data-vibe-menu] .vm-suggest {\n  min-height: var(--size-chip);\n  max-width: 100%;\n  min-width: 0;\n  padding: var(--space-2) var(--space-12);\n  text-align: left;\n  overflow-wrap: anywhere;\n  border: var(--stroke-mini) solid var(--suggest-border);\n  border-radius: var(--radius-chip);\n  background: none;\n  color: var(--ink);\n  font: 400 13px/20px var(--font-display);\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-suggest:hover,\n[data-vibe-menu] .vm-suggest.is-hover {\n  border-color: var(--line-card);\n  background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n/* The gold option (#6768): the one capability the agent offered, a chip in the\n   same row and the same order as the others. It wears the lit state the others\n   take on hover, a full-ink outline and a filled star before the label, so it\n   reads as the offer without a second colour on the card. */\n[data-vibe-menu] .vm-suggest.is-gold {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-6);\n  border-color: var(--line-card);\n  background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n[data-vibe-menu] .vm-suggest.is-gold .vm-glyph {\n  flex: none;\n  fill: currentColor;\n}\n[data-vibe-menu] .vm-picks {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-6);\n}\n\n/* ---------- Composer: the logo pill's shape ---------- */\n[data-vibe-menu] .vm-composer {\n  display: flex;\n  align-items: stretch;\n  min-height: var(--size-composer);\n  margin-bottom: var(--space-16);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-full);\n  overflow: hidden;\n  background: var(--card-bg);\n}\n[data-vibe-menu] .vm-composer:focus-within,\n[data-vibe-menu] .vm-composer.is-focus {\n  box-shadow: 0 0 0 3px var(--accent);\n}\n[data-vibe-menu] .vm-composer textarea {\n  flex: 1;\n  min-width: 0;\n  align-self: center;\n  margin: 0 var(--space-12) 0 2px;\n  padding: 0;\n  resize: none;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--ink);\n  font: 700 18px/1.2 var(--font-display);\n  letter-spacing: -0.02em;\n  field-sizing: content;\n  max-height: 2.4em;\n}\n[data-vibe-menu] .vm-composer textarea::placeholder {\n  color: var(--placeholder);\n}\n[data-vibe-menu] .vm-composer .vm-attach {\n  order: -1;\n  width: var(--size-copy);\n  height: var(--size-copy);\n  margin-left: var(--space-10);\n  align-self: center;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  flex: none;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-composer .vm-attach:hover {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-composer .vm-glyph {\n  width: 16px;\n  height: 16px;\n}\n[data-vibe-menu] .vm-cap {\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--space-24) 0 20px;\n  border-left: var(--stroke-rule) solid var(--line-card);\n  background: var(--section-code);\n  color: var(--on-code);\n  font: 700 14px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-cap:hover {\n  background: color-mix(in oklch, var(--section-code), var(--menu-ink) 10%);\n}\n[data-vibe-menu] .vm-composer.is-building .vm-cap[data-send],\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-stop] {\n  display: none;\n}\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-send] {\n  display: flex;\n}\n[data-vibe-menu] .vm-queue-note {\n  display: none;\n  margin: -10px 0 12px 18px;\n  font-size: 12px;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-composer:has(textarea:not(:placeholder-shown)) + .vm-queue-note {\n  display: block;\n}\n[data-vibe-menu] .vm-composer.is-phone textarea {\n  margin-right: var(--space-6);\n  font-size: 16px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-attach {\n  margin-left: 4px;\n  width: 28px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-cap {\n  padding: 0 var(--space-18) 0 var(--space-14);\n}\n\n/* ---------- Row: the bar's tab grammar inside the card ---------- */\n[data-vibe-menu] .vm-group {\n  border-top: var(--stroke-rule) solid var(--line-card);\n  margin: 0 calc(-1 * var(--space-16));\n}\n[data-vibe-menu] .vm-group.is-flush {\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-12);\n  width: 100%;\n  height: var(--size-row);\n  padding: 0 var(--space-16);\n}\n[data-vibe-menu] .vm-row.is-compact {\n  height: var(--size-row-compact);\n}\n[data-vibe-menu] .vm-row + .vm-row {\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row .vm-label {\n  flex: 1;\n}\n[data-vibe-menu] .vm-dot {\n  width: var(--size-icon-circle);\n  height: var(--size-icon-circle);\n  border-radius: 50%;\n  background: var(--ink);\n  color: var(--card-bg);\n  display: grid;\n  place-items: center;\n  flex: none;\n}\n[data-vibe-menu] button.vm-row:hover .vm-dot:not(.vm-app),\n[data-vibe-menu] .vm-row.is-hover .vm-dot:not(.vm-app) {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-row.is-quiet .vm-dot {\n  background: transparent;\n  color: var(--ink);\n  box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] {\n  opacity: 0.35;\n  cursor: default;\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] .vm-dot {\n  background: var(--ink) !important;\n  color: var(--card-bg) !important;\n}\n[data-vibe-menu] .vm-app,\n[data-vibe-menu] .vm-initial {\n  font: 700 12px/1 var(--font-tab);\n  box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-app {\n  background: var(--app);\n  color: var(--menu-ink);\n}\n[data-vibe-menu] .vm-initial {\n  background: transparent;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-chev {\n  display: grid;\n  color: var(--muted);\n  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-chev.is-open {\n  transform: rotate(90deg);\n}\n[data-vibe-menu] .vm-count {\n  font: 700 12px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-count.is-handle {\n  max-width: 45%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  letter-spacing: 0.02em;\n}\n[data-vibe-menu] .vm-switch {\n  position: relative;\n  width: var(--size-switch-w);\n  height: 20px;\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-switch);\n  flex: none;\n}\n[data-vibe-menu] .vm-switch::after {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--ink);\n}\n[data-vibe-menu] .vm-switch.is-on {\n  background: var(--accent);\n}\n[data-vibe-menu] .vm-switch.is-on::after {\n  left: 18px;\n}\n\n/* ---------- BackRow and DoneButton: a drill-in's frame ---------- */\n[data-vibe-menu] .vm-back {\n  display: flex;\n  align-items: center;\n  gap: var(--space-12);\n  width: calc(100% + 2 * var(--space-16));\n  height: var(--size-row-compact);\n  margin: 0 calc(-1 * var(--space-16));\n  padding: 0 var(--space-16);\n  border-top: var(--stroke-rule) solid var(--line-card);\n  border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* A drill that replaces the whole card body (Share, Account) sits on the card's\n   top edge, which the outline already draws: no rule, and it takes the body's\n   top padding so no empty band shows above it (cards-hero.css .card-title + .h-back). */\n[data-vibe-menu] .vm-back.is-top {\n  margin-top: calc(-1 * var(--space-14));\n  border-top: 0;\n}\n[data-vibe-menu] .vm-back .vm-label {\n  flex: none;\n}\n[data-vibe-menu] .vm-back-name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font: 400 16px/1.1 var(--font-display);\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-back:hover .vm-dot,\n[data-vibe-menu] .vm-back.is-hover .vm-dot {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-drill {\n  padding-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-sec + .vm-drill-sec {\n  margin-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-line {\n  margin: 0 0 var(--space-14);\n  font: 700 18px/1.25 var(--font-display);\n  letter-spacing: -0.01em;\n}\n[data-vibe-menu] .vm-done {\n  display: block;\n  width: 100%;\n  height: var(--size-row-compact);\n  margin-top: var(--space-16);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-done);\n  background: var(--accent);\n  color: var(--on-accent);\n  text-align: center;\n  font: 700 14px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n[data-vibe-menu] .vm-textbtn {\n  display: block;\n  width: 100%;\n  height: 40px;\n  margin-top: var(--space-4);\n  text-align: center;\n  font: 700 12px/1 var(--font-tab);\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-textbtn:hover {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-faq {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-12);\n  width: 100%;\n  padding: var(--space-12) 0;\n  font: 400 16px/1.3 var(--font-display);\n}\n[data-vibe-menu] .vm-faq + .vm-faq {\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n\n/* ---------- MomentLine: the current moment ---------- */\n[data-vibe-menu] .vm-moments {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment {\n  margin: 0;\n  font: 400 16px/1.3 var(--font-display);\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-moment.is-pinned {\n  padding: var(--space-10) var(--space-12) var(--space-12) var(--space-14);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-left: var(--size-band) solid var(--accent);\n  border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-moment-text {\n  margin: 0 0 var(--space-10);\n}\n[data-vibe-menu] .vm-moment-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-6);\n}\n[data-vibe-menu] .vm-moment-hint {\n  font-size: 12px;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-progress,\n[data-vibe-menu] .vm-moment.is-summary {\n  display: flex;\n  align-items: center;\n  gap: var(--space-10);\n  padding: 0 var(--space-2);\n}\n[data-vibe-menu] .vm-moment.is-summary {\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-expander {\n  width: 100%;\n  gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment.is-expander:hover {\n  color: var(--ink);\n}\n/* The live line's link (the first build's real address, #6451 S9c): pointer\n   events back on, since the layer takes no hits of its own. */\n[data-vibe-menu] .vm-moment-link {\n  display: inline-block;\n  margin: 0 var(--space-2);\n  font: 400 14px/1.3 var(--font-display);\n  color: var(--ink);\n  text-decoration: underline;\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n  pointer-events: auto;\n}\n[data-vibe-menu] .vm-live .vm-chev {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-log-clip {\n  overflow: hidden;\n}\n/* Port addition (RULINGS R1): the log clip is always rendered (RECONCILE \u00A75c),\n   so the base stylesheet owns its shut and open states. The shell's per-frame\n   tween (T11) writes an inline height, which overrides these during motion.\n   C's VIBE_MENU_SHELL_CSS does not repeat them. */\n[data-vibe-menu] .vm-log-clip[data-open=\"false\"] {\n  height: 0;\n  overflow: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"] {\n  height: auto;\n  /* Known adjustment (plan header): room for .vm-log's own 160px cap plus its\n     8px margin-top and two hairline borders, so the clip never scrolls on top\n     of the log. */\n  max-height: calc(var(--size-log-max, 160px) + var(--space-8) + 2 * var(--stroke-hairline));\n  overflow: auto;\n  /* Smoke F15: the shell's height tween makes the clip overflow for a moment;\n     .vm-log scrolls itself, so the clip never shows a bar. */\n  scrollbar-width: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"]::-webkit-scrollbar {\n  display: none;\n}\n[data-vibe-menu] .vm-log {\n  max-height: var(--size-log-max);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  margin-top: var(--space-8);\n  padding: var(--space-10) 4px var(--space-10) var(--space-24);\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n  border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n  font-size: 13.5px;\n  line-height: 1.35;\n}\n[data-vibe-menu] .vm-log-line {\n  margin: 0;\n}\n[data-vibe-menu] .vm-log-line:first-child {\n  margin-top: auto;\n}\n[data-vibe-menu] .vm-log-line b {\n  font: 700 10px/1 var(--font-tab);\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--muted);\n  margin-right: 4px;\n}\n\n/* ---------- AccessToggle: Restricted | Public and its line ---------- */\n[data-vibe-menu] .vm-access {\n  display: flex;\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-full);\n  overflow: hidden;\n}\n[data-vibe-menu] .vm-access button {\n  flex: 1;\n  height: var(--size-bar);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-10);\n  text-align: center;\n  font: 700 24px/1 var(--font-display);\n  letter-spacing: -0.02em;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-access button + button {\n  border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-access button.is-active {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-access button:not(.is-active):hover {\n  background: color-mix(in srgb, var(--accent) 20%, transparent);\n}\n/* Settings still loading (preflight ruling P14): dimmed and inert. */\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] {\n  opacity: var(--opacity-row-disabled);\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button {\n  cursor: default;\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button:not(.is-active):hover {\n  background: transparent;\n}\n[data-vibe-menu] .vm-access-line {\n  display: flex;\n  align-items: center;\n  gap: var(--space-10);\n  min-height: var(--size-access-line);\n  margin: var(--space-10) 0 var(--space-12);\n  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-14);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-access-line);\n  background: var(--share-tint);\n  font-size: 16.5px;\n  line-height: 1.25;\n}\n[data-vibe-menu] .vm-access-line > span {\n  flex: 1;\n  min-width: 0;\n}\n[data-vibe-menu] .vm-access-line .vm-glyph {\n  width: 16px;\n  height: 16px;\n}\n[data-vibe-menu] .vm-publish {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  padding: 5px 5px 5px var(--space-10);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-left: var(--size-band) solid var(--accent);\n  border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-publish b {\n  font: 700 11px/1 var(--font-tab);\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n[data-vibe-menu] .vm-publish span {\n  flex: 1;\n  min-width: 0;\n  font-size: 13px;\n  line-height: 1.25;\n  color: var(--muted);\n}\n\n/* ---------- GrantControls ---------- */\n[data-vibe-menu] .vm-seg {\n  display: flex;\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-full);\n  overflow: hidden;\n}\n[data-vibe-menu] .vm-seg button {\n  flex: 1;\n  height: var(--size-segment);\n  text-align: center;\n  font-size: 11px;\n}\n[data-vibe-menu] .vm-seg button + button {\n  border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-seg button.is-active {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n[data-vibe-menu] .vm-seg.is-mini {\n  margin: 0;\n  border-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-seg.is-mini button {\n  flex: none;\n  height: var(--size-segment-mini);\n  padding: 0 var(--space-8);\n  font-size: 10px;\n}\n[data-vibe-menu] .vm-seg.is-mini button + button {\n  border-left-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-grants {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-6) var(--space-12);\n}\n[data-vibe-menu] .vm-grant-ctl {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n[data-vibe-menu] .vm-grant-name {\n  font: 700 10px/1 var(--font-tab);\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-grant-fixed {\n  font: 700 10px/1 var(--font-tab);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--ink);\n}\n\n/* ---------- MemberRow ---------- */\n[data-vibe-menu] .vm-input {\n  width: 100%;\n  height: var(--size-input);\n  margin-bottom: var(--space-14);\n  padding: 0 var(--space-18);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-input);\n  background: transparent;\n  color: var(--ink);\n  font: inherit;\n}\n[data-vibe-menu] .vm-members-head {\n  margin-top: 0;\n  padding: 2px 0 var(--space-8);\n}\n[data-vibe-menu] .vm-members-head + .vm-input {\n  height: 40px;\n  margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-person {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-8) var(--space-12);\n  padding: var(--space-6) 0;\n}\n[data-vibe-menu] .vm-person + .vm-person {\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-person .vm-label {\n  flex: 1;\n  min-width: 0;\n}\n[data-vibe-menu] .vm-request {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-8) var(--space-12);\n  margin-bottom: 2px;\n  padding: var(--space-10) var(--space-12);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: var(--radius-card);\n  background: var(--share-tint-strong);\n}\n[data-vibe-menu] .vm-request-top {\n  flex: 1 0 auto;\n}\n[data-vibe-menu] .vm-request-actions {\n  display: flex;\n  gap: var(--space-6);\n  margin-left: auto;\n}\n[data-vibe-menu] .vm-who-block > .vm-row {\n  width: calc(100% + 2 * var(--space-16));\n  margin: 2px calc(-1 * var(--space-16)) 0;\n  border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request-top {\n  flex-basis: 100%;\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request .vm-grants {\n  column-gap: var(--space-10);\n}\n/* stacking, as the prototype: card < bar < outline < glass and pill */\n[data-vibe-menu] .vm-frame .vm-card {\n  z-index: 1;\n}\n[data-vibe-menu] .vm-frame .vm-strip {\n  z-index: 2;\n}\n[data-vibe-menu] .vm-frame .vm-outline {\n  z-index: 3;\n}\n[data-vibe-menu] .vm-frame .vm-glass {\n  z-index: 4;\n}\n[data-vibe-menu] .vm-refresh {\n  display: grid;\n  place-items: center;\n  width: var(--size-icon-circle);\n  height: var(--size-icon-circle);\n  border: var(--stroke-rule) solid var(--line-card);\n  border-radius: 50%;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-refresh:hover {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n\n/* ---------- port additions: not in bundle.css ---------- */\n/* Rows and the action pill can be links (Home's rows, the credits action). */\n[data-vibe-menu] :where(a.vm-row, a.vm-ask) {\n  color: inherit;\n  text-decoration: none;\n}\n[data-vibe-menu] a.vm-row:hover .vm-dot:not(.vm-app) {\n  background: var(--accent);\n  color: var(--on-accent);\n}\n/* A member's name drills into that member (spec \u00A78). */\n[data-vibe-menu] .vm-person button.vm-label {\n  text-align: left;\n}\n[data-vibe-menu] .vm-chip[aria-disabled=\"true\"],\n[data-vibe-menu] .vm-cap:disabled,\n[data-vibe-menu] .vm-composer .vm-attach:disabled {\n  opacity: var(--opacity-row-disabled);\n  cursor: default;\n}\n/* Staged attachments above the composer: name chips, no emoji. */\n[data-vibe-menu] .vm-attachments {\n  margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-attachments .vm-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-6);\n  max-width: 220px;\n}\n[data-vibe-menu] .vm-attachments .vm-chip > span:last-child {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n[data-vibe-menu] .vm-attachments .vm-chip[data-status=\"error\"] {\n  border-color: var(--section-account);\n}\n/* A suggestion's fast-path marks (RULINGS O4, production #2917 decorateChip).\n   Siblings of .vm-suggest, since a button can't nest a button. The owner's\n   toggle (FastPathToggle) is outline when not blessed, filled when blessed\n   (aria-pressed); the badges are the marks every viewer sees. */\n[data-vibe-menu] .vm-suggest-item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  max-width: 100%;\n  min-width: 0;\n}\n[data-vibe-menu] .vm-suggest-item > * {\n  flex: none;\n}\n[data-vibe-menu] .vm-suggest-item > .vm-suggest {\n  flex: 0 1 auto;\n}\n[data-vibe-menu] .vm-suggest-shield {\n  width: var(--size-chip);\n  height: var(--size-chip);\n  display: inline-grid;\n  place-items: center;\n  border-radius: var(--radius-full);\n  background: none;\n  color: var(--muted);\n}\n[data-vibe-menu] .vm-suggest-shield:hover {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] {\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] .vm-glyph {\n  fill: currentColor;\n}\n/* The non-interactive marks every viewer sees (production ChipShieldBadge,\n   ChipJumpBadge): a filled shield (\"stays in this app\", server-authoritative)\n   or an arrow (\"opens another app\"). Never both on one chip. */\n[data-vibe-menu] .vm-suggest-badge {\n  width: var(--size-chip);\n  height: var(--size-chip);\n  display: inline-grid;\n  place-items: center;\n  color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-badge.is-shield .vm-glyph {\n  fill: currentColor;\n}\n[data-vibe-menu] .vm-suggest-badge.is-jump {\n  color: var(--muted);\n}\n\n/* ---------- phones (cards-hero.css): the menu's width, not the viewport ---------- */\n@container vibe-menu (max-width: 480px) {\n  [data-vibe-menu] .vm-ask {\n    font-size: 18px;\n  }\n  /* the field keeps 16px (iOS zooms smaller fields); attach slims instead */\n  [data-vibe-menu] .vm-composer textarea {\n    margin-right: var(--space-6);\n    font-size: 16px;\n  }\n  [data-vibe-menu] .vm-composer .vm-attach {\n    margin-left: 4px;\n    width: 28px;\n  }\n  [data-vibe-menu] .vm-cap {\n    padding: 0 var(--space-18) 0 var(--space-14);\n  }\n  [data-vibe-menu] .vm-access button {\n    font-size: 21px;\n  }\n  /* the access line keeps its sentence to two lines beside the chip */\n  [data-vibe-menu] .vm-access-line {\n    padding-left: 12px;\n    gap: 8px;\n    font-size: 15.5px;\n  }\n  [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n    padding: 0 10px;\n  }\n  /* Data and Code drop under the handle on one line (two on the narrowest) */\n  [data-vibe-menu] .vm-person .vm-grants {\n    flex-basis: 100%;\n    column-gap: var(--space-10);\n  }\n  [data-vibe-menu] .vm-request .vm-grants {\n    column-gap: var(--space-10);\n  }\n  [data-vibe-menu] .vm-request-top {\n    flex-basis: 100%;\n  }\n  [data-vibe-menu] .vm-input {\n    font-size: 16px;\n  }\n}\n@container vibe-menu (max-width: 359px) {\n  [data-vibe-menu] .vm-access button {\n    font-size: 19px;\n  }\n  /* the line drops its icon here: the enclosure already marks it */\n  [data-vibe-menu] .vm-access-line > .vm-glyph {\n    display: none;\n  }\n  [data-vibe-menu] .vm-access-line {\n    margin: 8px 0 10px;\n    font-size: 14.5px;\n  }\n  [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n    padding: 0 8px;\n  }\n  /* the cap and attach slim so the field keeps room (REMIX THIS stays one line) */\n  [data-vibe-menu] .vm-cap {\n    padding: 0 13px 0 10px;\n    letter-spacing: 0.05em;\n  }\n  [data-vibe-menu] .vm-composer .vm-attach {\n    margin-left: 3px;\n    width: 24px;\n  }\n  /* 16px, not the prototype's 14px: no text field under 16px on phones (spec \u00A74.5) */\n  [data-vibe-menu] .vm-composer textarea {\n    margin: 0 4px 0 0;\n    font-size: 16px;\n  }\n  [data-vibe-menu] .vm-chip.vm-copy {\n    padding: 0 10px;\n    letter-spacing: 0.06em;\n  }\n}\n";
 export declare function VibeMenuStyles(): React.ReactElement;

package/components/vibe-menu/vibe-menu.styles.js

@@ -249,27 +249,6 @@ export const VIBE_MENU_CSS = `
 [data-vibe-menu] .vm-app-name {
   white-space: nowrap;
 }
-[data-vibe-menu] .vm-busy {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: var(--stroke-rule) solid var(--line-card);
-  border-top-color: transparent;
-  flex: none;
-  animation: vm-spin 0.9s linear infinite;
-}
-@keyframes vm-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  [data-vibe-menu] .vm-busy {
-    animation: none;
-    border-top-color: var(--line-card);
-  }
-}
-
 /* ---------- SectionStrip: the bar ---------- */
 [data-vibe-menu] .vm-menu {
   position: relative;
@@ -1098,10 +1077,6 @@ export const VIBE_MENU_CSS = `
 [data-vibe-menu] .vm-access[aria-disabled="true"] button:not(.is-active):hover {
   background: transparent;
 }
-[data-vibe-menu] .vm-access button .vm-busy {
-  width: 16px;
-  height: 16px;
-}
 [data-vibe-menu] .vm-access-line {
   display: flex;
   align-items: center;

package/components/vibe-menu/vibe-menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"vibe-menu.styles.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/vibe-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiC/B,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2FJ,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;2DAQwB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;6BAKA,oBAAoB;;;;+BAIlB,mBAAmB;;;;mCAIf,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAs0CrD,CAAC;AAGF,MAAM,UAAU,cAAc;IAC5B,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,uBAAuB,EAAE,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;AACtF,CAAC"}
+{"version":3,"file":"vibe-menu.styles.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/vibe-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiC/B,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2FJ,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;2DAQwB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;6BAKA,oBAAoB;;;;+BAIlB,mBAAmB;;;;mCAIf,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6yCrD,CAAC;AAGF,MAAM,UAAU,cAAc;IAC5B,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,uBAAuB,EAAE,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;AACtF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/base",
-  "version": "14.3.105",
+  "version": "14.3.107",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -10,10 +10,10 @@
   "dependencies": {
     "@adviser/cement": "~0.5.34",
     "@emotion/css": "~11.13.5",
-    "@vibes.diy/api-types": "14.3.105",
-    "@vibes.diy/use-vibes-types": "14.3.105",
-    "@vibes.diy/vibe-runtime": "14.3.105",
-    "@vibes.diy/vibe-types": "14.3.105",
+    "@vibes.diy/api-types": "14.3.107",
+    "@vibes.diy/use-vibes-types": "14.3.107",
+    "@vibes.diy/vibe-runtime": "14.3.107",
+    "@vibes.diy/vibe-types": "14.3.107",
     "arktype": "~2.2.6",
     "officeparser": "~8.0.0",
     "qrcode-generator": "~2.0.4",

package/components/HandleChooser.d.ts

@@ -1,44 +0,0 @@
-import React from "react";
-export interface HandleChooserPanelProps {
-    readonly draftInitial?: string;
-    readonly inputPlaceholder?: string;
-    readonly title?: string;
-    readonly subtitle?: string;
-    readonly clerkSuggestions: readonly string[];
-    readonly wordSlugCandidates: readonly string[];
-    readonly onRefreshCandidates: () => void;
-    readonly refreshing?: boolean;
-    readonly busy?: boolean;
-    readonly confirmLabel?: string;
-    readonly skipLabel?: string;
-    readonly errorMessage?: string;
-    readonly onConfirm: (sanitized: string) => void | Promise<void>;
-    readonly onSkip: () => void;
-}
-export declare function HandleChooserPanel({ draftInitial, inputPlaceholder, title, subtitle, clerkSuggestions, wordSlugCandidates, onRefreshCandidates, refreshing, busy, confirmLabel, skipLabel, errorMessage, onConfirm, onSkip, }: HandleChooserPanelProps): React.ReactElement;
-export declare function SuggestionRow({ label, slugs, busy, onPick, }: {
-    readonly label?: string;
-    readonly slugs: readonly string[];
-    readonly busy?: boolean;
-    readonly onPick: (slug: string) => void;
-}): React.ReactElement;
-export declare function PanelButtons({ primary, skip, disabled, skipDisabled, onPrimary, onSkip, }: {
-    readonly primary: string;
-    readonly skip?: string;
-    readonly disabled?: boolean;
-    readonly skipDisabled?: boolean;
-    readonly onPrimary: () => void;
-    readonly onSkip: () => void;
-}): React.ReactElement;
-export declare function OverlayCardShell({ ariaLabel, headerLeft, dismissLabel, onDismiss, children, }: {
-    readonly ariaLabel: string;
-    readonly headerLeft: React.ReactNode;
-    readonly dismissLabel: string;
-    readonly onDismiss: () => void;
-    readonly children: React.ReactNode;
-}): React.ReactElement;
-export interface HandleChooserCardProps extends HandleChooserPanelProps {
-    readonly onDismiss: () => void;
-    readonly headerLabel?: string;
-}
-export declare function HandleChooserCard({ onDismiss, headerLabel, ...panel }: HandleChooserCardProps): React.ReactElement;