@vibes.diy/base 14.3.21 → 14.3.23

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

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