/* ==========================================================================
   DIJJI.ai — static demo experience
   Design system port + demo-only chrome.

   PROVENANCE
   Tokens below are ported from the REAL app (packages/web/src/styles/globals.css),
   not from prototype/assets/app.css. Where the two disagree the real app wins
   (plan §7 invariant 1). The real app stores its shadcn colors as bare HSL
   triplets consumed via hsl(var(--x)); this file has no Tailwind, so each token
   is written as a ready-to-use hsl(...) value with the SAME triplet — identical
   rendered color, usable as var(--x) directly.

   The component layer (.card, .btn, .badge, …) is ported from
   prototype/assets/app.css, which is where the plain-CSS design system already
   exists. It is token-corrected against the real app on the way through.

   DEMO-ONLY tokens (--ink-2, --faint, --border-2) have no real-app equivalent —
   the app uses --muted-foreground / --border for those roles. They are kept
   because the ported component CSS depends on a 3-level ink ramp. Do not treat
   them as product tokens.
   ========================================================================== */

/* ---------- Fonts (local; invariant 3 — no external requests) ---------- */
/* Same woff2 files the real app self-hosts: packages/web/src/app/fonts/ */
@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* type + rhythm (demo-only plumbing) */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --gap: 16px;

  /* radii — globals.css @theme --radius-* / --r-* */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* ---- shadcn triplets (globals.css :root) ---- */
  --bg: hsl(215 42% 95%);            /* --background */
  --ink: hsl(219 49% 10%);           /* --foreground */
  --surface: hsl(0 0% 100%);         /* --card */
  --primary: hsl(221 83% 53%);       /* --primary */
  --primary-ink: hsl(0 0% 100%);     /* --primary-foreground */
  --secondary: hsl(215 32% 92%);     /* --secondary / --muted / --accent */
  --muted: hsl(221 18% 41%);         /* --muted-foreground */
  --danger: hsl(350 64% 55%);        /* --destructive */
  --border: hsl(218 31% 86%);        /* --border / --input */
  --success: hsl(170 83% 33%);
  --warning: hsl(34 75% 43%);
  --cyan: hsl(194 88% 36%);          /* --brand */

  /* ---- full-value design-system tokens (copied verbatim) ---- */
  --surface-2: #f6f8fc;
  --surface-3: #eef2f8;
  --primary-soft: #e4ecfe;
  --cyan-soft: #d8f1f8;
  --violet: #7c5cff;
  --violet-soft: #ece6ff;
  --success-soft: #d4f3ec;
  --warning-soft: #fbecd4;
  --danger-soft: #fbe0e5;

  --bg-grad: radial-gradient(1200px 600px at 80% -10%, #e3ecff 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 10%, #e7f6fb 0%, transparent 55%);

  --shadow: 0 1px 2px rgba(16, 27, 46, 0.06), 0 8px 24px -12px rgba(16, 27, 46, 0.18);
  --shadow-lg: 0 24px 60px -28px rgba(16, 27, 46, 0.35);
  --glow: 0 0 0;
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.18);   /* globals.css --ring-glow */

  --rail: #0f1830;
  --rail-ink: #aeb9d4;
  --rail-ink-active: #ffffff;

  /* ---- DEMO-ONLY ink/border ramp (no real-app equivalent) ---- */
  --ink-2: #41506b;
  --faint: #93a0b8;
  --border-2: #e9eef6;

  /* demo chrome metrics */
  --demo-bar-h: 60px;
  --mobile-nav-h: 60px;
}

html.dark {
  color-scheme: dark;

  --bg: hsl(222 43% 5%);
  --ink: hsl(219 61% 95%);
  --surface: hsl(218 38% 9%);
  --primary: hsl(220 100% 62%);
  --primary-ink: hsl(0 0% 100%);
  --secondary: hsl(218 32% 13%);
  --muted: hsl(222 19% 57%);
  --danger: hsl(350 100% 68%);
  --border: hsl(218 38% 19%);
  --success: hsl(167 75% 44%);
  --warning: hsl(38 75% 55%);
  --cyan: hsl(191 70% 51%);

  --surface-2: #131d2e;
  --surface-3: #18233a;
  --primary-soft: rgba(63, 125, 255, 0.16);
  --cyan-soft: rgba(43, 182, 217, 0.14);
  --violet: #9a82ff;
  --violet-soft: rgba(154, 130, 255, 0.16);
  --success-soft: rgba(27, 195, 156, 0.14);
  --warning-soft: rgba(224, 161, 58, 0.14);
  --danger-soft: rgba(255, 94, 120, 0.14);

  --bg-grad: radial-gradient(1100px 560px at 82% -12%, rgba(37, 99, 235, 0.16) 0%, transparent 58%),
    radial-gradient(820px 520px at -8% 4%, rgba(11, 132, 170, 0.14) 0%, transparent 56%);

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 44px -24px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.85);
  --glow: 0 0 12px;
  --ring: 0 0 0 3px rgba(63, 125, 255, 0.28);

  --rail: #080c15;
  --rail-ink: #6b7a9c;
  --rail-ink-active: #ffffff;

  --ink-2: #b3c0db;
  --faint: #5b6885;
  --border-2: #18233a;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  font-feature-settings: 'rlig' 1, 'calt' 1;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.02em; }
