/*
 * Motion tokens (D220). One curve and three durations, on :root so portals and
 * the view-transition pseudo-elements can read them. Enters take --v2-dur,
 * exits and closing take --v2-dur-fast, anything that travels takes --v2-dur-slow.
 * Animate transform and opacity only; folds are the one height exception.
 */
:root {
  --v2-dur-fast: 120ms;
  --v2-dur: 200ms;
  --v2-dur-slow: 320ms;
  --v2-ease: cubic-bezier(0.2, 0, 0, 1);
}

/*
 * V2 design tokens + base styles. All v2 styles are scoped under .v2-root
 * so the existing app's global CSS does not bleed in (and vice versa).
 */

/* The ONE deliberate exception to the .v2-root scope: the page canvas.
   App.tsx unconditionally stamps `modern-ui` (V1's dark gradient) on
   <body>; .v2-root paints only its own box, so the V1 dark showed through
   on load flash, overscroll rubber-banding, and every gap. V2App stamps
   `v2-canvas` while mounted; the compound selector out-ranks
   body.modern-ui (0-2-1 > 0-1-1) so bundle order cannot decide this.
   Literal color: body sits outside .v2-root, so tokens don't reach it —
   keep in lockstep with --v2-page-bg below. */
body.v2-canvas,
body.modern-ui.v2-canvas {
  background: #f8f8fb;
}

.v2-root {
  /* Palette */
  --v2-bg: #ffffff;
  --v2-page-bg: #eef0f4;
  --v2-bg-subtle: #f9fafb;
  --v2-surface: #ffffff;
  --v2-surface-tint: #f2f4f7;
  --v2-surface-hover: #f2f4f7;
  --v2-border: #d0d5dd;
  --v2-border-soft: #e4e7ec;
  --v2-border-strong: #98a2b3;
  --v2-text-primary: #101828;
  --v2-message-text: #1f2937;
  /* TASK-701: inactive rail glyphs, join-radio outlines (3:1 on white and
     #f2f4f7) and the neutral selected pod row. Dark values sit in both dark
     sets below. */
  /* D223 ruling (Cofounder, 11-01): the artboard's --ph (#98a2b3) is under
     3:1 on the rail's own surface, --v2-shell-bg #eef0f4 (2.26:1), so this is
     the nearest grey that passes there: 3.05:1, and 3.47:1 on the white tab
     bar. Dark #5f6979 is 3.48:1 on the dark shell and 3.17:1 on its surface. */
  --v2-rail-icon: #828a99;
  --v2-control-outline: #667085;
  /* D223 (TASK-735): the artboard's .pod.on in both themes, a neutral tint
     row whose mark alone turns cobalt. */
  --v2-row-active: #f2f4f7;
  --v2-row-active-text: #101828;
  --v2-row-active-mute: #667085;
  --v2-row-active-mark: #1d3fd1;
  --v2-text-secondary: #475467;
  --v2-text-tertiary: #667085;
  --v2-text-muted: #667085;
  --v2-text-placeholder: #98a2b3;

  /* The tint step (TASK-122) in the Signal identity: shell ground #eef0f4
     behind rail, pods and inspector; the content pane is an inset white card
     with a 1px #d0d5dd ring and a 6px radius — hard edges, no shadow.
     Mirrors --c-shell-bg / --c-content-radius in design-system/tokens.css. */
  --v2-shell-bg: #eef0f4;
  --v2-content-radius: 6px;
  /* Character-avatar grounds (TASK-679, Lit Signal). The fill behind each face
     is generated in utils/avatars.ts CHARACTER_GROUNDS, which must match these
     values; avatarGrounds.test.ts pins the two together. Agents are cool, people
     warm, so the family still tells the species apart. Mirrors --c-avatar-* in
     design-system/tokens.css. */
  --v2-avatar-agent-1: #dbe5f1;
  --v2-avatar-agent-2: #e1e6ee;
  --v2-avatar-agent-3: #d6e7e4;
  --v2-avatar-human-1: #f1e7df;
  --v2-avatar-human-2: #f2e8d8;
  --v2-avatar-human-3: #efe1dc;
  --v2-avatar-human-4: #f4e3d7;
  --v2-avatar-frame: rgba(16, 24, 40, 0.06);
  /* Dark ring (TASK-679 dark note): the tile stays light on dark, so the ring
     flips to a light hairline. No dark theme on main yet; TASK-680 points
     --v2-avatar-frame at this value under its dark scope. */
  --v2-avatar-frame-dark: rgba(255, 255, 255, 0.10);
  /* Ink primary — filled buttons are ink; cobalt (#1d3fd1) is a MARK inside
     the app: links, the live dot, the agent name, the one card that needs
     you. On marketing surfaces cobalt is used as blocks. Mirrors --c-ink. */
  --v2-ink: #101828;
  --v2-ink-hover: #1d2939;
  --v2-on-ink: #ffffff;
  --v2-on-accent: #ffffff;
  --v2-accent-fill: #1d3fd1;

  /* BEND-1 (spec 2026-08-30): the featured-tier name
     needs a step between 16 and 20. Mirrors --c-fs-feature in
     design-system/tokens.css; the two move together. */
  --v2-fs-feature: 17px;

  --v2-accent: #1d3fd1;
  --v2-accent-strong: #1633a8;
  --v2-accent-soft: #e9edfb;
  --v2-accent-text: #1d3fd1;
  --v2-accent-deep: #0f2378;
  --v2-focus-ring: 0 0 0 3px rgba(29, 63, 209, 0.18);

  /* Platform brand + tint tokens (connectors) — mirror of --c-platform-* in
     design-system/tokens.css; the two move together. */
  --v2-platform-telegram: #2aabee;
  --v2-platform-telegram-soft: #e4f3fb;
  --v2-platform-slack: #611f69;
  --v2-platform-slack-soft: #f3e9f4;
  --v2-platform-discord: #5865f2;
  --v2-platform-discord-soft: #eaecfe;
  --v2-platform-whatsapp: #1fa855;
  --v2-platform-whatsapp-soft: #e5f6ec;
  --v2-platform-x: #111827;
  --v2-platform-x-soft: #eef0f3;
  --v2-platform-instagram: #d62976;
  --v2-platform-instagram-soft: #fbe9f1;
  --v2-platform-messenger: #0084ff;
  --v2-platform-messenger-soft: #e5f2ff;
  --v2-platform-groupme: #00aff0;
  --v2-platform-groupme-soft: #e3f5fd;

  --v2-success: #10b981;
  /* Text-on-soft success — one canonical value (#1368: a second
     ad-hoc success-text hex is how a third one happens). Mirrors
     --c-success-text in design-system/tokens.css. */
  --v2-success-text: #0f7a53;
  --v2-success-soft: #e3f6ec;
  --v2-success-ring: rgba(16, 185, 129, 0.40);
  --v2-success-ring-strong: rgba(16, 185, 129, 0.50);
  --v2-warning: #f4a23a;
  --v2-warning-soft: #fdefdc;
  --v2-info: #0891b2;
  --v2-info-soft: #dff4f8;
  --v2-danger: #ef4444;
  --v2-danger-text: #b91c1c;
  --v2-danger-soft: rgba(239, 68, 68, 0.10);
  /* TASK-687/698: board status and priority colour, the D215 B-lite choice (Sam,
     10-31). Blocked and P0 are red; in progress stays cobalt; P1, P2, pending and
     done stay grey, with no green. Each state keeps its shape. Dark values are in
     both dark blocks below. */
  --v2-prio-p0-bg: #b42318;
  --v2-prio-p0-fg: #ffffff;
  --v2-prio-ink: var(--v2-text-secondary);
  --v2-prio-p2-fg: #667085;
  --v2-prio-edge: var(--v2-border);
  --v2-status-live: var(--v2-accent);
  --v2-status-idle: var(--v2-border-strong);
  --v2-status-pending: #667085;
  --v2-status-blocked: #d92d20;

  /* Agent role colors */
  --v2-pink: #f472b6;
  --v2-violet: #a78bfa;
  --v2-amber: #fbbf24;
  --v2-emerald: #34d399;
  --v2-sky: #60a5fa;
  --v2-rose: #fb7185;

  /* Typography — the Signal identity (direction C on the Shell Parity canvas,
     2026-09-03). Three faces, each with one job: Bricolage Grotesque for
     display (headings, wordmarks — weight 700/800), IBM Plex Sans for every
     line of body and control text, IBM Plex Mono for meta (timestamps,
     ids, status). All self-hosted via @fontsource, imported in V2App.tsx
     above this sheet; the system stacks are fallbacks only while woff2
     loads. Mirrors --c-font-* in design-system/tokens.css. */
  --v2-font: "IBM Plex Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --v2-font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque",
    "Helvetica Neue", Arial, sans-serif;
  --v2-fs-body: 14px;
  --v2-lh-body: 20px;
  --v2-fs-meta: 12px;
  --v2-lh-meta: 16px;
  --v2-fs-label: 11px;
  --v2-lh-label: 14px;
  --v2-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* Geometry */
  --v2-radius-sm: 4px;
  --v2-radius: 4px;
  --v2-radius-lg: 6px;
  --v2-radius-pill: 999px;

  /* D223 Signal primitives (TASK-730), from the d215 artboard :root. Additive:
     the old --v2-radius and --v2-shadow values above stay until PR2 moves
     consumers onto the scale. Pinned by __tests__/signalTokens.test.ts. */
  --v2-ink-2: #1d2433;
  --v2-fill-a: #333c4e;
  --v2-fill-b: #161d2c;
  --v2-fill-edge: #0b101b;
  --v2-on-fill: #ffffff;
  --v2-accent-fill-a: #2e50e2;
  --v2-accent-fill-b: #1b3bc6;
  --v2-key-a: #ffffff;
  --v2-key-b: #f4f5f7;
  --v2-key-edge: rgba(15, 23, 42, 0.14);
  --v2-key-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(16, 24, 40, 0.06);
  --v2-shadow-pane: 0 0 0 1px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -20px rgba(16, 24, 40, 0.18);
  --v2-shadow-pop: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04), 0 18px 36px -14px rgba(16, 24, 40, 0.28);
  --v2-av-ring: rgba(16, 24, 40, 0.07);
  --v2-scrim: rgba(16, 24, 40, 0.18);
  --v2-r-6: 6px;
  --v2-r-7: 7px;
  --v2-r-8: 8px;
  --v2-r-9: 9px;
  --v2-r-10: 10px;
  --v2-r-12: 12px;
  --v2-r-14: 14px;

  /* Elevation */
  --v2-shadow-sm: none;
  --v2-shadow: none;
  --v2-shadow-lg: none;
  --v2-shadow-pending: none; /* the one chrome-card shadow: a PENDING decision or approval only */

  /* Layout */
  --v2-rail-w: 56px;
  --v2-pods-w: 260px;
  --v2-inspector-w: 272px;

  /* Keep production's scoped V2 layer in step with design-system/tokens.css.
     The typing cadence belongs to the minimal mark; pulse/spin retain their
     separate state-affordance semantics. */
  --motion-stagger: 0.18s;
  --motion-breath: 1.2s;
  --motion-pulse: 1.6s;
  --motion-spin: 0.8s;
  --motion-ease-breath: ease-in-out;
  --motion-ease-state: ease-out;
  --motion-ease-linear: linear;

  font-family: var(--v2-font);
  color: var(--v2-text-primary);
  background: var(--v2-page-bg);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: var(--v2-fs-body);
  line-height: var(--v2-lh-body);
  min-width: 0;
}

/* D216 dark set. Values are the artboard's dark :root (index.html, the
   @media + :root[data-theme="dark"] pair), mapped onto v2 token names. Scoped
   to .v2-root under the html attribute set by utils/theme.ts: explicit dark,
   or auto when the OS asks for dark. The light set is the block above.
   Not from the artboard, pending ux-lead: --v2-focus-ring, the success and
   danger text lifts, and the soft fills. Avatar and persona tints stay literal. */
:root[data-v2-theme="dark"] .v2-root {
    /* D223 Signal primitives (TASK-730); dark values from the d215 artboard. */
    --v2-ink-2: #d3d8e1;
    --v2-fill-a: #f4f5f8;
    --v2-fill-b: #dce0e8;
    --v2-fill-edge: #c4cad5;
    --v2-on-fill: #0b0e13;
    --v2-accent-fill-a: #3d5ef2;
    --v2-accent-fill-b: #2948d8;
    --v2-key-a: #1e2531;
    --v2-key-b: #191f29;
    --v2-key-edge: rgba(255, 255, 255, 0.10);
    --v2-key-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.3);
    --v2-shadow-pane: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 28px -20px rgba(0, 0, 0, 0.6);
    --v2-shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 18px 36px -14px rgba(0, 0, 0, 0.75);
    --v2-av-ring: rgba(255, 255, 255, 0.10);
    --v2-scrim: rgba(0, 0, 0, 0.45);
    --v2-bg: #141922;
    --v2-page-bg: #0b0e13;
    --v2-bg-subtle: #181e28;
    --v2-surface: #141922;
    --v2-surface-tint: #1e2531;
    --v2-surface-hover: #1e2531;
    --v2-border: #364051;
    --v2-border-soft: #262d3a;
    --v2-border-strong: #5f6979;
    --v2-prio-p0-bg: #f97066;
    --v2-prio-p0-fg: #0b0e13;
    --v2-prio-p2-fg: #8b94a5;
    --v2-status-pending: #7c8696;
    --v2-status-blocked: #f97066;
    --v2-text-primary: #e8ebf1;
    --v2-message-text: #e8ebf1;
    --v2-rail-icon: #5f6979;
    --v2-control-outline: #737e92;
    --v2-row-active: #1e2531;
    --v2-row-active-text: #e8ebf1;
    --v2-row-active-mute: #8b94a5;
    --v2-row-active-mark: #6680ff;
    --v2-text-secondary: #aeb6c4;
    --v2-text-tertiary: #8b94a5;
    --v2-text-muted: #8b94a5;
    --v2-text-placeholder: #5f6979;
    --v2-shell-bg: #0b0e13;
    --v2-ink: #f4f5f8;
    --v2-ink-hover: #dce0e8;
    --v2-on-ink: #0b0e13;
    --v2-accent: #6680ff;
    --v2-accent-strong: #3d5ef2;
    --v2-accent-soft: #1b2546;
    --v2-accent-text: #8aa2ff;
    --v2-accent-deep: #2948d8;
    --v2-focus-ring: 0 0 0 2px var(--v2-bg), 0 0 0 4px #8aa2ff;
    --v2-success-text: #3ccf95;
    --v2-success-soft: rgba(16, 185, 129, 0.16);
    --v2-danger-text: #ff8a8a;
    --v2-danger-soft: rgba(239, 68, 68, 0.16);
    --v2-on-accent: #ffffff;
    --v2-accent-fill: #3d5ef2;
    --v2-warning-soft: rgba(244, 162, 58, 0.16);
    --v2-info-soft: rgba(8, 145, 178, 0.16);
    --v2-platform-x: #e8ebf1;
    --v2-platform-x-soft: rgba(17, 24, 39, 0.16);
    --v2-platform-telegram-soft: rgba(42, 171, 238, 0.16);
    --v2-platform-slack-soft: rgba(97, 31, 105, 0.16);
    --v2-platform-discord-soft: rgba(88, 101, 242, 0.16);
    --v2-platform-whatsapp-soft: rgba(31, 168, 85, 0.16);
    --v2-platform-instagram-soft: rgba(214, 41, 118, 0.16);
    --v2-platform-messenger-soft: rgba(0, 132, 255, 0.16);
    --v2-platform-groupme-soft: rgba(0, 175, 240, 0.16);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-v2-theme="light"]) .v2-root {
      /* D223 Signal primitives (TASK-730); dark values from the d215 artboard. */
      --v2-ink-2: #d3d8e1;
      --v2-fill-a: #f4f5f8;
      --v2-fill-b: #dce0e8;
      --v2-fill-edge: #c4cad5;
      --v2-on-fill: #0b0e13;
      --v2-accent-fill-a: #3d5ef2;
      --v2-accent-fill-b: #2948d8;
      --v2-key-a: #1e2531;
      --v2-key-b: #191f29;
      --v2-key-edge: rgba(255, 255, 255, 0.10);
      --v2-key-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.3);
      --v2-shadow-pane: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 28px -20px rgba(0, 0, 0, 0.6);
      --v2-shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 18px 36px -14px rgba(0, 0, 0, 0.75);
      --v2-av-ring: rgba(255, 255, 255, 0.10);
      --v2-scrim: rgba(0, 0, 0, 0.45);
      --v2-bg: #141922;
      --v2-page-bg: #0b0e13;
      --v2-bg-subtle: #181e28;
      --v2-surface: #141922;
      --v2-surface-tint: #1e2531;
      --v2-surface-hover: #1e2531;
      --v2-border: #364051;
      --v2-border-soft: #262d3a;
      --v2-border-strong: #5f6979;
      --v2-prio-p0-bg: #f97066;
      --v2-prio-p0-fg: #0b0e13;
      --v2-prio-p2-fg: #8b94a5;
      --v2-status-pending: #7c8696;
      --v2-status-blocked: #f97066;
      --v2-text-primary: #e8ebf1;
      --v2-message-text: #e8ebf1;
      --v2-rail-icon: #5f6979;
      --v2-control-outline: #737e92;
      --v2-row-active: #1e2531;
      --v2-row-active-text: #e8ebf1;
      --v2-row-active-mute: #8b94a5;
      --v2-row-active-mark: #6680ff;
      --v2-text-secondary: #aeb6c4;
      --v2-text-tertiary: #8b94a5;
      --v2-text-muted: #8b94a5;
      --v2-text-placeholder: #5f6979;
      --v2-shell-bg: #0b0e13;
      --v2-ink: #f4f5f8;
      --v2-ink-hover: #dce0e8;
      --v2-on-ink: #0b0e13;
      --v2-accent: #6680ff;
      --v2-accent-strong: #3d5ef2;
      --v2-accent-soft: #1b2546;
      --v2-accent-text: #8aa2ff;
      --v2-accent-deep: #2948d8;
      --v2-focus-ring: 0 0 0 2px var(--v2-bg), 0 0 0 4px #8aa2ff;
      --v2-success-text: #3ccf95;
      --v2-success-soft: rgba(16, 185, 129, 0.16);
      --v2-danger-text: #ff8a8a;
      --v2-danger-soft: rgba(239, 68, 68, 0.16);
      --v2-on-accent: #ffffff;
      --v2-accent-fill: #3d5ef2;
      --v2-warning-soft: rgba(244, 162, 58, 0.16);
      --v2-info-soft: rgba(8, 145, 178, 0.16);
      --v2-platform-x: #e8ebf1;
      --v2-platform-x-soft: rgba(17, 24, 39, 0.16);
      --v2-platform-telegram-soft: rgba(42, 171, 238, 0.16);
      --v2-platform-slack-soft: rgba(97, 31, 105, 0.16);
      --v2-platform-discord-soft: rgba(88, 101, 242, 0.16);
      --v2-platform-whatsapp-soft: rgba(31, 168, 85, 0.16);
      --v2-platform-instagram-soft: rgba(214, 41, 118, 0.16);
      --v2-platform-messenger-soft: rgba(0, 132, 255, 0.16);
      --v2-platform-groupme-soft: rgba(0, 175, 240, 0.16);
      color-scheme: dark;
  }
}

.v2-root *,
.v2-root *::before,
.v2-root *::after {
  box-sizing: border-box;
}

/* Thin overlay-style scrollbars on every scroll container inside v2.
   Without this, Linux + Windows Chrome show a chunky default scrollbar
   with a gray track that clashes with the otherwise-flat surfaces.
   macOS Chrome paints overlay scrollbars by default and is unaffected. */
.v2-root *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.v2-root *::-webkit-scrollbar-track {
  background: transparent;
}
.v2-root *::-webkit-scrollbar-thumb {
  background: var(--v2-border-strong);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.v2-root *::-webkit-scrollbar-thumb:hover {
  background: var(--v2-text-tertiary);
  background-clip: padding-box;
  border: 2px solid transparent;
}
.v2-root *::-webkit-scrollbar-corner {
  background: transparent;
}
/* Firefox + modern Chrome standard property. */
.v2-root * {
  scrollbar-width: thin;
  scrollbar-color: var(--v2-border-strong) transparent;
}

.v2-root :where(button:not(.MuiButtonBase-root)) {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

.v2-root input,
.v2-root textarea {
  font-family: inherit;
  color: inherit;
}

.v2-root a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Language switch ---------- */

/* Language dropdown. The trigger deliberately reads like a plain nav
   option (no pill chrome) so it sits naturally among nav links; the menu
   is a small anchored card. */
.v2-lang-switch {
  position: relative;
  display: inline-flex;
}

.v2-lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--v2-radius-sm, 8px);
  color: var(--v2-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: color 80ms ease;
}

.v2-lang-switch__trigger:hover {
  color: var(--v2-text-primary);
}

.v2-lang-switch__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 132px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  box-shadow: var(--v2-shadow-md, 0 8px 24px rgba(16, 24, 40, 0.12));
}

.v2-lang-switch__item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 7px;
  color: var(--v2-text-secondary);
  font-size: 13px;
  text-align: left;
  transition: background 80ms ease, color 80ms ease;
}

