/* =============================================================================
   AI Platform Console — styles
   =============================================================================
   v0: design tokens + Console shell + cartridge tiles + login modal,
   all inlined. SDK extraction (move tokens + auth modal + shell components
   into sdk/v1/css) is a follow-up. For now, Console is self-sufficient
   so the deployment story stays clean.
   ============================================================================= */

:root {
  /* ── Brand colors (PayCargo) ──────────────────────────────────── */
  --pc-blue:          #0094d9;
  --pc-dark-blue:     #006797;
  --pc-sidebar-bg:    #1e5077;
  --pc-orange:        #f69246;
  --pc-accent-orange: rgb(248, 147, 52);
  --pc-green:         #57c436;
  --pc-light-green:   #81d4a5;
  --pc-yellow:        #f9c562;
  --pc-red:           #fe4a49;

  /* ── Neutrals ─────────────────────────────────────────────────── */
  --pc-black:       #181818;
  --pc-obsidian:    #474747;
  --pc-grey:        #a0a0a0;
  --pc-light-grey:  #cdcdcd;
  --pc-white:       #ffffff;
  --pc-cloud-white: #f1faff;

  /* ── Surfaces ────────────────────────────────────────────────── */
  --pc-body-bg:             #fafcfd;
  --pc-card-bg:             #ffffff;
  --pc-table-header-bg:     #f5f6f8;
  --pc-input-bg:            rgba(238, 238, 238, 0.6);
  --pc-info-blue-bg:        #dff0f8;
  --pc-accent-orange-light: #feefe1;

  /* ── Sidebar ─────────────────────────────────────────────────── */
  --pc-sidebar-icon:   rgba(255, 255, 255, 0.7);
  --pc-sidebar-text:   rgba(255, 255, 255, 0.85);
  --pc-sidebar-hover:  rgba(255, 255, 255, 0.12);
  --pc-sidebar-active: rgba(255, 255, 255, 0.18);

  /* ── Text ────────────────────────────────────────────────────── */
  --pc-text-primary:       rgba(0, 0, 0, 0.87);
  --pc-text-secondary:     rgb(80, 84, 88);
  --pc-text-muted:         rgb(121, 121, 121);
  --pc-text-placeholder:   rgb(158, 158, 158);
  --pc-link:               #0094d9;
  --pc-error-red:          rgb(233, 1, 1);
  --pc-status-orange-text: rgb(214, 106, 2);

  /* ── Typography ──────────────────────────────────────────────── */
  --pc-font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pc-font-size-base: 16px;
  --pc-font-size-sm:   14px;
  --pc-font-size-xs:   12px;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --pc-sidebar-width: 260px;
  --pc-topbar-height: 58px;

  /* ── Borders ─────────────────────────────────────────────────── */
  --pc-border-radius:    4px;
  --pc-border-radius-sm: 3px;
  --pc-rule:             #d8dadc;
  --pc-rule-soft:        #ececec;
}

/* ── Reset / base ──────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* The `hidden` attribute must always win — a class that sets `display` (e.g.
   .setup-state { display:flex }) otherwise beats the low-specificity UA
   [hidden] rule and the element stays laid out despite el.hidden = true. This
   is what let the Integrations pane cover a launched cartridge. Global !important
   makes hidden authoritative for every element, class or not. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: var(--pc-font-family);
  font-size: var(--pc-font-size-sm);
  color: var(--pc-text-primary);
  background: var(--pc-body-bg);
  line-height: 1.5;
}

/* ── Console shell layout ──────────────────────────────────────── */
.console-shell {
  display: grid;
  grid-template-columns: var(--pc-sidebar-width) 1fr;
  transition: grid-template-columns 0.18s ease;
  grid-template-rows: var(--pc-topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height: 100vh;
  overflow: hidden;
}
.console-shell[hidden] { display: none; }

/* ── Sidebar ───────────────────────────────────────────────────── */
.console-sidebar {
  grid-area: sidebar;
  background: var(--pc-sidebar-bg);
  color: var(--pc-sidebar-text);
  display: flex;
  flex-direction: column;
  /* Brand pins top, Setup + footer pin bottom; only the cartridges list
     (its own overflow region below) scrolls. */
  overflow: hidden;
}
.sidebar-brand {
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-brand img {
  height: 20px;
  width: auto;
  display: block;
  opacity: 0.95;
}
.sidebar-brand .brand-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.sidebar-brand .brand-title {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
}
.sidebar-brand .brand-sub {
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
}

.console-sidebar nav {
  padding: 8px 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;   /* lets .cartridges-list shrink and scroll instead of overflowing */
}
.cartridges-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.cartridges-list::-webkit-scrollbar { width: 6px; }
.cartridges-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
.nav-section-label {
  padding: 14px 20px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pc-sidebar-icon);
  opacity: 0.85;
}

/* Cartridge tiles in the sidebar — bigger than nav-items, more presence */
.cartridges-list { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.cartridges-loading {
  padding: 12px 16px;
  font-size: 11.5px;
  color: var(--pc-sidebar-icon);
  font-style: italic;
}
.cartridge-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  font-family: inherit;
  color: var(--pc-sidebar-text);
  transition: background 0.15s, border-color 0.15s;
}
.cartridge-tile:hover {
  background: var(--pc-sidebar-hover);
  border-color: rgba(255,255,255,0.12);
}
.cartridge-tile.is-active {
  background: var(--pc-sidebar-active);
  border-left: 3px solid var(--pc-orange);
  padding-left: 9px;
}
.cartridge-tile.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.cartridge-tile.is-disabled:hover { background: transparent; border-color: transparent; }

.cartridge-tile-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
/* Operator-built SVG icons (obs Access screen) — stroke:currentColor, so
   they pick up the tile's white exactly like the Font Awesome glyphs. */
.cartridge-tile-icon svg { width: 20px; height: 20px; }
.cartridge-tile-icon.is-blue   { background: rgba(0, 148, 217, 0.32); }
.cartridge-tile-icon.is-purple { background: rgba(124, 58, 237, 0.32); }
.cartridge-tile-icon.is-green  { background: rgba(34, 197, 94, 0.32); }
.cartridge-tile-icon.is-orange { background: rgba(249, 115, 22, 0.32); }

.cartridge-tile-body { flex: 1; min-width: 0; }
.cartridge-tile-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: -0.1px;
}
.cartridge-tile-desc {
  font-size: 11px;
  color: var(--pc-sidebar-icon);
  line-height: 1.4;
}
.cartridge-tile-badge {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  margin-top: 5px;
  display: inline-block;
}
.cartridge-tile-badge.is-coming-soon {
  background: var(--pc-accent-orange);
  color: #fff;
}
.cartridge-tile-badge.is-live {
  background: #16a34a;
  color: #fff;
}
.cartridge-tile-badge.is-external i { margin-right: 4px; }