button { font-family: inherit; }
::selection { background: var(--primary-soft); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
option { background-color: var(--surface); color: var(--ink); }

/* ==========================================================================
   APP SHELL — derived from packages/web/src/components/layout/app-shell.tsx
   Rail is desktop-only (lg = 1024px); the mobile bar replaces it below that.
   ========================================================================== */
/* The demo bar owns the bottom strip of the viewport, so the app gets the rest.
   Without this the rail's last item (Sign out) hides behind the bar. */
.app { display: flex; height: calc(100vh - var(--demo-bar-h)); overflow: hidden; }
.app-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.app-main { flex: 1; overflow-y: auto; padding-bottom: var(--mobile-nav-h); }
.content { max-width: 1280px; margin: 0 auto; padding: 24px 16px; }
@media (min-width: 640px) { .content { padding: 24px; } }
@media (min-width: 1024px) {
  .content { padding: 24px 32px; }
  .app-main { padding-bottom: 0; }
}

/* ---------- Slim global rail (rail-nav.tsx) ---------- */
.rail {
  width: 64px;
  flex-shrink: 0;
  background: var(--rail);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
@media (min-width: 1024px) { .rail { display: flex; } }
.rail .logo {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 12px;
  display: grid; place-items: center; overflow: hidden;
}
.rail .logo img { width: 100%; height: 100%; object-fit: contain; }
.rail .ri {
  width: 42px; height: 42px; border-radius: 12px; color: var(--rail-ink);
  display: grid; place-items: center; position: relative; transition: 0.15s;
  border: none; background: transparent; cursor: pointer; padding: 0;
}
.rail .ri:hover { background: rgba(255, 255, 255, 0.06); color: var(--rail-ink-active); }
.rail .ri.active { background: rgba(255, 255, 255, 0.1); color: var(--rail-ink-active); }
.rail .ri.active::before {
  content: ''; position: absolute; left: -14px; top: 10px; bottom: 10px;
  width: 3px; border-radius: 3px; background: var(--primary);
}
.rail .spacer { flex: 1; }
.rail .bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Onboarding N/8 pill — onboarding-rail-pill.tsx */
.rail .pill {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1; color: #fff;
  border: 1px solid var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  transition: 0.15s; cursor: pointer;
}
.rail .pill:hover { background: color-mix(in srgb, var(--primary) 25%, transparent); }

/* ---------- Mobile bottom nav (mobile-nav.tsx) ---------- */
.mobilenav {
  position: fixed; left: 0; right: 0; bottom: var(--demo-bar-h); z-index: 50;
  border-top: 1px solid var(--border); background: var(--bg);
}
@media (min-width: 1024px) { .mobilenav { display: none; } }
.mobilenav .strip { overflow-x: auto; }
.mobilenav .inner { display: flex; min-width: max-content; align-items: center; justify-content: space-around; }
.mobilenav .mi {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0;
  white-space: nowrap; padding: 8px 12px; font-size: 12px; color: var(--muted);
  border: none; background: transparent; cursor: pointer; transition: 0.15s;
}
.mobilenav .mi:hover { color: var(--ink); }
.mobilenav .mi.active { color: var(--primary); }

/* ---------- Topbar (top-bar.tsx) ---------- */
.topbar {
  height: 60px; display: flex; align-items: center; gap: 14px;
  padding: 0 16px; position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) { .topbar { padding: 0 24px; } }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.crumb .sep { color: var(--muted); display: grid; place-items: center; }
.crumb a, .crumb .up { color: var(--muted); font-weight: 500; transition: 0.15s; }
.crumb a:hover { color: var(--ink); }
.crumb .here { color: var(--ink); font-weight: 650; }
.crumb > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* DEMO-ONLY responsive affordance. The real crumb truncates every item equally, so a
   5-crumb project route at 375px degrades to "V… P C C. T" — unreadable, and it
   prepares a visitor for nothing. Below sm the demo shows the last two crumbs only.
   The underlying app has the same defect; it is flagged in the tracker, not fixed here. */
@media (max-width: 639px) {
  .crumb > *:nth-last-child(n + 4) { display: none; }
}
.topbar .grow { flex: 1; }
.cmdk {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; transition: 0.15s; font-size: 14px;
}
.cmdk:hover { border-color: var(--primary); }
.cmdk kbd {
  margin-left: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted);
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
@media (max-width: 639px) { .cmdk .lbl, .cmdk kbd { display: none; } }
.iconbtn {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  cursor: pointer; position: relative; transition: 0.15s; flex-shrink: 0;
}
.iconbtn:hover { color: var(--ink); border-color: var(--primary); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 650; font-size: 13px; cursor: pointer; transition: 0.15s; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  overflow: hidden;
}
.avatar:hover { background: var(--surface-3); color: var(--ink); }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.page-head .titles { min-width: 0; }
.page-head h1 { font-size: 24px; }
.page-head .sub { color: var(--muted); margin-top: 4px; font-size: 13.5px; }
.page-head .actions { margin-left: auto; display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 720px) { .page-head { flex-wrap: wrap; } .page-head .actions { margin-left: 0; } }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

/* ---------- Pill nav (ui/tab-bar.tsx + intent-nav.tsx — same rule) ----------
   TabBar and IntentNav render the identical boxed pill group; only IntentNav
   carries the trailing margin, so `.tabbar` is the base and `.intentnav` adds it. */
.tabbar, .intentnav {
  display: flex; gap: 4px; padding: 5px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 14px;
  width: fit-content; flex-wrap: wrap;
}
.intentnav { margin-bottom: 24px; }
.tabbar a, .intentnav a {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: 13.5px; transition: 0.15s; white-space: nowrap;
}
.tabbar a:hover, .intentnav a:hover { background: var(--surface); color: var(--ink); }
.tabbar a.active, .intentnav a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.tabbar a.active svg, .intentnav a.active svg { color: var(--primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: 10px; font-weight: 600; font-size: 13.5px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  transition: 0.15s; white-space: nowrap;
}
.btn:hover { border-color: var(--primary); }
.btn.primary {
  background: var(--primary); border-color: var(--primary); color: var(--primary-ink);
  box-shadow: 0 8px 20px -10px var(--primary);
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--border); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn.icon { padding: 0; width: 38px; justify-content: center; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 18px;
}
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head h2, .card-head h3 { font-size: 15px; font-weight: 650; }
.card-head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card-head .lead { color: var(--primary); display: grid; place-items: center; }
.card .ftr { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-2); display: flex; gap: 10px; }

.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.span-2 { grid-column: span 2; }
.split { display: grid; grid-template-columns: 1fr 340px; gap: var(--gap); align-items: start; }
.split.l { grid-template-columns: 320px 1fr; }
.split.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1180px) { .cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1080px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split.l, .split.even { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}

/* ---------- Badges / dots ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: 7px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em;
  background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--border);
}
.badge.b-run { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.badge.b-wait { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge.b-gate { background: var(--violet-soft); color: var(--violet); border-color: transparent; }
.badge.b-ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge.b-fail { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.b-cyan { background: var(--cyan-soft); color: var(--cyan); border-color: transparent; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.run { background: var(--primary); box-shadow: var(--glow) var(--primary); animation: dijji-pulse 1.8s infinite; }
.dot.wait { background: var(--warning); box-shadow: var(--glow) var(--warning); }
.dot.gate { background: var(--violet); box-shadow: var(--glow) var(--violet); animation: dijji-pulse 1.8s infinite; }
.dot.ok { background: var(--success); box-shadow: var(--glow) var(--success); }
.dot.fail { background: var(--danger); box-shadow: var(--glow) var(--danger); }
.dot.idle { background: var(--faint); }
@keyframes dijji-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.mono { font-family: var(--mono); font-size: 0.92em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 8px;
}

/* ---------- Empty state (common/empty-state.tsx) ----------
   Round muted disc, 32px icon, py-12, gap-4 — NOT the rounded square the
   prototype used. Title is 14px semibold, description 14px muted. */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 48px 20px; text-align: center;
}
.empty .ic {
  border-radius: 50%; background: var(--secondary); color: var(--muted);
  padding: 16px; display: grid; place-items: center;
}
.empty h2 { font-size: 14px; font-weight: 650; }
.empty p { margin: 4px 0 0; color: var(--muted); font-size: 14px; max-width: 52ch; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.field .hint { color: var(--muted); font-size: 12px; margin-top: 7px; line-height: 1.5; }
.input {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13.5px; outline: none;
}
.input:focus { border-color: var(--primary); box-shadow: var(--ring); }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; }

/* ---------- Gate card ---------- */
.gatecard { border: 1px solid var(--violet); background: var(--violet-soft); border-radius: 14px; padding: 16px; }
.gatecard.merge { border-color: var(--primary); background: var(--primary-soft); }
.gatecard.deploy { border-color: var(--cyan); background: var(--cyan-soft); }
.gatecard .g-top { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.gatecard .g-d { color: var(--ink-2); font-size: 13px; margin: 8px 0 14px; }
.gatecard .g-act { display: flex; gap: 10px; }

/* ---------- Table ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.tbl td { padding: 13px 14px; border-bottom: 1px solid var(--border-2); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--surface-2); }

/* ---------- Divided rows (members / team members / pending invites) ----------
   `divide-y` + `py-3 first:pt-0 last:pb-0` — the divider sits BETWEEN rows only. */
.rowlist { display: flex; flex-direction: column; }
.rowitem {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--border);
}
.rowitem:first-child { border-top: none; padding-top: 0; }
.rowitem:last-child { padding-bottom: 0; }
.rowitem .body { flex: 1; min-width: 0; }
.rowitem .t { font-weight: 500; font-size: 14px; }
.rowitem .d { color: var(--muted); font-size: 12px; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.rowitem .right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; }
.rowavatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--surface-3); color: var(--muted); font-weight: 500; font-size: 14px; overflow: hidden;
}