.v2-lang-switch__item:hover {
  background: var(--v2-bg-subtle);
  color: var(--v2-text-primary);
}

.v2-lang-switch__item--active {
  color: var(--v2-accent-text);
  font-weight: 600;
}

.v2-lang-switch__check {
  font-size: 11px;
}

/* ---------- Shared filter grammar ---------- */

.v2-root button:focus-visible,
.v2-root input:focus-visible,
.v2-root textarea:focus-visible,
.v2-root a:focus-visible {
  outline: none;
  box-shadow: var(--v2-focus-ring);
}

/* ---------- Layout shell ---------- */

/* Authenticated v2 routes reserve a compact shell row for the email
   verification reminder. The inner shell/panes must use the remaining space,
   not 100vh, or the composer and feature-page footers would clip. */
.v2-authenticated-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.v2-authenticated-shell__content {
  /* Row 2 always, not by auto-placement. Row 1 is the `auto` row the banner
     sits in, so a verified user (no banner) has the content as the FIRST grid
     child and auto-placement put it in that row instead: the inset card then
     sized to its own content and any page shorter than the viewport ended
     178-195px above the bottom gutter instead of 14 (TASK-157, ux-lead at
     1200). Row 1 collapses to 0 with nothing in it, which is the same layout
     the banner variant already produced. */
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.v2-authenticated-shell__content > .v2-shell,
.v2-authenticated-shell__content .v2-pane {
  height: 100%;
}

.v2-verification-banner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "content resend dismiss";
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 4px 16px;
  border-bottom: 1px solid var(--v2-border-soft);
  background: var(--v2-warning-soft);
  color: var(--v2-text-primary);
  font-size: 14px;
  line-height: 20px;
}

.v2-verification-banner__content {
  grid-area: content;
  min-width: 0;
}

.v2-verification-banner__text {
  display: block;
  overflow-wrap: anywhere;
}

/* Resend feedback stays in the visible status reminder so a sighted person
   receives the same confirmation as assistive technology. */
.v2-verification-banner__notice {
  display: block;
  margin-top: 2px;
  color: var(--v2-text-secondary);
  font-size: 13px;
  line-height: 18px;
}

.v2-root button.v2-verification-banner__resend,
.v2-root button.v2-verification-banner__dismiss {
  flex: none;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--v2-accent-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.v2-root button.v2-verification-banner__resend {
  grid-area: resend;
  padding: 4px 4px;
}

.v2-root button.v2-verification-banner__dismiss {
  grid-area: dismiss;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--v2-text-secondary);
}

.v2-root button.v2-verification-banner__resend:disabled {
  cursor: progress;
  opacity: 0.7;
}

.v2-shell {
  display: grid;
  grid-template-columns: var(--v2-rail-w) var(--v2-pods-w) 1fr var(--v2-inspector-w);
  grid-template-rows: 1fr;
  height: 100vh;
  width: 100%;
  background: var(--v2-shell-bg);
}

.v2-shell--no-inspector {
  grid-template-columns: var(--v2-rail-w) var(--v2-pods-w) 1fr;
}

.v2-shell--feature {
  grid-template-columns: var(--v2-rail-w) var(--v2-pods-w) minmax(0, 1fr);
}

.v2-shell--feature-wide {
  grid-template-columns: var(--v2-rail-w) minmax(0, 1fr);
}

.v2-pane {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid transparent; /* the content card's ring replaces the pane hairlines */
  background: var(--v2-shell-bg);
}

.v2-pane--rail {
  background: var(--v2-shell-bg);
  /* The 56px rail lets the language menu, attention badge and nav hover labels
     escape the pane instead of clipping them at its edge. */
  overflow: visible;
}

/* The content pane is the inset card: 8px gutter top/right/bottom, 1px ring,
   14px radius (TASK-122). Height subtracts the gutters; the banner variant beats
   `.v2-authenticated-shell__content .v2-pane { height: 100% }` on specificity. */
.v2-pane--main {
  margin: 8px 8px 8px 0;
  height: calc(100vh - 16px);
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-content-radius);
  overflow: hidden;
}

.v2-authenticated-shell .v2-pane--main {
  height: calc(100% - 16px);
}

/* Inspector open: the card meets the inspector gutter. --feature-wide has no
   inspector column, so it keeps its right gutter. */
.v2-shell:not(.v2-shell--no-inspector):not(.v2-shell--feature):not(.v2-shell--feature-wide) .v2-pane--main {
  margin-right: 0;
}

.v2-inspector-backdrop {
  display: none;
}

/* ---------- Nav rail ---------- */

.v2-rail {
  height: 100%;
  /* 56px rail - 1px pane border - 2 x 8px = 39px, room for the 38px nav glyph.
     At 10px the nav was 35px wide and scrolled sideways by 2px, which the
     staging smoke's "rail no h-scroll @1440px" check caught after #3139. */
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}

/* Bottom of the rail: a help/preferences cluster (language · guide · feedback)
   sits above a divider, then the account cluster (avatar · sign out). */
.v2-rail__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.v2-rail__utility {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* The language switch left the rail for Settings › Look (D215, TASK-691). */

.v2-rail__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-weight: 700;
  font-size: 17px;
  padding: 0;
  margin-bottom: 8px;
  color: var(--v2-text-primary);
  letter-spacing: -0.02em;
  height: 36px;
}

.v2-rail__brand > span:not(.v2-rail__brand-icon) {
  display: none;
}

/* D223 (TASK-735): the artboard's .logo, a 36px cobalt key. */
.v2-rail__brand-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--v2-r-10, 10px);
  background: var(--v2-accent);
  background: linear-gradient(180deg, var(--v2-accent-fill-a, var(--v2-accent)), var(--v2-accent-fill-b, var(--v2-accent)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 12px -6px rgba(29, 63, 209, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
}

.v2-rail__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
}

/* Below the rail's fixed chrome (245px) plus six nav items (268px), scroll
   the nav vertically while keeping its horizontal overflow hidden. */
@media (max-height: 460px) {
  .v2-rail__nav {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.v2-root button.v2-rail__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* D223 (TASK-735): the artboard's .nav, a bare 38px glyph at rest, coloured
     by --v2-rail-icon: the nearest grey to the artboard's that clears 3:1 on
     the shell (values and ratios at the token). */
  width: 38px;
  min-height: 38px;
  height: 38px;
  align-self: center;
  padding: 0;
  border-radius: var(--v2-r-10, 10px);
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-rail-icon);
  background: transparent;
  text-align: left;
  transition: background 80ms ease;
}

.v2-rail__item:hover::after,
.v2-rail__item:focus-visible::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 5px 8px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.v2-root button.v2-rail__item:hover {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

.v2-root button.v2-rail__item--active {
  background: var(--v2-ink);
  background: linear-gradient(180deg, var(--v2-fill-a, var(--v2-ink)), var(--v2-fill-b, var(--v2-ink)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 10px -3px rgba(16, 24, 40, 0.3);
  color: var(--v2-on-fill, var(--v2-on-ink));
  font-weight: 600;
}

.v2-rail__item-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.v2-rail__item-label {
  display: none;
}

.v2-rail__divider {
  width: 24px;
  height: 1px;
  margin: 6px auto;
  background: var(--v2-border);
}

.v2-rail__user {
  min-height: 48px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-top: none;
}

.v2-rail__user > div {
  display: none;
}

.v2-rail__feedback,
.v2-rail__account {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--v2-radius-sm);
  color: var(--v2-text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}

.v2-rail__feedback:hover,
.v2-rail__feedback[aria-expanded="true"],
.v2-rail__account:hover,
.v2-rail__account[aria-expanded="true"] {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

.v2-rail__feedback svg {
  width: 18px;
  height: 18px;
}

.v2-rail__account {
  width: 36px;
  height: 36px;
  padding: 0;
}

/* The artboard's .av--36: a 36px square, 9px corners, a hairline ring. */
.v2-rail__account .v2-avatar {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--v2-r-9, 9px);
  box-shadow: 0 0 0 1px var(--v2-av-ring, var(--v2-border-soft));
  pointer-events: none;
}

.v2-root .v2-account-menu__popover.MuiPaper-root {
  min-width: 190px;
  margin-left: 8px;
  overflow: hidden;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.v2-account-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
}

.v2-root button.v2-account-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--v2-radius-sm);
  background: transparent;
  color: var(--v2-text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.v2-root button.v2-account-menu__item:hover,
.v2-root button.v2-account-menu__item:focus-visible {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
  outline: none;
}

.v2-root button.v2-account-menu__item:focus-visible {
  box-shadow: var(--v2-focus-ring);
}

.v2-account-menu__item svg {
  width: 18px;
  height: 18px;
  color: var(--v2-text-tertiary);
}

.v2-root .v2-feedback-menu__popover.MuiPaper-root {
  min-width: 210px;
  margin-left: 8px;
  overflow: hidden;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.v2-feedback-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
}

.v2-feedback-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--v2-radius-sm);
  color: var(--v2-text-secondary);
  font-size: 13px;
  font-weight: 600;
  transition: background 80ms ease, color 80ms ease;
}

.v2-feedback-menu__item:hover,
.v2-feedback-menu__item:focus-visible {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
  outline: none;
}

.v2-feedback-menu__item:focus-visible {
  box-shadow: var(--v2-focus-ring);
}

.v2-feedback-menu__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--v2-text-tertiary);
}

/* ---------- Pods sidebar ---------- */

.v2-pods {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 16px;
}

.v2-pods__create {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  background: var(--v2-surface);
  margin-bottom: 14px;
}

/* Who can join is separate from public visibility. The default remains open;
 * invite-only is needed before a private pod can hold an outsider-writable
 * connector grant. These are radios rather than the old option buttons whose
 * styling lost to the global button reset (#870). */

.v2-pods__join-policy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  margin: 3px 0;
  padding: 0;
  border: 0;
  color: var(--v2-text-secondary);
  font: 400 12px/16px var(--v2-font);
}

.v2-pods__join-policy legend {
  margin-bottom: 6px;
  color: var(--v2-text-primary);
  font-weight: 600;
}

.v2-pods__join-policy label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  cursor: pointer;
}

/* Native radios ignore border tokens, so draw the outline from one. Checked, the
   border thickens into the accent dot, so no cobalt background is added. */
.v2-pods__join-policy input {
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--v2-control-outline);
  border-radius: 50%;
  background: var(--v2-surface);
  cursor: pointer;
}

.v2-pods__join-policy input:checked {
  border: 4px solid var(--v2-accent);
}

.v2-pods__join-policy-hint {
  margin: 0;
  color: var(--v2-text-secondary);
  font: 400 var(--v2-fs-meta)/16px var(--v2-font);
}

.v2-pods__create-input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  font-size: 12px;
  outline: none;
}

.v2-pods__create-input:focus {
  border-color: var(--v2-accent);
}

.v2-pods__create-error {
  font-size: 11px;
  color: var(--v2-danger);
}

.v2-pods__create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.v2-root button.v2-pods__create-cancel,
.v2-root button.v2-pods__create-submit {
  padding: 6px 9px;
  border-radius: var(--v2-radius-sm);
  font-size: 12px;
  font-weight: 700;
}

.v2-root button.v2-pods__create-cancel {
  color: var(--v2-text-tertiary);
}

.v2-root button.v2-pods__create-submit {
  background: var(--v2-ink);
  color: var(--v2-on-ink);
}

.v2-root button.v2-pods__create-submit:disabled {
  background: var(--v2-border-strong);
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .v2-root button.v2-pods__create-cancel,
  .v2-root button.v2-pods__create-submit {
    min-height: 40px;
  }
}

/* Must sit AFTER the base chip rule: both this and the shared
   .v2-root button.v2-filter-segment__item--active rule weigh 0-2-1, so
   source order decides — with the base chip rule later in the file, the
   selected chip shipped grey-on-blue (measured live 2026-08-23). */

.v2-pods__list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Title-row sibling — sits to the right of the pod name. Slack/iMessage
   pattern: the timestamp lives on the same line as the title so the
   second line is reserved entirely for the message preview. */

.v2-pods__empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--v2-text-tertiary);
  font-size: 13px;
}

/* First-run is a shell-level dialog. The overlay separates the one-time setup
   path from pod content, while the dialog itself owns overflow on short mobile
   viewports so every step and the dismissal control stay reachable. */
.v2-first-run__overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 24px;
  background: var(--v2-scrim);
}

/* D215 .v2-first-run: the pop surface at 16px, its edge carried by the pop
   shadow rather than a border. */
.v2-first-run {
  width: min(720px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 28px;
  border-radius: 16px;
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  box-shadow: var(--v2-shadow-pop);
  outline: none;
}

.v2-first-run__eyebrow {
  margin-bottom: 8px;
  color: var(--v2-text-muted);
  font: 500 11.5px/16px var(--v2-font-mono);
}

.v2-first-run__heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.v2-first-run__title {
  margin: 0;
  color: var(--v2-text-primary);
  font: 700 28px/1.15 var(--v2-font-display);
  letter-spacing: -0.025em;
  /* Two even lines on a phone, not a lone last word. */
  text-wrap: balance;
}

.v2-first-run__lede {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--v2-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.v2-root button.v2-first-run__skip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--v2-r-9);
  color: var(--v2-text-secondary);
  font: 600 12.5px/1 var(--v2-font);
}

.v2-root button.v2-first-run__skip:hover {
  background: var(--v2-surface-tint);
  color: var(--v2-text-primary);
}

.v2-first-run__steps {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.v2-first-run__step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: var(--v2-r-12);
  background: var(--v2-bg-subtle);
  box-shadow: inset 0 0 0 1px var(--v2-border-soft);
}

.v2-first-run__step-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--v2-surface);
  box-shadow: inset 0 0 0 1px var(--v2-border);
  color: var(--v2-text-secondary);
  font: 600 12px/1 var(--v2-font-mono);
}

.v2-first-run__step-mark--done {
  background: var(--v2-accent-soft);
  box-shadow: inset 0 0 0 1px var(--v2-accent);
  color: var(--v2-accent-text);
}

.v2-first-run__step-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: var(--v2-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.v2-first-run__step-body strong {
  color: var(--v2-text-primary);
  font-size: 14px;
  font-weight: 600;
}

/* D215 keys: setup is the key material, hello the one filled action
   (TASK-647 item 4: the card keeps one ink action). */
.v2-root button.v2-first-run__hello,
.v2-root a.v2-first-run__setup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  margin-top: 6px;
  padding: 0 13px;
  border-radius: var(--v2-r-10);
  font: 600 13px/1 var(--v2-font);
  text-decoration: none;
}

.v2-root a.v2-first-run__setup {
  border: 1px solid var(--v2-key-edge);
  background: linear-gradient(180deg, var(--v2-key-a), var(--v2-key-b));
  box-shadow: var(--v2-key-inset);
  color: var(--v2-text-primary);
}
.v2-root a.v2-first-run__setup:hover {
  border-color: var(--v2-border-strong);
}
.v2-root button.v2-first-run__hello {
  border: 1px solid var(--v2-fill-edge);
  background: linear-gradient(180deg, var(--v2-fill-a), var(--v2-fill-b));
  color: var(--v2-on-fill);
}
.v2-root button.v2-first-run__hello:hover:not(:disabled) {
  background: var(--v2-ink-hover);
}

/* Disabled before the agent connects, as drawn; busy while the room opens. */
.v2-root button.v2-first-run__hello:disabled {
  cursor: default;
  opacity: 0.45;
}
.v2-root button.v2-first-run__hello[aria-busy="true"] {
  cursor: wait;
  opacity: 0.65;
}

.v2-first-run__waiting,
.v2-first-run__connected,
.v2-first-run__error {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The waiting dot is the presence dot: cobalt, with the shared pulse. */
.v2-first-run__dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v2-accent);
}
.v2-first-run__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--v2-accent);
  opacity: 0;
  animation: v2-presence-pulse var(--motion-pulse) var(--motion-ease-state) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .v2-first-run__dot::after { animation: none; }
}

.v2-first-run__connected {
  color: var(--v2-accent-text);
  font-weight: 600;
}

.v2-first-run__error {
  color: var(--v2-text-primary);
  font-size: 12.5px;
}

.v2-first-run__error svg {
  flex: none;
  color: var(--v2-danger);
}

@keyframes v2-typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* ---------- Message bubble ---------- */

.v2-msg {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 0;
}

/* The message action cluster (taste rulings 2026-08-23): Reply,
   Thread, and the reaction trigger share ONE floating pill at the row's
   top-right, identical for headed and grouped rows. Absolute + hover means
   zero layout shift; icon buttons instead of text keep it quiet at rest and
   compact under the cursor. The reaction picker anchors to the cluster so
   the trigger sits with its siblings instead of orphaned in an empty band
   below the message (the old absolute "+"). */
.v2-msg { position: relative; }

/* ---------- Inspector ---------- */

.v2-inspector {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.v2-inspector {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Danger zone — destructive actions (delete pod, etc.) live in the
   Manage tab inside this red-accent card with proper warning chrome. */

@keyframes v2-now-pulse {
  0%   { box-shadow: 0 0 0 0 var(--v2-success-ring); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Inspector: Members ---------- */

/* ---------- Your Team category tab bar ---------- */

/* ---------- Invite modal + redeem page ---------- */
.v2-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.v2-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-md, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

.v2-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--v2-border-soft);
}

.v2-modal__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--v2-text-primary);
}

.v2-root button.v2-modal__close,
.v2-modal__close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--v2-text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.v2-root button.v2-modal__close:hover,
.v2-modal__close:hover {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

.v2-modal__tabs {
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--v2-border-soft);
}

.v2-root button.v2-modal__tab,
.v2-modal__tab {
  height: 36px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--v2-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.v2-root button.v2-modal__tab:hover,
.v2-modal__tab:hover {
  color: var(--v2-text-primary);
}

.v2-root button.v2-modal__tab--active,
.v2-modal__tab--active {
  color: var(--v2-accent);
  border-bottom-color: var(--v2-accent);
}

.v2-modal__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v2-modal__hint {
  font-size: 12px;
  color: var(--v2-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.v2-modal__error {
  font-size: 11px;
  color: var(--v2-danger);
  margin-top: 4px;
}

.v2-modal__section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--v2-text-primary);
}

.v2-invite-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.v2-invite-options__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--v2-text-secondary);
}

.v2-invite-options__select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  font: inherit;
  font-weight: 500;
  outline: none;
}

.v2-invite-options__select:focus {
  border-color: var(--v2-accent);
  box-shadow: var(--v2-focus-ring);
}

.v2-invite-link-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

/* The Copy button inside the invite-link row inherits `width: 100%` from
 * the base `.v2-invite-card__cta` rule (which is meant for full-width
 * primary CTAs). Inside the row it needs to stay sized to its content so
 * the URL input gets the remaining flex space. Without this override the
 * input collapses to ~20px and the URL is invisible. */
.v2-root .v2-invite-link-row button.v2-invite-card__cta,
.v2-invite-link-row .v2-invite-card__cta {
  width: auto;
  flex-shrink: 0;
  margin-top: 0;
  padding: 0 12px;
}

.v2-invite-link {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-bg-subtle);
  font-size: 11px;
  color: var(--v2-text-secondary);
  font-family: ui-monospace, SFMono-Regular, monospace;
  outline: none;
}

.v2-invite-link:focus {
  border-color: var(--v2-accent);
}

.v2-invite-manage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--v2-border-soft);
}

.v2-invite-manage__empty {
  padding: 12px;
  border: 1px dashed var(--v2-border);
  border-radius: var(--v2-radius-sm);
  color: var(--v2-text-tertiary);
  font-size: 11px;
  text-align: center;
}

.v2-invite-manage__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v2-invite-manage__item {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
}

.v2-invite-manage__summary,
.v2-invite-manage__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.v2-invite-manage__summary {
  align-items: baseline;
  font-size: 11px;
  color: var(--v2-text-tertiary);
}

