zebflow 0.11.14

/*
 * Project studio — pipeline/registry/editor/git/MCP and related UI.
 * Shell + sidebar + workspace chrome: Tailwind utilities in TSX (RWE extracts `class="..."` → data-rwe-tw).
 * Theme tokens live in styles/main.css (`:root` light, `.dark` dark) — docs/contracts/kinds/ui-theme.
 */

.dark,
[data-studio-theme] {
  color: var(--foreground);
}

/* Prevent UA stylesheet from overriding inherited color on button elements */
[data-studio-theme] button {
  color: inherit;
}

/* General prose for Zeb Markdown component in Studio surfaces */
.prose {
  color: var(--foreground);
  line-height: 1.7;
}

.prose.max-w-none {
  max-width: none;
}

.prose.prose-sm {
  font-size: 0.92rem;
}

.prose.prose-lg {
  font-size: 1.04rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin: 1.5rem 0 0.7rem;
  color: var(--foreground);
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.prose h1 {
  font-size: 1.7rem;
}

.prose h2 {
  font-size: 1.35rem;
}

.prose h3 {
  font-size: 1.1rem;
}

.prose p,
.prose ul,
.prose ol,
.prose pre,
.prose blockquote,
.prose table {
  margin: 0.8rem 0 1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.28rem;
}

.prose li > p {
  margin: 0.35rem 0;
}

.prose a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.prose strong {
  color: var(--foreground);
  font-weight: 650;
}

.prose em {
  color: var(--muted-foreground);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.12rem 0.34rem;
}

.prose pre {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--card) 72%, var(--muted));
  padding: 0.95rem 1rem;
}

.prose pre code {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  line-height: 1.6;
}

.prose blockquote {
  border-left: 3px solid var(--primary);
  padding: 0.15rem 0 0.15rem 0.9rem;
  color: var(--muted-foreground);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
}

.prose th,
.prose td {
  border: 1px solid var(--border);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: color-mix(in srgb, var(--accent) 86%, transparent);
  color: var(--foreground);
  font-weight: 650;
}

.prose.prose-invert {
  color: var(--foreground);
}

.prose.prose-invert h1,
.prose.prose-invert h2,
.prose.prose-invert h3,
.prose.prose-invert h4,
.prose.prose-invert h5,
.prose.prose-invert h6,
.prose.prose-invert strong {
  color: var(--foreground);
}

.prose.prose-invert em,
.prose.prose-invert blockquote {
  color: var(--muted-foreground);
}

.prose.prose-invert hr,
.prose.prose-invert th,
.prose.prose-invert td,
.prose.prose-invert code,
.prose.prose-invert pre {
  border-color: var(--border);
}

.prose.prose-invert code {
  background: color-mix(in srgb, var(--accent) 86%, transparent);
}

.prose.prose-invert pre {
  background: color-mix(in srgb, var(--popover) 76%, transparent);
}

/* In-app automation overlay: Tailwind in `auto-overlay.tsx`; @keyframes zf-spin in main.css */

/* ── Toggle switch ───────────────────────────────────────────────────────── */

/* Console output lines — migrated to Tailwind in console-output.tsx */

/* Autocomplete — migrated to inline styles in studio-shell-behavior.tsx + console-panel.tsx */

/* Optional styling for inline <code> in console HTML (no current emitter) */

/* .project-workspace → Tailwind: flex-1 min-h-0 flex flex-col overflow-hidden */
/* .project-tab-strip → Tailwind: shrink-0 flex items-stretch border-b border-[var(--border)] bg-[var(--card)] px-[0.625rem] */
/* .project-workspace-body → Tailwind: flex-1 min-h-0 overflow-auto flex flex-col bg-[var(--background)] */


.project-content-wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.project-content-section {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
}

.project-content-section:last-child {
  border-bottom: 0;
}

.project-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: color-mix(in srgb, var(--card) 76%, transparent);
}

.project-content-title {
  font-size: 0.68rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}