/* ---------- Card padding — pages set it explicitly, so the demo does too ----------
   organization: p-6 (24) · members: p-5 (20) · teams: p-[18px] (18) */
.card.p20 { padding: 20px; }
.card.p24 { padding: 24px; }
/* The count line under a CardHead ("4 members in your organization."). */
.card .count { margin: -8px 0 16px; color: var(--muted); font-size: 14px; }
/* Card intro paragraph (organization page sits it directly under the head). */
.card .intro { margin: 0; color: var(--muted); font-size: 14px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack.tight { gap: 20px; }

/* ---------- Help icon (ui/help-tooltip.tsx) ---------- */
.helpicon {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  border: none; background: transparent; padding: 0; border-radius: 50%;
  color: var(--muted); opacity: 0.7; cursor: help; transition: 0.15s;
}
.helpicon:hover { opacity: 1; }

/* ---------- Ghost icon button (Button variant=ghost size=icon, h-8 w-8) ---------- */
.ghosticon {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--ink); cursor: pointer; transition: 0.15s;
  flex-shrink: 0;
}
.ghosticon:hover { background: var(--secondary); }
.ghosticon.destructive { color: var(--danger); }

/* ---------- Row dropdown menu (members ⋯) ---------- */
.menu {
  position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 10; width: 176px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  padding: 4px 0; box-shadow: var(--shadow-lg); text-align: left;
}
.menu button {
  display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 12px;
  border: none; background: transparent; color: var(--ink); font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
}
.menu button:hover { background: var(--surface-2); }
.menu button.destructive { color: var(--danger); }

/* ---------- Selectable team row (settings/team) ---------- */
.selrow {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-2); cursor: pointer; transition: 0.15s; text-align: left;
}
.selrow:hover { border-color: var(--primary); }
.selrow.selected { border-color: var(--primary); background: var(--primary-soft); }
.selrow .t { font-size: 14px; font-weight: 500; }
.selrow .d { margin-top: 2px; font-size: 12px; color: var(--muted); }
.selrow .right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- Audit panel, collapsed (common/entity-audit-panel.tsx) ---------- */
.auditpanel { border: 1px solid var(--border); border-radius: var(--r-sm); }
.auditpanel > button {
  display: flex; width: 100%; align-items: center; gap: 8px; padding: 12px 16px;
  border: none; background: transparent; color: var(--ink); font: inherit;
  font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; border-radius: var(--r-sm);
}
.auditpanel > button:hover { background: color-mix(in srgb, var(--secondary) 50%, transparent); }
.auditpanel > button svg { color: var(--muted); }

/* ---------- Dialog (ui/dialog.tsx) ----------
   Scenes that ARE a dialog render the screen underneath plus this on top. */
.dlg-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); }
.dlg {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 101;
  width: 100%; max-width: 512px; display: grid; gap: 16px; padding: 24px;
  border: 1px solid var(--border); background: var(--bg); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}