.v2-invite-manage__summary strong {
  overflow: hidden;
  color: var(--v2-text-primary);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-invite-manage__meta {
  flex-wrap: wrap;
  margin-top: 3px;
  color: var(--v2-text-secondary);
  font-size: 10px;
}

.v2-invite-manage__url {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid var(--v2-border-soft);
  border-radius: 6px;
  background: var(--v2-bg-subtle);
  color: var(--v2-text-secondary);
  font-family: var(--v2-font-mono);
  font-size: 10px;
  outline: none;
}

.v2-invite-manage__url:focus {
  border-color: var(--v2-accent);
}

.v2-invite-manage__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.v2-root button.v2-invite-manage__action,
.v2-invite-manage__action {
  min-width: 0;
  height: 30px;
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.v2-root button.v2-invite-manage__action:hover,
.v2-invite-manage__action:hover {
  background: var(--v2-surface-hover);
}

.v2-root button.v2-invite-manage__action--danger,
.v2-invite-manage__action--danger {
  border-color: var(--v2-danger-soft);
  color: var(--v2-danger);
}

.v2-root button.v2-invite-manage__action--danger:hover,
.v2-invite-manage__action--danger:hover {
  background: var(--v2-danger-soft);
}

.v2-root button.v2-invite-manage__action:disabled,
.v2-invite-manage__action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .v2-verification-banner {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "content dismiss"
      "resend resend";
    align-items: start;
    gap: 6px 8px;
    min-height: 0;
    padding: 8px 12px;
    font-size: 16px;
  }

  .v2-root button.v2-verification-banner__resend {
    justify-self: start;
  }

  /* Auth is a primary phone flow: 16px prevents Safari's focus zoom and a
     44px target keeps signup usable with a thumb. */
  .v2-login__input {
    min-height: 44px;
    font-size: 16px;
  }

  .v2-root button.v2-login__submit {
    min-height: 44px;
    font-size: 16px;
  }

  .v2-modal__overlay {
    padding: 12px;
  }

  .v2-invite-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .v2-invite-link-row {
    flex-wrap: wrap;
  }

  .v2-root .v2-invite-link-row button.v2-invite-card__cta,
  .v2-invite-link-row .v2-invite-card__cta {
    width: 100%;
    height: 34px;
  }
}

.v2-root button.v2-invite-card__cta,
.v2-invite-card__cta {
  width: 100%;
  height: 38px;
  border: none;
  border-radius: var(--v2-radius-sm);
  background: var(--v2-accent-fill);
  color: var(--v2-on-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}

.v2-root button.v2-invite-card__cta:hover,
.v2-invite-card__cta:hover {
  filter: brightness(1.05);
}

.v2-root button.v2-invite-card__cta:disabled,
.v2-invite-card__cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.v2-root button.v2-invite-card__cta--secondary,
.v2-invite-card__cta--secondary {
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  border: 1px solid var(--v2-border-soft);
}

.v2-root button.v2-invite-card__cta--secondary:hover,
.v2-invite-card__cta--secondary:hover {
  background: var(--v2-bg-subtle);
}

/* ---------- Avatar ---------- */

.v2-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 650;
  font-size: 11px;
  flex-shrink: 0;
  border: 2px solid var(--v2-surface);
  text-transform: uppercase;
  position: relative;
  /* Two initials at 700 with default tracking collide at 24px — the pair reads
     as one glyph. 650 with positive tracking separates them without making the
     avatar shout; the optical centre then sits ~0.5px right, so the tracking is
     compensated with an equal indent rather than left as a visible lean. */
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  /* The seeded gradient is the identity; a flat inner highlight over it reads
     as a lit sphere rather than a filled circle, and costs nothing. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

/* A photo is the identity when one exists — the gradient underneath is only a
   backing plate for transparent PNGs, so the inner highlight must not sit on
   top of someone's face. */
.v2-avatar:has(img) {
  box-shadow: none;
}

/* Character tier gets a hairline ring (TASK-679). The compact transcript frame
   (--flat) stays unframed; the :has(img) rule above outranks a plain class, so
   the selector repeats it to win. */
.v2-avatar:has(img).v2-avatar--character:not(.v2-avatar--flat) {
  box-shadow: 0 0 0 1px var(--v2-avatar-frame);
}

.v2-avatar--lg {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.v2-avatar--md {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.v2-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.v2-avatar__online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--v2-success);
  border: 2px solid var(--v2-surface);
}

/* ---------- Login ---------- */

/* The auth page is its own scroll container: .v2-root and html hide overflow,
   so a card taller than the window (a short laptop, a phone with the keyboard
   up) would otherwise lose its last rows. The card centres with auto margins,
   which fall to zero when it overflows; place-items: center would push its top
   out of reach instead. */
.v2-login {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px;
  background: var(--v2-page-bg);
}

/* The d215 auth card: the pane surface on the shell ground (every auth page
   shares it; sign-in, sign-up, reset and forgot frames all draw .authcard). */
.v2-login__card {
  width: 100%;
  max-width: 400px;
  margin: auto;
  background: var(--v2-surface);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--v2-shadow-pane);
}

/* Each auth card stacks its rows on one 16px rhythm, as drawn. A form inside
   the card (invite-required has two) lends its rows to that grid. */
.v2-login__card--stack {
  display: grid;
  /* minmax(0, 1fr): one long unbroken word (a pod description, a URL) wraps
     inside the card instead of widening the grid column past it. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.v2-login__card--stack > form {
  display: contents;
}
.v2-login__card--stack .v2-login__brand,
.v2-login__card--stack .v2-login__field,
.v2-login__card--stack .v2-login__or,
.v2-login__card--stack .v2-login__oauth,
.v2-login__card--stack .v2-login__notice,
.v2-login__card--stack .v2-login__subtitle,
.v2-login__card--stack .v2-login__hint,
.v2-login__card--stack .v2-login__legal,
.v2-login__card--stack .v2-login__field-hint {
  margin: 0;
}
/* The one prose line a page keeps (the frames' .sub), and a plain hint
   under it: no box on a lifted card. */
.v2-login__card--stack .v2-login__subtitle {
  font-size: 13.5px;
  line-height: 1.5;
}
.v2-login__card--stack .v2-login__hint {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v2-text-secondary);
}
.v2-login__card--stack .v2-login__title {
  margin: 4px 0 0;
}
.v2-login__card--stack .v2-login__oauth {
  gap: 16px;
}
.v2-root .v2-login__card--stack button.v2-login__submit {
  margin-top: 0;
  /* A key can carry a pod name ("Join <pod>"); an unbroken one wraps
     inside the key instead of painting past the card. One line stays 40px
     (border-box 9 + 20 + 9 + 2). No min-height here: it would outrank the
     phone rule's 44px. */
  height: auto;
  padding-block: 9px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.v2-login__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 18px/1 var(--v2-font-display);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.v2-login__brand .v2-rail__brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.v2-login__brand .v2-rail__brand-icon svg {
  width: 17px;
  height: 17px;
}

.v2-login__title {
  font: 800 28px/1.1 var(--v2-font-display);
  margin: 16px 0 4px;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.v2-login__subtitle {
  font-size: 13px;
  color: var(--v2-text-secondary);
  margin-bottom: 22px;
}

.v2-login__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.v2-login__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

/* "optional" rides in the label, not the field, at its far end. */
.v2-login__label em {
  margin-left: 8px;
  font: 500 11px/1 var(--v2-font-mono);
  font-style: normal;
  color: var(--v2-text-muted);
}

/* "Forgot password?" sits on the password label's line. */
.v2-login__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.v2-login__input {
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--v2-r-10, 10px);
  background: var(--v2-bg-subtle);
  box-shadow: inset 0 0 0 1px var(--v2-border);
  color: var(--v2-text-primary);
  font-size: 14px;
  outline: none;
  transition: box-shadow 80ms ease;
}

/* Outranks the shared .v2-root input:focus-visible ring (0,2,1), which would
   otherwise drop the accent edge. */
.v2-root input.v2-login__input:focus-visible {
  box-shadow: inset 0 0 0 1px var(--v2-accent), var(--v2-focus-ring);
}

/* A failed sign-in marks both fields with the ink ring, as drawn. */
.v2-login__input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px var(--v2-text-primary);
}

/* The ink fill, the auth frames' one primary act. The root/button selector
   keeps it owned by the submit control (login + register). */
.v2-root button.v2-login__submit {
  width: 100%;
  height: 40px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid var(--v2-fill-edge);
  background: linear-gradient(180deg, var(--v2-fill-a), var(--v2-fill-b));
  color: var(--v2-on-fill);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--v2-r-10, 10px);
}

.v2-root button.v2-login__submit:hover:not(:disabled) {
  background: var(--v2-ink-hover);
}

.v2-root button.v2-login__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* One quiet row, as the auth frames draw both errors (alert mark) and
   confirmations (check mark). V2AuthNotice renders it. */
.v2-login__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: var(--v2-r-10, 10px);
  background: var(--v2-surface-tint);
  box-shadow: inset 0 0 0 1px var(--v2-border);
  color: var(--v2-text-primary);
  font-size: 13px;
  line-height: 19px;
}

.v2-login__notice svg {
  flex: none;
  margin-top: 1.5px;
}

.v2-login__forgot {
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
}

/* The "or" rule between the providers and the form. On invite-required it
   carries the waitlist line in place of "or". */
.v2-login__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: var(--v2-text-muted);
  font: 500 11.5px/1 var(--v2-font-mono);
}

.v2-login__or::before,
.v2-login__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--v2-border-soft);
}

.v2-login__oauth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* OAuth links and invite forms share one button treatment. Prefix with
   `.v2-root` to beat the global button/link rules. */

.v2-root :where(a, button).v2-login__oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--v2-r-10, 10px);
  border: 1px solid var(--v2-key-edge);
  background: linear-gradient(180deg, var(--v2-key-a), var(--v2-key-b));
  box-shadow: var(--v2-key-inset);
  color: var(--v2-text-primary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 80ms ease;
}

.v2-root :where(a, button).v2-login__oauth-btn:hover {
  border-color: var(--v2-border-strong);
}

.v2-root :where(a, button).v2-login__oauth-btn:focus-visible {
  box-shadow: var(--v2-key-inset), var(--v2-focus-ring);
}

/* Inline helper under a single field — plain small text, unlike the boxed
   .v2-login__hint. Born from the invite-code placeholder truncating. */
.v2-login__field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--v2-text-tertiary);
}

/* The terms line: muted, under the key. */
.v2-login__legal {
  font-size: 12px;
  line-height: 1.5;
  color: var(--v2-text-muted);
  text-align: center;
}

.v2-login__hint {
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: var(--v2-radius);
  background: var(--v2-bg-subtle);
  font-size: 12px;
  color: var(--v2-text-tertiary);
}

.v2-login__hint code {
  font-family: 'SF Mono', Menlo, monospace;
  background: var(--v2-surface);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--v2-border);
  color: var(--v2-text-primary);
}

/* `.v2-root a { color: inherit }` (0,1,1) beats a single-class rule
   on specificity, so prefix to win. Same pattern as the v2-button reset. */
.v2-root a.v2-login__link {
  color: var(--v2-accent-text);
  text-decoration: none;
  font-weight: 500;
}

/* The card's last line: one plain sentence and the link to the other page. */
.v2-login__alt {
  margin: 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--v2-text-secondary);
}

.v2-root .v2-login__alt a.v2-login__link,
.v2-root .v2-login__legal a.v2-login__link,
.v2-root .v2-login__hint a.v2-login__link,
.v2-root .v2-login__notice a.v2-login__link {
  font-weight: 600;
}
.v2-root a.v2-login__link:hover {
  text-decoration: underline;
}

/* Extra login-card affordances — used by the invite-required page, which stacks
   two forms (invite code + waitlist) in one card. A bare <form> picks up the
   dark global form background (V2Login/V2Register dodge this by putting the card
   class ON the single form); here the card is a <div> with two <form>s inside, so
   neutralize the form background/box explicitly. */
.v2-login__card form {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
/* The second path on a page is a key, not a second fill: the waitlist, and
   the way out of a failed verification. */
.v2-root button.v2-login__submit--ghost {
  border-color: var(--v2-key-edge);
  background: linear-gradient(180deg, var(--v2-key-a), var(--v2-key-b));
  box-shadow: var(--v2-key-inset);
  color: var(--v2-text-primary);
}
.v2-root button.v2-login__submit--ghost:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--v2-key-a), var(--v2-key-b));
  border-color: var(--v2-border-strong);
}
.v2-root button.v2-login__submit--ghost:focus-visible {
  box-shadow: var(--v2-key-inset), var(--v2-focus-ring);
}

/* The 390 auth frames are full-bleed: the card is the screen. This block sits
   after the base rules above, which it overrides at equal specificity. */
@media (max-width: 480px) {
  .v2-login {
    padding: 0;
    background: var(--v2-surface);
  }

  .v2-login__card {
    margin: 0;
    max-width: none;
    box-shadow: none;
    border-radius: 0;
    padding: 28px 20px;
  }

  .v2-root :where(a, button).v2-login__oauth-btn {
    min-height: 44px;
  }
}

/* ---------- Empty / loading states ---------- */

.v2-feature {
  min-width: 0;
  background: var(--v2-surface); /* inside the card the ground is white; the card is the tint step */
}

.v2-feature__header {
  flex-shrink: 0;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--v2-border-soft);
  background: var(--v2-surface);
}

.v2-feature__title {
  margin: 0;
  color: var(--v2-text-primary);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.v2-page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.v2-page-head__identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.v2-page-head__identity h1 { min-width: 0; }
.v2-page-head__meta {
  color: var(--v2-text-muted);
  font: 500 12px/16px var(--v2-font-mono);
}
.v2-page-head__actions { display: flex; align-items: center; gap: 8px; }
.v2-hint { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.v2-root button.v2-hint__trigger {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--v2-border);
  border-radius: 50%;
  background: transparent;
  color: var(--v2-text-muted);
  font: 600 12px/1 var(--v2-font);
  cursor: pointer;
}
.v2-root button.v2-hint__trigger:hover { background: var(--v2-surface-hover); }
.v2-root button.v2-hint__trigger:focus-visible {
  border-color: var(--v2-accent);
  outline: 0;
  box-shadow: var(--v2-focus-ring);
}
.v2-hint__content {
  display: none;
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  background: var(--v2-surface);
  color: var(--v2-text-secondary);
  font: 400 13px/18px var(--v2-font);
  white-space: normal;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.v2-hint--open .v2-hint__content { display: block; }
@media (max-width: 760px) {
  .v2-root button.v2-hint__trigger { width: 28px; height: 28px; flex: 0 0 28px; }
  .v2-hint--open { display: flex; min-width: 0; max-width: 100%; align-items: flex-start; gap: 8px; }
  .v2-page-head__identity .v2-hint--open { display: contents; }
  .v2-hint--open .v2-hint__content {
    position: static;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .v2-page-head__identity .v2-hint__content { width: 100%; flex-basis: 100%; order: 1; }
}

.v2-feature__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 34px 42px;
}

.v2-feature__legacy {
  max-width: 1240px;
  margin: 0 auto;
  color: var(--v2-text-primary);
}

.v2-feature__legacy > .MuiContainer-root {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.v2-feature__legacy .MuiBox-root {
  color: var(--v2-text-primary);
}

.v2-feature__legacy .MuiTypography-root {
  color: inherit;
}

.v2-feature__legacy .MuiTypography-h1,
.v2-feature__legacy .MuiTypography-h2,
.v2-feature__legacy .MuiTypography-h3,
.v2-feature__legacy .MuiTypography-h4,
.v2-feature__legacy .MuiTypography-h5,
.v2-feature__legacy .MuiTypography-h6 {
  color: var(--v2-text-primary);
  letter-spacing: -0.02em;
}

.v2-feature__legacy .MuiTypography-colorPrimary,
.v2-feature__legacy .MuiSvgIcon-colorPrimary {
  color: var(--v2-accent-text);
}

.v2-feature__legacy .MuiTypography-colorTextSecondary,
.v2-feature__legacy .MuiTypography-colorTextDisabled {
  color: var(--v2-text-secondary);
}

.v2-feature__legacy .MuiPaper-root {
  background: var(--v2-surface) !important;
  background-color: var(--v2-surface) !important;
  color: var(--v2-text-primary) !important;
  border: 1px solid var(--v2-border) !important;
  box-shadow: var(--v2-shadow-sm) !important;
}

.v2-feature__legacy .MuiPaper-elevation1,
.v2-feature__legacy .MuiPaper-elevation2,
.v2-feature__legacy .MuiPaper-elevation3,
.v2-feature__legacy .MuiPaper-elevation4,
.v2-feature__legacy .MuiPaper-elevation5,
.v2-feature__legacy .MuiPaper-elevation6,
.v2-feature__legacy .MuiPaper-elevation7,
.v2-feature__legacy .MuiPaper-elevation8,
.v2-feature__legacy .MuiPaper-elevation9,
.v2-feature__legacy .MuiPaper-elevation10,
.v2-feature__legacy .MuiPaper-elevation11,
.v2-feature__legacy .MuiPaper-elevation12,
.v2-feature__legacy .MuiPaper-elevation13,
.v2-feature__legacy .MuiPaper-elevation14,
.v2-feature__legacy .MuiPaper-elevation15,
.v2-feature__legacy .MuiPaper-elevation16,
.v2-feature__legacy .MuiPaper-elevation17,
.v2-feature__legacy .MuiPaper-elevation18,
.v2-feature__legacy .MuiPaper-elevation19,
.v2-feature__legacy .MuiPaper-elevation20,
.v2-feature__legacy .MuiPaper-elevation21,
.v2-feature__legacy .MuiPaper-elevation22,
.v2-feature__legacy .MuiPaper-elevation23,
.v2-feature__legacy .MuiPaper-elevation24 {
  box-shadow: var(--v2-shadow-sm);
}

.v2-feature__legacy .MuiPaper-root,
.v2-feature__legacy .MuiCard-root {
  border-radius: 12px;
}

.v2-feature__legacy .MuiCard-root {
  background: var(--v2-surface) !important;
  background-color: var(--v2-surface) !important;
  color: var(--v2-text-primary) !important;
  border: 1px solid var(--v2-border) !important;
  box-shadow: var(--v2-shadow-sm) !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease !important;
}

.v2-feature__legacy .MuiCard-root:hover {
  border-color: var(--v2-border-strong) !important;
  box-shadow: var(--v2-shadow) !important;
  transform: translateY(-1px) !important;
}

.v2-feature__legacy .MuiCardContent-root,
.v2-feature__legacy .MuiCardActions-root {
  background: transparent !important;
  color: var(--v2-text-primary) !important;
}

.v2-feature__legacy .MuiCardActions-root {
  border-top-color: var(--v2-border-soft) !important;
}

.v2-feature__legacy .MuiCard-root .MuiTypography-root {
  color: var(--v2-text-primary) !important;
}

.v2-feature__legacy .MuiCard-root .MuiTypography-colorTextSecondary,
.v2-feature__legacy .MuiCard-root .MuiTypography-caption,
.v2-feature__legacy .MuiCard-root .MuiTypography-body2 {
  color: var(--v2-text-secondary) !important;
}

.v2-feature__legacy .MuiCard-root [style*="color: rgb(226, 232, 240)"],
.v2-feature__legacy .MuiCard-root [style*="color: #e2e8f0"],
.v2-feature__legacy .MuiCard-root [style*="color: #cbd5f5"],
.v2-feature__legacy .MuiCard-root [style*="color: #f8fafc"] {
  color: var(--v2-text-primary) !important;
}

.v2-feature__legacy .MuiCard-root [style*="color: rgb(148, 163, 184)"],
.v2-feature__legacy .MuiCard-root [style*="color: #94a3b8"],
.v2-feature__legacy .MuiCard-root [style*="color: #64748b"],
.v2-feature__legacy .MuiCard-root [style*="color: #475569"] {
  color: var(--v2-text-secondary) !important;
}

.v2-feature__legacy .MuiButton-containedPrimary {
  background: var(--v2-accent);
  color: #ffffff;
  box-shadow: none;
}

.v2-feature__legacy .MuiButton-containedPrimary:hover {
  background: var(--v2-accent-strong);
}

.v2-feature__legacy .MuiButton-outlined {
  border-color: var(--v2-border);
}

.v2-feature__legacy .MuiButton-text,
.v2-feature__legacy .MuiButton-outlined {
  color: var(--v2-accent-text);
}

.v2-feature__legacy .MuiIconButton-root {
  color: var(--v2-text-tertiary);
}

.v2-feature__legacy .MuiIconButton-root:hover {
  color: var(--v2-text-primary);
  background-color: var(--v2-surface-hover);
}

.v2-feature__legacy .MuiInputBase-root,
.v2-feature__legacy .MuiSelect-select,
.v2-feature__legacy .MuiAutocomplete-inputRoot {
  background-color: var(--v2-surface) !important;
  color: var(--v2-text-primary) !important;
}

.v2-feature__legacy .MuiOutlinedInput-notchedOutline {
  border-color: var(--v2-border);
}

.v2-feature__legacy .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--v2-border-strong);
}

.v2-feature__legacy .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--v2-accent);
  box-shadow: var(--v2-focus-ring);
}

.v2-feature__legacy .MuiInputLabel-root,
.v2-feature__legacy .MuiFormLabel-root {
  color: var(--v2-text-secondary);
}

/* Flatten MUI outlined form controls to the v2 look. The recolor above kept the
   MUI signature — a floated label sitting in a notched border. Here we finish the
   job: continuous border (kill the notch legend), v2 radius, and lift the label
   to a static v2-style label ABOVE the field. One block skins every legacy admin
   form (Global Integrations model policy, etc.) without a component rewrite. */
.v2-feature__legacy .MuiFormControl-root { margin-top: 20px; }
.v2-feature__legacy .MuiOutlinedInput-root { border-radius: var(--v2-radius); }
.v2-feature__legacy .MuiOutlinedInput-notchedOutline legend { max-width: 0.01px; }
.v2-feature__legacy .MuiInputLabel-outlined {
  position: static;
  transform: none;
  margin-bottom: 6px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--v2-text-secondary);
  pointer-events: auto;
  overflow: visible;
}
.v2-feature__legacy .MuiInputBase-input,
.v2-feature__legacy .MuiSelect-select {
  padding: 10px 12px;
  font-size: 14px;
  min-height: 20px;
  box-sizing: border-box;
}

.v2-feature__legacy .MuiDivider-root {
  border-color: var(--v2-border-soft);
}