.sidebar-footer {
  margin-top: auto;
  padding: 16px 20px;
  font-size: 10.5px;
  color: var(--pc-sidebar-icon);
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── Topbar ────────────────────────────────────────────────────── */
.console-topbar {
  grid-area: topbar;
  background: var(--pc-card-bg);
  border-bottom: 1px solid var(--pc-rule);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}
.console-topbar .topbar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pc-text-primary);
}
.console-topbar .topbar-subtitle {
  font-size: 12px;
  color: var(--pc-text-muted);
  margin-left: 4px;
}
.console-topbar .topbar-spacer { flex: 1; }
.console-topbar .env-pill {
  background: var(--pc-info-blue-bg);
  color: var(--pc-dark-blue);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 12px;
}
.console-topbar .user-block {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--pc-text-secondary);
}
.console-topbar .user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--pc-sidebar-bg);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.console-topbar .signout-btn {
  background: transparent;
  border: 1px solid var(--pc-rule);
  color: var(--pc-text-secondary);
  padding: 6px 12px;
  border-radius: var(--pc-border-radius-sm);
  font-family: var(--pc-font-family);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.console-topbar .signout-btn:hover {
  background: var(--pc-cloud-white);
  border-color: var(--pc-blue);
  color: var(--pc-blue);
}

.console-topbar .feedback-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--pc-cloud-white); border: 1px solid var(--pc-blue); color: var(--pc-dark-blue);
  padding: 6px 12px; border-radius: var(--pc-border-radius-sm);
  font-family: var(--pc-font-family); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.console-topbar .feedback-btn:hover { background: var(--pc-blue); color: #fff; }

/* ── Main pane ─────────────────────────────────────────────────── */
.console-main {
  grid-area: main;
  overflow: hidden;
  background: var(--pc-body-bg);
  position: relative;
}

/* Welcome / launcher state */
.welcome-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.welcome-state[hidden] { display: none; }
.welcome-card {
  max-width: 640px;
  text-align: center;
  padding: 56px 48px;
  background: #fff;
  border: 1px solid var(--pc-rule-soft);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}
.welcome-icon {
  width: 76px; height: 76px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pc-blue) 0%, var(--pc-dark-blue) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 24px;
  box-shadow: 0 10px 24px rgba(0, 148, 217, 0.28);
}
.welcome-card h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--pc-text-primary);
  margin-bottom: 12px;
}
.welcome-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--pc-text-secondary);
  margin-bottom: 24px;
}
.welcome-meta {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--pc-text-muted);
}
.welcome-meta i {
  color: var(--pc-blue);
  margin-right: 6px;
}

/* Cartridge iframe — fills the main pane when active */
.cartridge-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--pc-card-bg);
}
.cartridge-frame[hidden] { display: none; }

/* ── Splash ────────────────────────────────────────────────────── */
.splash {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--pc-sidebar-bg) 0%, var(--pc-dark-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  color: #fff;
}
.splash-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 36px 48px;
  text-align: center;
  backdrop-filter: blur(10px);
  min-width: 380px;
}
.splash-logo img {
  width: 180px;
  margin: 0 auto 8px;
  display: block;
}
.splash-sub {
  font-size: 13px;
  opacity: 0.8;
  margin: 12px 0 24px;
}
.splash-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: pc-spin 1s linear infinite;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }
.splash-msg {
  font-size: 12px;
  opacity: 0.85;
  font-family: 'Menlo', monospace;
}

/* ── Login modal (copy of obs-app's modal — same proven flow) ──── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(30, 80, 119, 0.85) 0%,
    rgba(0, 103, 151, 0.85) 100%);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.login-overlay[hidden] { display: none; }

.login-modal {
  background: #fff;
  border-radius: 14px;
  padding: 32px 36px 28px;
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--pc-rule-soft);
}
.login-brand-mark {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--pc-blue);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-brand-title { font-size: 15px; font-weight: 700; color: var(--pc-text-primary); }
.login-brand-sub {
  font-size: 10.5px;
  color: var(--pc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-top: 2px;
}

.login-modal h2 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--pc-text-primary);
}
.login-desc {
  font-size: 12.5px;
  color: var(--pc-text-secondary);
  margin-bottom: 18px;
}

.login-modal label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pc-text-secondary);
  font-weight: 700;
  margin: 14px 0 6px;
}
.login-modal input[type="email"],
.login-modal input[type="password"],
.login-modal input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  font-size: 14px;
  border: 1px solid var(--pc-light-grey);
  border-radius: 6px;
  font-family: var(--pc-font-family);
  color: var(--pc-text-primary);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-modal input:focus {
  outline: none;
  border-color: var(--pc-blue);
  box-shadow: 0 0 0 3px rgba(0, 148, 217, 0.18);
}

.totp-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.totp-row input {
  text-align: center;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 22px;
  font-weight: 700;
  padding: 12px 0;
  height: 56px;
  color: var(--pc-blue);
}

.login-hint {
  font-size: 11.5px;
  color: var(--pc-text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.mfa-qr-block {
  display: flex;
  justify-content: center;
  padding: 18px 0 6px;
}
.mfa-qr {
  width: 188px;
  height: 188px;
  background: #fff;
  padding: 6px;
  border: 1px solid var(--pc-rule);
  border-radius: 6px;
}
.mfa-qr svg { width: 100%; height: 100%; display: block; }

.mfa-secret-block {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mfa-secret-block code {
  flex: 1;
  background: var(--pc-input-bg);
  padding: 10px 12px;
  border-radius: 6px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--pc-text-primary);
  word-break: break-all;
}
.mfa-secret-copy {
  background: var(--pc-sidebar-bg);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--pc-font-family);
  white-space: nowrap;
}
.mfa-secret-copy:hover { background: var(--pc-dark-blue); }

.login-error {
  margin-top: 14px;
  padding: 10px 12px;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.login-submit {
  width: 100%;
  margin-top: 22px;
  padding: 13px;
  background: var(--pc-accent-orange);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--pc-font-family);
  font-size: 14px;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(248, 147, 52, 0.3);
}
.login-submit:hover {
  background: var(--pc-orange);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(248, 147, 52, 0.4);
}
.login-submit:disabled {
  background: var(--pc-light-grey);
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.login-sso-link {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--pc-text-muted);
}
.login-sso-link span {
  color: var(--pc-blue);
  cursor: pointer;
  font-weight: 600;
  margin-left: 4px;
}
.login-sso-link span:hover { text-decoration: underline; }
.login-sso-ms { margin-right: 6px; font-size: 13px; vertical-align: -1px; }

.login-note {
  margin-top: 18px;
  padding: 10px 12px;
  background: var(--pc-info-blue-bg);
  border-radius: 6px;
  font-size: 11px;
  color: var(--pc-dark-blue);
  line-height: 1.55;
}

/* ================================================================
   Setup pane — admin-only integrations wizard (Step 6.p PR 3)
   ================================================================ */