.dlg .dlg-close {
  position: absolute; right: 16px; top: 16px; border: none; background: transparent;
  color: var(--ink); opacity: 0.7; cursor: pointer; border-radius: 4px; padding: 2px;
}
.dlg .dlg-close:hover { opacity: 1; }
.dlg h2 { font-size: 18px; font-weight: 650; line-height: 1; }
.dlg .dlg-desc { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.dlg .dlg-body { display: flex; flex-direction: column; gap: 16px; padding: 8px 0; }
.dlg .dlg-ftr { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) { .dlg .dlg-ftr { flex-direction: column-reverse; } }

/* Dialog-sized field (h-9, transparent fill) — distinct from the page `.input`. */
.field.sm > label { font-size: 14px; margin-bottom: 8px; }
.input.sm, select.input.sm {
  height: 36px; background: transparent; border-radius: var(--r-sm); font-size: 14px;
}

/* ---------- Onboarding checklist (components/onboarding/onboarding-checklist.tsx) ---------- */
.checklist { max-width: 672px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.checklist .cl-eyebrow {
  font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--primary);
}
.checklist h1 { margin-top: 4px; font-size: 24px; font-weight: 700; }
.checklist .cl-sub { margin-top: 4px; font-size: 14px; color: var(--muted); }
.checklist .cl-progress {
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); padding: 16px;
}
.checklist .cl-progress .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.checklist .cl-progress b { font-size: 14px; }
.checklist .cl-progress .note { font-size: 12px; color: var(--muted); }
.checklist .cl-bar { height: 8px; border-radius: 999px; background: var(--secondary); overflow: hidden; }
.checklist .cl-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.checklist .cl-steps { display: flex; flex-direction: column; gap: 12px; }
.checklist .cl-step {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 16px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); padding: 16px;
}
.checklist .cl-step.active { border-color: var(--primary); box-shadow: var(--shadow); }
.checklist .cl-step.locked { opacity: 0.5; }
.checklist .cl-step.done { opacity: 0.9; }
.checklist .node {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted);
  flex-shrink: 0;
}
.checklist .cl-step.done .node { border-color: var(--success); background: var(--success); color: #fff; }
.checklist .cl-step.active .node { border-color: var(--primary); background: var(--primary); color: #fff; }
.checklist .cl-t {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 650;
}
.checklist .cl-t > svg { color: var(--primary); }
.checklist .cl-d { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.checklist .cl-why {
  margin-top: 10px; border-left: 2px solid var(--primary); padding-left: 12px;
  font-size: 12.5px; color: var(--muted);
}
.checklist .minitag {
  border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.checklist .minitag.auto { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.checklist .minitag.fin { background: var(--primary-soft);
  background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.checklist .cl-side { display: flex; align-items: center; }
.checklist .cl-note { font-size: 11.5px; color: var(--muted); }
.checklist .cl-done { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--success); }
.checklist .cl-foot {
  display: flex; align-items: center; gap: 10px; border-radius: var(--r-md);
  border: 1px dashed var(--border); padding: 16px; font-size: 12.8px; color: var(--muted);
}
.checklist .cl-foot svg { color: var(--primary); flex-shrink: 0; }

/* overview-stat-row.tsx wrapper: `grid-cols-2 md:grid-cols-4`; the inbox overrides
   the desktop track count to 3 for its three real counts. */
.statrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) {
  .statrow { grid-template-columns: repeat(4, 1fr); }
  .statrow.c3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Stat tile (project/overview-stat-row.tsx) ----------
   rounded-md + p-4, label 12.5px, metric 28px bold, caption 12px muted.
   The caption is descriptive, never a fabricated trend. */
.stat {
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  padding: 16px; box-shadow: var(--shadow);
}
.stat .k { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.stat .v { margin-top: 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.stat .v.success { color: var(--success); }
.stat .sub { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }

/* ---------- Alert strips (StatusAlert / inline warn + success rows) ---------- */
.alert {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border-radius: var(--r-sm); border: 1px solid transparent; font-size: 14px;
}
.alert svg { flex-shrink: 0; margin-top: 1px; }
.alert.warn { background: var(--warning-soft); color: var(--warning); }
.alert.ok { background: var(--success-soft); color: var(--success); }
.alert.info { border-color: var(--primary); background: var(--primary-soft); }
.alert.info svg { color: var(--primary); }
.alert .grow { flex: 1; min-width: 0; color: var(--ink); }

/* ---------- Integration card (integrations/page.tsx GitHostCard / JiraCard) ---------- */
.intcard .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.intcard .idn { display: flex; align-items: center; gap: 12px; min-width: 0; }
.intcard .tile {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink);
}
.intcard .nm { font-size: 16px; font-weight: 650; line-height: 1.2; }
.intcard .st { font-size: 12px; color: var(--muted); margin-top: 2px; }
.intcard .none { padding: 16px 0; text-align: center; font-size: 14px; color: var(--muted); }
/* An account / site row inside the card. */
.intbox {
  border-radius: var(--r-sm); border: 1px solid var(--border); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.intbox .meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.intbox .meta span { display: inline-flex; align-items: center; gap: 4px; }
.kvrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.kvrow dt, .kvrow .k { color: var(--muted); }
.kvrow dd, .kvrow .v { margin: 0; color: var(--ink); }
.kvgrid { display: grid; gap: 12px 32px; }
@media (min-width: 640px) { .kvgrid { grid-template-columns: 1fr 1fr; } }

/* Dashed teaser tile (add integration / new project). */
.addtile {
  display: grid; place-items: center; min-height: 140px; border-radius: var(--r-sm);
  border: 1px dashed var(--border); color: var(--muted); text-align: center; transition: 0.15s;
}
a.addtile:hover { border-color: var(--primary); color: var(--ink); }
.addtile .t { margin-top: 8px; font-size: 14px; font-weight: 650; }
.addtile .d { font-size: 12px; color: var(--muted); }

/* ---------- Project chrome (projects/[id]/layout.tsx) ---------- */
.projhead { display: flex; align-items: center; gap: 12px; }
.projhead h1 { font-size: 24px; font-weight: 700; }
.projhead .hdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--success); }
.projsub { margin-top: 4px; font-size: 14px; color: var(--muted); }
.subnavrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- Form field (FormField) ---------- */
.ff { display: flex; flex-direction: column; gap: 6px; }
.ff > label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.ff .req { color: var(--danger); }
.ff .note { font-size: 12px; color: var(--muted); }
.ff .input, .ff select.input, .ff textarea.input {
  height: 36px; background: var(--bg); border-radius: var(--r-sm); font-size: 14px;
}
.ff textarea.input { height: auto; padding: 8px 12px; }
.chiplist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chiplist li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg);
  padding: 6px 12px; font-size: 14px; list-style: none;
}
.repogrid { display: flex; flex-direction: column; gap: 6px; }
.repogrid .r { display: flex; align-items: center; gap: 8px; }
.repogrid .r > .ref { width: 160px; flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.repogrid .r > .in { position: relative; flex: 1; }
.repogrid .r > .in svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.repogrid .r > .in .input { height: 36px; padding-left: 34px; background: var(--bg); font-size: 14px; }

/* ---------- Pipeline stage cards (pipeline/page.tsx StageCard) ---------- */
.flowrow { display: flex; align-items: center; padding: 16px 8px; min-width: max-content; }
.stagecard {
  width: 230px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0;
  border-radius: 14px; border: 2px solid var(--border); background: var(--surface-2);
  padding: 14px; cursor: pointer; transition: 0.15s;
}
.stagecard:hover { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.stagecard.selected { border-color: var(--primary); background: var(--surface); box-shadow: var(--ring); }
.stagecard .n {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink); font-size: 10px; font-weight: 700;
}
.stagecard .top { display: flex; align-items: center; gap: 8px; }
.stagecard .nm { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stagecard .top .badge { margin-left: auto; }
.stagecard .br { margin-top: 8px; display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.stagecard hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.stagecard .chk { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.stagecard .chks { display: flex; flex-direction: column; gap: 6px; }
.chk.pass { color: var(--success); } .chk.wait { color: var(--warning); }
.chk.gate { color: var(--violet); } .chk.idle { color: var(--faint); }
.connector { width: 32px; height: 2px; background: var(--border); flex-shrink: 0; }
.addstage {
  width: 80px; height: 80px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--r-sm); border: 2px dashed var(--border); background: transparent;
  color: var(--muted); cursor: pointer;
}
.addstage:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- Runtime image builder (see prototype/custom-image.html) ---------- */
.basechip {
  display: flex; align-items: flex-start; gap: 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2); padding: 14px;
}
.basechip .mark {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-family: var(--mono); font-weight: 700;
}
.locktag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 11px; color: var(--muted);
}
.plainline {
  display: flex; gap: 9px; align-items: flex-start; background: var(--cyan-soft);
  border-left: 3px solid var(--cyan); border-radius: var(--r-sm); padding: 10px 12px;
  font-size: 12.5px; color: var(--ink-2); margin-top: 12px;
}
.plainline svg { color: var(--cyan); flex-shrink: 0; margin-top: 1px; }
.toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.toolcard {
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2);
  padding: 12px; cursor: pointer; transition: 0.15s;
}
.toolcard.on { border-color: var(--primary); background: var(--primary-soft); }
.toolcard .t { font-size: 13.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.toolcard .v { margin-top: 4px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.meter { height: 8px; border-radius: 999px; background: var(--secondary); overflow: hidden; margin-top: 8px; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--cyan)); }
.sumline { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.sumline .v { font-weight: 650; }
.aptbox {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2); padding: 8px;
}
.apt {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 3px 8px;
  background: var(--surface); border: 1px solid var(--border); font-family: var(--mono); font-size: 11.5px;
}

/* ---------- Toolbar row (projects list) ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; }
.toolbar .searchwrap { position: relative; flex: 1; }
.toolbar .searchwrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.toolbar .searchwrap .input { height: 36px; padding-left: 34px; background: var(--bg); font-size: 14px; }
.toolbar select.input { height: 36px; width: auto; background: var(--bg); font-size: 12px; padding: 0 10px; }
@media (max-width: 720px) { .toolbar { flex-wrap: wrap; } .toolbar .searchwrap { flex-basis: 100%; } }

/* ---------- Blueprint (projects/[id]/blueprint) ---------- */
/* Status chips double as filters: All / filled / assumptions / questions. */
.bpchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bpchip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  border: 1px solid transparent; padding: 2px 10px; font-size: 12px; font-weight: 650;
  cursor: pointer; transition: 0.15s;
}
.bpchip.all { border-color: var(--border); color: var(--muted); background: transparent; }
.bpchip.all.on { border-color: var(--ink); background: var(--secondary); color: var(--ink); }
.bpchip.filled { background: var(--success-soft); color: var(--success); }
.bpchip.assumption { background: var(--warning-soft); color: var(--warning); }
.bpchip.question { background: var(--primary-soft); color: var(--primary); }
.bpchip.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
/* Underline doc tabs — NOT the pill nav; the blueprint uses a border-b-2 row. */
.doctabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); }
.doctabs nav { display: flex; flex-wrap: wrap; gap: 4px; }
.doctabs nav a {
  display: flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent;
  padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--muted); transition: 0.15s;
}
.doctabs nav a:hover { border-bottom-color: var(--border); color: var(--ink); }
.doctabs nav a.active { border-bottom-color: var(--primary); color: var(--ink); }
.doctabs .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 6px; }
.bpfield { border-radius: var(--r-sm); border: 1px solid var(--border); padding: 16px; }
.bpfield .fh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bpfield .fname { font-size: 14px; font-weight: 500; }
.bpfield .plain { font-size: 14px; }
.bpfield .tech { margin-top: 12px; }
.bpfield .tech > button {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent;
  font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; padding: 0;
}
.bpfield .answer { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.bpfield .answer > p { margin: 0; font-size: 12px; font-weight: 500; }
.bpfield textarea.input { font-size: 14px; background: var(--bg); }
.assumerow { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.assumerow .confirmed { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--success); }
.assumerow .linkbtn {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent;
  font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; padding: 0;
}
.confirmbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 12px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--secondary) 30%, transparent); padding: 8px 12px;
  font-size: 12px; font-weight: 500;
}
.syncbanner {
  display: flex; align-items: center; gap: 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border); padding: 12px; font-size: 14px;
}
.syncbanner.ok { border-color: var(--success); background: var(--success-soft); }
.syncbanner.wait { border-color: var(--warning); background: var(--warning-soft); }
.syncbanner.idle { color: var(--muted); }
.syncbanner .grow { flex: 1; }