.v2-feature__legacy .MuiTabs-root {
  border-bottom-color: var(--v2-border-soft);
  min-height: 42px;
}

.v2-feature__legacy .MuiTab-root {
  color: var(--v2-text-secondary);
  min-height: 42px;
  text-transform: none;
  font-weight: 700;
}

.v2-feature__legacy .MuiTab-root.Mui-selected {
  color: var(--v2-accent-text);
}

.v2-feature__legacy .MuiTabs-indicator {
  background-color: var(--v2-accent);
}

.v2-feature__legacy .MuiChip-root {
  border-radius: var(--v2-radius-pill);
  font-weight: 700;
  border-color: var(--v2-border) !important;
}

.v2-feature__legacy .MuiChip-filled:not(.MuiChip-colorSuccess):not(.MuiChip-colorWarning):not(.MuiChip-colorError):not(.MuiChip-colorInfo) {
  background-color: var(--v2-accent-soft) !important;
  color: var(--v2-accent-text) !important;
}

.v2-feature__legacy .MuiChip-outlined:not(.MuiChip-colorSuccess):not(.MuiChip-colorWarning):not(.MuiChip-colorError):not(.MuiChip-colorInfo) {
  background-color: var(--v2-surface) !important;
  color: var(--v2-text-secondary) !important;
}

.v2-feature__legacy .MuiChip-colorPrimary {
  background-color: var(--v2-accent-soft);
  color: var(--v2-accent-text);
}

.v2-feature__legacy .MuiAlert-root {
  border-radius: 12px;
  border: 1px solid transparent;
}

.v2-feature__legacy .MuiTableContainer-root {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  box-shadow: var(--v2-shadow-sm);
}

.v2-feature__legacy .MuiTableCell-root {
  border-bottom-color: var(--v2-border-soft);
}

.v2-feature__legacy .MuiTableHead-root .MuiTableCell-root {
  background-color: var(--v2-page-bg);
  color: var(--v2-text-secondary);
  font-weight: 800;
}

.v2-feature__legacy .MuiListItem-root {
  border-radius: 10px;
}

.v2-feature__legacy .MuiListItem-root:hover {
  background-color: var(--v2-surface-hover);
}

.v2-feature__legacy .MuiSkeleton-root {
  background-color: #f0eff8;
}

.v2-feature__legacy .MuiDialog-paper,
.v2-feature__legacy .MuiPopover-paper,
.v2-feature__legacy .MuiMenu-paper {
  background: var(--v2-surface) !important;
  color: var(--v2-text-primary) !important;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-lg);
}

.v2-feature__legacy .MuiBackdrop-root {
  background-color: rgba(17, 24, 39, 0.34);
}

.v2-feature__legacy .MuiAvatar-root {
  border: 2px solid var(--v2-surface);
}

/* Reset top padding for embedded dev tools so the v2 feature header is the
   only top-of-page chrome the user sees. The dev pages were authored to
   stand alone and add their own 24px+ top padding. */
.v2-feature__legacy .api-dev-root,
.v2-feature__legacy .pod-context-dev-root {
  padding-top: 0 !important;
}

.v2-feature__legacy .api-dev-container,
.v2-feature__legacy .pod-context-dev-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.v2-feature__legacy [style*="#1d9bf0"],
.v2-feature__legacy [style*="#1976d2"],
.v2-feature__legacy [style*="#6366f1"],
.v2-feature__legacy [style*="rgb(29, 155, 240)"] {
  color: var(--v2-accent-text) !important;
  border-color: var(--v2-border-strong) !important;
}

.v2-feature__legacy [style*="background: linear-gradient"],
.v2-feature__legacy [style*="background-color: rgba(15, 23, 42"],
.v2-feature__legacy [style*="background-color: rgba(30, 41, 59"],
.v2-feature__legacy [style*="background-color: #0f172a"],
.v2-feature__legacy [style*="background-color: #0b1220"] {
  background: var(--v2-surface) !important;
  background-color: var(--v2-surface) !important;
  color: var(--v2-text-primary) !important;
}

.v2-feature__legacy [style*="background-color: rgb(245, 248, 250)"],
.v2-feature__legacy [style*="background-color: #f5f8fa"],
.v2-feature__legacy [style*="bgcolor: #f5f8fa"] {
  background-color: var(--v2-page-bg) !important;
}

.v2-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px;
  color: var(--v2-text-tertiary);
}

/* App boot has no content state to impersonate, so the minimal mark can own
   the moment. The dots use the exact typing keyframes; inline spinners retain
   their state-specific v2-spin affordance below. */
.v2-boot {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  background: var(--v2-page-bg);
}

.v2-boot__mark {
  width: 64px;
  height: 64px;
  color: var(--v2-accent);
  overflow: visible;
}

.v2-boot__mark-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: v2-typing-dot var(--motion-breath) infinite var(--motion-ease-breath);
}

.v2-boot__mark-dot:nth-of-type(2) {
  animation-delay: var(--motion-stagger);
}

.v2-boot__mark-dot:nth-of-type(3) {
  animation-delay: calc(var(--motion-stagger) + var(--motion-stagger));
}

.v2-empty__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--v2-text-primary);
}

.v2-empty__text {
  font-size: 13px;
  text-align: center;
  max-width: 360px;
}

.v2-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--v2-border);
  border-top-color: var(--v2-accent);
  border-radius: 50%;
  animation: v2-spin var(--motion-spin) var(--motion-ease-linear) infinite;
  display: inline-block;
}

@keyframes v2-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Misc utilities ---------- */

@media (max-width: 1023px) {
  .v2-root {
    min-width: 0;
  }

  .v2-shell:not(.v2-shell--feature-wide) {
    grid-template-columns: var(--v2-rail-w) var(--v2-pods-w) minmax(0, 1fr);
  }

}

@media (max-width: 760px) {
  /* Phones: the card fills the screen; the drawers keep the shell tint. Both
     selectors, or the banner variant keeps the desktop height. */
  .v2-pane--main,
  .v2-authenticated-shell .v2-pane--main {
    margin: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .v2-shell,
  .v2-shell--no-inspector,
  .v2-shell--feature {
    grid-template-columns: var(--v2-rail-w) minmax(0, 1fr);
  }

  /* D215 phone: a sheet on the bottom edge, 44px touch targets. */
  .v2-first-run__overlay {
    padding: 12px;
    place-items: end center;
  }

  .v2-first-run {
    max-height: calc(100dvh - 24px);
    padding: 20px 16px;
  }

  .v2-first-run__heading-row {
    flex-direction: column;
    gap: 8px;
  }

  .v2-first-run__title {
    font-size: 24px;
  }

  .v2-root button.v2-first-run__skip {
    align-self: flex-start;
    height: 44px;
    padding-left: 0;
  }

  .v2-root a.v2-first-run__setup,
  .v2-root button.v2-first-run__hello {
    height: 44px;
    font-size: 14px;
  }

  /* Hide secondary panes — but NOT the pods sidebar OR the inspector, which
     are both drawers now (pods slide-over below; inspector fixed-right in
     the 1023px block above). This :not chain out-specifies the drawer rules
     (0-4-0 vs 0-1-0), so an omission here is an invisible mounted pane: the
     inspector was exactly that on phones until 2026-08-26 — the header
     avatar button mounted it, this rule erased it. */
  .v2-pane:not(.v2-pane--rail):not(.v2-pane--main):not(.v2-pods-aside):not(.v2-pane--inspector) {
    display: none;
  }

  /* Pods sidebar → slide-over drawer. Off-canvas by default; .--open slides
     it in. Sits above the backdrop (z 60 vs 55). */
  .v2-pods-aside {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(86vw, 320px);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 2px 0 24px rgba(15, 17, 21, 0.18);
    border-right: 1px solid var(--v2-border-soft);
  }

  .v2-pods-aside--open {
    transform: translateX(0);
  }

  .v2-inspector-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    border: none;
    margin: 0;
    padding: 0;
    background: rgba(15, 17, 21, 0.42);
    cursor: pointer;
  }
}

/* ---------- Admin · Users (waitlist + invitation codes) ---------- */
.v2-admin-users {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1100px;
}

.v2-admin-users__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.v2-admin-users__section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.v2-admin-users__section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--v2-text-primary);
  margin: 0;
}

.v2-admin-users__section-sub {
  font-size: 13px;
  color: var(--v2-text-tertiary);
  margin: 2px 0 0 0;
}

.v2-admin-users__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.v2-admin-users__input {
  flex: 1 1 280px;
  min-width: 220px;
  padding: 9px 12px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  font-size: 14px;
  color: var(--v2-text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.v2-admin-users__input:focus {
  border-color: var(--v2-accent);
  box-shadow: var(--v2-focus-ring);
}

.v2-admin-users__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-pill);
  background: var(--v2-surface);
}

.v2-root button.v2-admin-users__tab {
  padding: 6px 14px;
  border: none;
  border-radius: var(--v2-radius-pill);
  background: transparent;
  color: var(--v2-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.v2-root button.v2-admin-users__tab:hover {
  color: var(--v2-text-primary);
}

.v2-root button.v2-admin-users__tab--active {
  background: var(--v2-accent-soft);
  color: var(--v2-accent-text);
}

.v2-admin-users__table-wrap {
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  overflow-x: auto;
  background: var(--v2-surface);
}

.v2-admin-users__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.v2-admin-users__table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--v2-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--v2-bg-subtle);
  border-bottom: 1px solid var(--v2-border);
  white-space: nowrap;
}

.v2-admin-users__table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--v2-border-soft);
  color: var(--v2-text-secondary);
  vertical-align: top;
}

.v2-admin-users__table tbody tr:last-child td {
  border-bottom: none;
}

.v2-admin-users__cell-strong {
  color: var(--v2-text-primary);
  font-weight: 600;
}

.v2-admin-users__cell-muted {
  color: var(--v2-text-tertiary);
  white-space: nowrap;
}

.v2-admin-users__cell-wrap {
  max-width: 260px;
}

.v2-admin-users__note {
  display: block;
  font-size: 12px;
  color: var(--v2-text-tertiary);
  margin-top: 2px;
}

.v2-admin-users__actions {
  white-space: nowrap;
  text-align: right;
}

.v2-admin-users__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--v2-radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.v2-admin-users__badge--ok {
  background: var(--v2-success-soft);
  color: #0f7a52;
}

.v2-admin-users__badge--warn {
  background: var(--v2-warning-soft);
  color: #9a5a12;
}

.v2-admin-users__badge--muted {
  background: var(--v2-surface-hover);
  color: var(--v2-text-tertiary);
}

.v2-root button.v2-admin-users__btn {
  padding: 8px 14px;
  border-radius: var(--v2-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.v2-root button.v2-admin-users__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.v2-root button.v2-admin-users__btn--primary {
  background: var(--v2-accent-fill);
  border-color: var(--v2-accent);
  color: var(--v2-on-accent);
}

.v2-root button.v2-admin-users__btn--primary:hover:not(:disabled) {
  background: var(--v2-accent-strong);
  border-color: var(--v2-accent-strong);
}

.v2-root button.v2-admin-users__btn--ghost {
  background: var(--v2-surface);
  border-color: var(--v2-border);
  color: var(--v2-text-secondary);
}

.v2-root button.v2-admin-users__btn--ghost:hover:not(:disabled) {
  background: var(--v2-surface-hover);
  border-color: var(--v2-border-strong);
  color: var(--v2-text-primary);
}

.v2-root button.v2-admin-users__btn--danger {
  background: var(--v2-surface);
  border-color: var(--v2-border);
  color: var(--v2-danger);
}

.v2-root button.v2-admin-users__btn--danger:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.v2-admin-users__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 4px;
  color: var(--v2-text-tertiary);
  font-size: 14px;
}

.v2-admin-users__error {
  padding: 10px 12px;
  border-radius: var(--v2-radius-sm);
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  font-size: 13px;
}

.v2-admin-users__notice-row td {
  padding-top: 0;
}

.v2-admin-users__notice {
  padding: 8px 12px;
  border-radius: var(--v2-radius-sm);
  background: var(--v2-warning-soft);
  border: 1px solid #f0c98a;
  color: #9a5a12;
  font-size: 12px;
}

.v2-admin-users__newcode {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--v2-accent-soft);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-accent-soft);
}

.v2-admin-users__newcode-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-accent-text);
  flex: 1 1 100%;
}

.v2-admin-users__newcode-value {
  font-family: var(--v2-font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--v2-text-primary);
  padding: 6px 12px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
}

.v2-admin-users__code {
  font-family: var(--v2-font-mono);
  font-size: 13px;
  color: var(--v2-text-primary);
}

.v2-root button.v2-admin-users__inline-copy {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--v2-radius-sm);
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  color: var(--v2-text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.v2-root button.v2-admin-users__inline-copy:hover {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

/* Registered-users moderation (V2AdminUsers users section). */
.v2-admin-users__search {
  height: 34px;
  padding: 0 12px;
  min-width: 240px;
  font-size: 13.5px;
  border: 1px solid var(--v2-border-soft);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
}
.v2-admin-users__badge--banned {
  background: #fdecea;
  color: #c0392b;
}
.v2-root button.v2-admin-users__btn--danger {
  color: #c0392b;
  border-color: #e5b4ae;
}
.v2-root button.v2-admin-users__btn--danger:hover:not(:disabled) {
  background: #fdecea;
}
.v2-admin-users__row-actions { display: flex; gap: 8px; }

/* Narrow screens: the team-card actions (Profile + Talk to) would otherwise
   squeeze the body column to zero width — the agent NAME disappeared at 390px
   (mobile smoke 2026-07-05, worsened by the added Profile button). Wrap the
   actions onto their own full-width row instead of competing with the name. */

/* Reply/Thread inline head buttons retired 2026-08-23 (taste ruling):
   the actions live in the .v2-msg__actions hover cluster now — one pill,
   all row variants, zero layout shift. See the cluster block near .v2-msg.
   Touch layouts keep ≥44px targets via the media block below. */
@media (hover: none), (pointer: coarse) {
  /* iOS Safari auto-zooms on focusing any input under 16px and does not
     zoom back on blur — the shell's inputs ranged 12–15px, so every tap on
     the composer or a search field left the page stuck zoomed (
     2026-08-26). 16px on touch devices removes the trigger entirely; this
     is the root fix, NOT the viewport maximum-scale hack, which blocks
     pinch-zoom on Android and is an accessibility regression. !important is
     deliberate: it must beat every per-component size including the legacy
     15px !important, and a device-scoped accessibility floor is the rare
     case that earns it. */
  .v2-root input,
  .v2-root textarea,
  .v2-root select {
    font-size: 16px !important;
  }

}

/* ============ Admin analytics (GH#662) ============ */
.v2-admin-analytics {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1100px;
}

.v2-admin-analytics__head-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.v2-root a.v2-admin-analytics__crosslink {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-accent-text);
}

.v2-admin-analytics__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.v2-admin-analytics__card {
  padding: 14px 16px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-surface);
}

.v2-admin-analytics__card-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--v2-text-primary);
  font-variant-numeric: tabular-nums;
}

.v2-admin-analytics__card-label {
  font-size: 12px;
  color: var(--v2-text-tertiary);
  margin-top: 2px;
}

.v2-admin-analytics__charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.v2-admin-analytics__chart-card {
  padding: 14px 16px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-surface);
  min-width: 0;
}

.v2-admin-analytics__chart-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--v2-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.v2-admin-analytics__chart {
  display: block;
  width: 100%;
  height: 120px;
}

.v2-admin-analytics__bar {
  fill: var(--v2-accent);
  opacity: 0.85;
}

.v2-admin-analytics__row--empty td {
  color: var(--v2-text-tertiary);
}

/* ── Threading: headline card + reply rail (W-T 4/4) ────────────────────────
   Built to @ux-lead's render brief. Numbers here are theirs, not invented:
   NOTE the `.v2-root button.` prefix on every button rule below. It keeps the
   card's interactive treatment explicit while the global reset remains a
   low-specificity default. This used to be a specificity workaround for a
   real-browser defect: computed colour was rgb(17,24,39) while the rule said
   #4b5563 — which no presence guard can see, because the rule IS present.

   card radius 10 / border #e5e7eb / hover #d7dce7 / no shadow; type 13px
   secondary with the count at 500; rail 2px #eef0f6 at 28px, replies +40px,
   dropping to 24px at 390; layout transition 300ms. */

/* Activity is a feature-wide read surface: short attention rows first, then
   evidence of agent work and board movement. Every grid child is min-width:0
   so a long pod or task title cannot create horizontal scroll at 390px. */
.v2-activity {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 8px 0 28px;
}

.v2-activity__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--v2-border-soft);
}

.v2-activity__title,
.v2-activity__section h2 {
  margin: 0;
  color: var(--v2-text-primary);
}

.v2-activity__title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700; /* 850 was tuned for SF Pro Display; Inter reads right at 700 */
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.v2-activity__controls,
.v2-activity__window {
  display: flex;
  align-items: center;
}

.v2-activity__controls {
  gap: 8px;
  flex-shrink: 0;
}

.v2-activity__window {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
}

.v2-root button.v2-activity__window-button {
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
  border-radius: calc(var(--v2-radius-sm) - 2px);
  color: var(--v2-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.v2-root button.v2-activity__window-button--active {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
  font-weight: 600;
  box-shadow: none;
}

.v2-activity__scope select {
  min-height: 36px;
  max-width: 180px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  font: inherit;
  font-size: 12px;
}

.v2-activity__loading,
.v2-activity__error,
.v2-activity__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  color: var(--v2-text-secondary);
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}

.v2-activity__error {
  margin-top: 20px;
  border-color: var(--v2-danger);
  background: var(--v2-danger-soft);
  color: var(--v2-text-primary);
}

.v2-activity__sections {
  display: grid;
  gap: 38px;
  margin-top: 30px;
}

/* Composer (ruled 2026-09-03 on the Shell Parity canvas, board 3): one
   card, radius-lg, the textarea borderless inside it, a small ink Send in the
   foot row. Focus is the halo on the CARD, not a harder border. */
.v2-activity__compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-surface);
  transition: box-shadow 120ms ease;
}

.v2-activity__compose:focus-within {
  box-shadow: 0 0 0 4px rgba(29, 63, 209, 0.10);
}

.v2-activity__compose-top,
.v2-activity__compose-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.v2-activity__compose-pod {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v2-text-muted);
  font-size: var(--v2-fs-meta);
  line-height: var(--v2-lh-meta);
}

.v2-activity__compose-picker {
  position: relative;
  min-width: 0;
}

.v2-root .v2-activity__compose-picker-button {
  height: 26px;
  min-height: 26px;
  max-width: 220px;
  overflow: hidden;
  padding: 0 24px 0 8px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  font: inherit;
  font-size: var(--v2-fs-meta);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-activity__compose-picker-menu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  min-width: 180px;
  max-width: min(280px, 70vw);
  padding: 4px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  box-shadow: var(--v2-shadow-md);
}

.v2-root .v2-activity__compose-picker-option {
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--v2-text-primary);
  text-align: left;
  font: inherit;
  font-size: var(--v2-fs-meta);
  font-weight: 500;
}

.v2-root .v2-activity__compose-picker-option:hover,
.v2-root .v2-activity__compose-picker-option.is-active {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

.v2-root .v2-activity__compose textarea {
  width: 100%;
  min-width: 0;
  resize: none;
  padding: 2px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--v2-text-primary);
  font: inherit;
  font-size: var(--v2-fs-body);
  line-height: var(--v2-lh-body);
}

/* Halo focus (TASK-122): the card carries the halo (focus-within above), so
   the textarea itself shows nothing; the destination picker carries its own
   ring. */
.v2-root .v2-activity__compose textarea:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

.v2-activity__compose-picker-button:focus-visible {
  outline: none;
  box-shadow: var(--v2-focus-ring);
  border-color: var(--v2-accent);
}

.v2-root .v2-activity__compose-picker-button:hover:not(:disabled) {
  border-color: var(--v2-border-strong);
  background: var(--v2-surface-hover);
}

.v2-activity__compose-hint {
  color: var(--v2-text-muted);
  font-size: var(--v2-fs-meta);
  line-height: var(--v2-lh-meta);
}

.v2-root .v2-activity__compose button {
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid var(--v2-ink);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-ink);
  color: var(--v2-on-ink);
  font-size: 13px;
  font-weight: 600;
}

.v2-root .v2-activity__compose button:hover:not(:disabled) {
  border-color: var(--v2-ink-hover);
  background: var(--v2-ink-hover);
}

/* The destination menu is a light, bounded list even though its options are
   buttons nested under the composer. Keep this selector stronger than the
   generic Send-button rule above so a large pod list cannot become a black,
   unbounded wall of buttons. */
.v2-root .v2-activity__compose .v2-activity__compose-picker-menu {
  max-height: 240px;
  overflow-y: auto;
}

.v2-root .v2-activity__compose .v2-activity__compose-picker-option {
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--v2-text-primary);
  text-align: left;
  font: inherit;
  font-size: var(--v2-fs-meta);
  font-weight: 500;
}

