@vibes.diy/base 14.3.21 → 14.3.22

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

@@ -0,0 +1,182 @@
+import type { ReactNode } from "react";
+import type { Result } from "@adviser/cement";
+import type { Banner, MenuEvent, MenuState, MenuView } from "./menu-state.js";
+import type { MomentItem } from "./moments.js";
+import type { ViewerRole } from "./open-resolver.js";
+import type { CodeTab } from "./code-tabs.js";
+import type { AccessPosture, AccessToggleState } from "./parts/AccessToggle.js";
+import type { GrantData } from "./parts/GrantControls.js";
+import type { MemberRowMember } from "./parts/MemberRow.js";
+import type { AgentLogLine } from "./parts/MomentLine.js";
+import type { ComposerSlice } from "./parts/Composer.js";
+import type { SuggestionFastPath } from "./parts/Chip.js";
+export type Posture = AccessPosture;
+export type DataGrant = GrantData;
+export type RosterMember = MemberRowMember;
+export type LogLine = AgentLogLine;
+export interface ViewerSlice {
+    role: ViewerRole;
+    identityPending: boolean;
+    canEditSource: boolean;
+    appTitle: string;
+    appSlug: string | null;
+    ownerHandle: string | null;
+    draft: boolean;
+}
+export interface AccountSlice {
+    handles: readonly {
+        slug: string;
+        avatarUrl?: string;
+    }[];
+    activeHandle: string | null;
+    needsHandle: boolean;
+    handleBusy: boolean;
+    onSelectHandle(slug: string): void;
+    onAddHandle(slug: string): Promise<Result<void>>;
+    onSurpriseHandle(): string;
+    onClaimHandle(slug: string): Promise<Result<void>>;
+    handleIdeas: {
+        fromName: readonly string[];
+        words: readonly string[];
+        refresh(): void;
+    };
+    onChangePicture(): void;
+    credits: {
+        plan: "free" | "plus" | null;
+        remaining: number | null;
+        included: number | null;
+    };
+    creditsAction: {
+        label: "Get Vibes Plus" | "Get more credits";
+        href: string;
+    };
+    onSignIn(): void;
+    onLogout(): void;
+    membershipsHref: string;
+    settingsHref: string;
+    savePrompt: string | null;
+}
+export interface CodeSlice {
+    composer: ComposerSlice;
+    moments: readonly MomentItem[];
+    onMomentAction(item: MomentItem, action: string): void;
+    log: readonly AgentLogLine[];
+    suggestions: readonly string[];
+    onSuggestion(text: string): void;
+    suggestionFastPaths: readonly SuggestionFastPath[] | null;
+    onToggleFastPath: ((text: string) => void) | null;
+    kicker: string;
+    remixHints: readonly string[];
+    codeModeAvailable: boolean;
+    codeMode: boolean;
+    onCodeMode(on: boolean): void;
+    codeTab: CodeTab;
+    onCodeTab(tab: CodeTab): void;
+    disabledCodeTabs: readonly CodeTab[];
+    slots: {
+        look: ReactNode;
+        details: ReactNode;
+        help: ReactNode;
+        workspace: ReactNode;
+        agentLog?: ReactNode;
+    };
+}
+export interface ShareSlice {
+    posture: Posture;
+    postureState: AccessToggleState;
+    postureLoading: boolean;
+    onPosture(p: Posture): void;
+    onRetryPosture(): void;
+    escape: {
+        revealed: boolean;
+        onPublishWithoutAccess(): void;
+    };
+    anonWritesOn: boolean;
+    link: {
+        url: string;
+        display: string;
+    };
+    qrValue: string;
+    embed: {
+        snippet: string;
+        autoHeightSnippet?: string;
+    } | null;
+    pinterestHref: string | null;
+    canManage: boolean;
+    roster: readonly RosterMember[];
+    members: {
+        onData(key: string, g: "read" | "write"): Promise<Result<void>>;
+        onCode(key: string, on: boolean): Promise<Result<void>>;
+        onRemove(key: string): Promise<Result<void>>;
+        onInvite(handleOrEmail: string): Promise<Result<void>>;
+    };
+    request: {
+        key: string;
+        handle: string;
+    } | null;
+    onApprove(key: string, data: "read" | "write", code: boolean): Promise<Result<void>>;
+    onDecline(key: string): Promise<Result<void>>;
+    autoApprove: {
+        on: boolean;
+        data: "read" | "write";
+        onChange(next: {
+            on: boolean;
+            data: "read" | "write";
+        }): void;
+    } | null;
+    yourAccess: {
+        summary: string;
+        roleLabel: string;
+        adminMode: boolean | null;
+        onAdminMode(on: boolean): void;
+    };
+    publish: {
+        state: "draft" | "published" | "old" | "locked";
+        onPublish(): void;
+        onUnlock(): void;
+        onViewLatest(): void;
+        error: string | null;
+    } | null;
+    notificationsSlot: ReactNode | null;
+}
+export interface VibeMenuProps {
+    viewer: ViewerSlice;
+    account: AccountSlice;
+    code: CodeSlice;
+    share: ShareSlice | null;
+    state: MenuState;
+    dispatch(e: MenuEvent): void;
+    badges: {
+        pendingRequests: number;
+        chiclet: "draft" | "locked" | null;
+    };
+    closedStatus: ReactNode;
+    onHome(): void;
+    homeHref: string;
+    myVibesHref: string;
+    newAppHref: string;
+    onMadeHereAsk?: () => void;
+    recommended: readonly {
+        title: string;
+        href: string;
+        iconUrl?: string;
+    }[];
+    switchActivity: {
+        twinkling: boolean;
+    };
+    frameCap?: boolean;
+    frame?: "viewport" | "contained";
+    reducedMotion?: boolean;
+    firstBuild?: boolean;
+    settledAtMount?: boolean;
+}
+export interface CardNav {
+    readonly view: MenuView | null;
+    readonly banner: Banner | null;
+    onDrill(view: MenuView): void;
+    onLeaveDrill(): void;
+}
+export declare const APPROVE_DATA_ONLY: Readonly<{
+    readonly codeFailed: "Data access granted. Code access didn't go through.";
+    readonly codeNeedsHandle: "Data access granted. Code access needs their handle.";
+}>;