/* ---------- Task board (components/tasks/task-board-view.tsx) ---------- */
.board5 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .board5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .board5 { grid-template-columns: repeat(5, 1fr); } }
.bcol {
  display: flex; flex-direction: column; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2); padding: 8px;
}
.bcol .ch { display: flex; align-items: center; gap: 8px; padding: 0 4px; margin-bottom: 8px; }
.bcol .ch .lbl { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
.bcol .ch .n { border-radius: 999px; background: var(--surface-3); padding: 2px 6px; font-size: 10px; font-weight: 500; color: var(--muted); }
.bcol .ch .all { margin-left: auto; border: none; background: transparent; font: inherit; font-size: 10px; font-weight: 500; color: var(--muted); cursor: pointer; }
.bcol .none { padding: 24px 4px; text-align: center; font-size: 12px; color: var(--muted); }
.bcard {
  display: block; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); padding: 8px 12px; margin-bottom: 8px; transition: 0.15s;
}
.bcard:hover { background: var(--surface-2); border-color: var(--primary); }
.bcard.attention { border-left: 2px solid var(--violet); }
.bcard .t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.bcard .m { margin-top: 4px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bcard .m .when { margin-left: auto; flex-shrink: 0; }

/* ---------- Task detail info cards + gate banner ---------- */
.infocard { display: flex; align-items: center; gap: 12px; padding: 16px; }
.infocard .tile {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--secondary); color: var(--muted);
}
.infocard .k { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.gatebanner {
  display: flex; flex-direction: column; gap: 12px; border-radius: var(--r-lg);
  border: 1px solid var(--violet); background: var(--violet-soft); padding: 16px;
}
@media (min-width: 640px) { .gatebanner { flex-direction: row; align-items: center; justify-content: space-between; } }
.gatebanner .lead { display: flex; align-items: flex-start; gap: 12px; }
.gatebanner .lead > svg { flex-shrink: 0; margin-top: 2px; color: var(--violet); }
.gatebanner .t { font-size: 14px; font-weight: 500; }
.gatebanner .d { margin-top: 2px; font-size: 14px; color: var(--muted); }

/* ---------- Run detail ---------- */
.runsplit { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .runsplit { grid-template-columns: minmax(0, 1fr) 340px; } }
.plangate { border-radius: var(--r-lg); border: 1px solid var(--violet); background: var(--violet-soft); padding: 16px; }
.plangate.approved { border-color: var(--success); background: var(--success-soft); }
.plangate.rejected { border-color: var(--danger); background: var(--danger-soft); }
.plangate .gh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plangate .gh .t { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; }
.plangate .note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.planbox { margin-top: 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); padding: 12px; }
.planbox .ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.planbox .body { max-height: 480px; overflow: auto; font-size: 14px; }
.planbox .body h2 { font-size: 14px; font-weight: 650; margin: 14px 0 6px; }
.planbox .body h2:first-child { margin-top: 0; }
.planbox .body p { margin: 0 0 8px; color: var(--ink-2); }
.planbox .body ol, .planbox .body ul { margin: 0 0 8px; padding-left: 20px; color: var(--ink-2); }
.planbox .body li { margin-bottom: 4px; }
.planbox .body code { font-family: var(--mono); background: var(--surface-2); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.rejectbox {
  margin-top: 12px; display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); padding: 12px;
}
.steprow { border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); padding: 12px; }
.steprow + .steprow { margin-top: 8px; }
.steprow .sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.steprow .sn {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--secondary); font-family: var(--mono); font-size: 12px; font-weight: 500;
}
.steprow code {
  border-radius: 4px; background: var(--secondary); padding: 2px 8px;
  font-family: var(--mono); font-size: 12px;
}
.steprow .sum { margin-top: 8px; font-size: 14px; color: var(--ink); }
.steprow .toks { margin-top: 8px; display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.steprow .ans {
  margin-top: 8px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: var(--primary-soft); padding: 10px;
}
.steprow .ans .h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--primary); }
.costbig { font-size: 26px; font-weight: 700; }
.costdl { margin-top: 12px; display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 13px; }
.costdl dt { color: var(--muted); }
.costdl dd { margin: 0; font-family: var(--mono); }
.prrows { display: flex; flex-direction: column; gap: 6px; }
.prhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.prhead .done { color: var(--success); }
.prhead .owed { color: var(--warning); }
.prrow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); padding: 6px 10px;
}
.prrow.pending { border-style: dashed; background: transparent; }
.prrow .repo { font-family: var(--mono); font-size: 12px; }
.prrow .primary { font-size: 10px; color: var(--muted); }
.prrow .right { display: flex; align-items: center; gap: 8px; }
.prrow .prlink { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--primary); }