.v2-root .v2-activity__compose .v2-activity__compose-picker-option.is-active {
  border-color: transparent;
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

/* The generic composer hover rule includes :not(:disabled) and a button
   element, so it outranks the picker option's class-only hover selector.
   Match that specificity here to keep the light Signal option treatment in
   the real hovered and selected+hovered states without changing Send. */
.v2-root .v2-activity__compose .v2-activity__compose-picker-menu button.v2-activity__compose-picker-option:hover:not(:disabled) {
  border-color: transparent;
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

/* The generic composer button treatment above is for Send. The destination
   picker is a neutral selector and needs a stronger selector so it cannot
   inherit Send's ink fill. */
.v2-root .v2-activity__compose .v2-activity__compose-picker-button {
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
}

.v2-root .v2-activity__compose .v2-activity__compose-picker-button:hover:not(:disabled) {
  border-color: var(--v2-border-strong);
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

.v2-root .v2-activity__compose .v2-activity__compose-picker-button:focus-visible {
  outline: none;
  box-shadow: var(--v2-focus-ring);
  border-color: var(--v2-accent);
}

.v2-activity__section-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.v2-activity__count {
  color: var(--v2-text-secondary);
  font: 500 11px/16px var(--v2-font-mono);
}

.v2-activity__section h2 {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Needs-you rows: no box, no dividers (TASK-122). Each
   row carries a permanent transparent 1px border and changes only its fill on
   hover, so nothing shifts by a pixel. Board rows keep their box until Phase B. */
.v2-activity__queue {
  display: grid;
  gap: 2px;
}

.v2-activity__queue-more {
  justify-self: start;
  min-height: 36px;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px solid var(--v2-accent);
  border-radius: var(--v2-radius-sm);
  background: transparent;
  color: var(--v2-accent-text);
  font: 600 12px/16px var(--v2-font);
}

.v2-activity__queue-more:hover:not(:disabled) {
  background: var(--v2-accent-soft);
}

.v2-activity__queue-more:disabled {
  opacity: 0.65;
  cursor: default;
}

.v2-activity__queue-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  background: var(--v2-surface);
  transition: background 80ms ease;
}

.v2-activity__queue-row:hover {
  background: var(--v2-surface);
}

/* Decision elevation: a pending decision or approval sits one step above the
   settled rows — the one shadow allowed on a chrome card, and only while
   pending. Hover does not move it; it is already up. */
.v2-activity__queue-row--decision,
.v2-activity__queue-row--approval {
  background: var(--v2-surface);
  border-color: var(--v2-border);
  border-radius: var(--v2-radius);
  box-shadow: none;
}

.v2-activity__queue-row--decision:hover,
.v2-activity__queue-row--approval:hover {
  background: var(--v2-surface);
}

/* A ruled decision has settled: it drops back to the flat row. */
.v2-activity__queue-row--settled {
  background: transparent;
  border: 1px solid var(--v2-border);
  padding: 12px 14px;
  box-shadow: none;
}

.v2-activity__queue-row--settled:hover {
  background: var(--v2-surface-hover);
}

.v2-activity__queue-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--v2-radius-sm);
  background: var(--v2-accent-soft);
  color: var(--v2-accent-text);
  font-size: 12px;
  font-weight: 700;
}
.v2-activity__queue-row--decision .v2-activity__queue-mark {
  background: var(--v2-ink);
  color: var(--v2-on-ink);
}

.v2-activity__queue-row--approval .v2-activity__queue-mark {
  background: var(--v2-warning-soft);
  color: #a85d08;
}

.v2-activity__queue-row--onboarding .v2-activity__queue-mark {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

/* One seat, one mark everywhere: the chat's cobalt agent mark and tint human mark. */
.v2-activity__queue-row .v2-activity__queue-mark--agent {
  background: var(--v2-accent);
  color: var(--v2-on-ink);
  font: 600 12px/16px var(--v2-font);
}

.v2-activity__queue-row .v2-activity__queue-mark--human {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
  font: 600 12px/16px var(--v2-font);
}

.v2-activity__queue-copy {
  min-width: 0;
}

.v2-activity__queue-kind,
.v2-activity__queue-copy > span,
.v2-activity__queue-topline > span {
  color: var(--v2-text-muted);
  font-size: var(--v2-fs-meta);
  line-height: var(--v2-lh-meta);
}

.v2-activity__queue-copy strong,
.v2-activity__queue-copy p {
  overflow-wrap: anywhere;
}

.v2-activity__queue-kind {
  font: 500 11px/16px var(--v2-font-mono);
  color: var(--v2-text-secondary);
}

.v2-activity__queue-copy strong {
  display: block;
  margin-top: 2px;
  color: var(--v2-text-primary);
  font-size: var(--v2-fs-body);
  line-height: var(--v2-lh-body);
}

.v2-activity__queue-copy p {
  margin: 3px 0;
  color: var(--v2-text-secondary);
  font-size: var(--v2-fs-body);
  line-height: var(--v2-lh-body);
}

/* Activity details stay compact until the reader hovers, focuses, or taps to
   expand them. The button keeps the full copy available without adding a
   permanent paragraph to every queue row. */
.v2-root .v2-activity__queue-detail {
  display: -webkit-box;
  min-height: 0;
  max-width: 100%;
  margin: 3px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--v2-text-secondary);
  font: 400 var(--v2-fs-body)/var(--v2-lh-body) var(--v2-font);
  text-align: left;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.v2-root button.v2-activity__queue-detail {
  color: var(--v2-text-secondary);
}

.v2-root .v2-activity__queue-row--mention .v2-activity__queue-detail {
  color: var(--v2-text-primary);
}

/* Focus previews the full copy (Tab in), but a detail the reader just
   collapsed is marked --dismissed and stays closed while focus remains on it,
   so aria-expanded and the visible copy agree. Blur clears the mark. */
.v2-root .v2-activity__queue-detail:focus-visible:not(.v2-activity__queue-detail--dismissed),
.v2-root .v2-activity__queue-detail--expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* Pointer hover is only a reveal affordance on devices that have hover. A
   focused button is intentionally excluded: after a pointer click the focus
   must not keep a second click from collapsing the detail again. */
@media (hover: hover) {
  .v2-root .v2-activity__queue-detail:hover:not(:focus) {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
}

.v2-activity__queue-actions,
.v2-activity__queue-row button {
  display: flex;
  align-items: center;
  gap: 6px;
}

.v2-activity__queue-row button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  color: var(--v2-text-primary);
  font-size: 13px;
  font-weight: 600;
}

.v2-root .v2-activity__queue-actions button {
  min-height: 32px;
  padding: 0 12px;
  white-space: nowrap;
  border-color: var(--v2-ink);
  background: var(--v2-ink);
  color: var(--v2-on-ink);
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
}

.v2-root .v2-activity__queue-actions button:hover:not(:disabled) {
  border-color: var(--v2-ink-hover);
  background: var(--v2-ink-hover);
}

.v2-root .v2-activity__queue-actions button.v2-activity__queue-action--secondary {
  border-color: var(--v2-border);
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

.v2-root .v2-activity__queue-actions button.v2-activity__queue-action--secondary:hover:not(:disabled) {
  border-color: var(--v2-border-strong);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
}

.v2-root .v2-activity__queue-actions button.v2-activity__queue-action--thread {
  padding-inline: 4px;
  border-color: transparent;
  background: transparent;
  color: var(--v2-accent-text);
}

.v2-root .v2-activity__queue-actions button.v2-activity__queue-action--thread:hover:not(:disabled) {
  border-color: transparent;
  background: var(--v2-accent-soft);
  color: var(--v2-accent-text);
}

/* Activity's navigation and acknowledgement controls are secondary actions:
   keep them visibly distinct from the ink send/approve actions while making
   their hit targets as clear as the approved board. */
.v2-root .v2-activity__queue-actions button.v2-activity__queue-action--bordered {
  padding-inline: 12px;
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
}

.v2-root .v2-activity__queue-actions button.v2-activity__queue-action--bordered:hover:not(:disabled) {
  border: 1px solid var(--v2-border-strong);
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}

/* DecisionRequest alternatives are content, not row actions: a decision gets
   its own full-width action line below the question. Preserve the asking
   agent's option order; only the first authored option receives the cobalt
   primary treatment. */
.v2-activity__queue-row--decision .v2-activity__queue-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Mention rows (canvas board 3): the reply line sits UNDER the message,
   indented past the mark, never squeezed beside it. The mark already says
   "@", so the kind label is redundant and hidden. */
.v2-activity__queue-row--mention {
  align-items: start;
}
.v2-activity__queue-topline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.v2-activity__queue-topline strong {
  margin-top: 0;
  font-weight: 600;
}
.v2-activity__queue-row--mention .v2-activity__queue-copy p {
  color: var(--v2-text-primary);
}
.v2-activity__queue-row--mention .v2-activity__queue-actions {
  grid-column: 2 / -1;
  align-items: center;
  margin-top: 4px;
}
.v2-root .v2-activity__queue-actions button:disabled {
  opacity: 0.7;
  cursor: default;
}

.v2-root .v2-activity__queue-actions button.v2-activity__option {
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
}

.v2-root .v2-activity__queue-actions button.v2-activity__option--primary {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: var(--v2-on-ink);
}

.v2-root .v2-activity__queue-actions button.v2-activity__option--primary:hover:not(:disabled) {
  border-color: var(--v2-accent-strong);
  background: var(--v2-accent-strong);
  color: var(--v2-on-ink);
}

.v2-root .v2-activity__queue-actions button.v2-activity__option.v2-activity__queue-action--secondary {
  border: 0;
  background: transparent;
  color: var(--v2-accent-text);
}

.v2-activity__option-choice {
  display: grid;
  flex: 0 1 220px;
  min-width: 0;
  gap: 4px;
}

.v2-activity__option-choice button {
  width: 100%;
  justify-content: center;
}

.v2-activity__option-description {
  color: var(--v2-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.v2-activity__option-recommended,
.v2-decision-card__option-recommended {
  font: 500 11px/14px var(--v2-font-mono);
  opacity: 0.9;
}

.v2-activity__decision-other {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  flex-basis: 100%;
  gap: 8px;
  align-items: end;
}

.v2-activity__decision-other textarea {
  width: 100%;
  min-height: 44px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  font-size: 13px;
  line-height: 1.4;
}

.v2-activity__decision-ruled {
  color: var(--v2-text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.v2-activity__action-error {
  margin-top: 10px;
  color: var(--v2-danger);
  font-size: 13px;
}

.v2-root .v2-activity__row-action-error {
  grid-column: 1 / -1;
  color: var(--v2-ink);
}

.v2-activity__queue-row button:disabled {
  cursor: default;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .v2-activity { padding-top: 0; }

  .v2-activity__header,
  .v2-activity__section-heading {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .v2-activity__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    width: 100%;
  }
  .v2-activity__window { width: 100%; }
  .v2-root button.v2-activity__window-button { flex: 1 1 0; }
  .v2-activity__scope select { width: 100%; max-width: none; }
  .v2-activity__compose-top { align-items: flex-start; flex-direction: column; gap: 8px; }
  .v2-activity__compose-pod { width: 100%; }
  .v2-activity__compose-pod > span { white-space: nowrap; }
  .v2-activity__compose-picker { flex: 1 1 auto; min-width: 0; width: 100%; }
  .v2-root .v2-activity__compose-picker-button { width: 100%; max-width: none; text-align: left; }
  .v2-root .v2-activity__compose button { min-height: 44px; padding: 0 18px; }
  /* The picker option rule is more specific than the generic composer
     button floor above; repeat the menu scope so every option keeps a 44px
     touch target on phones. */
  .v2-root .v2-activity__compose .v2-activity__compose-picker-menu .v2-activity__compose-picker-option { min-height: 44px; }
  .v2-activity__section-heading { flex-wrap: wrap; }

  .v2-activity__queue-row { grid-template-columns: 28px minmax(0, 1fr); }

  .v2-activity__queue-row > button,
  .v2-activity__queue-actions { grid-column: 2; }

  .v2-activity__queue-actions { flex-wrap: wrap; }
  /* Options are one-tap decisions. Keep their touch targets honest even
     when a 390px viewport makes the pills wrap onto separate rows. */
  .v2-root .v2-activity__queue-actions button { min-height: 44px; }
  .v2-activity__option-choice { flex-basis: min(100%, 220px); }
  .v2-activity__decision-other { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
 * zh-CN: no negative tracking on CJK (TASK-055, rule class 1).
 * The 12 title selectors above tighten Latin display type with negative
 * letter-spacing. CJK glyphs are full-width squares with no side bearings to
 * reclaim, so the same value only crushes strokes together. Measured in the
 * real browser (.dev/task-055-zh-harness.html): .v2-chat__title -0.5px,
 * .v2-pods__title -0.32px, .v2-inspector__now-title -0.15px on Chinese text.
 * `html[lang]` is set by frontend/src/i18n/index.ts, so :lang(zh) matches
 * zh-CN. Guarded by v2-layout-invariants.test.ts.
 * ------------------------------------------------------------------------ */
.v2-root:lang(zh) .v2-rail__brand,
.v2-root:lang(zh) .v2-tools__count strong,
.v2-root:lang(zh) .v2-artifacts__title,
.v2-root:lang(zh) .v2-pods__page-title,
.v2-root:lang(zh) .v2-first-run__title,
.v2-root:lang(zh) .v2-login__title,
.v2-root:lang(zh) .v2-login__brand,
.v2-root:lang(zh) .v2-feature__title,
.v2-root:lang(zh) .v2-feature__header .v2-feature__title,
.v2-root:lang(zh) .v2-agent-settings > .v2-page-head h1,
.v2-root:lang(zh) .v2-agent-settings > .v2-agent-memory__head .v2-agent-memory__ident h1,
.v2-root:lang(zh) .v2-connector-row__name,
.v2-root:lang(zh) .v2-connector-aside__card h2,
.v2-root:lang(zh) .v2-feature__legacy .MuiTypography-h1,
.v2-root:lang(zh) .v2-feature__legacy .MuiTypography-h2,
.v2-root:lang(zh) .v2-feature__legacy .MuiTypography-h3,
.v2-root:lang(zh) .v2-feature__legacy .MuiTypography-h4,
.v2-root:lang(zh) .v2-feature__legacy .MuiTypography-h5,
.v2-root:lang(zh) .v2-feature__legacy .MuiTypography-h6,
.v2-root:lang(zh) .v2-activity__title,
.v2-root:lang(zh) .v2-activity__section h2,
.v2-root:lang(zh) .v2-empty--room .v2-empty__title {
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
 * zh-CN: mono labels drop `text-transform: lowercase` (TASK-164, rule class 3).
 * `.v2-connector-gates__title` and `.v2-tools__field > span:first-child` set
 * lowercase for Latin kickers. The zh copy for both is CJK plus one Latin
 * token — `Pod`, the product noun, which is never a synonym —
 * and CSS lowercases it to `pod`, so a label contradicts the sentence beside
 * it. Case is not a property of CJK; the reset exists only for the Latin token
 * the copy carries. Guarded by v2-layout-invariants.test.ts.
 * ------------------------------------------------------------------------ */
.v2-root:lang(zh) .v2-connector-gates__title,
.v2-root:lang(zh) .v2-tools__field > span:first-child,
.v2-root:lang(zh) .v2-tools__field > legend {
  text-transform: none;
}

/* ---------------------------------------------------------------------------
 * zh-CN: CJK body line-height 1.6 and a 12px floor (TASK-055, rule class 2).
 * Latin body copy sits at 1.45–1.55 here; CJK glyphs fill the em box, so the
 * same leading leaves no white between lines. Measured in the real browser
 * (.dev/task-055-zh-harness.html): .v2-msg__content 21.7px/14px = 1.55,
 * .v2-chat__composer-hint 1.45, .v2-inspector__pod-meta 1.45, and the
 * composer hint (11px) / inspector tab (11.5px) render CJK below the 12px
 * legibility floor. Single-line nowrap+ellipsis rows are not touched — their
 * height is not text-driven. Guarded by v2-layout-invariants.test.ts.
 * ------------------------------------------------------------------------ */
.v2-root:lang(zh) .v2-first-run__lede,
.v2-root:lang(zh) .v2-first-run__step-body,
.v2-root:lang(zh) .v2-activity__queue-copy p,
.v2-root:lang(zh) .v2-activity__queue-detail,
.v2-root:lang(zh) .v2-activity__empty,
.v2-root:lang(zh) .v2-modal__hint,
.v2-root:lang(zh) .v2-invite__description,
.v2-root:lang(zh) .v2-login__field-hint {
  line-height: 1.6;
}

/* ── Connectors: the page itself is connectors.css; what is left here is the
   panels the drawer holds (rows, asides, gates). ──────────────────────────── */
.v2-connectors__loading { color: var(--v2-text-tertiary); font-family: var(--v2-font-mono); font-size: 12px; }

.v2-connector-row {
  display: grid;
  /* Keep columns aligned while giving details the only flexible track. The
     old fixed 200px + 200px + 120px tracks left details ~20px wide at 1184px,
     while a flexible action track let each row drift and clipped its label. */
  /* Direction A (2026-09-19): the age column is gone — it rides the mono kicker
     above line 1 — so the row is name · details · one act. */
  grid-template-columns: 140px minmax(150px, 1fr) 120px;
  /* TASK-162 (2): the channel name and its details met at 0px — the 140px name
     track ends exactly where the details track begins, so a name that fills its
     track touches the sentence. A 12px gutter on BOTH row grids (here and the
     selection button's inner grid below) keeps the two columns apart. */
  column-gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--v2-border-soft);
  background: var(--v2-surface);
}
.v2-connector-row:last-child { border-bottom: none; }
.v2-connector-row--selected { background: var(--v2-surface-tint); }
.v2-root button.v2-connector-row__selection {
  display: grid;
  grid-column: 1 / 3;
  grid-template-columns: 140px minmax(150px, 1fr);
  column-gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.v2-connector-row__name { display: inline-flex; align-items: center; gap: 10px; color: var(--v2-ink); font-family: var(--v2-font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.v2-connector-row__dot { width: 8px; height: 8px; flex: none; border-radius: var(--v2-radius-sm); background: var(--v2-border-soft); }
.v2-connector-row__glyph { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; color: inherit; }
.v2-connector-row__glyph svg { width: 20px; height: 20px; }
/* Direction A: the state dot is a mark — ink filled, hollow, dashed, grey — never
   cobalt (cobalt is who asks) and never a status colour (ux-lead 70159). */
.v2-connector-row__dot--live { background: var(--v2-ink); }
.v2-connector-row--dead .v2-connector-row__dot { background: var(--v2-text-placeholder); }
.v2-connector-row__dot--empty { border: 1px solid var(--v2-border-strong); background: transparent; }
.v2-connector-row__dot--pulse { animation: v2-connector-pulse 1.6s ease-in-out infinite; }
@keyframes v2-connector-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 24, 40, 0); }
  50% { box-shadow: 0 0 0 5px rgba(16, 24, 40, 0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-connector-row__dot--pulse { animation: none; }
}
.v2-connector-row__details { display: flex; min-width: 0; padding-right: 8px; flex-direction: column; gap: 2px; color: var(--v2-text-secondary); font-size: 13px; line-height: 18px; }
/* Line 1 wraps like meta does; a sentence never ellipsises at 390. */
.v2-connector-row__details strong { color: var(--v2-ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.v2-connector-row__detail { color: var(--v2-text-tertiary); font-family: var(--v2-font-mono); font-size: 12px; line-height: 16px; }
/* Meta wraps to a second line; it never ellipsises. */
.v2-connector-row__detail { overflow-wrap: anywhere; }
/* Direction A rule 3: `pod · verb age` in mono 11 above line 1, on every row. */
.v2-connector-row__kicker { color: var(--v2-text-tertiary); font-family: var(--v2-font-mono); font-size: 11px; font-weight: 500; line-height: 16px; text-transform: lowercase; overflow-wrap: anywhere; }
/* The mode word rides the kicker only where the glyph's tooltip cannot (≤760). */
.v2-connector-row__kicker-mode { display: none; }
/* Direction A rule 1 (as revised by TASK-162): a category on the row is a mark,
   the sentence in title + aria-label — and the mark shares the Tools glyph's rule
   (search `.v2-connector-row__mark, .v2-tools__mode`) for layout and colour. That
   sharing does NOT carry the size: the two agree at 14px through two independent
   literals in two files, so a same-size pin in ConnectorsPage.tools.test.tsx is what
   keeps them from drifting (TASK-177). */
.v2-root button.v2-connector-row__action,
.v2-root a.v2-connector-row__action {
  justify-self: end;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--v2-ink);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-ink);
  color: var(--v2-on-ink);
  font: 600 13px/18px var(--v2-font);
  text-decoration: none;
  cursor: pointer;
}
/* TASK-162 (1): a hovered secondary action turned INK behind an ink glyph —
   `.v2-root button....__action:hover:not(:disabled)` (0,4,1) outranks the
   `--secondary:hover` tint (0,3,1), so the gear read as a solid black square
   with an invisible glyph. Excluding secondary from the ink rule fixes it
   WITHOUT relying on source order: raising the tint's specificity would work
   only until someone moves a rule, and the `.v2-root` prefix that every
   selector here carries makes order-fragile fixes easy to write by accident. */
.v2-root button.v2-connector-row__action:hover:not(:disabled):not(.v2-connector-row__action--secondary),
.v2-root a.v2-connector-row__action:hover:not(.v2-connector-row__action--secondary) { background: var(--v2-ink-hover); }
.v2-root button.v2-connector-row__action:disabled { cursor: progress; opacity: 0.65; }
.v2-root button.v2-connector-row__action--secondary,
.v2-root a.v2-connector-row__action--secondary { border-color: var(--v2-border); background: var(--v2-surface); color: var(--v2-ink); }
.v2-root button.v2-connector-row__action--secondary:hover,
.v2-root a.v2-connector-row__action--secondary:hover { background: var(--v2-surface-tint); }
/* Direction A rule 2: a housekeeping act (Manage) is a 32px square glyph button;
   the word lives in title + aria-label. 44px under 760 for the thumb. */
.v2-root button.v2-connector-row__action--icon { display: inline-grid; place-items: center; width: 32px; min-height: 32px; padding: 0; }
.v2-root button.v2-connector-row__action--icon svg { width: 16px; height: 16px; }
/* TASK-140: the Revoke ✕ is a SQUARE. It carries `--secondary` too, whose
   `min-height: 36px` (below) applies at lower specificity, and min-height beats
   height — so setting `height: 32px` alone measured 32×36 (ux-lead's gate on
   #1799, computed style). The composed selector must therefore override the
   MINIMUM, not just the height. Keep both: the height is the intent, the
   min-height is what actually releases the 36px clamp. */
.v2-root button.v2-connector-aside__secondary.v2-connector-aside__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; }
.v2-root button.v2-connector-aside__icon svg { width: 16px; height: 16px; }
.v2-root button.v2-connectors__create,
.v2-root button.v2-connector-aside__primary {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--v2-ink);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-ink);
  color: var(--v2-on-ink);
  font: 600 13px/18px var(--v2-font);
  cursor: pointer;
}
.v2-root button.v2-connectors__create:hover:not(:disabled),
.v2-root button.v2-connector-aside__primary:hover:not(:disabled) { background: var(--v2-ink-hover); }
.v2-root button.v2-connectors__create:disabled,
.v2-root button.v2-connector-aside__primary:disabled { cursor: progress; opacity: 0.65; }
.v2-connectors__new-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto; gap: 10px; margin-top: 16px; }
.v2-connectors__new-row--aside { grid-template-columns: minmax(0, 1fr) auto; }
.v2-connectors__new-row--aside .v2-connectors__select { grid-column: 1 / -1; }
.v2-connectors__empty-pods { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-connectors__empty-pods p { margin: 0; color: var(--v2-text-secondary); font-size: 13px; line-height: 18px; }
.v2-connectors__empty-pods > .v2-connectors__create { flex: 0 0 auto; }
.v2-connectors__providers { display: inline-flex; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); }
.v2-root button.v2-connectors__provider { min-height: 38px; padding: 7px 12px; border: none; border-right: 1px solid var(--v2-border); background: var(--v2-surface); color: var(--v2-text-secondary); font: 600 13px/18px var(--v2-font); cursor: pointer; }
.v2-root button.v2-connectors__provider:last-child { border-right: none; }
.v2-root button.v2-connectors__provider--selected { background: var(--v2-surface-tint); color: var(--v2-ink); }
.v2-connectors__select { min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface); color: var(--v2-ink); font: 500 13px var(--v2-font); }

.v2-connectors__aside { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.v2-connector-aside__step, .v2-connector-aside__card { padding: 18px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-md); background: var(--v2-panel, var(--v2-bg-subtle)); }
.v2-connector-aside__step p, .v2-connector-aside__card p { margin: 0; color: var(--v2-text-secondary); font-size: 13px; line-height: 20px; }
.v2-connector-aside__eyebrow { margin-bottom: 8px !important; color: var(--v2-accent-text) !important; font-family: var(--v2-font-mono); font-size: 11px !important; font-weight: 500; text-transform: lowercase; }
.v2-connector-aside__card h2 { margin: 0 0 8px; color: var(--v2-ink); font-family: var(--v2-font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.v2-connector-aside__actions, .v2-connector-aside__controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.v2-root button.v2-connector-aside__secondary {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  color: var(--v2-ink);
  font: 600 13px/18px var(--v2-font);
  cursor: pointer;
}
.v2-root button.v2-connector-aside__secondary:hover { background: var(--v2-surface-tint); }
.v2-connector-aside__card > .v2-connector-aside__secondary,
.v2-connector-aside__card > .v2-connector-aside__primary { margin-top: 18px; }
.v2-connector-aside__relay { display: inline-flex; align-items: center; gap: 7px; color: var(--v2-text-secondary); font-size: 13px; cursor: pointer; }
.v2-connector-aside__relay input { accent-color: var(--v2-ink); }
.v2-connector-aside__mode { display: inline-flex; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); }
.v2-root button.v2-connector-aside__mode-opt { min-height: 30px; padding: 4px 10px; border: none; border-right: 1px solid var(--v2-border); background: var(--v2-surface); color: var(--v2-text-secondary); font: 600 12px/16px var(--v2-font); cursor: pointer; }
.v2-root button.v2-connector-aside__mode-opt:last-child { border-right: none; }
.v2-root button.v2-connector-aside__mode-opt--on { background: var(--v2-surface-tint); color: var(--v2-ink); cursor: default; }
.v2-connector-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 14px; padding: 12px; border-radius: var(--v2-radius-sm); background: var(--v2-ink); }
.v2-connector-code code { overflow-wrap: anywhere; color: var(--v2-on-ink); font-family: var(--v2-font-mono); font-size: 14px; line-height: 20px; }
.v2-root button.v2-connector-code__copy { min-height: 30px; padding: 5px 9px; border: 1px solid var(--v2-accent); border-radius: var(--v2-radius-sm); background: var(--v2-accent); color: var(--v2-on-ink); font: 600 12px/16px var(--v2-font); cursor: pointer; }
.v2-connector-row__refusal { grid-column: 1 / -1; margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface-tint); color: var(--v2-ink); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.v2-connector-row__refusal a,
.v2-connector-aside__refusal a { color: var(--v2-accent-text); text-decoration: underline; }

.v2-connector-aside__note { margin-top: 12px !important; color: var(--v2-text-tertiary) !important; font-size: 12px !important; }
/* A hosted connection's name beside its own Disconnect: the note's type, centred on the button. */
.v2-connector-aside__conn { color: var(--v2-text-tertiary); font-size: 12px; }
/* Row C: the refusal the row's own button earned, beside that button in the
   aside (and on the row itself) — same bordered grammar as the page slot. */
.v2-connector-aside__refusal { margin-top: 10px !important; padding: 8px 10px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface-tint); color: var(--v2-ink); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
/* D4 gate list: one row per pod the user is in. The switch is the gate
   (pod → me); the active tag marks where typed messages land (me → pod). */
.v2-connector-gates { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--v2-border-soft); }
.v2-connector-gates__title { margin: 0 0 6px !important; color: var(--v2-text-tertiary) !important; font-family: var(--v2-font-mono); font-size: 11px !important; line-height: 16px !important; text-transform: lowercase; }
.v2-connector-gates__empty { color: var(--v2-text-tertiary) !important; font-size: 12px !important; }
.v2-connector-gate { border-bottom: 1px solid var(--v2-border-soft); }
.v2-connector-gate:last-child { border-bottom: none; }
.v2-connector-gate__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 36px; }
.v2-root button.v2-connector-gate__name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; border: none; background: transparent; color: var(--v2-ink); font: 500 13px/18px var(--v2-font); text-align: left; cursor: pointer; }
.v2-connector-gate__mark { width: 4px; height: 4px; flex: none; background: var(--v2-ink); }
/* A long pod name wraps under the mark; it never ellipsises. */
.v2-connector-gate__pod { min-width: 0; overflow-wrap: anywhere; }
.v2-connector-gate__tag { flex: none; color: var(--v2-ink); font-family: var(--v2-font-mono); font-size: 11px; line-height: 16px; }
.v2-connector-gate__since { color: var(--v2-text-tertiary); font-family: var(--v2-font-mono); font-size: 11px; line-height: 16px; white-space: nowrap; }
.v2-connector-gate__since--off { color: var(--v2-text-placeholder); }
/* The gate switch is the system's checkbox — the bordered square the Relay
   line already uses, ink when on. No pill: the system has hard edges only. */
.v2-connector-gate__switch { width: 16px; height: 16px; margin: 0; accent-color: var(--v2-ink); cursor: pointer; }
.v2-connector-gate__switch:disabled { cursor: progress; opacity: 0.65; }
.v2-connector-gate__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0 12px 12px; }
.v2-connector-gate__lead { min-height: 30px; padding: 0 8px; font-size: 12px; }
.v2-tools__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 14px 0 0; }
.v2-tools__facts dt { margin-top: 8px; color: var(--v2-text-tertiary); font-family: var(--v2-font-mono); font-size: 11px; line-height: 16px; text-transform: lowercase; }
.v2-tools__facts dt:first-child { margin-top: 0; }
.v2-tools__facts dd { margin: 0; min-width: 0; color: var(--v2-ink); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
/* A tool name is one token: the chip never breaks inside it, it wraps to the next line whole. */
.v2-tools__facts dd code { display: inline-block; margin: 0 6px 4px 0; padding: 1px 6px; border: 1px solid var(--v2-border-soft); border-radius: var(--v2-radius-sm); font-family: var(--v2-font-mono); font-size: 12px; overflow-wrap: normal; white-space: nowrap; }
.v2-tools__counts { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 12px; }
.v2-tools__count { display: flex; flex-direction: column; gap: 2px; }
.v2-tools__count strong { color: var(--v2-ink); font-family: var(--v2-font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 26px; }
.v2-tools__count span { color: var(--v2-text-tertiary); font-family: var(--v2-font-mono); font-size: 11px; line-height: 16px; text-transform: lowercase; }
.v2-tools__trail { margin: 0; padding: 0; list-style: none; }
.v2-tools__trail-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--v2-border-soft); color: var(--v2-text-muted); font-family: var(--v2-font-mono); font-size: 12px; line-height: 16px; }
.v2-tools__trail-line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.v2-tools__trail-when { flex: none; }
.v2-tools__mode,
.v2-tools__outcome { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: -2px; color: var(--v2-text-tertiary); }
.v2-tools__form { display: grid; gap: 14px; margin-top: 14px; }
.v2-tools__field { display: grid; gap: 6px; margin: 0; padding: 0; border: none; min-width: 0; }
.v2-tools__field > span:first-child, .v2-tools__field > legend { color: var(--v2-text-tertiary); font-family: var(--v2-font-mono); font-size: 11px; line-height: 16px; text-transform: lowercase; padding: 0; }
.v2-tools__input { min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface); color: var(--v2-ink); font: 500 13px var(--v2-font); }
.v2-tools__input:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 0; }
.v2-tools__agents { display: grid; gap: 6px; }
.v2-tools__hint { color: var(--v2-text-secondary); font-size: 12px; line-height: 18px; }
.v2-tools__hint code { display: inline-block; margin: 0 6px 4px 0; padding: 1px 6px; border: 1px solid var(--v2-border-soft); border-radius: var(--v2-radius-sm); font-family: var(--v2-font-mono); font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) {
  .v2-connector-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: 14px 12px; }
  .v2-root button.v2-connector-row__selection { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .v2-root button.v2-connector-row__selection .v2-connector-row__name { grid-column: 1; grid-row: 1; }
  .v2-root button.v2-connector-row__selection .v2-connector-row__details { grid-column: 1 / -1; grid-row: 2; }
  /* A phone keeps the row's REASON. This used to be a blanket hide with
     enumerated exceptions (`:not(.v2-connector-row--dead):not(.v2-connector-row--not-enabled)`),
     which silently swallowed every state the list had not anticipated: the
     not-yet row that IS available (ToolPanels.tsx) lost
     "install the GitHub App first" / "read, or read and write", and a stranger
     saw a "not granted" kicker with no reason under it (eng lead 73726).
     Default is now SHOW; if one row ever needs its detail hidden on phones, hide
     that named case here rather than re-introducing an exception list. */
  .v2-root button.v2-connector-row__action, .v2-root a.v2-connector-row__action { grid-column: 2; grid-row: 1; z-index: 1; }
  /* Direction A at 390 (after the rule above so it wins): no tooltips, so the mode
     word rides the kicker; the gear is 44px in row 1 beside the name; a row's word
     act is full width under the sentence; rows keep one height. */
  .v2-connector-row { min-height: 72px; }
  .v2-root button.v2-connector-row__selection { grid-row: 1; }
  .v2-connector-row__kicker-mode { display: inline; }
  .v2-root button.v2-connector-row__action--icon { width: 44px; min-height: 44px; grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  .v2-root button.v2-connector-row__action:not(.v2-connector-row__action--icon), .v2-root a.v2-connector-row__action { display: inline-flex; grid-column: 1 / -1; grid-row: 3; width: 100%; justify-content: center; min-height: 44px; margin-top: 8px; }
  /* The gear sits over the selection button's top-right; keep the kicker out from under it. */
  .v2-connector-row:has(.v2-connector-row__action--icon) .v2-root button.v2-connector-row__selection,
  .v2-root .v2-connector-row:has(.v2-connector-row__action--icon) button.v2-connector-row__selection { padding-right: 52px; }
  .v2-root button.v2-connector-aside__secondary.v2-connector-aside__icon { width: 44px; height: 44px; min-height: 44px; }
  .v2-connectors__new-row { grid-template-columns: minmax(0, 1fr); }
  .v2-connectors__providers { width: fit-content; }
  .v2-connector-gate__more { padding-left: 0; }
}

/* Activity queue: reply-in-place on mention rows (2026-09-01). The
   textarea shares the row's action cluster; on narrow screens it takes the
   full width of the row so the thumb has something to hit. */
.v2-activity__reply {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 260px;
  min-width: 0;
}
.v2-root .v2-activity__reply button {
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 32px;
  padding: 0 12px;
  white-space: nowrap;
}
.v2-root textarea.v2-activity__reply-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 6px 10px;
  resize: none;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
}
.v2-root textarea.v2-activity__reply-input:focus-visible {
  border-color: var(--v2-accent); /* the global halo carries the ring; no hard outline */
}
@media (max-width: 640px) {
  .v2-activity__reply { flex-basis: 100%; }
  .v2-root .v2-activity__reply button { min-height: 44px; }
}