package/components/vibe-menu/slices.js

@@ -0,0 +1,5 @@
+export const APPROVE_DATA_ONLY = Object.freeze({
+    codeFailed: "Data access granted. Code access didn't go through.",
+    codeNeedsHandle: "Data access granted. Code access needs their handle.",
+});
+//# sourceMappingURL=slices.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slices.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/slices.ts"],"names":[],"mappings":"AA8KA,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/use-remix-hint.d.ts

@@ -0,0 +1,9 @@
+export declare function pickRemixHint(input: {
+    readonly hints: readonly string[];
+    readonly random: () => number;
+}): string;
+export declare function useRemixHint(input: {
+    readonly hints: readonly string[];
+    readonly codeOpen: boolean;
+    readonly random?: () => number;
+}): string;

package/components/vibe-menu/use-remix-hint.js

@@ -0,0 +1,21 @@
+import { useState } from "react";
+export function pickRemixHint(input) {
+    if (input.hints.length === 0)
+        return "";
+    const index = Math.min(input.hints.length - 1, Math.floor(input.random() * input.hints.length));
+    return input.hints[index] ?? "";
+}
+export function useRemixHint(input) {
+    const random = input.random ?? Math.random;
+    const [wasOpen, setWasOpen] = useState(false);
+    const [hint, setHint] = useState("");
+    if (input.codeOpen !== wasOpen) {
+        setWasOpen(input.codeOpen);
+        if (input.codeOpen === true)
+            setHint(pickRemixHint({ hints: input.hints, random }));
+    }
+    if (input.hints.includes(hint))
+        return hint;
+    return input.hints[0] ?? "";
+}
+//# sourceMappingURL=use-remix-hint.js.map

package/components/vibe-menu/use-remix-hint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-remix-hint.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/use-remix-hint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,MAAM,UAAU,aAAa,CAAC,KAA2E;IACvG,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAChG,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;AAClC,CAAC;AAMD,MAAM,UAAU,YAAY,CAAC,KAI5B;IACC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;IAC3C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrC,IAAI,KAAK,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;QAC/B,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC3B,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI;YAAE,OAAO,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IACtF,CAAC;IACD,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAC5C,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AAC9B,CAAC"}

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

@@ -0,0 +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-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: #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-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: #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: #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);\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);\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[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\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);\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);\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);\n  background: color-mix(in srgb, var(--accent) 35%, transparent);\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);\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);\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);\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);\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);\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);\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);\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);\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);\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[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);\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);\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);\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);\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);\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);\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);\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);\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);\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;