.project-content-copy {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.project-content-body {
  padding: 0.75rem 0.875rem;
}

/* .project-registry-shell, .project-flat-list → Tailwind: flex-1 min-h-0 flex flex-col */

/* node-registry-* → Tailwind in settings/page.tsx NodeRegistryPanel */

.project-inline-chip[data-active="true"] {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

/* .project-surface-toolbar → Tailwind: flex items-center gap-3 px-[0.875rem] py-[0.625rem] border-b border-[var(--border)] bg-[var(--card)] */

.project-tree-list {
  margin-left: 1.05rem;
}

.project-tree-branch,
.project-tree-leaf {
  margin: 0;
  padding: 0.08rem 0;
}

.project-tree-details {
  border-left: 1px solid var(--border);
  padding-left: 0.35rem;
}

.project-tree-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  user-select: none;
  list-style: none;
}

.project-tree-summary::-webkit-details-marker {
  display: none;
}

.project-tree-summary::marker {
  content: "";
  display: none;
}

.project-tree-caret {
  display: inline-flex;
  width: 0.8rem;
  transition: transform 140ms ease;
}

.project-tree-details:not([open]) .project-tree-caret {
  transform: rotate(-90deg);
}

.project-tree-segment {
  font-family: var(--font-display);
  color: var(--foreground);
}

.project-tree-body {
  padding-top: 0.18rem;
}

.project-tree-leaf-link {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  color: var(--muted-foreground);
  border-radius: 0;
  padding: 0.18rem 0.4rem;
}

.project-tree-leaf-link:hover {
  background: color-mix(in srgb, var(--accent) 68%, transparent);
  color: var(--foreground);
}

.project-card-grid {
  display: grid;
  gap: 0.5rem;
}

.project-card-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-card {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--muted);
  padding: 0.75rem;
}

.project-card:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--accent) 72%, transparent);
}

.project-card-title {
  font-size: 0.83rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--foreground);
}

.project-card-copy {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* .project-inline-path → Tailwind: flex flex-wrap items-center gap-[0.35rem] text-[0.72rem] text-[var(--muted-foreground)] */
/* .project-inline-path-label → Tailwind: font-mono uppercase tracking-[0.12em] */
/* .project-inline-path-item → Tailwind: inline-flex items-center gap-[0.35rem] */
/* .project-inline-path-divider → Tailwind: text-[var(--border)] */
/* .project-inline-path-link → Tailwind: text-[var(--foreground)] hover:text-[var(--primary)] */

.project-inline-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.project-inline-chip:hover {
  color: var(--foreground);
  background: var(--accent);
}

.project-inline-chip-accent {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.project-inline-chip-accent:hover {
  color: white;
  background: var(--primary);
}

.pipeline-editor-shell {
  --pipeline-editor-sidebar-width: 18rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--pipeline-editor-sidebar-width) 6px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.pipeline-editor-sidebar {
  border-right: 1px solid var(--border);
  background: var(--card);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pipeline-editor-sidebar-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.pipeline-editor-sidebar-head {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pipeline-editor-title {
  font-size: 0.78rem;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--foreground);
}

.pipeline-editor-subtitle {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted-foreground);
}

/* ── Pipeline editor 1-column folder navigator ──────────────────────────── */

.pipeline-editor-folder-nav {
  border-bottom: 1px solid var(--border);
}

.pipeline-editor-folder-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem;
  padding: 0.38rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.pipeline-editor-folder-crumb {
  display: inline-flex;
  align-items: center;
}

.pipeline-editor-crumb-link {
  font-size: 0.68rem;
  color: var(--muted-foreground);
  text-decoration: none;
}

.pipeline-editor-crumb-link:hover {
  color: var(--primary);
}

.pipeline-editor-crumb-sep {
  font-size: 0.68rem;
  color: var(--border);
  padding: 0 0.1rem;
  user-select: none;
}

.pipeline-editor-nav-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.65rem;
  font-size: 0.72rem;
  color: var(--foreground);
  text-decoration: none;
}

.pipeline-editor-nav-row:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.pipeline-editor-nav-icon {
  width: 0.88rem;
  height: 0.88rem;
  flex-shrink: 0;
  color: #f6c95a;
}

.pipeline-editor-nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-editor-nav-count {
  font-size: 0.62rem;
  color: var(--muted-foreground);
  padding: 0.06rem 0.3rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
  flex-shrink: 0;
}

/* Sidebar item wrapper — enables inline trash button alongside the item link */
.pipeline-editor-item-wrap {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.pipeline-editor-item-wrap > .pipeline-editor-item {
  flex: 1;
  min-width: 0;
  border-bottom: none;
}

.pipeline-editor-item-wrap > .pipeline-registry-row-del {
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted-foreground);
  transition: color 0.12s, background 0.12s;
}

.pipeline-editor-item-wrap > .pipeline-registry-row-del:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.pipeline-editor-item {
  display: block;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
}

.pipeline-editor-item:hover {
  background: color-mix(in srgb, var(--accent) 74%, transparent);
}

.pipeline-editor-item.is-selected {
  background: color-mix(in srgb, var(--info) 16%, transparent);
}

.pipeline-editor-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pipeline-editor-item-name {
  color: var(--foreground);
  font-size: 0.78rem;
  font-family: var(--font-display);
  font-weight: 700;
}

.pipeline-editor-item-status {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}

.pipeline-editor-item-meta {
  margin-top: 0.24rem;
  font-size: 0.7rem;
  color: var(--muted-foreground);
}

.pipeline-editor-section-head {
  padding: 0.3rem 0.75rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  user-select: none;
}

.pipeline-editor-item-git {
  color: var(--warning);
}

/* Template editor items are buttons — reset browser defaults */
button.pipeline-editor-item {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: inherit;
}

button.pipeline-editor-item:hover {
  background: color-mix(in srgb, var(--accent) 74%, transparent);
}

.pipeline-editor-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--background);
}