/* ---------- Workspace sidebar (TASK-129 PR 1) ----------
   The workspace artboard is a ground-colour grid, not three inset cards.
   These rules intentionally follow the retired sidebar rules above while the
   chat and inspector receive their own structural passes in PRs 2 and 3. */

.v2-shell {
  gap: 14px;
  padding: 14px;
  box-sizing: border-box;
}

.v2-shell .v2-pane {
  height: 100%;
  min-height: 0;
}

.v2-shell .v2-pane--main {
  margin: 0;
  height: 100%;
}

.v2-pods {
  position: relative;
  height: 100%;
  padding: 6px 0;
  background: var(--v2-shell-bg);
}

@media (max-width: 760px) {
  .v2-shell,
  .v2-shell--no-inspector,
  .v2-shell--feature {
    gap: 0;
    padding: 0;
  }

  .v2-shell .v2-pane {
    height: 100vh;
  }

  /* A pane INSIDE the authenticated shell is bounded by the shell's content box,
     not by the viewport: that box has already had the verify-email banner
     subtracted from it, so a 100vh pane overflows below the fold by the banner's
     height. With its own `overflow: hidden` the pod header then sits under the
     banner — the back button, the title and the inspector toggle all untappable,
     and there is nothing to scroll (TASK-157, ux-lead at 390, ux-lead's P1).
     Ranked (0,3,0) against the (0,2,0) rule above so it wins on specificity, not
     on coming later: the same lesson as #1868, where a tie resolved by file
     order silently erased a component's own declarations. The 100vh rule itself
     stays — it is the right height outside this shell — and this guard is what
     keeps it from winning here. */
  .v2-authenticated-shell__content .v2-shell .v2-pane {
    height: 100%;
  }

  .v2-pods-aside {
    width: min(86vw, 320px);
  }

}

/* ---------- Workspace decision card (TASK-129 PR 3) ----------
   A DecisionRequest is an in-thread fork, not prose the human must parse.
   The cobalt 2px ring is reserved for this unresolved, human-owned choice. */
.v2-decision-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0;
  padding: 14px;
  border: 1px solid var(--v2-border-soft);
  border-radius: 6px;
  background: var(--v2-surface);
  box-shadow: 0 0 0 2px var(--v2-accent);
}

.v2-decision-card--ruled { box-shadow: none; }

.v2-decision-card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.v2-decision-card__head h3 {
  min-width: 0;
  margin: 0;
  color: var(--v2-text-primary);
  font: 600 14px/20px var(--v2-font);
}

.v2-decision-card__agent {
  flex-shrink: 0;
  color: var(--v2-accent-text);
  font: 500 11px/14px var(--v2-font-mono);
}

.v2-decision-card__question {
  margin: 0;
  color: var(--v2-text-secondary);
  font: 400 13px/19px var(--v2-font);
}

.v2-decision-card__options {
  display: grid;
  gap: 12px;
}

.v2-decision-card__option {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.v2-root button.v2-decision-card__choice,
.v2-root button.v2-decision-card__other,
.v2-root button.v2-decision-card__other-form button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  font: 600 13px/20px var(--v2-font);
}

.v2-root button.v2-decision-card__choice {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.v2-root button.v2-decision-card__choice--primary {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: var(--v2-on-ink);
}

.v2-root button.v2-decision-card__choice:hover:not(:disabled),
.v2-root button.v2-decision-card__other:hover:not(:disabled) { background: var(--v2-surface-hover); }
.v2-root button.v2-decision-card__choice--primary:hover:not(:disabled) { background: var(--v2-accent-strong); }

.v2-decision-card__option-description {
  color: var(--v2-text-secondary);
  font: 400 14px/20px var(--v2-font);
}

.v2-decision-card__option-recommended {
  color: var(--v2-text-muted);
  font: 500 11px/14px var(--v2-font-mono);
}

.v2-root button.v2-decision-card__other {
  border: 0;
  background: transparent;
  color: var(--v2-accent-text);
}

.v2-decision-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.v2-decision-card__other-form {
  display: flex;
  flex: 1 1 100%;
  gap: 6px;
}

.v2-decision-card__other-form input {
  min-width: 0;
  flex: 1;
  min-height: 32px;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  padding: 5px 8px;
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  font: 400 13px/18px var(--v2-font);
}

.v2-decision-card__settled,
.v2-decision-card__error { margin: 0; font: 500 12px/18px var(--v2-font); }
.v2-decision-card__settled { color: var(--v2-text-secondary); }
.v2-decision-card__error { color: #b91c1c; }

/* ---------- Workspace thread and composer (TASK-129 PR 3) ---------- */

/* The pod header shows the toggle only while the panel is hidden; the open
   panel carries its own Hide button in its head (D215, TASK-734). */

@media (max-width: 760px) {
  /* The phone artboard makes every decision option a full-width, 44px row;
     Other remains a centred text escape hatch beneath them. */
  .v2-decision-card__options { align-items: stretch; flex-direction: column; }
  .v2-decision-card__option { width: 100%; }
  .v2-root button.v2-decision-card__choice { width: 100%; min-height: 44px; font-size: 15px; }
  .v2-root button.v2-decision-card__other { align-self: flex-start; min-height: 44px; }

  /* The workspace is edge-to-edge on a phone. Rail and pod list are drawers,
     while the transcript, composer, and tab bar share the white canvas. */
  /* The 1023px rule is more specific and otherwise leaves three tracks
     active at phone width. The rail is hidden below, so every shell must
     explicitly collapse to one main track. */
  .v2-shell:not(.v2-shell--feature-wide),
  .v2-shell--feature-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .v2-shell,
  .v2-shell--no-inspector,
  .v2-shell--feature {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    gap: 0;
    background: var(--v2-surface);
  }
  .v2-pane--rail { display: none; }
  .v2-pane--main { background: var(--v2-surface); }

  .v2-mobile-tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 54px;
    padding: 5px 14px;
    border-top: 1px solid var(--v2-border);
    background: var(--v2-surface);
  }
  .v2-root button.v2-mobile-tabs__item {
    position: relative;
    display: grid;
    width: 44px;
    height: 32px;
    justify-self: center;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--v2-text-secondary);
  }
  .v2-root button.v2-mobile-tabs__item svg { width: 18px; height: 18px; }
  .v2-root button.v2-mobile-tabs__item--active { background: var(--v2-ink); color: var(--v2-on-ink); }
  .v2-root button.v2-mobile-tabs__item:hover:not(:disabled) { background: var(--v2-surface-hover); color: var(--v2-text-primary); }
  .v2-root button.v2-mobile-tabs__item--active:hover:not(:disabled) { background: var(--v2-ink-hover); color: var(--v2-on-ink); }
}

.v2-mobile-tabs { display: none; }

@media (max-width: 760px) {
  .v2-mobile-tabs { display: grid; }
}