/* ---------- Requests thread (decomposed work items) ---------- */
.issuerow { border-radius: var(--r-sm); border: 1px solid var(--border); }
.issuerow > .ih {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 16px; text-align: left; border: none; background: transparent;
  color: inherit; font: inherit; cursor: pointer;
}
.issuerow .ih .l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.issuerow .ih .ttl { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pillmeta {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  border: 1px solid var(--border); padding: 2px 8px; font-size: 12px; font-weight: 500; color: var(--muted);
}
.pillmeta.n { background: color-mix(in srgb, var(--secondary) 50%, transparent); }
.issuerow .ib { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- Filter chips (operations) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: none; border-radius: var(--r-sm); padding: 6px 12px; font: inherit; font-size: 12px;
  font-weight: 500; cursor: pointer; background: var(--surface-3); color: var(--muted); transition: 0.15s;
}
.chip:hover { color: var(--ink); }
.chip.active { background: var(--primary); color: var(--primary-ink); }

/* ---------- Operations summary strip ---------- */
.sumstrip { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.sumstrip .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.sumstrip .blocks { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sumstrip .blocks { grid-template-columns: repeat(3, 1fr); } }
.sumstrip .blk { padding: 16px; border-top: 1px solid var(--border); }
@media (min-width: 640px) { .sumstrip .blk { border-top: none; border-left: 1px solid var(--border); } .sumstrip .blk:first-child { border-left: none; } }
.sumstrip .blk .blkt { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.sumstrip .stats { display: flex; gap: 24px; flex-wrap: wrap; }
.sumstrip .st .k { font-size: 11px; color: var(--muted); }
.sumstrip .st .v { font-size: 18px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sumstrip .now { display: flex; align-items: center; gap: 8px; }
.sumstrip .now .big { font-size: 18px; font-weight: 650; }
.sumstrip .now .sub { font-size: 11px; color: var(--muted); }

/* ---------- Operations feed ---------- */
.opsfeed { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.opsrow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); transition: 0.12s; }
.opsrow:first-child { border-top: none; }
.opsrow:hover { background: var(--secondary); }
.opsrow .body { flex: 1; min-width: 0; }
.opsrow .l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.opsrow .l1 .t { font-size: 14px; font-weight: 500; }
.opsrow .l2 { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.opsrow .src { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Alarm-plan table ---------- */
.alarmtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.alarmtbl th {
  text-align: left; padding: 10px 12px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); font-weight: 700; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.alarmtbl td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.alarmtbl tr:last-child td { border-bottom: none; }
.alarmtbl .plain { font-weight: 600; font-size: 13.5px; }
.alarmtbl .tech { color: var(--muted); font-size: 11.5px; margin-top: 3px; font-family: var(--mono); }
.alarmtbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.checkbox { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

/* ---------- Prose (postmortem) ---------- */
.prose { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.prose h2 { font-size: 16px; margin: 20px 0 8px; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 10px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.prose strong { color: var(--ink); font-weight: 650; }

/* ---------- Segmented range control (reports / usage) ---------- */
.seg {
  display: inline-flex; align-items: center; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); padding: 2px; box-shadow: var(--shadow);
}
.seg button {
  border: none; background: transparent; color: var(--muted); font: inherit; font-size: 14px;
  font-weight: 500; padding: 4px 12px; border-radius: 4px; cursor: pointer;
}
.seg button.active { background: var(--primary); color: var(--primary-ink); box-shadow: var(--shadow); }

/* ---------- Bars (metrics) ---------- */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars .bar > i { width: 100%; max-width: 32px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--primary), var(--cyan)); display: block; }
.bars .bar small { color: var(--muted); font-size: 11px; }

/* ---------- Needs-you inbox rows (activated /inbox) ---------- */
.needsitem {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); margin-bottom: 8px; transition: 0.15s;
}
.needsitem:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.needsitem .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.needsitem .ic.gate { background: var(--violet-soft); color: var(--violet); }
.needsitem .ic.merge { background: var(--primary-soft); color: var(--primary); }
.needsitem .ic.question { background: var(--warning-soft); color: var(--warning); }
.needsitem .ic.fail { background: var(--danger-soft); color: var(--danger); }
.needsitem .body { flex: 1; min-width: 0; }
.needsitem .t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; flex-wrap: wrap; }
.needsitem .d { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.needsitem .when { color: var(--faint); font-size: 12px; white-space: nowrap; flex-shrink: 0; }

/* ---------- Jira board mock (external tool — deliberately NOT DIJJI chrome) ---------- */
.jira { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.jira .jh { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); padding: 12px 16px; }
.jira .jh .mark { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: #2563eb; color: #fff; font-weight: 700; font-size: 13px; }
.jira .jcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
@media (max-width: 860px) { .jira .jcols { grid-template-columns: 1fr; } }
.jira .jcol { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px; }
.jira .jcol h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
.jira .jcard { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-bottom: 8px; }
.jira .jcard .t { font-size: 13px; }
.jira .jcard .m { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jira .jkey { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.jlabel {
  display: inline-flex; align-items: center; border-radius: 4px; padding: 1px 7px;
  background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 650;
}

/* ---------- Auth surfaces ((auth)/login) ---------- */
.authcard { width: 100%; max-width: 384px; display: flex; flex-direction: column; gap: 24px; padding: 0 16px; }
.authcard .brand { text-align: center; }
.authcard .brand h1 { font-size: 30px; font-weight: 700; }
.authcard .brand h1 span { color: var(--primary); }
.authcard .brand p { margin-top: 8px; font-size: 14px; color: var(--muted); }
.authcard .card { padding: 24px; box-shadow: var(--shadow-lg); }
.authcard form { display: flex; flex-direction: column; gap: 16px; }
.authcard h2 { font-size: 18px; font-weight: 650; }
.authcard .lede { margin-top: 4px; font-size: 14px; color: var(--muted); }
.authcard .otp {
  height: 48px; text-align: center; font-family: var(--mono); font-size: 24px; letter-spacing: 0.5em;
}
.authcard .altrow {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 16px; font-size: 12px;
}
.authcard .altrow button {
  border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; color: var(--muted);
}
.authcard .altrow button.accent { color: var(--primary); }
.authcard .foot { text-align: center; font-size: 14px; color: var(--muted); }
.authcard .foot a { color: var(--primary); font-weight: 500; }
.authcard .legal { text-align: center; font-size: 12px; color: var(--muted); }
/* Turnstile widget, drawn in its resolved state (it is a real part of the screen). */
.turnstile {
  display: flex; align-items: center; gap: 10px; height: 65px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 13px; color: var(--ink-2);
}
.turnstile .ok { color: var(--success); display: grid; place-items: center; }
.turnstile .brandmark { margin-left: auto; text-align: right; font-size: 9px; color: var(--faint); line-height: 1.3; }

/* ---------- Utility ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb0 { margin-bottom: 0; } .gapsm { gap: 6px; }
hr.sep { border: none; border-top: 1px solid var(--border-2); margin: 16px 0; }
.scrollx { overflow-x: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   DEMO CHROME — everything below is the storyteller, not the product.
   Prefixed .demo- so a scene never collides with it.
   ========================================================================== */

/* Full-bleed scenes (login, OTP, invite accept) render without the app shell. */
.demo-bare {
  min-height: calc(100vh - var(--demo-bar-h)); display: grid; place-items: center;
  padding: 40px 20px;
}

/* ---------- Narrator card ---------- */
/* Speaks in the app's own violet gate-card language (see .gatecard). */
.demo-narrator {
  position: fixed; right: 20px; bottom: calc(var(--demo-bar-h) + 20px); z-index: 80;
  width: 380px; max-width: calc(100vw - 40px);
  border: 1px solid var(--violet); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow-lg);
  /* The violet tint is composited over the SURFACE, not over whatever is behind it.
     `--violet-soft` is a 16%-alpha fill in dark mode, so leaning on backdrop-filter for
     legibility means the card is only readable where the blur composites — it does not
     in every engine. An opaque tint reads the same everywhere. */
  background: var(--surface);
  background: color-mix(in srgb, var(--violet) 14%, var(--surface));
  animation: demo-rise 0.28s ease both;
}
@media (max-width: 1023px) {
  .demo-narrator { bottom: calc(var(--demo-bar-h) + var(--mobile-nav-h) + 12px); right: 12px; left: 12px; width: auto; }
  /* A floating card on a 375px screen eats half the viewport, so cap it and let it
     scroll; and reserve room at the end of the scene so the narrator can never
     permanently hide the last block of content. */
  .demo-narrator { max-height: 42vh; overflow-y: auto; }
  body.narrator-open .app-main { padding-bottom: calc(var(--mobile-nav-h) + 46vh); }
  body.narrator-open .demo-bare { padding-bottom: 46vh; }
}
.demo-narrator .n-top { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 13.5px; }
.demo-narrator .n-top .n-ic { color: var(--violet); display: grid; place-items: center; }
.demo-narrator .n-close {
  margin-left: auto; border: none; background: transparent; color: var(--muted);
  cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 6px;
}
.demo-narrator .n-close:hover { color: var(--ink); background: color-mix(in srgb, var(--violet) 12%, transparent); }
.demo-narrator .n-body { color: var(--ink-2); font-size: 13px; margin-top: 7px; }
.demo-narrator .n-why {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--violet) 28%, transparent);
  color: var(--muted); font-size: 12px;
}
@keyframes demo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Re-open handle once the narrator is dismissed. */
.demo-narrator-peek {
  position: fixed; right: 20px; bottom: calc(var(--demo-bar-h) + 20px); z-index: 80;
  height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px;
  border-radius: 10px; border: 1px solid var(--violet);
  background: var(--surface);
  background: color-mix(in srgb, var(--violet) 14%, var(--surface));
  color: var(--violet); font-size: 12.5px; font-weight: 650; cursor: pointer;
  box-shadow: var(--shadow);
}
@media (max-width: 1023px) {
  .demo-narrator-peek { bottom: calc(var(--demo-bar-h) + var(--mobile-nav-h) + 12px); right: 12px; }
}

/* ---------- Bottom bar ---------- */
.demo-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: var(--demo-bar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}
@media (min-width: 640px) { .demo-bar { padding: 0 24px; } }
.demo-bar .b-act { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.demo-bar .b-title { font-weight: 650; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-bar .b-count { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.demo-bar .grow { flex: 1; }
@media (max-width: 720px) { .demo-bar .b-act, .demo-bar .b-title { display: none; } }

/* Act-granular progress: acts are the visible unit (ten chapters), scenes are the
   ticks inside them (still individually clickable). The gap between acts is what
   makes the story read as chaptered rather than as a 48-step queue. */
.demo-progress { display: flex; gap: 9px; align-items: center; flex: 1; min-width: 80px; max-width: 460px; }
.demo-progress .act { display: flex; gap: 2px; align-items: center; min-width: 8px; }
.demo-progress .tick {
  flex: 1; height: 4px; min-width: 3px; border-radius: 3px; background: var(--surface-3);
  border: none; padding: 0; cursor: pointer; transition: 0.15s;
}
.demo-progress .tick.seen { background: color-mix(in srgb, var(--primary) 45%, var(--surface-3)); }
.demo-progress .tick.now { background: var(--primary); box-shadow: var(--glow) var(--primary); }
/* The act being lived in is lifted, so the eye finds "where am I" without reading. */
.demo-progress .act.current .tick { height: 7px; }
.demo-progress .act.current .tick:not(.now):not(.seen) { background: color-mix(in srgb, var(--primary) 18%, var(--surface-3)); }
.demo-progress .tick:hover { transform: scaleY(1.8); }

/* Free-roam state: the story is still there, the visitor just stepped off it. */
.demo-bar.roaming { border-top-color: var(--violet); background: var(--violet-soft);
  background: color-mix(in srgb, var(--violet-soft) 92%, var(--surface)); }
.demo-bar .b-roam { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.demo-bar .b-roam .r-ic { color: var(--violet); display: grid; place-items: center; flex-shrink: 0; }

/* ---------- Micro-hint toast (controls outside the story) ---------- */
.demo-hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--demo-bar-h) + 16px); z-index: 120;
  max-width: min(460px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: 12px; font-size: 12.5px; color: var(--ink-2);
  border: 1px solid var(--cyan); box-shadow: var(--shadow-lg);
  background: var(--surface);
  background: color-mix(in srgb, var(--cyan) 14%, var(--surface));
  animation: demo-rise 0.2s ease both;
}
.demo-hint .h-ic { color: var(--cyan); flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; }

/* ---------- Placeholder for unbuilt scenes ---------- */
.demo-todo {
  border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--surface-2);
  padding: 40px 24px; text-align: center; color: var(--muted);
}
.demo-todo h3 { font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.demo-todo .mono { display: inline-block; margin-top: 10px; color: var(--ink-2); }

/* ---------- Command palette (command-palette.tsx) ---------- */
.cmd-overlay {
  position: fixed; inset: 0; background: rgba(7, 10, 18, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center; padding-top: 14vh; z-index: 150;
}
.cmd-overlay.open { display: flex; }
.cmd-box {
  width: 560px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.cmd-box input {
  width: 100%; border: none; outline: none; background: transparent; color: var(--ink);
  font-size: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); font-family: var(--font);
}
.cmd-list { padding: 8px; max-height: 340px; overflow: auto; }
.cmd-list .ci {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  cursor: pointer; color: var(--ink-2); font-size: 13.5px; width: 100%; text-align: left;
  border: none; background: transparent;
}
.cmd-list .ci:hover, .cmd-list .ci.sel { background: var(--surface-2); color: var(--ink); }
.cmd-list .ci .hint { margin-left: auto; font-size: 11px; color: var(--faint); font-family: var(--mono); }
.cmd-list .ci .ci-act { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.cmd-list .grouphdr {
  padding: 10px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--faint); font-weight: 700;
}
.cmd-list .none { padding: 18px 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- Scene transition ---------- */
/* #stage is its own stacking context (z-index:0 on a positioned box), so no
   z-index a scene uses — a dialog overlay at 100, a dropdown at 10 — can ever
   paint over the demo chrome. The storyteller is not part of the app. */
#stage { position: relative; z-index: 0; }
.demo-stage { animation: demo-fade 0.18s ease both; }
@keyframes demo-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .demo-stage, .demo-narrator, .demo-hint { animation: none; }
  .dot { animation: none !important; }
}

/* ---------- Narrative interstitials (cover · act intros · closing) ---------- */
/* Demo chrome, not product UI: centered chapter cards on the bare surface. They
   carry no narrator — the screen itself is the explanation. */
.chapter {
  width: 100%; max-width: 620px; padding: 0 20px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 20px; text-align: left;
  animation: demo-rise 0.32s ease both;
}
.chapter.cover, .chapter.closing { align-items: center; text-align: center; }
@media (prefers-reduced-motion: reduce) { .chapter { animation: none; } }

.chapter-brand h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.chapter-brand h1 span { color: var(--primary); }
.chapter-brand p { margin-top: 6px; font-size: 14px; color: var(--muted); }

.chapter-eyebrow {
  font-size: 12.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--primary);
}
.chapter-eyebrow.accent { color: var(--violet); }

.chapter-title { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.16; }
.chapter.cover .chapter-title { font-size: 23px; font-weight: 650; color: var(--muted); }
.chapter-lede { font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 54ch; }
.chapter-lede b { color: var(--ink); font-weight: 650; }

.chapter-points { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 460px; }
.chapter.cover .chapter-points, .chapter.closing .chapter-points { margin-inline: auto; }
.chapter-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; text-align: left; }
.chapter-points li svg { color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.chapter-points li b { color: var(--ink); font-weight: 650; }

.chapter-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 4px; }
.chapter.cover .chapter-cta, .chapter.closing .chapter-cta { align-items: center; }
.chapter-go { height: 46px; padding: 0 22px; font-size: 15px; }
.chapter-note { font-size: 12.5px; color: var(--muted); }

.chapter-offer {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 550;
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent);
}
.chapter-offer svg { color: var(--violet); flex-shrink: 0; }

.chapter-restart {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--muted);
}
.chapter-restart:hover { color: var(--primary); }