.nav-section-setup {
  margin-top: 12px;
  padding-top: 16px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.setup-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.setup-nav-item:hover { background: rgba(255, 255, 255, 0.08); }
.setup-nav-item.is-active {
  background: rgba(0, 148, 217, 0.20);
  border-color: rgba(0, 148, 217, 0.55);
  color: #fff;
}
.setup-nav-item i {
  color: rgba(255, 255, 255, 0.60);
  font-size: 14px;
  width: 16px;
  text-align: center;
}
.setup-nav-item.is-active i { color: var(--pc-blue); }

.setup-state {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  overflow-y: auto;
  height: 100%;
}

.setup-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--pc-black);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.setup-header p {
  font-size: 14px;
  color: var(--pc-text-secondary);
  margin: 0;
  max-width: 720px;
}

.setup-handoff-card {
  background: var(--pc-info-blue-bg);
  border: 1px solid rgba(0, 148, 217, 0.35);
  border-left: 4px solid var(--pc-blue);
  border-radius: 6px;
  padding: 16px 20px;
  max-width: 900px;
}
.setup-handoff-hd {
  font-size: 12px;
  font-weight: 700;
  color: var(--pc-dark-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.setup-handoff-hd i { margin-right: 6px; color: var(--pc-blue); }
.setup-handoff-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(0, 148, 217, 0.20);
}
.setup-handoff-row:first-of-type { border-top: none; padding-top: 0; }
.setup-handoff-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-dark-blue);
  min-width: 160px;
  flex-shrink: 0;
}
.setup-handoff-val {
  flex: 1;
  min-width: 0;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--pc-black);
  background: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 148, 217, 0.30);
  overflow-wrap: anywhere;
}
.setup-copy-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--pc-blue);
  color: var(--pc-blue);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.setup-copy-btn:hover { background: var(--pc-info-blue-bg); }
.setup-copy-btn.is-copied {
  background: #e8f9e0;
  border-color: #2e7d32;
  color: #2e7d32;
}
.setup-copy-btn i { margin-right: 4px; }

.setup-vendors-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
}
.setup-loading, .setup-error {
  padding: 16px;
  font-size: 14px;
  color: var(--pc-text-secondary);
  text-align: center;
}
.setup-error { background: #fde8e8; color: #c62828; border-radius: 6px; }
.setup-error i, .setup-loading i { margin-right: 6px; }

.setup-vendor-card {
  background: #fff;
  border: 1px solid var(--pc-light-grey);
  border-radius: 6px;
  padding: 20px 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.setup-vendor-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.setup-vendor-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 148, 217, 0.15);
  color: var(--pc-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.setup-vendor-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--pc-black);
  margin-bottom: 2px;
}
.setup-vendor-desc {
  font-size: 13px;
  color: var(--pc-text-secondary);
  max-width: 520px;
}

.setup-status {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.setup-status i { margin-right: 4px; }
.setup-status.is-ok      { background: #e8f9e0; color: #2e7d32; }
.setup-status.is-pending { background: #fef3e0; color: #c66d1a; }

.setup-vendor-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pc-obsidian, #474747);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.setup-vendor-form input[type=url] {
  width: 100%;
  padding: 10px 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--pc-black);
  background: #fafcfd;
  border: 1px solid var(--pc-light-grey);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.setup-vendor-form input[type=url]:focus {
  border-color: var(--pc-blue);
  box-shadow: 0 0 0 3px rgba(0, 148, 217, 0.15);
}

.setup-form-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--pc-text-muted);
  line-height: 1.5;
}

.setup-vendor-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.setup-btn-primary, .setup-btn-secondary {
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.setup-btn-primary {
  background: var(--pc-blue);
  color: #fff;
  border: 1px solid var(--pc-blue);
}
.setup-btn-primary:hover { background: var(--pc-dark-blue); border-color: var(--pc-dark-blue); }
.setup-btn-primary:disabled { background: var(--pc-grey); border-color: var(--pc-grey); cursor: wait; }
.setup-btn-primary i { margin-right: 5px; }

.setup-btn-secondary {
  background: #fff;
  color: #c62828;
  border: 1px solid #f5cccc;
}
.setup-btn-secondary:hover { background: #fde8e8; border-color: #c62828; }
.setup-btn-secondary:disabled { color: var(--pc-grey); border-color: var(--pc-light-grey); cursor: wait; }
.setup-btn-secondary i { margin-right: 5px; }

.setup-vendor-msg {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  border-radius: 4px;
}
.setup-vendor-msg.is-ok  { background: #e8f9e0; color: #2e7d32; border: 1px solid #a4d497; }
.setup-vendor-msg.is-err { background: #fde8e8; color: #c62828; border: 1px solid #f5cccc; }

.setup-vendor-meta {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--pc-text-muted);
}

/* ================================================================
   Setup pane — inline vendor instructions (collapsible)
   ================================================================ */

.setup-vendor-doc {
  margin: 0 0 18px;
  border: 1px solid var(--pc-light-grey);
  border-radius: 4px;
  background: #fafcfd;
}

.setup-vendor-doc[open] {
  background: #fff;
  border-color: rgba(0, 148, 217, 0.45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.setup-vendor-doc > summary {
  cursor: pointer;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-dark-blue);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
  user-select: none;
}
.setup-vendor-doc > summary::-webkit-details-marker { display: none; }
.setup-vendor-doc > summary::marker { content: ""; }
.setup-vendor-doc > summary:hover { background: rgba(0, 148, 217, 0.06); }

.setup-vendor-doc > summary::after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  margin-left: auto;
  font-size: 11px;
  color: var(--pc-text-muted);
  transition: transform 0.15s;
}
.setup-vendor-doc[open] > summary::after { transform: rotate(180deg); }

.setup-vendor-doc > summary > i {
  color: var(--pc-blue);
  font-size: 14px;
}

.setup-vendor-doc-body {
  padding: 6px 20px 18px;
  border-top: 1px solid var(--pc-light-grey);
  font-size: 13.5px;
  color: var(--pc-text-secondary);
  line-height: 1.6;
}

.setup-vendor-doc-body h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pc-black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 18px 0 8px;
}
.setup-vendor-doc-body h4:first-child { margin-top: 12px; }

.setup-vendor-doc-body p { margin: 0 0 10px; }
.setup-vendor-doc-body p strong { color: var(--pc-black); font-weight: 600; }

.setup-vendor-doc-body code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--pc-table-header-bg, #f5f6f8);
  color: var(--pc-dark-blue);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--pc-light-grey);
}