/* ---------- Workspace at scale · direction C · PR 1 (sidebar + header + 390 list page) ----------
   Ruled 2026-09-06 (walk 1): grid 56 / 260 / fluid / 272 with 14px gaps; the sidebar
   is a white bordered panel; Pinned, Recent (eight by my last visit), Everything folded
   by kind; every row carries a 22px mark, the needs-you pill and the last-message time;
   the pod header is 50px with a 15/600 sans title and inline meta. On the phone the
   pods list is a page and the drawer is gone. Nothing under 11px mono / 12px sans. */

.v2-pods-aside {
  background: var(--v2-shell-bg);
}

/* D223 (TASK-735): the artboard's .pane.pods. A 14px card on the shell
   ground, its edge a shadow ring rather than a border, with the rows inset. */
.v2-pods {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  padding: 12px 10px;
  border: 0;
  border-radius: var(--v2-r-14, 14px);
  background: var(--v2-surface);
  box-shadow: var(--v2-shadow-pane, 0 0 0 1px var(--v2-border-soft));
  overflow: hidden;
}

/* The phone page is the whole screen: no card, a 52px title bar (.mtop). */
.v2-pods-aside--page .v2-pods {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.v2-pods__bar {
  display: flex;
  flex: none;
  height: 52px;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--v2-border-soft);
}

.v2-pods__page-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--v2-text-primary);
  font: 800 21px/1 var(--v2-font-display, var(--v2-font));
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The 390 bar's controls are 44px touch targets. The frame draws them at 34px,
   so they go to 44px at this width. The theme buttons keep their pill and reach
   44px tall through ::after, which stays inside each button's own column. */
.v2-pods-aside--page .v2-pods__bar .v2p-ib {
  width: 44px;
  height: 44px;
}

/* New pod carries its own flex-basis (.v2-pods__new, 32px); the bar overrides it. */
.v2-root .v2-pods-aside--page .v2-pods__bar button.v2-pods__new {
  flex-basis: 44px;
}

.v2-pods-aside--page .v2-pods__bar .seg.v2-theme-seg button {
  position: relative;
  width: 44px;
  height: 40px;
}

.v2-pods-aside--page .v2-pods__bar .seg.v2-theme-seg button::after {
  content: '';
  position: absolute;
  inset: -2px 0;
}

.v2-pods-aside--page .v2-pods__body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 12px;
}

.v2-pods__body {
  display: contents;
}

.v2-pods__tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 2px 10px;
}

.v2-pods__search {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 7px;
  margin: 0;
  height: 34px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: var(--v2-r-10, 10px);
  background: var(--v2-bg-subtle);
  box-shadow: inset 0 0 0 1px var(--v2-border-soft);
  color: var(--v2-text-placeholder);
}

.v2-pods__search > svg { flex: none; }

.v2-pods__search:focus-within {
  border-color: var(--v2-border-strong);
  box-shadow: inset 0 0 0 2px var(--v2-accent);
}

.v2-pods__search-input {
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--v2-text-primary);
  font: 400 13px/18px var(--v2-font);
  outline: none;
}

.v2-pods__search-input::placeholder {
  color: var(--v2-text-placeholder);
}

.v2-pods__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.v2-pods__search-kbd {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 0;
  border-radius: 5px;
  background: var(--v2-surface);
  box-shadow: 0 0 0 1px var(--v2-border-soft);
  color: var(--v2-text-muted);
  font: 500 11px/1 var(--v2-font-mono);
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .v2-pods__search-kbd { display: none; }
}

/* The artboard's .b.b-s.ib: a 32px raised key holding a plus glyph. */
/* Look from the D223 primitives (primitives.css): v2p-b v2p-b-s v2p-ib. */
.v2-root button.v2-pods__new { flex: 0 0 32px; }

.v2-root button.v2-pods__new[aria-expanded="true"] { background: var(--v2-surface-hover); }

/* ---------- D215 sidebar controls (TASK-691) ----------
   Controls look like controls: an icon button, a chip or a segment, never grey
   words that click. The segment is shared by the pod list (Recent · All ·
   Pinned), the panel's Who can join and Settings › Look. */
/* The segment's look is the primitives' v2p-seg; these keep its states. */
.v2-root button.v2-seg__option:hover:not(:disabled) { color: var(--v2-text-primary); }

.v2-root button.v2-seg__option:focus-visible {
  outline: none;
  box-shadow: var(--v2-focus-ring);
}

.v2-root button.v2-seg__option:disabled { cursor: default; opacity: 0.55; }

.v2-seg__count {
  color: var(--v2-text-muted);
  font: 500 11px/1 var(--v2-font-mono);
}

.v2-pods__view { padding: 2px 2px 8px; }

.v2-pods-aside--page .v2-pods__view { padding: 0 0 10px; }

.v2-pods__list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow-y: auto;
  /* The minute poll re-reads /api/pods and the rows re-sort by lastMessage, so
     a message to any pod moves a row and native anchoring drags the list to
     keep that row's viewport offset — 4 of 17 rows stayed in view (ux-lead
     gate on #1989). Opting this scroller out holds 16 of 17. Unlike
     .v2-chat__messages, which keeps anchoring at rest for late media above the
     viewport, these rows are fixed-height text with no late layout to lose. */
  overflow-anchor: none;
}

.v2-pods__section {
  min-width: 0;
}

.v2-pods__section-head,
.v2-root button.v2-pods__section-head {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 12px 4px;
  border: 0;
  background: transparent;
  color: var(--v2-text-secondary);
  font: 600 12px/16px var(--v2-font);
  text-align: left;
}

.v2-root button.v2-pods__section-head { cursor: pointer; }
.v2-root button.v2-pods__section-head:hover { color: var(--v2-text-primary); }

.v2-pods__section-count {
  color: var(--v2-text-muted);
  font: 400 11px/16px var(--v2-font-mono);
}

.v2-pods__section-chevron {
  margin-left: auto;
  color: var(--v2-text-muted);
  font-size: 11px;
}

.v2-pods__section-chevron::before { content: '▸'; }
[aria-expanded="true"] > .v2-pods__section-chevron::before { content: '▾'; }

.v2-root .v2-pods__section--kind button.v2-pods__section-head {
  padding-left: 24px;
  text-transform: lowercase;
}

.v2-pods__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The artboard's .pod: a 36px inset row with 8px corners. */
.v2-root button.v2-pods__row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--v2-r-8, 8px);
  background: transparent;
  color: var(--v2-ink-2, var(--v2-text-primary));
  font: 500 13.5px/18px var(--v2-font);
  text-align: left;
}

.v2-root button.v2-pods__row--in-fold { padding-left: 24px; }

/* A row and its pin control are siblings (a button cannot nest a button). */
.v2-pods__rowwrap { position: relative; }

.v2-root button.v2-pods__pin {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--v2-r-8, 8px);
  background: var(--v2-surface-tint);
  color: var(--v2-text-secondary);
  visibility: hidden;
}

/* D215: the pin is an icon on row hover that takes the time's slot. Out of
   sight at rest, pinned or not; the Pinned segment lists the pinned pods.
   visibility (not opacity) so a hidden pin cannot catch a tap. Keyboard focus
   anywhere in the row shows it, so Tab reaches it; a mouse click does not set
   :focus-visible, so a clicked row keeps its time. Touch screens have no hover,
   so they show the pin at rest in place of the time. */
.v2-pods__rowwrap:hover .v2-pods__pin,
.v2-pods__rowwrap:has(:focus-visible) .v2-pods__pin { visibility: visible; }

.v2-root button.v2-pods__pin:focus-visible { outline: none; box-shadow: var(--v2-focus-ring); }
.v2-root button.v2-pods__pin--active { color: var(--v2-accent-text); }
.v2-root button.v2-pods__pin:hover { background: var(--v2-surface-hover); color: var(--v2-text-primary); }

.v2-pods__row-time { display: inline-block; min-width: 24px; text-align: right; }

.v2-pods__rowwrap:hover .v2-pods__row-time,
.v2-pods__rowwrap:has(:focus-visible) .v2-pods__row-time { visibility: hidden; }

@media (hover: none) and (pointer: coarse) {
  .v2-root button.v2-pods__pin { visibility: visible; }
  .v2-pods__row-time { visibility: hidden; }
}

.v2-root button.v2-pods__row:hover { background: var(--v2-surface-hover); }

.v2-root button.v2-pods__row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--v2-accent);
}

/* D223 (TASK-735): the artboard's .pod.on, in both themes. The row goes to
   the neutral tint and the mark alone turns cobalt; no full-row block, no
   accent bar. */
.v2-root button.v2-pods__row--selected,
.v2-root button.v2-pods__row--selected:hover {
  background: var(--v2-row-active);
  color: var(--v2-row-active-text);
  font-weight: 600;
}

.v2-pods__row-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: var(--v2-r-6, 6px);
  background: var(--v2-surface-tint);
  color: var(--v2-text-secondary);
  /* The artboard's .mk draws 600 10px mono; 11px is the mono floor (ruling h). */
  font: 600 11px/1 var(--v2-font-mono);
}

/* A DM row carries the peer's avatar in the same 24px slot. */
.v2-pods__row-mark.v2-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--v2-r-6, 6px);
  border: 0;
  font-size: 11px;
}

.v2-root button.v2-pods__row--selected .v2-pods__row-mark:not(.v2-avatar) {
  background: var(--v2-row-active-mark);
  color: var(--v2-on-accent);
}

.v2-pods__row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-root button.v2-pods__row--unread .v2-pods__row-name { font-weight: 600; }

.v2-pods__row-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--v2-text-muted);
  font: 500 11px/16px var(--v2-font-mono);
}

.v2-root button.v2-pods__row--selected .v2-pods__row-meta { color: var(--v2-row-active-mute); }

.v2-root button.v2-pods__row--selected:focus-visible {
  box-shadow: inset 0 0 0 2px var(--v2-accent);
}

/* The artboard's .un: an 18px ink pill, the same on the selected row. */
.v2-pods__row-pill {
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 9px;
  background: var(--v2-ink);
  color: var(--v2-on-ink);
  font: 600 11px/18px var(--v2-font-mono);
}

/* At 760px and below the row keeps a 44px touch target. The artboard draws
   36px rows at 390; its 24px mark and 13.5px name hold, the row height does
   not (TASK-735: a deliberate touch floor, flagged for UX Lead). */
@media (max-width: 760px) {
  .v2-root button.v2-pods__row {
    min-height: 44px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .v2-root button.v2-pods__pin {
    width: 28px;
    height: 28px;
  }
}

.v2-pods__create {
  margin: 0 10px 6px;
}

.v2-pods__empty { padding: 20px 12px; }
.v2-pods__empty--mono { color: var(--v2-text-muted); font: 400 12px/16px var(--v2-font-mono); }

@media (max-width: 760px) {
  /* The list is a page: full width, no drawer, no backdrop.

     The list is also the one route where the aside IS a page pane, so the
     (0,3,0) bounding rule added for TASK-157 reaches it: the aside stops being
     `calc(100vh - 56px)` and becomes 100% of the shell's content box. Two
     consequences, both measured by ux-lead at 390 on both banner states
     (2026-09-25), and both fixed here rather than in that rule — the bounding
     rule is right for pod, Connectors, Agents and Settings:

     1. Nothing reserved the tab bar inside the list's box, so the aside grew to
        the full 844 and ran under the fixed bar: 0 of 4 tabs hit-testable, on a
        short list and a long one, banner up or down. The bottom padding below
        IS that reservation, and its value is the bar's own height — see the
        guard, which compares the two rather than restating either. The two-class
        selector is required: a one-class rule of the same name would take the
        padding back off by document order.

     2. The drawer's reset was incomplete — z-index stayed 60. `.v2-shell--list`
        is a flex container, and a flex item with a z-index other than `auto`
        forms a stacking context even while static, so the aside painted over
        the bar (fixed, z 40) and the bar could be neither seen nor tapped.

     `calc(100vh - 56px)` was dropped rather than kept as a fallback: the rule
     above outranks it in every render of this shell, so it was already inert.
     The banner state is fixed by the same padding — main failed the banner case
     before this change. */
  .v2-shell.v2-shell--list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 58px;
  }

  .v2-shell--list .v2-pods-aside--page {
    position: static;
    z-index: auto;
    width: 100%;
    transform: none;
    box-shadow: none;
    border: 0;
  }

  .v2-shell--list .v2-pods {
    border: 0;
    border-radius: 0;
  }

  .v2-pods-aside:not(.v2-pods-aside--page) { display: none; }

  /* Tab bar with labels; the count lives inside the label, one counter. */
  .v2-mobile-tabs {
    height: 58px;
    padding: 6px 8px 4px;
    border-top-color: var(--v2-border-soft);
  }

  /* Feature pages mount this same bar (V2FeaturePage). Reserve its height on
     the pane so a scrolling body stops above the fixed bar, not under it. */
  .v2-feature {
    padding-bottom: 58px;
  }

  .v2-root button.v2-mobile-tabs__item {
    display: flex;
    width: auto;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 6px;
    background: transparent;
    /* Icons are controls: the rail's 3:1 grey, not the artboard's 2.58:1
       placeholder (D223 standing rule, 11-01). The label sets its own colour. */
    color: var(--v2-rail-icon);
  }

  .v2-root button.v2-mobile-tabs__item--active,
  .v2-root button.v2-mobile-tabs__item--active:hover:not(:disabled) {
    background: transparent;
    color: var(--v2-text-primary);
  }

  .v2-mobile-tabs__icon {
    display: grid;
    width: 24px;
    height: 20px;
    place-items: center;
  }

  .v2-root button.v2-mobile-tabs__item--active .v2-mobile-tabs__icon { color: var(--v2-ink); }

  /* D223 ruling (Cofounder, 11-01): the artboard's sans family, at the
     12px sans floor rather than its 10px. */
  .v2-mobile-tabs__label {
    font: 500 12px/14px var(--v2-font);
    white-space: nowrap;
  }

  /* The artboard greys the whole tab at rest; only the glyph takes that
     placeholder grey here, so the label text keeps 4.5:1. */
  .v2-root button.v2-mobile-tabs__item:not(.v2-mobile-tabs__item--active) .v2-mobile-tabs__label { color: var(--v2-text-muted); }

  /* D215: the needs-you count is a cobalt badge on the icon, not a sentence
     in the label. */
  .v2-mobile-tabs__icon { position: relative; }
  .v2-mobile-tabs__count {
    position: absolute;
    top: -6px;
    left: calc(50% + 4px);
    min-width: 16px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--v2-accent);
    color: var(--v2-on-accent);
    font: 600 11px/15px var(--v2-font-mono);
    text-align: center;
  }
}

/* ---------- Workspace at scale · direction C · PR 2a (composer, attachments, history) ----------
   One-line composer with a plus menu, Send only with text, no identity line;
   images as 156×104 thumbnails with a lightbox, files as chips with a text type
   badge, code past six lines collapsed; older messages load on scroll with a
   mono edge line and a Jump-to-latest pill. */

/* Lightbox */
.v2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(16, 24, 40, 0.9);
  cursor: zoom-out;
}

.v2-lightbox__image {
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
}

.v2-lightbox__name {
  position: absolute;
  top: 14px;
  left: 16px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--v2-surface);
  color: var(--v2-text-secondary);
  font: 500 11px/16px var(--v2-font-mono);
}

.v2-root button.v2-lightbox__close,
.v2-root button.v2-lightbox__nav {
  position: absolute;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  background: var(--v2-surface);
  color: var(--v2-text-primary);
  font: 500 16px/1 var(--v2-font);
  cursor: pointer;
}

.v2-root button.v2-lightbox__close { top: 12px; right: 12px; }
.v2-root button.v2-lightbox__nav--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.v2-root button.v2-lightbox__nav--next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- Workspace at scale · direction C · PR 2b (threading restyle, walk-3 misses 51–63) ----------
   Runtime tag on agent rows; 20px reaction chips; a two-line quote that jumps to
   its source; the thread summary is one chip; the expanded thread is one var(--v2-bg-subtle)
   band with a 2px rule and a Collapse foot; the action strip is a 28px white box
   top-right on hover (inline under the body on long-press at 390); the Jump pill
   is white with a cobalt count; transcript avatars are two-tone. */

/* Two-tone avatars inside the transcript: agents cobalt, humans tint. */

/* Mention token: wash + cobalt (ux-lead 64476 (7)); the row tint stays. */

/* Jump pill: white, #dde0e6 border, r14, ink 13/600, cobalt count (walk-3 miss 58). */
/* Direction C Activity board: a 52px bar over a readable 760px column.
   The composer remains under the explicit destination ruling. */
.v2-activity { position: relative; width: 100%; max-width: none; padding: 0 0 28px; }
.v2-activity__header { min-height: 64px; align-items: baseline; padding: 20px 16px 4px; gap: 16px; border-bottom: 0; overflow: visible; }
.v2-activity__title { font: 700 32px/36px var(--v2-font-display); letter-spacing: -0.03em; white-space: nowrap; }
.v2-activity__controls { position: absolute; top: 22px; right: 16px; gap: 8px; z-index: 2; }
.v2-activity__scope { display: flex; flex-wrap: nowrap; gap: 2px; position: relative; padding: 3px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface); }
.v2-activity__scope-menu { position: absolute; top: calc(100% + 4px); right: 0; display: grid; gap: 2px; width: min(300px, 85vw); max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface); }
.v2-root button.v2-activity__scope-button { min-height: 30px; max-width: 150px; padding: 0 9px; border: 0; border-radius: calc(var(--v2-radius-sm) - 2px); background: transparent; color: var(--v2-text-secondary); font: 600 11px/16px var(--v2-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-root button.v2-activity__scope-button--active { background: var(--v2-surface-hover); color: var(--v2-text-primary); font-weight: 600; }
.v2-root button.v2-activity__scope-button--menu { max-width: none; white-space: normal; text-align: left; }
.v2-root button.v2-activity__window-button { font: 600 11px/16px var(--v2-font-mono); }
.v2-activity__sections { width: min(100%, 760px); margin: 28px auto 0; gap: 34px; }
.v2-activity__section-heading { margin-bottom: 10px; }
.v2-activity__queue { gap: 10px; }
.v2-activity__queue-row { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 11px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: var(--v2-surface); }
.v2-activity__queue-row:hover { background: var(--v2-surface); }
.v2-activity__queue-row--decision { border-color: var(--v2-border); box-shadow: none; }
.v2-activity__queue-row--approval { border-color: var(--v2-border); box-shadow: none; }
/* The cobalt ring marks the row you are in, not every open ask (slop tell 2). */
.v2-activity__queue-row:focus-within,
.v2-activity__queue-row--decision:focus-within,
.v2-activity__queue-row--approval:focus-within { border-color: var(--v2-accent); box-shadow: 0 0 0 1px var(--v2-accent); }
.v2-activity__queue-row--settled,
.v2-activity__queue-row--onboarding { padding: 12px; border: 1px solid var(--v2-border); }
.v2-activity__queue-kind { font: 500 11px/16px var(--v2-font-mono); text-transform: lowercase; }
.v2-activity__queue-topline strong { font-size: 14px; line-height: 20px; }
.v2-activity__queue-copy p { font-size: 14px; line-height: 20px; }
.v2-activity__queue-more { min-height: 36px; border: 1px solid var(--v2-accent); color: var(--v2-accent); font: 600 12px/16px var(--v2-font); }
.v2-activity__empty--plain { min-height: 0; padding: 18px 20px; border: 1px dashed var(--v2-border); border-radius: var(--v2-radius); align-items: flex-start; text-align: left; }
.v2-activity__moved-list { display: grid; gap: 10px; }
.v2-activity__moved-group { border: 1px solid var(--v2-border); border-radius: 6px; overflow: hidden; background: var(--v2-surface); }
.v2-activity__moved-head { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--v2-border-soft); color: var(--v2-text-secondary); font: 400 11px/16px var(--v2-font-mono); }
.v2-activity__moved-lines { display: grid; }
.v2-activity__moved-line { display: grid; grid-template-columns: minmax(100px, auto) minmax(0, 1fr) auto; gap: 8px; padding: 8px 12px; font-size: 13px; line-height: 18px; }
.v2-activity__moved-line + .v2-activity__moved-line { border-top: 1px solid var(--v2-border-soft); }
.v2-activity__moved-line strong { font-weight: 600; color: var(--v2-text-primary); }
.v2-activity__moved-line span { min-width: 0; overflow-wrap: anywhere; }
.v2-activity__moved-line time { color: var(--v2-text-muted); font: 400 11px/16px var(--v2-font-mono); white-space: nowrap; }
.v2-activity__moved-cap-note { display: block; padding: 6px 12px 8px; color: var(--v2-text-muted); font: 400 11px/16px var(--v2-font-mono); }
.v2-root button.v2-activity__moved-more { width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--v2-border-soft); background: transparent; color: var(--v2-accent-text); text-align: left; font: 600 12px/16px var(--v2-font); }
@media (max-width: 640px) {
  .v2-activity__header { min-height: 56px; align-items: baseline; flex-direction: row; flex-wrap: wrap; padding: 16px 12px 4px; gap: 8px; }
  .v2-activity__sections { margin-top: 20px; padding: 0 12px; }
  .v2-activity__moved-line { grid-template-columns: minmax(0, 1fr) auto; }
  .v2-activity__moved-line span { grid-column: 1 / -1; grid-row: 2; }
}

/* Direction C owns the full pane edge. The generic feature wrapper is padded
   for legacy pages, which would inset the Activity bar and make its 52px
   contract impossible to reach. */