.pipeline-editor-toolbar {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.7rem;
}

.pipeline-editor-toolbar-main {
  min-width: 0;
}

.pipeline-editor-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pipeline-editor-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-height: 1.25rem;
  padding: 0 0.15rem;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-family: var(--font-mono, monospace);
}

.pipeline-editor-indicator::before {
  content: "";
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 999px;
  background: #6b7280;
  box-shadow: 0 0 0 1px rgba(156, 163, 175, 0.25);
}

.pipeline-editor-indicator-trigger[data-trigger-kind="webhook"]::before {
  background: #22c55e;
}

.pipeline-editor-indicator-trigger[data-trigger-kind="schedule"]::before {
  background: #06b6d4;
}

.pipeline-editor-indicator-trigger[data-trigger-kind="manual"]::before {
  background: #eab308;
}

.pipeline-editor-indicator-trigger[data-trigger-kind="function"]::before {
  background: #c46255;
}

.pipeline-editor-indicator-lock[data-tone="ok"]::before,
.pipeline-editor-indicator-draft[data-tone="ok"]::before {
  background: #22c55e;
}

.pipeline-editor-indicator-lock[data-tone="danger"]::before {
  background: #ef4444;
}

.pipeline-editor-indicator-draft[data-tone="warning"]::before {
  background: #f59e0b;
}

.pipeline-editor-indicator-draft[data-tone="neutral"]::before {
  background: #6b7280;
}

.pipeline-editor-template-host {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}