.setup-vendor-doc-body .setup-doc-code {
  display: block;
  padding: 8px 12px;
  overflow-wrap: anywhere;
  font-size: 11.5px;
}

.setup-doc-list {
  counter-reset: docstep;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.setup-doc-list li {
  counter-increment: docstep;
  position: relative;
  padding: 8px 0 8px 30px;
  border-top: 1px solid var(--pc-light-grey);
}
.setup-doc-list li:first-child { border-top: none; }
.setup-doc-list li::before {
  content: counter(docstep);
  position: absolute;
  left: 0; top: 9px;
  width: 22px; height: 22px;
  background: var(--pc-info-blue-bg);
  color: var(--pc-dark-blue);
  font-weight: 700;
  font-size: 11px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.setup-doc-list li strong { color: var(--pc-black); }

.setup-claims-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 14px;
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--pc-light-grey);
  border-radius: 4px;
  overflow: hidden;
}
.setup-claims-table th {
  background: var(--pc-blue);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  text-align: left;
}
.setup-claims-table td {
  padding: 8px 10px;
  border-top: 1px solid var(--pc-light-grey);
  vertical-align: top;
}
.setup-claims-table td code {
  font-size: 11px;
  overflow-wrap: anywhere;
  background: transparent;
  border: none;
  padding: 0;
}

/* ── Integrations pane: provider card grid ───────────────────────────── */
.integ-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; max-width:1100px; }
.integ-card { background:#fff; border:1px solid var(--pc-rule-soft); border-radius:12px; padding:18px;
  box-shadow:0 4px 14px rgba(15,23,42,0.05); display:flex; flex-direction:column; }