.v2-feature--activity > .v2-feature__body { padding: 0 0 28px; }
.v2-feature--activity .v2-feature__legacy { max-width: none; }

.v2-activity__compose { width: min(calc(100% - 24px), 760px); margin: 20px auto 0; }
.v2-root button.v2-activity__queue-more {
  border: 0;
  background: transparent;
  color: var(--v2-accent);
  font: 600 12px/16px var(--v2-font);
}
.v2-root button.v2-activity__queue-more:hover:not(:disabled) { background: var(--v2-accent-soft); color: var(--v2-accent); }
.v2-root .v2-activity__scope-menu button.v2-activity__scope-button { width: 100%; max-width: none; }
.v2-root .v2-activity__queue-actions button.v2-activity__option { min-height: 32px; border-radius: var(--v2-radius-sm); }
/* Rail badge (66390): the exact count at any size — 118 reads as 118. Mono, bordered, cobalt, no clip. */
.v2-rail__item-icon .MuiBadge-badge {
  top: -7px;
  right: -14px;
  height: 15px;
  min-width: 16px;
  padding: 0 3px;
  border: 0;
  border-radius: 8px;
  background: var(--v2-accent);
  box-shadow: 0 0 0 2px var(--v2-shell-bg);
  color: var(--v2-on-accent);
  font: 600 11px/15px var(--v2-font-mono);
  transform: none;
  white-space: nowrap;
}
/* TASK-363: only the Activity badge is offset inward. Three-digit counts (230,
   1234) overflowed the rail at -14px; the other rail badges keep the base offset. */
.v2-rail__item-icon .v2-rail__badge--activity .MuiBadge-badge {
  right: -6px;
}
.v2-root .v2-activity__queue-actions button.v2-activity__option--other { border-color: transparent; background: transparent; color: var(--v2-accent-text); padding: 0 4px; }
/* ≤760 (66390): the two toggles stack. The card-action stack lives in the trailing ≤760
   block at the end of the Activity rules, after every row/action rule it must outrank. */
@media (max-width: 760px) {
  .v2-activity__controls { flex-direction: column; align-items: stretch; }
}
.v2-root .v2-activity__queue-row--decision .v2-activity__queue-mark { background: var(--v2-accent); color: #fff; }
/* Categories are marks, only the deciding act is a word (direction A). The
   mark holds a 16px glyph; a secondary act is a 32px square holding one, its word in the
   title and the accessible name. Nothing is hidden in a menu. */
.v2-root .v2-activity__queue-mark svg { width: 16px; height: 16px; }
.v2-root .v2-activity__queue-actions button.v2-activity__queue-action--icon { width: 32px; min-width: 32px; padding: 0; justify-content: center; }
.v2-root .v2-activity__queue-actions button.v2-activity__queue-action--icon svg { width: 16px; height: 16px; flex: none; }
.v2-activity__queue-row .v2-activity__queue-actions { grid-column: 3; grid-row: 1; max-width: 320px; justify-content: flex-end; flex-wrap: wrap; margin-top: 0; }
.v2-activity__queue-row .v2-activity__option-choice { flex: 0 1 auto; max-width: 150px; }
.v2-activity__queue-row .v2-activity__option { white-space: normal; }
/* Opening a reply or a free-text ruling gives that editor a full content row. */
.v2-activity__queue-row .v2-activity__queue-actions:has(textarea) { grid-column: 2 / -1; grid-row: 2; max-width: none; justify-content: flex-start; }
.v2-activity__empty--plain span { color: var(--v2-text-secondary); font: 400 13px/18px var(--v2-font); }
/* Keep filters on a separate row when the pane cannot fit them beside the
   title. Both rows stay in normal reading order, without a clipped title. */
@media (max-width: 1100px) {
  .v2-activity__controls { position: relative; top: auto; right: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding: 10px 12px; border-bottom: 1px solid var(--v2-border-soft); }
  .v2-activity__window { width: auto; flex: 0 0 auto; }
  .v2-activity__scope { min-width: 0; max-width: 100%; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .v2-activity__queue-row { grid-template-columns: 28px minmax(0, 1fr); }
  .v2-root .v2-activity__queue-actions button.v2-activity__option { min-height: 44px; }

  .v2-activity__queue-row .v2-activity__queue-actions { grid-column: 1 / -1; grid-row: auto; max-width: none; justify-content: flex-start; }
  .v2-activity__queue-row .v2-activity__option-choice { max-width: 100%; }
}

/* Decision alternatives are one inline line below the question (ux-lead
   66400 fix 4): 32px options in authored order, primary cobalt, the rest
   bordered, `Other…` as cobalt text beside them, Open at the end. These rules
   intentionally come after the generic queue-row overrides above so the
   options are neither squeezed into the 320px action column nor capped at
   150px each. */
.v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__queue-actions {
  grid-column: 1 / -1;
  grid-row: auto;
  max-width: none;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.v2-activity__queue-row.v2-activity__queue-row--decision {
  align-items: start;
  row-gap: 12px;
}
.v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__option-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: auto;
  flex: 0 1 auto;
  max-width: 280px;
}
.v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__option-choice button {
  justify-content: center;
  min-height: 32px;
  padding-block: 0;
  padding-inline: 12px;
  text-align: left;
  line-height: 20px;
  white-space: normal;
}
/* The footer's children (Other…, the free-text editor, Open) flow on the same line. */
.v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__decision-footer { display: contents; }
.v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__decision-other { flex: 1 1 100%; }
.v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__option-choice button.v2-activity__option:not(.v2-activity__option--primary):hover:not(:disabled) {
  background: var(--v2-surface-hover);
  color: var(--v2-text-primary);
}
.v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__option-recommended {
  display: block;
  color: var(--v2-text-muted);
  font: 500 11px/14px var(--v2-font-mono);
}
.v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__option-description {
  color: var(--v2-text-secondary);
  font-size: 14px;
  line-height: 20px;
}
.v2-activity__decision-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}
/* ≤760 (ux-lead 66428; sprint-review 66435 — the ruling's number is 760, not 640, so the
   641–760 band stacks too): decision options stack like every other action — 44px, full
   width. This block sits AFTER the inline option rules above so it wins at equal specificity. */
@media (max-width: 760px) {
  /* Every card action drops under the context line at 44px full width (66390 / 66438 at 720):
     same selectors as the desktop rules above so this block wins by order, not by luck. */
  .v2-activity__queue-row { grid-template-columns: 28px minmax(0, 1fr); }
  .v2-activity__queue-row .v2-activity__queue-actions { grid-column: 1 / -1; grid-row: auto; max-width: none; justify-content: flex-start; flex-wrap: wrap; }
  /* One action row per card (d215 s-activity, walk 11-02): the text act (Reply, Approve, Mark
     handled) grows to fill the row and the 44px icon squares below sit beside it on the right. */
  .v2-root .v2-activity__queue-actions > button { flex: 1 1 auto; min-height: 44px; }
  /* The reply editor's nested Send only grows in HEIGHT (sprint-review 66493/66498): a descendant
     rule here gave it flex-basis 100% and it ate the textarea (489px Send beside a 139px input). */
  .v2-root .v2-activity__reply > button { min-height: 44px; }
  .v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__option-choice { flex: 1 1 100%; max-width: none; }
  .v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__option-choice button { width: 100%; min-height: 44px; }
  /* Other… grows and the ↗ handoff square sits beside it: one footer row, as d215 s-activity draws it. */
  .v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__decision-footer > button { flex: 1 1 auto; min-height: 44px; }
  /* Icon acts stay 44px squares under 760 — the full-width `> button` rule above would stretch them. */
  .v2-root .v2-activity__queue-actions button.v2-activity__queue-action--icon { width: 44px; min-width: 44px; flex: none; }
  .v2-root .v2-activity__queue-row.v2-activity__queue-row--decision .v2-activity__decision-footer > button.v2-activity__queue-action--icon { flex: none; width: 44px; min-width: 44px; }
}
/* Get started — day zero (ux-lead 66658/66666, board 66663/66664). One bordered card above
   Needs you; a step is not an ask: no ring, no count, no badge. Ink numbered marks, dividers,
   32px buttons at desktop (the current step ink, later steps bordered), 44 full width at ≤760. */
.v2-activity__start { width: min(100%, 760px); margin: 20px auto 0; border: 1px solid var(--v2-border); border-radius: 6px; background: var(--v2-surface); overflow: hidden; }
.v2-activity__start-head { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--v2-border-soft); }
.v2-activity__start-head h2 { margin: 0; font: 600 14px/20px var(--v2-font); color: var(--v2-text-primary); }
.v2-activity__start-kicker { color: var(--v2-text-muted); font: 500 11px/16px var(--v2-font-mono); }
.v2-activity__start-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--v2-border-soft); }
.v2-activity__start-row:last-child { border-bottom: 0; }
.v2-activity__start-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--v2-radius-sm); background: var(--v2-ink); color: var(--v2-on-ink); font: 500 11px/16px var(--v2-font-mono); }
.v2-activity__start-copy { min-width: 0; }
.v2-activity__start-copy strong { display: block; color: var(--v2-text-primary); font: 600 14px/20px var(--v2-font); }
.v2-activity__start-copy p { margin: 2px 0 0; color: var(--v2-text-secondary); font: 400 14px/20px var(--v2-font); }
.v2-activity__start-act { display: flex; align-items: center; }
.v2-root .v2-activity__start-act button { min-height: 32px; padding: 0 12px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface); color: var(--v2-text-primary); font: 600 13px/18px var(--v2-font); white-space: nowrap; }
.v2-root .v2-activity__start-act button.v2-activity__start-cta--current { border-color: var(--v2-ink); background: var(--v2-ink); color: var(--v2-on-ink); }
@media (max-width: 760px) {
  .v2-activity__start { width: auto; margin: 16px 12px 0; }
  .v2-activity__start-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .v2-activity__start-row { grid-template-columns: 28px minmax(0, 1fr); }
  .v2-activity__start-act { grid-column: 1 / -1; }
  .v2-root .v2-activity__start-act button { width: 100%; min-height: 44px; }
}
/* Get started, checking (d215 s-activity): while the roster and connector count are in flight the
   card holds its place — real head, two step rows of bars on the same line boxes as the loaded
   rows (20px lines, 32px key; 44px full width at ≤760) — so nothing below it moves. */
.v2-activity__start--pending .v2-activity__start-num--pending { background: var(--v2-surface-hover); }
.v2-activity__start-bar { display: block; position: relative; height: 20px; }
.v2-activity__start-bar::after { content: ""; position: absolute; left: 0; top: 5px; width: 92%; height: 10px; border-radius: 5px; background: var(--v2-surface-hover); }
.v2-activity__start-bar--title + .v2-activity__start-bar { margin-top: 2px; }
.v2-activity__start-bar--title::after { width: 34%; background: var(--v2-border); }
.v2-activity__start-bar--phone { display: none; }
.v2-activity__start-bar--phone::after { width: 64%; }
.v2-activity__start-bar--key { width: 132px; height: 32px; }
.v2-activity__start-bar--key::after { top: 0; width: 100%; height: 100%; border-radius: var(--v2-radius-sm); background: var(--v2-surface); box-shadow: inset 0 0 0 1px var(--v2-border); }
@media (max-width: 760px) {
  .v2-activity__start-bar--phone { display: block; }
  .v2-activity__start-bar--key { width: 100%; height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .v2-activity__start--pending .v2-activity__start-bar::after { animation: v2-activity-start-pulse 1.4s ease-in-out infinite; }
}
@keyframes v2-activity-start-pulse {
  50% { opacity: 0.55; }
}
/* ---------------------------------------------------------------------------
   Artifacts — direction C, PR 5 (ScaleArtifacts.dc.html).
   Every file and page shared in your pods. Display head + muted meta; two
   segment groups on one grammar (bordered white group, active = tint + ink
   600); a bordered search; a plain table whose numbers are mono; the ext chip
   is the file's own extension, bordered mono, never a colour square.
   --------------------------------------------------------------------------- */
.v2-feature--artifacts > .v2-feature__body { padding: 0 0 28px; }
.v2-feature--artifacts .v2-feature__legacy { max-width: none; }
.v2-artifacts { display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 20px 16px 0; }
.v2-artifacts__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.v2-artifacts__title { margin: 0; font: 700 32px/1.1 var(--v2-font-display); letter-spacing: -0.03em; color: var(--v2-text-primary); }
.v2-artifacts__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-artifacts__seg { position: relative; display: flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface); }
.v2-root button.v2-artifacts__seg-button { min-height: 30px; max-width: 150px; padding: 0 9px; border: 0; border-radius: calc(var(--v2-radius-sm) - 2px); background: transparent; color: var(--v2-text-secondary); font: 600 11px/16px var(--v2-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-root button.v2-artifacts__seg-button--active { background: var(--v2-surface-hover); color: var(--v2-text-primary); font-weight: 600; }
.v2-root button.v2-artifacts__seg-button--menu { width: 100%; max-width: none; white-space: normal; text-align: left; }
.v2-artifacts__seg-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 3; display: grid; gap: 2px; width: min(300px, 85vw); max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface); }
.v2-artifacts__search { display: flex; align-items: center; gap: 8px; min-width: 220px; height: 36px; margin-left: auto; padding: 0 10px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface); }
.v2-artifacts__search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--v2-text-primary); font: 400 13px/18px var(--v2-font); }
.v2-artifacts__search input::placeholder { color: var(--v2-text-muted); }
.v2-artifacts__search:focus-within { border-color: var(--v2-accent); }
.v2-artifacts__search-key { color: var(--v2-text-muted); font: 500 11px/16px var(--v2-font-mono); }
.v2-artifacts__table-wrap { overflow-x: auto; border: 1px solid var(--v2-border); border-radius: 6px; background: var(--v2-surface); }
.v2-artifacts__table { width: 100%; border-collapse: collapse; font: 400 13px/18px var(--v2-font); color: var(--v2-text-primary); }
.v2-artifacts__table th { padding: 8px 12px; border-bottom: 1px solid var(--v2-border-soft); color: var(--v2-text-muted); font: 500 11px/16px var(--v2-font-mono); text-align: left; text-transform: lowercase; white-space: nowrap; }
.v2-artifacts__table td { padding: 9px 12px; border-bottom: 1px solid var(--v2-border-soft); vertical-align: middle; }
.v2-artifacts__table tr:last-child td { border-bottom: 0; }
.v2-artifacts__row:hover td { background: var(--v2-surface-hover); }
.v2-artifacts__file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v2-artifacts__ext { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 20px; padding: 0 5px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); color: var(--v2-text-secondary); font: 500 11px/14px var(--v2-font-mono); letter-spacing: 0.02em; }
.v2-artifacts__pod-line { display: none; color: var(--v2-text-secondary); font: 500 11px/16px var(--v2-font-mono); }
.v2-root button.v2-artifacts__name { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--v2-text-primary); font: 600 13px/18px var(--v2-font); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-root button.v2-artifacts__name:hover { color: var(--v2-accent-text); }
.v2-artifacts__mono { color: var(--v2-text-secondary); font: 500 11px/16px var(--v2-font-mono); white-space: nowrap; }
.v2-artifacts__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-root button.v2-artifacts__more { padding: 6px 4px; border: 0; background: transparent; color: var(--v2-accent-text); font: 600 12px/16px var(--v2-font); }
.v2-artifacts__empty { padding: 18px 20px; border: 1px dashed var(--v2-border); border-radius: var(--v2-radius); color: var(--v2-text-secondary); font: 400 13px/18px var(--v2-font); }
.v2-artifacts__error { padding: 12px 14px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); color: var(--v2-text-primary); font: 400 13px/18px var(--v2-font); }
.v2-artifacts__loading { display: grid; place-items: center; padding: 24px; }
/* ≤760 (ux-lead 66462): no sideways scroll — keep file / kind / when, fold the pod under
   the name as a mono line, hide pod / shared-by / size; the head stays display 32. */
@media (max-width: 760px) {
  .v2-artifacts { padding: 16px 12px 0; gap: 16px; }
  .v2-artifacts__controls { flex-direction: column; align-items: stretch; }
  .v2-artifacts__search { margin-left: 0; }
  .v2-artifacts__table { table-layout: fixed; }
  .v2-artifacts__table th:nth-child(3), .v2-artifacts__table td:nth-child(3),
  .v2-artifacts__table th:nth-child(4), .v2-artifacts__table td:nth-child(4),
  .v2-artifacts__table th:nth-child(6), .v2-artifacts__table td:nth-child(6) { display: none; }
  .v2-artifacts__table th:nth-child(2), .v2-artifacts__table td:nth-child(2) { width: 64px; }
  .v2-artifacts__table th:nth-child(5), .v2-artifacts__table td:nth-child(5) { width: 52px; }
  .v2-artifacts__file { flex-wrap: wrap; row-gap: 2px; }
  .v2-artifacts__pod-line { display: block; flex: 1 1 100%; }
  .v2-root button.v2-artifacts__name { white-space: normal; overflow-wrap: anywhere; }
}

/* Public Privacy and Terms pages (TASK-530). Outside .v2-root, so no root-scoped selectors. */
/* .v2-root sets height:100vh and overflow:hidden; the legal pages must scroll, so override both (same as the landing). */
.v2-root.v2-legal { display: block; height: 100vh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; padding: 48px 24px; background: var(--v2-bg-subtle); color: var(--v2-text-primary); }
.v2-legal__doc { max-width: 680px; margin: 0 auto; }
.v2-legal__home { display: inline-block; margin: 0 0 24px; font-size: 14px; color: var(--v2-text-secondary); text-decoration: none; }
.v2-legal__home:hover { text-decoration: underline; }
.v2-legal__section a { color: var(--v2-text-primary); text-decoration: underline; }
.v2-legal__title { font-size: 32px; font-weight: 600; line-height: 1.2; margin: 0 0 32px; }
.v2-legal__section { margin-bottom: 28px; }
.v2-legal__section h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.v2-legal__section p { font-size: 15px; line-height: 1.6; color: var(--v2-text-secondary); margin: 0 0 8px; }

/* D223 (TASK-730 shell): the artboard's 390 frame is a 52px top bar over one
   column. Feature pages (connectors, team, settings) share V2PageHead and the
   V2FeaturePage body, so the bar and the tighter body live here once instead
   of in each page. The tab bar's height is already reserved on .v2-feature. */
@media (max-width: 760px) {
  .v2-feature__header {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 10px 0 12px;
    gap: 8px;
  }
  .v2-feature__header .v2-page-head__identity { align-items: center; gap: 8px; }
  .v2-feature__header .v2-feature__title {
    font: 800 21px/1 var(--v2-font-display);
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .v2-feature__header .v2-page-head__meta { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v2-feature__body { padding: 12px 12px 16px; }
}

/* ---------- Motion (D220) ---------- */

/* Theme switch: utils/theme.ts makes the change inside document.startViewTransition,
   and the root snapshots crossfade once. No per-element colour transitions. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--v2-dur);
  animation-timing-function: var(--v2-ease);
}

/* Folds: every <details> body opens over --v2-dur and closes over --v2-dur-fast, by
   size, with no measured pixel height. Browsers without interpolate-size or
   ::details-content open and close at once. The clip margin keeps focus rings. */
.v2-root details {
  interpolate-size: allow-keywords;
}
.v2-root details::details-content {
  block-size: 0;
  overflow: clip;
  overflow-clip-margin: 6px;
  opacity: 0;
  transition:
    block-size var(--v2-dur-fast) var(--v2-ease),
    opacity var(--v2-dur-fast) var(--v2-ease),
    content-visibility var(--v2-dur-fast) var(--v2-ease) allow-discrete;
}
.v2-root details[open]::details-content {
  block-size: auto;
  opacity: 1;
  transition-duration: var(--v2-dur);
}

/* Custom folds (V2Fold): the body is a grid whose one row goes 0fr <-> 1fr, fading
   on the same curve. It clips only while it moves, so an open fold keeps focus
   rings and anything that hangs past its edge. */
@keyframes v2-fold-open {
  from { grid-template-rows: 0fr; opacity: 0; }
  to { grid-template-rows: 1fr; opacity: 1; }
}
@keyframes v2-fold-close {
  from { grid-template-rows: 1fr; opacity: 1; }
  to { grid-template-rows: 0fr; opacity: 0; }
}
.v2-fold {
  display: grid;
  grid-template-rows: 1fr;
}
.v2-fold > .v2-fold__inner {
  display: flow-root;
  min-height: 0;
}
.v2-fold--opening {
  animation: v2-fold-open var(--v2-dur) var(--v2-ease) both;
}
.v2-fold--closing {
  animation: v2-fold-close var(--v2-dur-fast) var(--v2-ease) both;
}
.v2-fold--opening > .v2-fold__inner,
.v2-fold--closing > .v2-fold__inner {
  overflow: clip;
  overflow-clip-margin: 6px;
}

/* One reduced-motion switch, global rather than scoped to .v2-root, so it reaches
   portals too. Every moment lands in its end state at once. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-group(*) {
    animation: none !important;
  }
  /* A rule of its own: the wildcards above don't reach this pseudo-element, and a
     browser without it would drop any selector list that named it. */
  ::details-content {
    transition-duration: 0.01ms !important;
  }
}