.pipeline-editor-template-host .cm-editor {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.pipeline-editor-template-host .cm-scroller {
  overflow: auto;
}

.pipeline-editor-template-host .cm-content {
  padding-bottom: 2.75rem;
}

/* ── GraphUI: chrome appended by PipelineGraph (graphui.bundle.mjs: .zf-node-edit, .zf-node-slug) ──
   graphui injects .zgu-* for boxes/ports; these two classes are not in the bundle stylesheet. */
.pipeline-editor-main .zf-node-edit {
  position: absolute;
  top: -0.65rem;
  right: -0.65rem;
  z-index: 6;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--border, #2a2a2a) 90%, transparent);
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--muted, #1b1b1b) 88%, #000);
  color: var(--foreground, #f3f4f6);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 120ms ease, transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.pipeline-editor-main .zgu-node:hover .zf-node-edit,
.pipeline-editor-main .zgu-node.selected .zf-node-edit,
.pipeline-editor-main .zf-node-edit:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.pipeline-editor-main .zf-node-edit:hover {
  background: var(--primary, #22c55e);
  color: #fff;
  border-color: var(--primary, #22c55e);
}

.pipeline-editor-main .zf-node-slug {
  position: absolute;
  left: 9px;
  top: 8px;
  z-index: 4;
  box-sizing: border-box;
  width: 1rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--muted-foreground, #9ca3af);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

.pipeline-editor-main .zf-node-slug.long {
  font-size: 8px;
  font-weight: 650;
  line-height: 1.25;
  width: 10ch;
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #cbd5e1;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
}

.pipeline-editor-continuation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.5rem;
  max-height: min(26rem, calc(100vh - 14rem));
  overflow-y: auto;
  padding: 0 1.5rem 1.5rem;
}

.pipeline-editor-continuation-item {
  min-height: 4.25rem;
  display: grid;
  gap: 0.25rem;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--muted);
  color: var(--foreground);
  padding: 0.65rem 0.75rem;
  text-align: left;
  cursor: pointer;
}

.pipeline-editor-continuation-item:hover {
  border-color: var(--primary);
  background: var(--accent);
}

.pipeline-editor-continuation-kind {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.63rem;
  color: var(--muted-foreground);
}

/* ── Pipeline log panel — structural heights only ─── */
.pipeline-editor-logs-panel { height: 300px; display: flex; flex-direction: column; overflow: hidden; }
.pipeline-editor-logs-body { flex: 1; min-height: 0; overflow-y: auto; }
.pipeline-editor-logs-io-pre {
  overflow-y: auto;
  max-height: 200px;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: monospace;
  font-size: 0.65rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.375rem;
  margin: 0;
}
.pipeline-editor-logs-io-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-top: 1px solid var(--border);
}

.pipeline-editor-foot {
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 0.75rem;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  background: var(--card);
}

.pipeline-editor-foot-item {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-editor-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--card, #161616);
  background-color: var(--card, #161616);
  color: var(--foreground);
  opacity: 1;
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 55px rgba(2, 6, 23, 0.32);
}

.pipeline-editor-dialog.credential-dialog {
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  overflow: hidden;
}

/* Credential dialog form layout */
.credential-dialog-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100dvh - 4rem);
}
.credential-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.credential-dialog-header-meta { min-width: 0; }
.credential-dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.credential-dialog-header-actions button {
  min-height: 1.9rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  padding: 0 0.7rem;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.credential-dialog-header-actions button:hover {
  background: var(--accent);
}
.credential-dialog-header-actions button[type="submit"] {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}
.credential-dialog-header-actions button[type="submit"]:hover {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
}
.credential-dialog-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* Two-column identity row: ID | Kind, then Title full width */
.credential-identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.85rem;
}
.credential-field-full { grid-column: 1 / -1; }
/* Two-column secret fields grid */
.credential-secret-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.85rem;
}
.credential-secret-grid .is-full-width { grid-column: 1 / -1; }
.credential-secret-grid label:has(textarea) { grid-column: 1 / -1; }
/* Generate button for auto-generated secret fields */
.credential-gen-wrap {
  display: flex;
  gap: 0.35rem;
  align-items: stretch;
}
.credential-gen-wrap input {
  flex: 1;
  min-width: 0;
}
.credential-gen-btn {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 0.6rem;
  border-radius: 0.3rem;
  border: 1px solid var(--border, #2b3648);
  background: var(--muted, #1a2232);
  color: var(--muted-foreground, #8fa3c0);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.credential-gen-btn:hover {
  background: var(--primary, #3b82f6);
  border-color: var(--primary, #3b82f6);
  color: #fff;
}

.pipeline-editor-dialog::backdrop {
  background: rgba(2, 6, 23, 0.62);
}

.pipeline-editor-dialog-form {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  background: var(--card, #161616);
  color: var(--foreground);
}

.pipeline-editor-dialog-title {
  font-size: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.pipeline-editor-dialog-form [data-editor-node-copy="true"] {
  margin: 0;
}

.pipeline-editor-field {
  display: grid;
  gap: 0.3rem;
  font-size: 0.72rem;
}

.pipeline-editor-field-help {
  font-size: 0.64rem;
  color: var(--muted-foreground);
}

.pipeline-editor-subtitle[data-tone="ok"] {
  color: #16a34a;
}

.pipeline-editor-subtitle[data-tone="error"] {
  color: #dc2626;
}

.pipeline-editor-field input,
.pipeline-editor-field select,
.pipeline-editor-field textarea {
  width: 100%;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  min-height: 2rem;
  padding: 0 0.55rem;
}

.pipeline-editor-field textarea {
  min-height: 5rem;
  resize: vertical;
  padding: 0.45rem 0.55rem;
}

.pipeline-editor-dialog-error {
  font-size: 0.75rem;
  color: #f87171;
  background: rgb(239 68 68 / 0.1);
  border: 1px solid rgb(239 68 68 / 0.25);
  border-radius: 0.35rem;
  padding: 0.4rem 0.6rem;
  margin-top: 0.25rem;
}

.pipeline-editor-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.pipeline-editor-dialog-actions button {
  min-height: 2rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  padding: 0 0.75rem;
}

.pipeline-editor-dialog-actions button[type=\"submit\"] {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}

.pipeline-editor-node-fields {
  display: grid;
  gap: 1rem;
}

.pipeline-editor-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.pipeline-editor-node-fields.is-web-render {
  gap: 0.7rem;
  min-height: 0;
}

.pipeline-render-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.6rem;
}

.pipeline-render-top .pipeline-editor-field:nth-of-type(1) {
  grid-column: span 4;
}

.pipeline-render-top .pipeline-editor-field:nth-of-type(2) {
  grid-column: span 8;
}

.pipeline-render-workspace {
  display: grid;
  grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
  gap: 0.7rem;
  min-height: 30rem;
}

.pipeline-render-sidebar {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--muted);
  padding: 0.35rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.35rem;
  min-height: 0;
  overflow: hidden;
}

.pipeline-render-sidebar-head input {
  width: 100%;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  min-height: 1.85rem;
  padding: 0 0.45rem;
  font-size: 0.7rem;
}

.pipeline-render-sidebar-title {
  font-size: 0.66rem;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.2rem;
}

.pipeline-render-sidebar-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.18rem;
  min-height: 0;
  padding-right: 0.15rem;
}

.pipeline-render-template-empty {
  border: 1px dashed var(--border);
  border-radius: 0.4rem;
  padding: 0.5rem;
  font-size: 0.66rem;
  color: var(--muted-foreground);
}

.pipeline-render-editor-shell {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.pipeline-render-editor-head {
  min-height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
}

.pipeline-render-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pipeline-render-status {
  color: var(--muted-foreground);
  font-size: 0.66rem;
}

.pipeline-render-status[data-state="ok"] {
  color: #22c55e;
}

.pipeline-render-status[data-state="error"] {
  color: #ef4444;
}

.pipeline-render-status[data-state="warning"] {
  color: #f59e0b;
}

.pipeline-render-editor-host {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}

.pipeline-render-editor-host .cm-editor {
  height: 100%;
}

.pipeline-render-editor-host .cm-scroller {
  overflow: auto;
}

.pipeline-render-editor-host .cm-content {
  padding-bottom: 2.75rem;
}

/* .project-table: marker still used on `<StudioTable variant="dbGrid">` for db-suite.css + cell selection behaviors */

@media (max-width: 1024px) {
  .project-card-grid.cols-3,
  .project-card-grid.cols-2 {
    grid-template-columns: 1fr;
  }

  

  .project-surface-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .project-content-head {
    align-items: flex-start;
    flex-direction: column;
  }

  

  

  .pipeline-editor-shell {
    grid-template-columns: 1fr;
  }

  .pipeline-editor-split-handle {
    display: none;
  }

  .pipeline-editor-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 16rem;
  }

  

  

  

  .project-settings-form {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  
}

@media (min-width: 1280px) {
  
}

.pipeline-editor-split-handle {
  position: relative;
  cursor: col-resize;
  background: var(--card);
  border-right: 1px solid var(--border);
}

.pipeline-editor-split-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--border);
}

.pipeline-editor-split-handle:hover::before {
  background: var(--primary);
}

/* ===================================================
   Docs workspace (platform-project-docs)
   =================================================== */

/* ── Dashboard ── */
.dash-meta-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
.dash-meta-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.dash-meta-sep {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.dash-metric-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
  margin-left: auto;
}
.dash-bar-track {
  margin-top: 0.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.dash-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--primary, #ed752e);
  width: 0%;
  transition: width 0.4s ease;
}
.dash-stat-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.dash-stat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dash-stat-key {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  min-width: 5rem;
}
.dash-stat-val {
  font-size: 0.75rem;
  color: var(--foreground);
}
.dash-cap-grid {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.dash-cap-section-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
  padding: 0.5rem 0 0.2rem;
  margin: 0;
}
.dash-cap-section-label:first-child {
  padding-top: 0;
}
.dash-cap-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.dash-cap-dot-on,
.dash-cap-dot-off {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-cap-dot-on  { background: #22c55e; }
.dash-cap-dot-off { background: var(--border); }
.dash-cap-name {
  font-size: 0.78rem;
  color: var(--foreground);
  min-width: 7rem;
}
.dash-cap-status {
  font-size: 0.72rem;
  color: var(--muted-foreground);
}

/* ── Pipeline Registry List View ─────────────────────────────────────────── */
/* .pipeline-registry-list → Tailwind: flex flex-col py-2 px-3 gap-1 */

.pipeline-registry-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  text-decoration: none;
  transition: border-color 0.1s;
}

.pipeline-registry-row:hover {
  border-color: var(--border);
}

.pipeline-registry-folder-row {
  background: transparent;
  border-style: dashed;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  gap: 0.4rem;
}

.pipeline-registry-folder-row:hover {
  color: var(--foreground);
}

/* .pipeline-registry-row-icon → Tailwind: shrink-0 flex items-center text-[var(--muted-foreground)] */
/* .pipeline-registry-row-body → Tailwind: flex-1 min-w-0 flex items-center gap-2 flex-wrap */

.pipeline-registry-section-head {
  padding: 0.875rem 0.6rem 0.2rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}

.pipeline-registry-section-head:first-child {
  padding-top: 0.25rem;
}

.pipeline-registry-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .pipeline-registry-row-actions → Tailwind: flex items-center gap-[0.35rem] shrink-0 */

/* ── Registry row: inner link + hover delete button ─────────────────────── */
.pipeline-registry-row-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.pipeline-registry-row-del {
  opacity: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 0.3rem;
  color: rgba(239, 68, 68, 0.5);
  padding: 0;
  transition: color 0.12s, background 0.12s;
}

.pipeline-registry-row-del:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* .pipeline-registry-inline-form → Tailwind: flex items-center gap-2 px-3 py-2 border-t border-[var(--border)] flex-wrap */

.pipeline-registry-inline-input {
  width: auto;
  flex: 1 1 8rem;
  height: 1.9rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--card);
  color: var(--foreground);
  font-size: 0.75rem;
}

.pipeline-registry-inline-select {
  flex-shrink: 0;
  height: 1.9rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--card);
  color: var(--foreground);
  font-size: 0.75rem;
}

.pipeline-registry-inline-input:focus,
.pipeline-registry-inline-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ── Select component inner <select> override for inline forms ── */
/* Select wraps <select> in a div; className goes to div, not inner select.
   Override the inner select so it inherits the studio panel background. */
.pipeline-registry-inline-select select {
  height: 100%;
  width: 100%;
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 2rem 0 0 !important;
  font-size: inherit !important;
}

/* .pipeline-registry-empty → Tailwind: p-6 text-center text-[0.78rem] text-[var(--muted-foreground)] */

/* ── Registry Filter Tabs ────────────────────────────────────────────────── */

/* .pipeline-registry-filters → Tailwind: flex gap-1 px-3 py-[0.375rem] border-b border-[var(--border)] bg-[var(--card)] */

.pipeline-registry-filter-tab {
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--muted-foreground);
  background: transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.pipeline-registry-filter-tab:hover {
  color: var(--foreground);
  background: var(--card);
}

.pipeline-registry-filter-tab.is-active {
  color: var(--foreground);
  background: var(--card);
  border-color: var(--border);
}

/* ── Registry Special Folder Separator ───────────────────────────────────── */

.pipeline-registry-special-sep {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0;
  opacity: 0.5;
}

.pipeline-registry-folder-row.is-special {
  opacity: 0.7;
}

/* ── Registry Special Folder Colors ─────────────────────────────────────── */

.pipeline-registry-special-folder {
  opacity: 1;
}

.registry-folder-assets .pipeline-registry-row-icon,
.registry-folder-assets .pipeline-registry-row-name {
  color: #22c55e; /* green-500 */
}

.registry-folder-assets:hover .pipeline-registry-row-icon,
.registry-folder-assets:hover .pipeline-registry-row-name {
  color: #16a34a; /* green-600 */
}

.registry-folder-styles .pipeline-registry-row-icon,
.registry-folder-styles .pipeline-registry-row-name {
  color: #e9904e;
}

.registry-folder-styles:hover .pipeline-registry-row-icon,
.registry-folder-styles:hover .pipeline-registry-row-name {
  color: #ed752e;
}

.registry-folder-docs .pipeline-registry-row-icon,
.registry-folder-docs .pipeline-registry-row-name {
  color: #3b82f6; /* blue-500 */
}

.registry-folder-docs:hover .pipeline-registry-row-icon,
.registry-folder-docs:hover .pipeline-registry-row-name {
  color: #2563eb; /* blue-600 */
}

/* Editor sidebar special folder colors (pipeline-editor-nav-row) */
.registry-folder-assets .pipeline-editor-nav-icon,
.registry-folder-assets .pipeline-editor-nav-label { color: #22c55e; }
.registry-folder-assets:hover .pipeline-editor-nav-icon,
.registry-folder-assets:hover .pipeline-editor-nav-label { color: #16a34a; }

.registry-folder-styles .pipeline-editor-nav-icon,
.registry-folder-styles .pipeline-editor-nav-label { color: #e9904e; }
.registry-folder-styles:hover .pipeline-editor-nav-icon,
.registry-folder-styles:hover .pipeline-editor-nav-label { color: #ed752e; }

.registry-folder-docs .pipeline-editor-nav-icon,
.registry-folder-docs .pipeline-editor-nav-label { color: #3b82f6; }
.registry-folder-docs:hover .pipeline-editor-nav-icon,
.registry-folder-docs:hover .pipeline-editor-nav-label { color: #2563eb; }

/* ── Registry File Rows ──────────────────────────────────────────────────── */

.pipeline-registry-file-row {
  background: transparent;
  border-style: solid;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--muted-foreground);
}

.pipeline-registry-file-row:hover {
  color: var(--foreground);
}

/* ── Pipeline Status Dot ─────────────────────────────────────────────────── */

.pipeline-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.pipeline-status-dot.dot-active {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}

.pipeline-status-dot.dot-draft {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}

.pipeline-status-dot.dot-inactive {
  background: transparent;
  border: 1.5px solid #6b7280;
}

/* ── Pipeline Git Badge ──────────────────────────────────────────────────── */

/* ── Delete Pipeline Dialog ──────────────────────────────────────────────── */

.pipeline-delete-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1rem;
}

.pipeline-delete-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.65);
  cursor: pointer;
}

.pipeline-delete-box {
  position: relative;
  z-index: 1;
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pipeline-delete-title {
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: #ef4444;
  margin: 0;
}

.pipeline-delete-name {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--foreground);
}

.pipeline-delete-copy {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  margin: 0;
}

.pipeline-delete-input {
  width: 100%;
  height: 2rem;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.pipeline-delete-input:focus {
  outline: none;
  border-color: #ef4444;
}

.pipeline-delete-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ── Git Commit Dialog ───────────────────────────────────────────────────── */

.git-commit-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1rem;
}

.git-commit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.65);
  cursor: pointer;
}

.git-commit-box {
  position: relative;
  z-index: 1;
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 24px 55px rgba(2, 6, 23, 0.4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Install UI Components catalog (registry + editor): wide box, flex middle, scrollable grid */
.git-commit-box--install-catalog {
  width: min(56rem, calc(100vw - 2rem));
  max-width: none;
}

.git-install-catalog-stack {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.git-install-catalog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0 0 0.75rem 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.install-catalog-tab-panel {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 0.75rem;
  gap: 0.625rem;
}

/* 1 col → md:2 → lg:3; always show vertical scrollbar gutter when list is long */
.git-install-component-list-host {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: 1fr;
  flex: 1 1 0%;
  min-height: 0;
  max-height: min(52vh, 24rem);
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 0.1rem 0.35rem 0.1rem 0;
  align-content: start;
}

@media (min-width: 48rem) {
  .git-install-component-list-host {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .git-install-component-list-host {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.git-commit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.git-commit-title {
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
}

.git-commit-close {
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
}

.git-commit-close:hover {
  color: var(--foreground);
  background: var(--muted);
}

.git-commit-file-list {
  flex: 1;
  min-height: 4rem;
  max-height: 16rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.5rem;
  background: var(--muted);
}

.git-commit-file-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 0.74rem;
}

.git-commit-file-row:hover {
  background: var(--card);
}

.git-commit-file-path {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
  word-break: break-all;
}

.git-commit-message {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--muted);
  color: var(--foreground);
  font-size: 0.78rem;
  resize: vertical;
  box-sizing: border-box;
}

.git-commit-message:focus {
  outline: none;
  border-color: var(--primary);
}

.git-commit-push-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  cursor: pointer;
}

.git-commit-error {
  font-size: 0.74rem;
  color: #ef4444;
  margin: 0;
  padding: 0.4rem 0.5rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.35rem;
}

.git-commit-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ── Git Indicator & Panel (header) — MIGRATED to git-repo-panel.tsx ──────── */
/*
.git-indicator-btn {
  position: relative;
}

.git-indicator-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.22rem;
  border-radius: 9999px;
  background: #f97316;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
  pointer-events: none;
}

.git-indicator-dot {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #9ca3af;
  pointer-events: none;
}

.git-indicator-dot.is-clean {
  background: #22c55e;
}

.git-file-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0;
  min-height: 2.5rem;
}

.git-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
  padding: 0.3rem 0.75rem 0.15rem;
  text-transform: uppercase;
}

.git-empty {
  font-size: 0.74rem;
  color: var(--muted-foreground);
  padding: 0.6rem 0.75rem;
}

.git-actions {
  border-top: 1px solid var(--border);
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.git-message-input {
  width: 100%;
  font-size: 0.78rem;
}

.git-error {
  font-size: 0.7rem;
  color: #ef4444;
  padding: 0 0.1rem;
}

.git-action-row {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.git-sync-btn.is-synced {
  color: #22c55e;
  border-color: #22c55e;
}

/* ── Git+Repo Combined Panel — MIGRATED to git-repo-panel.tsx ──────────────
/*
.git-repo-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 640px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 50;
}

.git-repo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}

.git-repo-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.git-repo-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--muted-foreground);
}

.git-repo-body {
  display: flex;
  flex: 1;
  min-height: 0;
  max-height: 440px;
}

.git-repo-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.git-repo-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.git-repo-right {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0.75rem;
  gap: 0.85rem;
}

.git-repo-col-head {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
  padding: 0.5rem 0.75rem 0.3rem;
  border-bottom: 1px solid var(--border);
}

.git-repo-cred-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
  margin-bottom: 0.3rem;
  display: block;
}

.git-repo-cred-select {
  width: 100%;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  color: var(--foreground);
  font-size: 0.72rem;
  padding: 0 0.4rem;
  height: 1.75rem;
  outline: none;
  cursor: pointer;
}

.git-repo-slug-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  overflow: hidden;
  background: var(--muted);
}

.git-repo-slug-row:focus-within {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}

.git-repo-host-prefix {
  font-size: 0.65rem;
  font-family: ui-monospace, monospace;
  color: var(--muted-foreground);
  padding: 0 0.4rem;
  white-space: nowrap;
  background: var(--accent);
  border-right: 1px solid var(--border);
  height: 1.75rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.git-repo-slug-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--foreground);
  font-size: 0.68rem;
  font-family: ui-monospace, monospace;
  padding: 0 0.4rem;
  height: 1.75rem;
}

.git-repo-branch-input {
  width: 100%;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  color: var(--foreground);
  font-size: 0.68rem;
  font-family: ui-monospace, monospace;
  padding: 0 0.4rem;
  height: 1.75rem;
  outline: none;
}

.git-repo-branch-input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}

.git-repo-no-cred {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.git-repo-status-msg {
  font-size: 0.68rem;
}
*/

/* ── Git Credential Create Dialog — MIGRATED to git-repo-panel.tsx ──────────
   ::backdrop stays active below (no Tailwind equivalent)
/*
dialog.git-cred-dialog:not([open]) {
  display: none;
}

dialog.git-cred-dialog {
  padding: 0;
  margin: auto;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  width: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 85vh;
}
*/

dialog.git-cred-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

/* MIGRATED to git-repo-panel.tsx
.git-cred-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--foreground);
}

.git-cred-dialog-close {
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  line-height: 1;
}
.git-cred-dialog-close:hover { color: var(--foreground); }

.git-cred-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem;
  overflow-y: auto;
  max-height: 80vh;
}
*/

/* ── MCP Session Panel ───────────────────────────────────────────────────── */
.mcp-token-input {
  background: var(--muted, #1b1b1b);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 0.35rem;
  color: var(--muted-foreground, #9ca3af);
  font-size: 0.68rem;
  font-family: ui-monospace, monospace;
  padding: 0.3rem 0.5rem;
  /* Keep outline for focus visibility; style it instead of removing */
  outline: none;
  width: 100%;
  height: 1.75rem;
  min-width: 0;
  cursor: text;
  /* Truncate long values (tokens/URLs) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcp-token-input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}
/* Install Guide */
.mcp-guide-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}
.mcp-guide-tab {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 0.3rem;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.mcp-guide-tab:hover {
  color: var(--foreground);
  border-color: var(--muted-foreground);
}
.mcp-guide-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.mcp-guide-snippet {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.6rem;
  font-family: ui-monospace, monospace;
  color: var(--muted-foreground);
  white-space: pre;
  overflow-x: auto;
  margin: 0 0 0.5rem;
  line-height: 1.6;
  max-height: 7rem;
}
.mcp-guide-copy-btn {
  font-size: 0.65rem !important;
  height: 1.5rem !important;
  padding: 0 0.6rem !important;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mcp-guide-tab {
    transition: none;
  }
}

/* ── Git Tree View ───────────────────────────────────────────────────────── */

.git-tree-root {
  padding: 0 0 0.25rem;
}

.git-tree-root .project-tree-details {
  font-size: 0.72rem;
}

.git-tree-root .project-tree-body {
  margin-left: 0.75rem;
}

.git-tree-dir {
  padding: 0.1rem 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  min-height: 1.4rem;
}

.git-tree-dir .project-tree-segment {
  font-size: 0.7rem;
}

.git-tree-file {
  padding: 0.1rem 0.5rem 0.1rem 0.25rem;
  gap: 0.3rem;
  min-height: 1.5rem;
  align-items: center;
}

.git-tree-file:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.git-tree-check {
  flex-shrink: 0;
}

.git-tree-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  color: var(--foreground);
}

.git-tree-code {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}

.git-tree-code.is-added    { color: #22c55e; }
.git-tree-code.is-modified { color: #f59e0b; }
.git-tree-code.is-deleted  { color: #ef4444; }
.git-tree-code.is-untracked { color: #9ca3af; }

/* ── Pipeline editor save error banner ──────────────────────────────────── */
.pipeline-editor-save-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  border: 1px solid var(--destructive);
  color: var(--destructive);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  margin: 6px 16px 0;
}
.pipeline-editor-save-error button {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 16px;
  line-height: 1;
}

/* ── Match cases editor ─────────────────────────────────────────────────── */
.match-cases-editor {
  display: grid;
  gap: 0.55rem;
}

.match-cases-header,
.match-cases-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.2fr) minmax(7rem, 0.9fr) minmax(7rem, 1fr) 5.5rem;
  gap: 0.45rem;
  align-items: center;
}

.match-cases-header {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.match-cases-list {
  display: grid;
  gap: 0.45rem;
}

.match-cases-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
}

.match-cases-actions button,
.match-cases-add {
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  border-radius: 0.35rem;
  min-width: 1.6rem;
  height: 2rem;
  padding: 0 0.45rem;
  font-size: 0.72rem;
  cursor: pointer;
}

.match-cases-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

.match-cases-add {
  justify-self: start;
  min-width: 6.5rem;
}

.match-cases-actions button:hover:not(:disabled),
.match-cases-add:hover {
  border-color: var(--primary);
  background: var(--accent);
}

.match-cases-default {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(7rem, 1fr) minmax(7rem, 1fr);
  gap: 0.45rem;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}

.match-cases-default-title {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
}

.match-cases-invalid {
  border-color: var(--destructive) !important;
}

.match-cases-error {
  color: var(--destructive);
  font-size: 0.72rem;
}

@media (max-width: 720px) {
  .match-cases-header {
    display: none;
  }

  .match-cases-row,
  .match-cases-default {
    grid-template-columns: 1fr;
  }

  .match-cases-actions {
    justify-content: flex-start;
  }
}