.integ-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.integ-icon { width:42px; height:42px; border-radius:10px; color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:19px; flex:none; }
.integ-name { font-size:15px; font-weight:700; color:var(--pc-text-primary); }
.integ-sub { font-size:12px; color:var(--pc-text-muted); margin-top:1px; }
.integ-badge { margin-left:auto; font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; white-space:nowrap; }
.integ-badge.is-on { background:#e8f9e0; color:#2e7d32; }
.integ-badge.is-off { background:var(--pc-table-header-bg); color:var(--pc-text-muted); }
.integ-desc { font-size:13px; color:var(--pc-text-secondary); line-height:1.5; margin:0 0 10px; min-height:38px; }
.integ-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.integ-tag { font-size:11px; font-weight:600; background:var(--pc-table-header-bg); color:var(--pc-text-secondary);
  border-radius:5px; padding:3px 8px; }
.integ-keyline { font-size:12px; color:var(--pc-text-muted); margin-bottom:12px; }
.integ-keyline i { margin-right:6px; }
.integ-foot { border-top:1px solid var(--pc-rule-soft); padding-top:12px; margin-top:auto;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.integ-connect { background:var(--pc-blue); color:#fff; border:none; border-radius:6px; padding:8px 16px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.integ-connect:hover { background:var(--pc-dark-blue); }
.integ-disconnect { background:none; border:none; color:var(--pc-red); font-size:13px; font-weight:600;
  cursor:pointer; font-family:inherit; }
.integ-keyrow { display:flex; gap:8px; width:100%; }
.integ-keyrow input { flex:1; border:1px solid var(--pc-light-grey); border-radius:6px; padding:8px 10px;
  font-size:12.5px; font-family:inherit; }
.integ-keyhint { font-size:11.5px; color:var(--pc-text-muted); width:100%; }
.integ-keyhint a { color:var(--pc-blue); }

/* ── Grounding docs disclosure on an Integrations card ─────────────────── */
.integ-cms { width:100%; border-top:1px solid var(--pc-rule-soft); margin-top:12px; padding-top:10px; }
.integ-cms-sum {
  list-style:none; cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--pc-text-secondary); padding:2px 0;
}
.integ-cms-sum::-webkit-details-marker { display:none; }
.integ-cms-sum::before { content:'▸ '; color:var(--pc-text-muted); }
.integ-cms[open] .integ-cms-sum::before { content:'▾ '; }
.integ-cms-usage {
  font-size:11.5px; color:var(--pc-dark-blue); background:var(--pc-info-blue-bg);
  border-radius:6px; padding:7px 10px; margin:8px 0; line-height:1.4;
}
.integ-cms-doc { margin-top:10px; }
.integ-cms-lbl { font-size:12px; font-weight:600; color:var(--pc-text-secondary); margin-bottom:4px; }
.integ-cms-lbl span { font-weight:400; color:var(--pc-text-muted); }
.integ-cms-doc textarea {
  width:100%; border:1px solid var(--pc-light-grey); border-radius:6px; padding:8px 10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px;
  line-height:1.45; resize:vertical; min-height:96px;
}
.integ-cms-row { display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.integ-cms-btn {
  font-family:inherit; font-size:12px; font-weight:600; cursor:pointer;
  border:1px solid var(--pc-light-grey); background:#fff; color:var(--pc-text-secondary);
  border-radius:6px; padding:5px 10px;
}
.integ-cms-btn.is-primary { background:var(--pc-blue); border-color:var(--pc-blue); color:#fff; }
.integ-cms-btn:hover { filter:brightness(0.97); }
.integ-cms-status { font-size:11.5px; font-weight:600; color:var(--pc-text-secondary); }

/* ── Collapsible sidebar — reclaim width inside cartridges ─────────────── */
/* The rail slides (grid columns are animatable) and its contents fade a
   beat faster, so nothing visibly squashes mid-flight. */
.console-shell { transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.console-shell .console-sidebar { transition: opacity 0.18s ease; }
.console-shell.nav-collapsed { grid-template-columns: 0 1fr; }
.console-shell.nav-collapsed .console-sidebar { overflow: hidden; padding: 0; border: none; opacity: 0; }

/* Toggle: two stacked FA glyphs morph with the rail state — angles-left
   ("tuck the rail away") while open, bars ("menu lives here") while
   collapsed. The outgoing glyph spins out as it fades, the incoming one
   spins in, so the button always tells the truth about what a click does.
   Hover nudges toward the rail; press squashes. */
.nav-toggle {
  background: none; border: none; cursor: pointer; color: var(--pc-text-secondary);
  font-size: 15px; padding: 6px 10px; margin-right: 4px; border-radius: 6px; font-family: inherit;
}
.nav-toggle-stack {
  position: relative; display: inline-grid; place-items: center;
  width: 1.25em; height: 1em;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-toggle-stack i {
  grid-area: 1 / 1;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}
.nav-toggle-open  { opacity: 0; transform: rotate(90deg)  scale(0.5); }
.nav-toggle-close { opacity: 1; transform: rotate(0)      scale(1); }
.console-shell.nav-collapsed .nav-toggle-close { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.console-shell.nav-collapsed .nav-toggle-open  { opacity: 1; transform: rotate(0)      scale(1); }
.nav-toggle:hover { background: var(--pc-table-header-bg); color: var(--pc-blue); }
.nav-toggle:hover .nav-toggle-stack { transform: translateX(-2px); }
.nav-toggle:active .nav-toggle-stack { transform: scale(0.82); }
.console-shell.nav-collapsed .nav-toggle:hover .nav-toggle-stack { transform: translateX(2px); }
.console-shell.nav-collapsed .nav-toggle:active .nav-toggle-stack { transform: scale(0.82); }

@media (prefers-reduced-motion: reduce) {
  .console-shell,
  .console-shell .console-sidebar,
  .nav-toggle-stack,
  .nav-toggle-stack i { transition: none; }
}

/* ── Solo-cartridge mode ────────────────────────────────────────────────── */
/* User-directed 2026-08-13: when a user has exactly ONE launchable cartridge,
   the Console sidebar is dead weight (picking from a list of one) and the
   whole rail — sidebar AND the nav-toggle button — is hidden. No escape
   hatch: the sidebar is fully gone. The main pane takes the full width.
   Wins against both the default open state AND a persisted nav-collapsed
   preference, so a solo user never sees the rail. */
.console-shell.is-solo-cartridge { grid-template-columns: 0 1fr; }
.console-shell.is-solo-cartridge .console-sidebar { display: none; }
.console-shell.is-solo-cartridge .nav-toggle { display: none; }

/* ─── Content CMS pane ─────────────────────────────────────────────────── */
.content-cms {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  min-height: 60vh;
}
.content-cms-tree {
  background: var(--pc-card-bg);
  border: 1px solid var(--pc-light-grey);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 76vh;
  overflow-y: auto;
}
.content-cms-picker { display: flex; flex-direction: column; gap: 6px; }
.content-cms-picker label { font-size: 12px; font-weight: 600; color: var(--pc-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.content-cms-picker select {
  padding: 8px 10px; font-family: inherit; font-size: 14px;
  border: 1px solid var(--pc-light-grey); border-radius: 4px;
  background: var(--pc-card-bg);
}
.content-cms-actions { display: flex; gap: 6px; }
.content-cms-actions .setup-btn-secondary { padding: 6px 10px; font-size: 13px; }
.content-series-list { display: flex; flex-direction: column; gap: 2px; }
.content-scope-hd {
  padding: 8px 2px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--pc-text-muted);
}
.content-series-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.content-series-row:hover { background: var(--pc-cloud-white); border-color: var(--pc-light-grey); }
.content-series-row.is-active { background: var(--pc-info-blue-bg); border-color: var(--pc-blue); }
.content-series-name { font-size: 14px; font-weight: 600; }
.content-series-count { font-size: 11px; color: var(--pc-text-muted); }
.content-badge {
  font-size: 11px; padding: 2px 6px; border-radius: 3px;
  background: var(--pc-info-blue-bg); color: var(--pc-dark-blue);
  font-weight: 600;
}
.content-badge.is-active { background: #e8f9e0; color: #2e7d32; }
.content-badge.is-none   { background: var(--pc-input-bg); color: var(--pc-text-muted); }

.content-cms-editor {
  background: var(--pc-card-bg);
  border: 1px solid var(--pc-light-grey);
  border-radius: 6px;
  padding: 20px;
  min-height: 60vh;
}
.content-empty, .content-empty-small {
  color: var(--pc-text-muted);
  text-align: center;
  padding: 40px 20px;
}
.content-empty i { font-size: 32px; color: var(--pc-light-grey); display: block; margin-bottom: 12px; }
.content-empty-small { padding: 20px 12px; font-size: 13px; }

.content-editor-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.content-editor-crumbs { font-size: 13px; color: var(--pc-text-muted); }
.content-editor-crumbs b { color: var(--pc-text-primary); font-weight: 700; }
.content-editor-sub { font-size: 12px; color: var(--pc-text-muted); margin-top: 2px; }
.content-editor-h3 { margin: 20px 0 8px; font-size: 14px; font-weight: 700; }

.content-editor-form { display: flex; flex-direction: column; gap: 4px; }
.content-editor-form label { font-size: 12px; font-weight: 600; color: var(--pc-text-secondary); margin-top: 8px; }
.content-editor-form input[type="text"],
.content-editor-form textarea {
  padding: 10px 12px; font-family: inherit; font-size: 14px;
  border: 1px solid var(--pc-light-grey); border-radius: 4px;
  background: var(--pc-card-bg);
}
.content-editor-form textarea {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.45; resize: vertical; min-height: 240px;
}
.content-editor-actions {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.content-editor-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pc-text-secondary);
}
.content-editor-msg { padding: 8px 12px; border-radius: 4px; font-size: 13px; margin-top: 8px; }
.content-editor-msg.is-ok { background: #e8f9e0; color: #2e7d32; }
.content-editor-msg.is-error { background: #fde8e8; color: #c62828; }

.content-versions-wrap { overflow-x: auto; }
.content-versions-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.content-versions-table th, .content-versions-table td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--pc-light-grey);
}
.content-versions-table th {
  background: var(--pc-table-header-bg); color: var(--pc-text-secondary);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.content-versions-table tr:last-child td { border-bottom: 0; }
.content-versions-table .setup-btn-secondary { padding: 4px 8px; font-size: 12px; margin-right: 4px; }

@media (max-width: 900px) {
  .content-cms { grid-template-columns: 1fr; }
  .content-cms-tree { max-height: none; }
}

/* Safety-scanner finding panel — rendered inline in the CMS editor's message
 * slot when the upload path returns 409 (warn) or 422 (block). Row severity
 * reads at a glance; snippet is monospace so line + column stay readable. */
.content-editor-msg.is-safety { display: block; padding: 12px 14px; }
.content-editor-msg.is-safety.is-block { background: #fde8e8; color: #7a1f1f; border: 1px solid #f2b8b8; }
.content-editor-msg.is-safety.is-warn  { background: #fff4e0; color: #6b4b12; border: 1px solid #f2d69a; }
.safety-hd { font-weight: 700; margin-bottom: 8px; font-size: 13px; }
.safety-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.safety-list li {
  display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: start;
  background: rgba(255,255,255,0.5); padding: 8px 10px; border-radius: 4px;
}
.safety-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 6px; border-radius: 3px; text-align: center;
}
.safety-badge.is-block { background: #c62828; color: #fff; }
.safety-badge.is-warn  { background: #d69800; color: #fff; }
.safety-body { min-width: 0; }
.safety-code { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.8; margin-bottom: 2px; }
.safety-rule { font-size: 12px; margin-bottom: 4px; }
.safety-snippet {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.35; margin: 0; padding: 6px 8px;
  background: rgba(0,0,0,0.05); border-radius: 3px; white-space: pre-wrap;
  overflow-x: auto; max-height: 80px;
}
.safety-ack-btn { margin-top: 10px; }

/* Usage line — where this series lands at runtime (server-computed from the
 * shared USAGE_RULES registry). Rendered under the editor crumbs. */
.content-usage {
  background: var(--pc-info-blue-bg); color: var(--pc-dark-blue);
  padding: 8px 12px; border-radius: 4px; font-size: 12px;
  margin: 0 0 12px; line-height: 1.45;
}
.content-usage i { margin-right: 6px; }

/* Read-only CMS view for non-admins — clear that this is admin-curated
 * content the current user is browsing, not something they can edit. */
.content-readonly-note {
  background: var(--pc-info-blue-bg); color: var(--pc-dark-blue);
  padding: 8px 12px; border-radius: 4px; font-size: 12px; margin-bottom: 12px;
}
.content-readonly-note i { margin-right: 6px; }
.content-readonly-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--pc-text-secondary); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.content-readonly-body {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5;
  background: var(--pc-input-bg); border: 1px solid var(--pc-light-grey);
  border-radius: 4px; padding: 12px 14px;
  white-space: pre-wrap; word-wrap: break-word;
  max-height: 480px; overflow-y: auto; margin: 0;
}

/* ─── MCP machine tokens pane ─────────────────────────────────────────────── */
.mcp-mint { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 8px 0 20px; }
.mcp-mint-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mcp-mint-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; flex: 1; min-width: 180px; }
.mcp-mint-row select, .mcp-mint-row input { height: 40px; padding: 0 10px; border: 1px solid var(--pc-light-grey); border-radius: var(--pc-border-radius-sm); background: var(--pc-card-bg); font-family: inherit; }
.mcp-bounds { border: 1px solid var(--pc-light-grey); border-radius: var(--pc-border-radius-sm); padding: 8px 12px; display: flex; gap: 18px; flex-wrap: wrap; }
.mcp-bounds legend { font-size: 12px; color: var(--pc-text-secondary); padding: 0 4px; }
.mcp-bounds label { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.mcp-secret { background: var(--pc-accent-orange-light); border: 1px solid var(--pc-accent-orange); border-radius: var(--pc-border-radius); padding: 12px 14px; margin: 0 0 20px; max-width: 640px; }
.mcp-secret-hd { font-size: 13px; font-weight: 600; color: var(--pc-status-orange-text); margin-bottom: 8px; }
.mcp-secret code { display: block; word-break: break-all; background: var(--pc-card-bg); padding: 8px 10px; border-radius: var(--pc-border-radius-sm); font-size: 12.5px; margin-bottom: 8px; }
.mcp-list-hd { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.mcp-list-hd h2 { font-size: 15px; margin: 0; }
.mcp-token-list { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.mcp-token { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--pc-table-header-bg); border-radius: var(--pc-border-radius); background: var(--pc-card-bg); }
.mcp-token.is-revoked { opacity: 0.6; }
.mcp-token-lbl { font-size: 14px; font-weight: 500; display: flex; gap: 8px; align-items: center; }
.mcp-token-sub { font-size: 12px; color: var(--pc-text-muted); margin: 2px 0 4px; }
.mcp-token-sub code { font-size: 11.5px; }
.mcp-token-bounds { display: flex; gap: 5px; }
.mcp-bound { font-size: 11px; background: var(--pc-info-blue-bg); color: var(--pc-dark-blue); border-radius: 3px; padding: 1px 7px; }
.mcp-active { font-size: 11px; color: var(--pc-green); font-weight: 600; }
.mcp-revoked { font-size: 11px; color: var(--pc-text-muted); font-weight: 600; }
.mcp-token-actions { display: flex; gap: 6px; flex: none; }
.mcp-danger:hover { color: var(--pc-red); border-color: var(--pc-red); }
.mcp-targets { flex-direction: column; align-items: flex-start; gap: 8px; }
.mcp-targets-list { display: flex; gap: 16px; flex-wrap: wrap; }
.mcp-targets-list label { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.mcp-targets-hint { font-size: 11.5px; color: var(--pc-text-muted); }
.mcp-target-chip { background: var(--pc-cloud-white); color: var(--pc-dark-blue); }
.mcp-setup-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; color: var(--pc-status-orange-text); margin: 12px 0 6px; }
.mcp-setup { background: var(--pc-sidebar-bg); color: var(--pc-cloud-white); border-radius: var(--pc-border-radius-sm); padding: 12px 14px; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; margin: 0; }
.mcp-guide { margin-top: 20px; border-top: 1px solid var(--pc-light-grey); padding-top: 14px; }
.mcp-guide > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--pc-sidebar-bg); list-style: none; display: flex; align-items: center; gap: 8px; }
.mcp-guide > summary::-webkit-details-marker { display: none; }
.mcp-guide > summary i { color: var(--pc-blue); }
.mcp-guide[open] > summary { margin-bottom: 12px; }
.mcp-guide-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.mcp-guide-steps li { font-size: 13px; line-height: 1.55; color: var(--pc-text-secondary); }
.mcp-guide-sub { margin: 8px 0 4px; font-size: 12px; font-weight: 600; color: var(--pc-text-primary); }

/* ── Feedback from the top bar (feedback.js) ───────────────────────── */
.cfb-backdrop { position: fixed; inset: 0; z-index: 9500; background: rgba(15, 23, 42, .6); display: flex; align-items: center; justify-content: center; font-family: var(--pc-font-family); }
.cfb-card { background: var(--pc-card-bg); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); display: flex; flex-direction: column; overflow: hidden; color: var(--pc-text-primary); }
.cfb-wait { flex-direction: row; gap: 12px; align-items: center; padding: 22px 26px; font-size: 14px; }
/* ── THE DIALOG HUGS THE CAPTURE ─────────────────────────────────────────
   This was a fixed 97vw x 97vh slab whatever the screenshot's size, and the
   canvas caps at its natural width because upscaling a screenshot blurs the
   text somebody is trying to read. On a wide display that left 260px of dark
   grey either side and 140px below — the capture floating in an expanse of
   nothing, which is what made the step read as unfinished rather than as a
   tool. The card now sizes to the image and stops growing at the viewport,
   where the canvas takes over and scales down to fit. */
.cfb-edit { width: fit-content; max-width: 97vw;
  height: auto; max-height: 97vh; min-width: min(680px, 94vw); }
.cfb-story { width: 97vw; height: 97vh; }
.cfb-sent { width: min(520px, 94vw); }
.cfb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--pc-rule); }
.cfb-head h2 { margin: 0; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.cfb-head h2 i { color: var(--pc-blue); }
.cfb-head .cfb-ok { color: var(--pc-green); }
.cfb-sub { font-size: 12px; color: var(--pc-text-muted); }
.cfb-chip { font-size: 12px; border-radius: 999px; padding: 3px 10px; background: var(--pc-table-header-bg); color: var(--pc-text-secondary); }
.cfb-x { margin-left: auto; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--pc-text-muted); cursor: pointer; }
.cfb-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--pc-rule); }
.cfb-sp { flex: 1; }
.cfb-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--pc-light-grey); background: var(--pc-card-bg); font-family: inherit; font-size: 13px; cursor: pointer; color: var(--pc-text-primary); }
.cfb-btn.on { background: var(--pc-cloud-white); border-color: var(--pc-blue); color: var(--pc-dark-blue); font-weight: 600; }
.cfb-btn.cfb-p { background: var(--pc-accent-orange); border-color: var(--pc-accent-orange); color: #fff; font-weight: 600; }
.cfb-btn.cfb-s { background: var(--pc-sidebar-bg); border-color: var(--pc-sidebar-bg); color: #fff; }
.cfb-btn[disabled] { opacity: .45; cursor: not-allowed; }
.cfb-tools { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--pc-rule); background: var(--pc-body-bg); }
.cfb-hint { font-size: 12px; color: var(--pc-text-muted); margin-left: 8px; }
.cfb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #2b3440; padding: 16px; }
/* The height cap is in VIEWPORT UNITS, not a percentage. The card sizes to
   its content now, so `max-height: 100%` resolves against a stage whose own
   height is content-driven — circular, and a tall capture overflowed the
   card by 173px. The subtrahend is the card's chrome: header, toolbar, the
   stage's own padding and the footer. */
/* NOT `min(100%, …)`: the card sizes to its content, so that 100% resolves
   against an indefinite height and poisons the whole min() — it computed
   correctly and capped nothing. A plain viewport-relative value works. */
.cfb-stage canvas { max-width: 100%; max-height: calc(97vh - 210px);
  cursor: crosshair; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); touch-action: none; }
.cfb-privacy, .cfb-goes { font-size: 12px; color: var(--pc-text-secondary); display: flex; gap: 8px; align-items: center; }
.cfb-privacy i { color: var(--pc-green); }
.cfb-error { margin: 10px 18px 0; padding: 8px 12px; border-radius: 6px; background: #fff1f1; border: 1px solid #f5c2c2; color: #a02020; font-size: 13px; }
.cfb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(360px, .9fr) 1.1fr; }
.cfb-thread { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--pc-rule); background: #f7f9fb; }
.cfb-lbl { display: flex; gap: 8px; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-dark-blue); }
.cfb-thread > .cfb-lbl { padding: 12px 16px; border-bottom: 1px solid var(--pc-rule); background: var(--pc-card-bg); }
.cfb-msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cfb-msg { max-width: 88%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.cfb-msg.ai { align-self: flex-start; background: var(--pc-card-bg); border: 1px solid var(--pc-rule); border-top-left-radius: 4px; }
.cfb-msg.me { align-self: flex-end; background: var(--pc-sidebar-bg); color: #fff; border-top-right-radius: 4px; }
.cfb-who { display: block; font-size: 11px; font-weight: 700; margin-bottom: 3px; opacity: .7; }
.cfb-typing { align-self: flex-start; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--pc-text-muted); }
.cfb-spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--pc-info-blue-bg); border-top-color: var(--pc-blue); animation: cfb-spin .8s linear infinite; flex: none; }
@keyframes cfb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cfb-spin { animation-duration: 2.4s; } }
.cfb-compose { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--pc-rule); background: var(--pc-card-bg); }
.cfb-compose textarea { flex: 1; resize: none; border: 1px solid var(--pc-light-grey); border-radius: 8px; padding: 9px 11px; font-family: inherit; font-size: 14px; min-height: 44px; max-height: 140px; }
.cfb-draft { overflow: auto; padding: 18px 22px; min-height: 0; }
.cfb-draft-h { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.cfb-kind { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pc-light-grey); background: var(--pc-card-bg); font-family: inherit; font-size: 13px; cursor: pointer; }
.cfb-kind.on.bug { background: #ffe9e9; border-color: var(--pc-red); color: #b3261e; font-weight: 600; }
.cfb-kind.on.feature { background: var(--pc-info-blue-bg); border-color: var(--pc-blue); color: var(--pc-dark-blue); font-weight: 600; }
.cfb-kind.on.comment { background: #eef1f4; border-color: #8a96a3; color: #3b4652; font-weight: 600; }
.cfb-f { margin-bottom: 12px; }
.cfb-f label { display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.cfb-f input, .cfb-f textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--pc-light-grey); border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 14px; line-height: 1.45; resize: vertical; background: var(--pc-card-bg); }
.cfb-f.ai input, .cfb-f.ai textarea { border-color: color-mix(in srgb, var(--pc-blue) 55%, transparent); background: color-mix(in srgb, var(--pc-blue) 4%, #fff); }
.cfb-tag { display: inline-flex; gap: 4px; align-items: center; font-size: 10.5px; font-weight: 700; color: var(--pc-dark-blue); background: var(--pc-info-blue-bg); border-radius: 999px; padding: 1px 7px; }
.cfb-ready { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 8px 10px; border-radius: 6px; margin-bottom: 12px; }
.cfb-ready.ok { background: #e8f9e0; color: #2e7d32; }
.cfb-ready.warn { background: var(--pc-accent-orange-light); color: var(--pc-status-orange-text); }
.cfb-shot { position: relative; border: 1px solid var(--pc-rule); border-radius: 8px; overflow: hidden; background: var(--pc-table-header-bg); }
.cfb-shot img { display: block; width: 100%; }
.cfb-edit-shot { position: absolute; top: 8px; right: 8px; }
.cfb-noshot { font-size: 12px; color: var(--pc-text-muted); padding: 14px; border: 1px dashed var(--pc-rule); border-radius: 8px; }
/* ─── Looking at an image while you talk about it ─────────────────────────
   The screenshot renders at 100% of a ~300px draft column and an attachment
   at 34px, so neither could actually be READ during the conversation about
   it. Both are now buttons that open the image over the card. */
/* ── THE CAPTURE, AND WHAT IT IS ─────────────────────────────────────────
   A 1600px screenshot in a 720px column is 45% scale, and at 45% the text in
   it is a grey smear. That is unavoidable in a side panel — what was avoidable
   was leaving it unexplained, unlabelled and openable only by a magnifier that
   appeared on hover. The header now carries the real size and a worded
   control; the image is capped so it reads as a deliberate thumbnail rather
   than a full view that failed. */
.cfb-shotf { margin-bottom: 14px; }
.cfb-shot-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cfb-shot-hd label { margin: 0; }
.cfb-shot-dim { font-size: 11px; color: var(--pc-text-muted); font-variant-numeric: tabular-nums; }
/* A text control, because an icon alone is what made this undiscoverable. */
.cfb-lnk { border: 0; background: none; cursor: pointer; padding: 2px 4px; border-radius: 4px;
  font: inherit; font-size: 11.5px; color: var(--pc-link); display: inline-flex; align-items: center; gap: 5px; }
.cfb-lnk:hover { background: var(--pc-cloud-white); }
.cfb-lnk:focus-visible { outline: 2px solid var(--pc-blue); outline-offset: 1px; }
.cfb-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* Capped, and the top of the image is the part that identifies the screen —
   a tall capture scaled to fit would be smaller still and no more readable. */
.cfb-shot img { max-height: 220px; object-fit: cover; object-position: top; }
.cfb-att-z { padding: 0; border: 0; background: none; cursor: zoom-in; display: flex; border-radius: 4px; }
.cfb-att-z:hover .cfb-att-t, .cfb-att-z:focus-visible .cfb-att-t { outline: 2px solid var(--pc-blue); }
/* Painted OVER the card, not in place of it — the conversation keeps its
   scroll and closing puts the person back exactly where they were. */
/* Fills the backdrop, which is already fixed to the viewport — a screenshot
   confined to the card would be no more readable than the thumbnail was. */
.cfb-viewer { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  background: rgba(17,20,24,.93); }
.cfb-viewer-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); }
.cfb-viewer-n { font-size: 13px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cfb-viewer-c { font-size: 12px; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }
.cfb-viewer-bar .cfb-btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.cfb-viewer-bar .cfb-x { color: #fff; }
.cfb-viewer-img { flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center; padding: 14px; }
/* Fits without cropping, and never enlarges past its own pixels — a blown-up
   screenshot is less readable than the same one at 1:1, not more. */
.cfb-viewer-img img { max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 6px; background: var(--pc-card-bg); }
/* Dark on light, not white on white. These sit ON the image, and a screenshot
   is usually pale — a translucent white disc over one is invisible, which is
   how the only control for "show me the other one" disappears. */
.cfb-viewer-a { position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(17,20,24,.72); border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.cfb-viewer-a:hover { background: rgba(17,20,24,.92); }
.cfb-viewer-a:focus-visible { outline: 2px solid var(--pc-blue); outline-offset: 2px; }
.cfb-viewer-a.prev { left: 10px; }
.cfb-viewer-a.next { right: 10px; }
@media (prefers-reduced-motion: reduce) { .cfb-zoom-i { transition: none; } }
/* ─── Attachments ─────────────────────────────────────────────────────────
   Files the person already had, beside the one they captured. An image's
   thumbnail is the REDACTED version — the same bytes that were uploaded — so
   what is shown here is exactly what leaves. */
.cfb-atts { margin-top: 12px; }
.cfb-att-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cfb-att { display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border: 1px solid var(--pc-rule); border-radius: 6px; background: var(--pc-card-bg); }
.cfb-att-t { flex: 0 0 auto; width: 34px; height: 26px; border-radius: 4px; object-fit: cover;
  background: var(--pc-table-header-bg); }
.cfb-att-i { display: inline-flex; align-items: center; justify-content: center; color: var(--pc-text-muted); }
.cfb-att-n { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--pc-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfb-att-x { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; font-size: 16px;
  line-height: 1; padding: 2px 6px; border-radius: 4px; color: var(--pc-text-muted); }
.cfb-att-x:hover { background: var(--pc-cloud-white); color: var(--pc-text-primary); }
.cfb-att-add { display: flex; align-items: center; gap: 10px; }
.cfb-att-hint { font-size: 11px; color: var(--pc-text-muted); }
/* The whole card is the drop target, so the cue has to be the whole card. */
.cfb-dropping .cfb-card { outline: 2px dashed var(--pc-accent-orange); outline-offset: -6px; }
.cfb-sent-p { margin: 0; padding: 18px; font-size: 14px; line-height: 1.5; color: var(--pc-text-secondary); }
@media (max-width: 860px) { .cfb-body { grid-template-columns: 1fr; } .cfb-thread { max-height: 45vh; } }

/* ─── A NEUTRAL BUTTON ─────────────────────────────────────────────────────
   `.setup-btn-secondary` is red (#c62828) — a DANGER style under a neutral
   name, so every control borrowing it reads as destructive. On the token list
   that put Rotate, Set owner, Save and Cancel in the same visual register as
   Revoke, and the only genuinely destructive one was the last.
   Renaming the shared class would touch every screen that uses it; this adds
   the button that was missing and leaves Revoke red, where it belongs. */
.setup-btn-neutral {
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  color: var(--pc-dark-blue, #12314f);
  border: 1px solid var(--pc-light-grey, #d6dbe1);
  transition: background 0.12s, border-color 0.12s;
}
.setup-btn-neutral:hover { background: var(--pc-off-white, #f4f6f8); border-color: var(--pc-grey, #9aa5b1); }
.setup-btn-neutral:disabled { color: var(--pc-grey, #9aa5b1); cursor: wait; }

/* ─── MCP tokens: who answers, and which list you are looking at ──────────── */
.mcp-scope { display:flex; gap:6px; margin-bottom:10px; }
.mcp-scope-tab { border:1px solid var(--pc-border,#e4e7ec); background:transparent;
  border-radius:6px; padding:4px 12px; font-size:.85rem; cursor:pointer; }
.mcp-scope-tab.on { background:var(--pc-accent,#2563eb); color:#fff; border-color:transparent; }

.mcp-owner { display:inline-flex; align-items:center; gap:5px; font-size:.82rem; }
.mcp-owner i { opacity:.6; }
.mcp-owner.is-mine { font-weight:600; }
/* Unowned is a state to fix, not a kind of token — and the only way it gets
   fixed is by being visibly unclaimed in the list. */
.mcp-owner.is-unowned { color:var(--pc-warn,#b45309); font-style:italic; }

.mcp-own-form { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.mcp-own-form select { flex:1 1 280px; min-width:0; padding:8px 10px;
  border:1px solid var(--pc-light-grey,#d6dbe1); border-radius:4px; font:inherit; }
.mcp-own-msg { font-size:.8rem; color:var(--pc-muted,#667); }