/* ============================================================================
   ConMan – Glass Theme (Light / Dark / System)
   Frosted glass panels, electric cyan accents, theme toggle
   ============================================================================ */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700;800&display=swap');

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================================
   Theme Variables — Dark (default)
   ============================================================================ */

:root {
  /* Base palette */
  --bg-deep: #0a0e17;
  --bg-surface: #111827;
  --bg-elevated: #1a2236;
  --bg-glass: rgba(17, 24, 39, 0.6);
  --bg-glass-hover: rgba(26, 34, 54, 0.8);
  --bg-glass-border: rgba(255, 255, 255, 0.06);
  --bg-glass-shine: rgba(255, 255, 255, 0.03);

  /* Text */
  --text-primary: #e8ecf4;
  --text-secondary: #8892a8;
  --text-muted: #5a6478;
  --text-bright: #ffffff;

  /* Accent — electric cyan */
  --accent: #22d3ee;
  --accent-dim: rgba(34, 211, 238, 0.15);
  --accent-glow: rgba(34, 211, 238, 0.3);
  --accent-hover: #06b6d4;

  /* Inputs & interactive */
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.08);
  --input-focus-bg: rgba(34, 211, 238, 0.04);
  --hover-overlay: rgba(255, 255, 255, 0.02);
  --topbar-bg: rgba(10, 14, 23, 0.85);
  --toolbar-bg: rgba(10, 14, 23, 0.7);
  --btn-secondary-border: rgba(255, 255, 255, 0.08);
  --btn-primary-text: #0a0e17;
  --card-hover-border: rgba(34, 211, 238, 0.2);
  --table-header-bg: rgba(255, 255, 255, 0.02);
  --table-border: rgba(255, 255, 255, 0.06);
  --table-row-border: rgba(255, 255, 255, 0.025);
  --table-row-hover: rgba(255, 255, 255, 0.015);
  --method-inner-bg: rgba(255, 255, 255, 0.015);
  --method-inner-border: rgba(255, 255, 255, 0.04);
  --method-inner-hover: rgba(255, 255, 255, 0.08);
  --param-bg: rgba(255, 255, 255, 0.03);
  --param-border: rgba(255, 255, 255, 0.06);
  --scrollbar-thumb: rgba(255, 255, 255, 0.08);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.14);
  --ambient-1: rgba(34, 211, 238, 0.04);
  --ambient-2: rgba(167, 139, 250, 0.03);

  /* Method colors */
  --method-get: #34d399;
  --method-get-bg: rgba(52, 211, 153, 0.1);
  --method-get-border: rgba(52, 211, 153, 0.25);
  --method-post: #60a5fa;
  --method-post-bg: rgba(96, 165, 250, 0.1);
  --method-post-border: rgba(96, 165, 250, 0.25);
  --method-put: #fbbf24;
  --method-put-bg: rgba(251, 191, 36, 0.1);
  --method-put-border: rgba(251, 191, 36, 0.25);
  --method-patch: #fb923c;
  --method-patch-bg: rgba(251, 146, 60, 0.1);
  --method-patch-border: rgba(251, 146, 60, 0.25);
  --method-delete: #f87171;
  --method-delete-bg: rgba(248, 113, 113, 0.1);
  --method-delete-border: rgba(248, 113, 113, 0.25);

  /* Source badges */
  --source-spec: #a78bfa;
  --source-spec-bg: rgba(167, 139, 250, 0.12);
  --source-metadata: #22d3ee;
  --source-metadata-bg: rgba(34, 211, 238, 0.12);
  --source-live: #fb923c;
  --source-live-bg: rgba(251, 146, 60, 0.12);
  --source-manual: #6b7280;
  --source-manual-bg: rgba(107, 114, 128, 0.12);

  /* Status */
  --success: #34d399;
  --error: #f87171;
  --deprecated-bg: rgba(248, 113, 113, 0.06);
  --deprecated-border: rgba(248, 113, 113, 0.2);

  /* Surfaces */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(34, 211, 238, 0.15);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 0.3s;
  --duration-slow: 0.5s;
}

/* ============================================================================
   Theme Variables — Light
   ============================================================================ */

[data-theme='light'] {
  --bg-deep: #f0f2f5;
  --bg-surface: #ffffff;
  --bg-elevated: #f8f9fb;
  --bg-glass: rgba(255, 255, 255, 0.7);
  --bg-glass-hover: rgba(255, 255, 255, 0.85);
  --bg-glass-border: rgba(0, 0, 0, 0.08);
  --bg-glass-shine: rgba(255, 255, 255, 0.6);

  --text-primary: #1a202c;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-bright: #0f172a;

  --accent: #0891b2;
  --accent-dim: rgba(8, 145, 178, 0.1);
  --accent-glow: rgba(8, 145, 178, 0.15);
  --accent-hover: #0e7490;

  --input-bg: rgba(0, 0, 0, 0.03);
  --input-border: rgba(0, 0, 0, 0.12);
  --input-focus-bg: rgba(8, 145, 178, 0.04);
  --hover-overlay: rgba(0, 0, 0, 0.02);
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --toolbar-bg: rgba(240, 242, 245, 0.85);
  --btn-secondary-border: rgba(0, 0, 0, 0.12);
  --btn-primary-text: #ffffff;
  --card-hover-border: rgba(8, 145, 178, 0.3);
  --table-header-bg: rgba(0, 0, 0, 0.02);
  --table-border: rgba(0, 0, 0, 0.08);
  --table-row-border: rgba(0, 0, 0, 0.04);
  --table-row-hover: rgba(0, 0, 0, 0.02);
  --method-inner-bg: rgba(0, 0, 0, 0.015);
  --method-inner-border: rgba(0, 0, 0, 0.06);
  --method-inner-hover: rgba(0, 0, 0, 0.1);
  --param-bg: rgba(0, 0, 0, 0.03);
  --param-border: rgba(0, 0, 0, 0.08);
  --scrollbar-thumb: rgba(0, 0, 0, 0.12);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
  --ambient-1: rgba(8, 145, 178, 0.03);
  --ambient-2: rgba(139, 92, 246, 0.02);

  --method-get: #059669;
  --method-get-bg: rgba(5, 150, 105, 0.08);
  --method-get-border: rgba(5, 150, 105, 0.2);
  --method-post: #2563eb;
  --method-post-bg: rgba(37, 99, 235, 0.08);
  --method-post-border: rgba(37, 99, 235, 0.2);
  --method-put: #d97706;
  --method-put-bg: rgba(217, 119, 6, 0.08);
  --method-put-border: rgba(217, 119, 6, 0.2);
  --method-patch: #ea580c;
  --method-patch-bg: rgba(234, 88, 12, 0.08);
  --method-patch-border: rgba(234, 88, 12, 0.2);
  --method-delete: #dc2626;
  --method-delete-bg: rgba(220, 38, 38, 0.08);
  --method-delete-border: rgba(220, 38, 38, 0.2);

  --source-spec: #7c3aed;
  --source-spec-bg: rgba(124, 58, 237, 0.08);
  --source-metadata: #0891b2;
  --source-metadata-bg: rgba(8, 145, 178, 0.08);
  --source-live: #ea580c;
  --source-live-bg: rgba(234, 88, 12, 0.08);
  --source-manual: #6b7280;
  --source-manual-bg: rgba(107, 114, 128, 0.08);

  --success: #059669;
  --error: #dc2626;
  --deprecated-bg: rgba(220, 38, 38, 0.04);
  --deprecated-border: rgba(220, 38, 38, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(8, 145, 178, 0.1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient background mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, var(--ambient-1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, var(--ambient-2) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hidden {
  display: none !important;
}

/* Glass panel mixin via class */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--bg-glass-border);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 var(--bg-glass-shine);
}

/* ============================================================================
   Animations
   ============================================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--accent-glow);
  }
  50% {
    box-shadow: 0 0 16px 4px var(--accent-glow);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 2000px;
  }
}

.animate-in {
  animation: fadeInUp 0.6s var(--ease-out) both;
}

.stagger-1 {
  animation-delay: 0.05s;
}
.stagger-2 {
  animation-delay: 0.1s;
}
.stagger-3 {
  animation-delay: 0.15s;
}
.stagger-4 {
  animation-delay: 0.2s;
}
.stagger-5 {
  animation-delay: 0.25s;
}
.stagger-6 {
  animation-delay: 0.3s;
}
.stagger-7 {
  animation-delay: 0.35s;
}
.stagger-8 {
  animation-delay: 0.4s;
}

/* ============================================================================
   Step 1: Login / Credentials
   ============================================================================ */

#step-tenant {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.tenant-card {
  background: var(--bg-glass);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  border: 1px solid var(--bg-glass-border);
  border-radius: 20px;
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 var(--bg-glass-shine);
  padding: 48px;
  text-align: center;
  max-width: 460px;
  width: 100%;
  animation: scaleIn 0.7s var(--ease-out) both;
  position: relative;
  overflow: hidden;
}

/* Decorative top-edge glow */
.tenant-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}

.tenant-card h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-bright);
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--text-bright), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  color: var(--text-secondary);
  margin-bottom: 36px;
  font-size: 15px;
  font-weight: 300;
}

.tenant-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.tenant-form input {
  width: 100%;
  padding: 14px 16px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: all var(--duration) var(--ease-out);
}

.tenant-form input::placeholder {
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
}

.tenant-form input:focus {
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.tenant-form select {
  width: 100%;
  padding: 14px 16px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  box-shadow: inset 4px 0 0 var(--ac, transparent);
}
.tenant-form select:focus {
  border-color: var(--accent);
  background-color: var(--input-focus-bg);
  box-shadow:
    inset 4px 0 0 var(--ac, var(--accent)),
    0 0 0 3px var(--accent-dim);
}
/* Each option tinted by environment (color set inline from udo-api-env). */
.tenant-form select option {
  background: var(--bg-elevated);
  font-weight: 600;
}
.tenant-form #api-custom {
  margin-top: 10px;
  box-shadow: inset 4px 0 0 var(--ac, transparent);
}
.tenant-form #api-custom:focus {
  box-shadow:
    inset 4px 0 0 var(--ac, var(--accent)),
    0 0 0 3px var(--accent-dim);
}

/* Buttons */

button,
.btn {
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}

.btn-primary {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--btn-primary-text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow:
    var(--shadow-sm),
    0 0 16px var(--accent-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-md),
    0 0 24px var(--accent-glow);
}

.btn-primary:active {
  transform: translateY(0);
}

.tenant-form button {
  align-self: stretch;
  margin-top: 4px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--btn-primary-text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow:
    var(--shadow-sm),
    0 0 16px var(--accent-glow);
}

.tenant-form button:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-md),
    0 0 24px var(--accent-glow);
}

/* Saved Credentials */

.saved-credentials {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saved-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saved-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

.saved-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  padding: 12px 16px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.saved-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.saved-actions .btn-primary {
  width: 100%;
}

.clear-btn {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}

.clear-btn:hover {
  color: var(--error);
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.06);
}

/* ============================================================================
   Top Bar
   ============================================================================ */

.top-bar {
  background: var(--topbar-bg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--bg-glass-border);
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: sticky;
  /* Sit just below the fixed scope bar (46px) so the step title stays visible
     while scrolling instead of sliding under it. */
  top: 46px;
  z-index: 100;
  animation: fadeIn 0.4s var(--ease-out) both;
}

.top-bar h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  color: var(--text-bright);
  letter-spacing: -0.3px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--hover-overlay);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.back-btn:hover {
  background: var(--method-inner-hover);
  color: var(--text-bright);
  border-color: var(--method-inner-border);
}

/* Refresh pill — inline with hero stats */
.refresh-pill {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px dashed var(--bg-glass-border);
  position: relative;
  overflow: hidden;
  transition: all 0.25s var(--ease-out);
}

.refresh-pill svg {
  flex-shrink: 0;
  transition: color 0.2s;
}

.refresh-pill-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  transition: color 0.2s;
}

.refresh-pill:hover {
  color: var(--accent);
  border-color: var(--accent-glow) !important;
  background: var(--accent-dim);
}

.refresh-pill-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  border-radius: 0 0 100px 100px;
  transition: width 0.3s var(--ease-out);
}

.refresh-pill.loading {
  pointer-events: none;
  color: var(--accent);
  border-color: var(--accent-glow) !important;
}

.refresh-pill.loading .refresh-pill-progress {
  animation: refreshProgress 2s var(--ease-out) forwards;
}

@keyframes refreshProgress {
  0% {
    width: 0;
  }
  30% {
    width: 60%;
  }
  60% {
    width: 80%;
  }
  100% {
    width: 95%;
  }
}

.field-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
}

.method-section-header:hover .field-refresh-btn {
  opacity: 1;
}

.field-refresh-btn:hover {
  background: var(--method-inner-hover);
  color: var(--accent);
  border-color: var(--accent-glow);
  opacity: 1;
}

.field-refresh-btn.spinning {
  animation: spin 0.8s linear infinite;
  pointer-events: none;
  color: var(--accent);
  opacity: 1;
}

.tenant-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  opacity: 0.8;
  padding: 4px 12px;
  background: var(--accent-dim);
  border-radius: 20px;
  font-weight: 500;
}

/* ============================================================================
   Step 2: Connection Grid
   ============================================================================ */

.connection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  padding: 32px 28px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* When the grid sits inside the unified overview, drop the centring so both
   sections align with the left-hand section headings. */
#overview .connection-grid {
  max-width: none;
  margin: 0;
  padding: 0 28px;
}
#overview.cards .connection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.connection-card {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.5s var(--ease-out) both;
}

.connection-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--conn-color, var(--accent)), transparent);
  opacity: 0.7;
  transition:
    opacity var(--duration) var(--ease-out),
    width var(--duration) var(--ease-out);
}

.connection-card:hover::before {
  width: 4px;
  opacity: 1;
}

.connection-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  background: linear-gradient(135deg, var(--accent-dim), transparent 60%);
  pointer-events: none;
}

.connection-card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: translateY(-2px);
}

.connection-card:hover::after {
  opacity: 1;
}

.connection-card .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.connection-card .card-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: -0.2px;
}

.connection-card .card-desc {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.connection-card .card-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  align-items: center;
}

.type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-glow);
}

.enabled-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.enabled-dot.on {
  background: var(--success);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}
.enabled-dot.off {
  background: var(--error);
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
}

/* ============================================================================
   Step 3: Documentation View — Enhanced Detail
   ============================================================================ */

/* Hero section with animated background */
.doc-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bg-glass-border);
  z-index: 1;
}

.doc-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.doc-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 6%, transparent) 0%,
    transparent 40%,
    color-mix(in srgb, var(--source-spec) 4%, transparent) 100%
  );
  animation: heroGradientShift 8s ease-in-out infinite alternate;
}

@keyframes heroGradientShift {
  0% {
    opacity: 0.7;
    filter: hue-rotate(0deg);
  }
  100% {
    opacity: 1;
    filter: hue-rotate(15deg);
  }
}

.doc-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--bg-glass-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-glass-border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.3;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 30%,
    rgba(0, 0, 0, 0.5) 70%,
    transparent 100%
  );
  animation: gridFadeIn 1.2s var(--ease-out) 0.3s both;
}

@keyframes gridFadeIn {
  from {
    opacity: 0;
    background-size: 80px 80px;
  }
  to {
    opacity: 0.3;
    background-size: 60px 60px;
  }
}

.doc-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: heroOrbFloat 12s ease-in-out infinite alternate;
}

.doc-hero-orb-1 {
  width: 300px;
  height: 300px;
  top: -80px;
  right: -40px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.doc-hero-orb-2 {
  width: 200px;
  height: 200px;
  bottom: -60px;
  left: -20px;
  background: color-mix(in srgb, var(--source-spec) 10%, transparent);
  animation-delay: -4s;
  animation-duration: 16s;
}

@keyframes heroOrbFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(20px, -10px) scale(1.1);
  }
  66% {
    transform: translate(-10px, 15px) scale(0.95);
  }
  100% {
    transform: translate(15px, 5px) scale(1.05);
  }
}

.doc-hero-content {
  position: relative;
  z-index: 2;
  padding: 28px 32px;
  animation: heroContentIn 0.6s var(--ease-out) 0.1s both;
}

@keyframes heroContentIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero skeleton loader */
.hero-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

.skel-line {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--glass-border) 25%, transparent 50%, var(--glass-border) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
}

.skel-line-desc {
  width: 55%;
  height: 16px;
}

.skel-line-url {
  width: 70%;
  height: 13px;
  margin-top: 4px;
}

.skel-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.skel-pill {
  width: 72px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--glass-border) 25%, transparent 50%, var(--glass-border) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
}

.skel-pill:nth-child(2) {
  animation-delay: 0.1s;
  width: 80px;
}
.skel-pill:nth-child(3) {
  animation-delay: 0.2s;
  width: 64px;
}
.skel-pill-wide {
  animation-delay: 0.3s;
  width: 110px;
}

@keyframes skelShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.hero-skeleton.skel-fade-out {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.doc-top-bar h2 {
  font-family: 'Sora', 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.conn-id-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 3px 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
  letter-spacing: 0;
}

.conn-id-badge:hover {
  color: var(--accent);
  border-color: var(--accent-glow);
  background: var(--accent-dim);
}

.conn-id-badge.id-copied {
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
}

.doc-description {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 640px;
  font-weight: 300;
}

/* Connection hero stats — the main identity row */
.doc-hero-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  animation: fadeInUp 0.5s var(--ease-out) 0.15s both;
}

.doc-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bg-glass-border);
  transition: all 0.25s var(--ease-out);
  animation: statPillIn 0.4s var(--ease-spring) both;
}

.doc-hero-stat:nth-child(1) {
  animation-delay: 0.2s;
}
.doc-hero-stat:nth-child(2) {
  animation-delay: 0.25s;
}
.doc-hero-stat:nth-child(3) {
  animation-delay: 0.3s;
}
.doc-hero-stat:nth-child(4) {
  animation-delay: 0.35s;
}
.doc-hero-stat:nth-child(5) {
  animation-delay: 0.4s;
}
.doc-hero-stat:nth-child(6) {
  animation-delay: 0.45s;
}

@keyframes statPillIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.doc-hero-stat:hover {
  border-color: var(--accent-glow);
  background: var(--bg-glass-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.doc-hero-stat .stat-icon {
  font-size: 14px;
  opacity: 0.7;
}

.doc-hero-stat .stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.doc-hero-stat .stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
}

.doc-hero-stat.stat-type {
  background: var(--accent-dim);
  border-color: var(--accent-glow);
}

.doc-hero-stat.stat-type .stat-value {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.doc-hero-stat.stat-enabled .stat-value {
  color: var(--success);
}

.doc-hero-stat.stat-disabled .stat-value {
  color: var(--error);
}

.doc-hero-stat.stat-warn {
  border-color: var(--method-patch-border);
  background: var(--method-patch-bg);
}

/* Base URL display */
.doc-base-url {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  animation: fadeInUp 0.5s var(--ease-out) 0.2s both;
  transition: border-color 0.25s var(--ease-out);
}

.doc-base-url:hover {
  border-color: var(--accent-glow);
}

.doc-base-url-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.doc-base-url-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--accent);
  word-break: break-all;
  line-height: 1.5;
  flex: 1;
}

.doc-base-url-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.doc-base-url-copy:hover {
  color: var(--accent);
  border-color: var(--accent-glow);
  background: var(--accent-dim);
}

/* Info Cards — grouped connection metadata */

.info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  animation: fadeInUp 0.5s var(--ease-out) 0.3s both;
}

@media (min-width: 900px) {
  .info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.info-card {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  min-width: 0;
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--source-spec), var(--accent));
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  animation: shimmer 3s linear infinite;
}

.info-card:hover {
  border-color: var(--card-hover-border);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.info-card:hover::before {
  opacity: 1;
}

.info-card-label {
  font-family: 'Sora', 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-card-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}

.info-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.info-status {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
}

.info-auth {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 3px 10px;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: var(--radius-xs);
}

.info-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
  line-height: 1.5;
}

.info-timestamps {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bg-glass-border);
  font-size: 12px;
  color: var(--text-muted);
}

.info-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-dim);
  color: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
}

.info-tag.warn {
  background: var(--method-patch-bg);
  color: var(--method-patch);
}

.info-detail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
}

.info-detail-row:not(:last-child) {
  border-bottom: 1px solid var(--bg-glass-border);
}

.info-detail-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  min-width: 80px;
}

.info-detail-value {
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
  line-height: 1.5;
}

.info-detail-value.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* Copyable URLs */
.copyable-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  word-break: break-all;
}

.copy-url-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.15s,
    background 0.15s;
  flex-shrink: 0;
  vertical-align: middle;
}

.copyable-url:hover .copy-url-btn {
  opacity: 1;
}

.copy-url-btn:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

.copy-url-btn.url-copied {
  opacity: 1;
  color: var(--success);
}

/* Loading Overlay — cinematic progress */

.load-overlay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
  animation: loadOverlayIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.load-overlay.hidden {
  display: none;
}

.load-overlay.fade-out {
  animation: loadOverlayOut 0.4s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes loadOverlayIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes loadOverlayOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.02);
  }
}

/* Animated background orb + rings */
.load-overlay-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.load-orb {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(40px);
  animation: orbPulse 3s ease-in-out infinite;
}

@keyframes orbPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

.load-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.12;
}

.load-ring-1 {
  width: 140px;
  height: 140px;
  animation:
    ringRotate 8s linear infinite,
    ringPulse 3s ease-in-out infinite;
  border-style: dashed;
  border-width: 1.5px;
}

.load-ring-2 {
  width: 200px;
  height: 200px;
  animation:
    ringRotateR 12s linear infinite,
    ringPulse 3s ease-in-out 0.5s infinite;
  border-style: dotted;
}

.load-ring-3 {
  width: 260px;
  height: 260px;
  animation:
    ringRotate 18s linear infinite,
    ringPulse 3s ease-in-out 1s infinite;
  border-style: dashed;
  opacity: 0.06;
}

@keyframes ringRotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ringRotateR {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes ringPulse {
  0%,
  100% {
    opacity: 0.08;
  }
  50% {
    opacity: 0.2;
  }
}

/* Content layer */
.load-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.load-percent {
  font-family: 'JetBrains Mono', monospace;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--text-bright);
  line-height: 1;
  text-shadow: 0 0 40px var(--accent-glow);
  transition: color 0.3s;
}

.load-percent::after {
  content: '%';
  font-size: 24px;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0;
  margin-left: 2px;
  vertical-align: super;
}

/* Progress bar */
.load-bar-wrap {
  width: 200px;
  margin-top: 20px;
}

.load-bar-track {
  height: 3px;
  background: var(--input-border);
  border-radius: 3px;
  overflow: hidden;
}

.load-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-hover), var(--accent), #a5f3fc);
  background-size: 200% 100%;
  animation: barShimmer 2s linear infinite;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 0 12px var(--accent-glow),
    0 0 4px var(--accent);
}

@keyframes barShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Labels */
.load-label {
  margin-top: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.load-detail {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
  transition: opacity 0.2s;
}

/* Toolbar */

.doc-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  background: var(--toolbar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bg-glass-border);
  position: sticky;
  top: 64px;
  z-index: 99;
  animation: toolbarSlideIn 0.5s var(--ease-out) 0.15s both;
}

@keyframes toolbarSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.doc-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 0;
}

.search-wrapper {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.2s;
}

.search-wrapper:focus-within .search-icon {
  color: var(--accent);
}

#search-input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: all var(--duration) var(--ease-out);
}

#search-input::placeholder {
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
}

#search-input:focus {
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow:
    0 0 0 3px var(--accent-dim),
    0 0 20px var(--accent-dim);
}

.endpoint-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 12px;
  background: var(--input-bg);
  border-radius: 100px;
  border: 1px solid var(--input-border);
}

/* ============================================================================
   Endpoint List
   ============================================================================ */

.endpoint-list {
  padding: 24px 28px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.endpoint-card {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--duration) var(--ease-out);
  position: relative;
}

/* Scroll-triggered reveal animation */
.endpoint-card.reveal-hidden {
  opacity: 0;
  transform: translateY(20px);
}

.endpoint-card.reveal-visible {
  animation: endpointReveal 0.5s var(--ease-out) both;
}

@keyframes endpointReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.endpoint-card:hover {
  border-color: var(--method-inner-border);
}

.endpoint-card.deprecated {
  background: var(--deprecated-bg);
  border-color: var(--deprecated-border);
}

.endpoint-card.open {
  border-color: var(--accent-glow);
  box-shadow:
    var(--shadow-md),
    0 0 30px var(--accent-dim);
}

/* Animated left border accent on open */
/* Loading fields state — spinner in chevron + shimmer bar */
.endpoint-card.loading-fields {
  pointer-events: none;
  border-color: var(--accent-glow);
}

.endpoint-card.loading-fields > .endpoint-summary .chevron {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  font-size: 0;
  vertical-align: middle;
}

.endpoint-card.loading-fields::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

.endpoint-card.open::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--source-spec));
  animation: borderGrow 0.4s var(--ease-out) both;
}

@keyframes borderGrow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* Endpoint Summary Row */

.endpoint-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: background var(--duration) var(--ease-out);
}

.endpoint-summary:hover {
  background: var(--hover-overlay);
}

.endpoint-summary .chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition:
    transform 0.35s var(--ease-spring),
    color var(--duration) var(--ease-out);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.endpoint-card.open > .endpoint-summary .chevron {
  transform: rotate(90deg);
  color: var(--accent);
}

.method-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.method-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  transition: all 0.2s var(--ease-out);
}

.method-badge:hover {
  transform: scale(1.05);
}

.method-badge.get {
  background: var(--method-get-bg);
  color: var(--method-get);
  border-color: var(--method-get-border);
}
.method-badge.post {
  background: var(--method-post-bg);
  color: var(--method-post);
  border-color: var(--method-post-border);
}
.method-badge.put {
  background: var(--method-put-bg);
  color: var(--method-put);
  border-color: var(--method-put-border);
}
.method-badge.patch {
  background: var(--method-patch-bg);
  color: var(--method-patch);
  border-color: var(--method-patch-border);
}
.method-badge.delete {
  background: var(--method-delete-bg);
  color: var(--method-delete);
  border-color: var(--method-delete-border);
}

.endpoint-path {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.endpoint-path.deprecated-text {
  text-decoration: line-through;
  color: var(--error);
  opacity: 0.6;
}

.endpoint-desc {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.probe-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--text-muted);
  border: 1px solid var(--input-border);
  flex-shrink: 0;
}

.probe-badge.success {
  background: rgba(52, 211, 153, 0.1);
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.2);
}
.probe-badge.failed {
  background: rgba(248, 113, 113, 0.1);
  color: var(--error);
  border-color: rgba(248, 113, 113, 0.2);
}

/* ============================================================================
   Endpoint Details (inner panel)
   ============================================================================ */

.endpoint-details {
  border-top: 1px solid var(--bg-glass-border);
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity 0.35s var(--ease-out),
    padding 0.3s var(--ease-out);
}

.endpoint-card.open > .endpoint-details {
  max-height: none;
  overflow: visible;
  opacity: 1;
  padding: 20px;
  animation: detailsReveal 0.4s var(--ease-out) both;
}

@keyframes detailsReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Endpoint meta (description, timestamps, probe error) */
.endpoint-meta {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bg-glass-border);
}

.endpoint-meta-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.endpoint-meta-desc:last-child {
  margin-bottom: 0;
}

.endpoint-meta-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.endpoint-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 12px;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: var(--radius-xs);
}

.endpoint-meta-tag.error {
  background: var(--deprecated-bg);
  border-color: var(--deprecated-border);
  color: var(--error);
}

.endpoint-meta-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

/* Path Parameters (endpoint-level) */

.path-params {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bg-glass-border);
}

.path-params-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.path-params-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.path-param {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: var(--radius-sm);
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.path-param:hover {
  border-color: var(--accent-glow);
  transform: translateX(2px);
}

.path-param-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

.path-param-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-primary);
  word-break: break-all;
}

.path-param-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}

.path-param-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}

.path-param-desc {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================================
   Method Sections — individually collapsible
   ============================================================================ */

.method-section {
  background: var(--method-inner-bg);
  border: 1px solid var(--method-inner-border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
  transition: all var(--duration) var(--ease-out);
  position: relative;
}

.method-section:last-child {
  margin-bottom: 0;
}

.method-section:hover {
  border-color: var(--method-inner-hover);
}

.method-section.open {
  border-color: var(--method-inner-hover);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Color-coded left border based on method */
.method-section.open .method-badge.get ~ * {
  --method-accent: var(--method-get);
}
.method-section.open .method-badge.post ~ * {
  --method-accent: var(--method-post);
}
.method-section.open .method-badge.put ~ * {
  --method-accent: var(--method-put);
}
.method-section.open .method-badge.patch ~ * {
  --method-accent: var(--method-patch);
}
.method-section.open .method-badge.delete ~ * {
  --method-accent: var(--method-delete);
}

.method-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--duration) var(--ease-out);
}

.method-section-header:hover {
  background: var(--hover-overlay);
}

.method-section-header .method-chevron {
  font-size: 9px;
  color: var(--text-muted);
  transition:
    transform 0.35s var(--ease-spring),
    color var(--duration) var(--ease-out);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.method-section.open .method-chevron {
  transform: rotate(90deg);
  color: var(--accent);
}

.method-section-header h4 {
  font-family: 'Sora', 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.field-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  padding: 2px 8px;
  background: var(--input-bg);
  border-radius: 100px;
  border: 1px solid var(--input-border);
}

.method-section-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition:
    grid-template-rows 0.5s var(--ease-out),
    opacity 0.3s var(--ease-out);
}

.method-section-body > .method-section-body-inner {
  overflow: hidden;
}

.method-section.open .method-section-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.method-section-body-inner {
  padding: 0 16px 16px;
}

/* ============================================================================
   Field Table
   ============================================================================ */

.field-table-wrap {
  border: 1px solid var(--table-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  animation: tableReveal 0.4s var(--ease-out) both;
}

@keyframes tableReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.field-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-border);
  font-family: 'Sora', 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: 2;
}

.field-table td {
  padding: 7px 14px;
  border-bottom: 1px solid var(--table-row-border);
  vertical-align: top;
  transition:
    background 0.15s ease,
    padding-left 0.2s ease;
}

.field-table tbody tr {
  transition: background 0.15s ease;
}

.field-table tbody tr:hover td {
  background: var(--table-row-hover);
}

.field-table tbody tr:hover td.field-path {
  color: var(--accent);
}

.field-table tr:last-child td {
  border-bottom: none;
}

.field-table tr.deprecated-row {
  opacity: 0.5;
}

.field-table tr.deprecated-row .field-path {
  text-decoration: line-through;
}

/* Field tree — object grouping */

.field-group-row td {
  border-bottom: 1px solid var(--table-row-border);
}

.field-group-row:hover td {
  background: var(--table-row-hover);
}

.field-group-toggle {
  display: inline-block;
  font-size: 9px;
  color: var(--text-muted);
  margin-right: 6px;
  vertical-align: middle;
}

.field-group-name {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-bright);
}

.field-group-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  font-weight: 400;
  font-style: italic;
}

.field-child-hidden {
  display: none;
}

.field-id {
  width: 28px;
  text-align: center;
  padding: 0 !important;
}

.id-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.85;
  transition:
    opacity 0.15s,
    color 0.15s,
    background 0.15s;
  vertical-align: middle;
  margin-left: 4px;
  user-select: none;
}

.id-badge:hover {
  opacity: 1;
  color: var(--accent);
  background: var(--bg-glass);
}

.id-badge.id-copied {
  opacity: 1;
  color: var(--success, #4ade80);
}

.field-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-border);
}

.field-search {
  flex: 0 1 240px;
  padding: 5px 12px;
  border: 1px solid var(--input-border);
  border-radius: 100px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.field-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.field-search::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.field-search-hidden {
  display: none !important;
}

.field-search-match > td.field-path {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.field-expand-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.field-expand-all:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.deprecated-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--deprecated-bg);
  color: var(--error);
  border: 1px solid var(--deprecated-border);
  margin-left: 6px;
  vertical-align: middle;
}

.field-path {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-bright);
}

.field-type {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  font-size: 12px;
}

.field-example {
  max-width: 200px;
}

.example-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 200px;
  vertical-align: middle;
  cursor: default;
}

.source-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
  transition:
    transform 0.15s var(--ease-out),
    box-shadow 0.15s;
}

.source-badge:hover {
  transform: scale(1.05);
}

.source-badge.spec {
  background: var(--source-spec-bg);
  color: var(--source-spec);
  border-color: rgba(167, 139, 250, 0.2);
}
.source-badge.metadata {
  background: var(--source-metadata-bg);
  color: var(--source-metadata);
  border-color: rgba(34, 211, 238, 0.2);
}
.source-badge.live {
  background: var(--source-live-bg);
  color: var(--source-live);
  border-color: rgba(251, 146, 60, 0.2);
}
.source-badge.manual {
  background: var(--source-manual-bg);
  color: var(--source-manual);
  border-color: rgba(107, 114, 128, 0.2);
}

/* ============================================================================
   Params & Pagination
   ============================================================================ */

.params-section {
  margin-top: 16px;
}

.params-section h5 {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.param-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.param-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 5px 12px;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: 100px;
  color: var(--text-secondary);
  transition:
    border-color 0.2s,
    background 0.2s;
}

.param-tag:hover {
  border-color: var(--accent-glow);
  background: var(--bg-glass-hover);
}

.param-tag .param-value {
  color: var(--accent);
}

.param-tag .param-type {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}

.param-tag .param-required {
  color: #f87171;
  font-weight: 700;
}

.param-tag .param-location {
  font-size: 10px;
  padding: 1px 4px;
  background: var(--accent-dim);
  border-radius: 3px;
  color: var(--accent);
  text-transform: lowercase;
}

.param-tag .param-desc {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 4px;
}

.pagination-info {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
}

.pagination-info strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Empty state in method */
.method-empty {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  padding: 8px 0;
}

/* ============================================================================
   Loading & Error States
   ============================================================================ */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 400;
}

.loading::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.error-message {
  color: var(--error);
  font-size: 14px;
  padding: 16px;
  text-align: center;
  margin-top: 12px;
  background: var(--deprecated-bg);
  border: 1px solid var(--deprecated-border);
  border-radius: var(--radius-sm);
}

/* ============================================================================
   Background Sync Indicator
   ============================================================================ */

.sync-indicator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--bg-glass-border);
  border-radius: 100px;
  box-shadow:
    var(--shadow-md),
    0 0 20px var(--accent-dim);
  pointer-events: none;
}

.sync-indicator.hidden {
  display: none;
}

/* Enter / exit */
.sync-indicator.entering {
  animation: syncIn 0.5s var(--ease-spring) both;
}

.sync-indicator.leaving {
  animation: syncOut 0.35s var(--ease-out) both;
}

@keyframes syncIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes syncOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
}

/* Orb container */
.sync-orb {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotating ring */
.sync-ring {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: syncSpin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  opacity: 0.8;
}

@keyframes syncSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Center dot with pulse */
.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: syncPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px var(--accent-glow);
}

@keyframes syncPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.sync-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.3px;
  opacity: 0.9;
}

/* Done state */
.sync-indicator.done .sync-ring {
  animation: none;
  border-color: var(--success);
  opacity: 0.5;
}

.sync-indicator.done .sync-dot {
  background: var(--success);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
  animation: none;
}

.sync-indicator.done .sync-label {
  color: var(--success);
}

/* ============================================================================
   Scrollbar
   ============================================================================ */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ============================================================================
   Theme Toggle
   ============================================================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-left: auto;
  flex-shrink: 0;
}

.theme-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}

.theme-toggle button:hover {
  color: var(--text-primary);
  background: var(--hover-overlay);
}

.theme-toggle button.active {
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Login card theme toggle — positioned top-right */
.tenant-card .theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  margin-left: 0;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
}

/* ============================================================================
   Responsive
   ============================================================================ */

/* Narrow widths: let the top-bar wrap so the ops-nav + density toggle don't
   overflow. Height becomes auto; desktop layout (gap + single-row) is unchanged. */
@media (max-width: 900px) {
  .top-bar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 640px) {
  .tenant-card {
    padding: 32px 24px;
  }
  .connection-grid {
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }
  .endpoint-list {
    padding: 16px;
  }
  .top-bar {
    padding: 0 16px;
  }
  .doc-hero-content {
    padding: 20px 16px;
  }
  .doc-hero-stats {
    gap: 6px;
  }
  .doc-hero-stat {
    padding: 4px 10px;
    font-size: 11px;
  }
  .info-card {
    padding: 14px 16px;
  }
  .info-timestamps {
    flex-direction: column;
    gap: 4px;
  }
  .info-detail-row {
    flex-direction: column;
    gap: 4px;
  }
  .info-detail-label {
    min-width: 0;
  }
  .doc-toolbar {
    padding: 0 16px;
  }
  .doc-toolbar-inner {
    padding: 10px 0;
  }
  .endpoint-summary {
    padding: 12px 14px;
    gap: 10px;
  }
  .endpoint-desc {
    display: none;
  }
  .doc-base-url {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Notice shown above a field table when the underlying ConnectionFieldType
   (or one of its merged sub-types) has additionalFieldsAllowed = true.
   Signals that the listed fields may be an incomplete view of the real type. */
.field-additional-notice {
  margin: 8px 12px 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning, #f5a623) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, #f5a623) 45%, transparent);
  color: var(--text, inherit);
  font-size: 0.88em;
  line-height: 1.4;
  overflow: hidden;
}
.field-additional-notice > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.field-additional-notice > summary::-webkit-details-marker {
  display: none;
}
.field-additional-notice > summary::marker {
  content: '';
}
.field-additional-notice > summary:hover {
  background: color-mix(in srgb, var(--warning, #f5a623) 6%, transparent);
}
.field-additional-headline {
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.field-additional-chev {
  color: var(--text-muted);
  font-size: 11px;
  transition: transform 200ms var(--ease-out);
}
.field-additional-notice[open] > summary > .field-additional-chev {
  transform: rotate(180deg);
}
.field-additional-icon {
  font-size: 1.1em;
  color: var(--warning, #f5a623);
  flex-shrink: 0;
  line-height: 1.2;
}
.field-additional-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px 12px 38px;
  min-width: 0;
}
.field-additional-tag {
  display: inline-block;
  padding: 1px 8px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning, #f5a623) 20%, transparent);
  font-size: 0.92em;
}
.field-additional-hint {
  opacity: 0.75;
  font-size: 0.92em;
}

/* Generic field rendering — used by the "Additional Fields" card to display
   schema additions that don't yet have a dedicated renderer. Indented and
   subdued so it never visually competes with the curated cards above it. */
.generic-object,
.generic-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--border, rgba(127, 127, 127, 0.25));
  margin-top: 4px;
}
.generic-list-item {
  padding: 4px 0;
  border-bottom: 1px dashed var(--border, rgba(127, 127, 127, 0.18));
}
.generic-list-item:last-child {
  border-bottom: none;
}
.generic-object .info-detail-row {
  font-size: 0.92em;
}

/* Field-level reference badge — produced by connection_field_references */
.ref-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--warn, #f59e0b);
  background: color-mix(in srgb, var(--warn, #f59e0b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #f59e0b) 30%, transparent);
  cursor: help;
  white-space: nowrap;
}

.ref-badge-embed {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-alt, rgba(255, 255, 255, 0.04));
  border-radius: 3px;
}

/* Per-type references summary — sits above the field-toolbar inside .field-table-wrap */
.refs-summary {
  margin: 0 0 10px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt, rgba(255, 255, 255, 0.02));
  overflow: hidden;
}

.refs-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.refs-summary-header:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.refs-summary-chevron {
  font-size: 10px;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}

.refs-summary.open .refs-summary-chevron {
  transform: rotate(90deg);
}

.refs-summary-count {
  font-weight: 600;
}

.refs-summary-container-count {
  color: var(--text-muted);
  font-size: 11px;
}

.refs-summary-body {
  display: none;
  padding: 0 12px 10px 12px;
}

.refs-summary.open .refs-summary-body {
  display: block;
}

.refs-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.refs-details-table th,
.refs-details-table td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.refs-details-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.refs-details-table td.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.refs-details-table .refs-empty-cell {
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================================
   UDO views — technical schematic / blueprint
   ----------------------------------------------------------------------------
   Three-axis colour system inside the detail canvas:
     • import side  → cyan      (--accent / #22d3ee)
     • centre UDO   → violet    (--source-spec / #a78bfa)
     • export side  → green     (--method-get / #34d399)
   The bezier edges between sides and centre carry these colours so flow is
   readable at a glance even with the focus mode dimmed.
   ============================================================================ */

:root {
  /* UDO axis colours — chosen far apart on the wheel so import (green),
     centre (violet) and export (amber) read instantly as different roles
     in the 3-column visualisation. */
  --udo-import: #10b981; /* emerald — data flowing IN */
  --udo-import-soft: rgba(16, 185, 129, 0.12);
  --udo-import-edge: rgba(16, 185, 129, 0.3);
  --udo-center: var(--source-spec);
  --udo-center-soft: rgba(167, 139, 250, 0.14);
  --udo-center-edge: rgba(167, 139, 250, 0.22);
  --udo-export: #f97316; /* amber — data flowing OUT */
  --udo-export-soft: rgba(249, 115, 22, 0.12);
  --udo-export-edge: rgba(249, 115, 22, 0.3);
}

/* --------------------------------------------------------------- view toggle */

.view-toggle {
  display: inline-flex;
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.top-bar-spacer {
  flex: 1;
  min-width: 0;
}
.view-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: calc(var(--radius-sm) - 3px);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.view-btn svg {
  opacity: 0.8;
}
.view-btn:hover {
  color: var(--text-primary);
  background: var(--hover-overlay);
}
.view-btn[aria-checked='true'] {
  background: var(--accent);
  color: var(--btn-primary-text);
  font-weight: 600;
}
.view-btn[aria-checked='true'] svg {
  opacity: 1;
}

/* ------------------------------------------------- ops nav (Overview | Pollings | …) */

.ops-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.ops-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: calc(var(--radius-sm) - 3px);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out),
    border-bottom-color var(--duration) var(--ease-out);
  position: relative;
}

.ops-tab:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--hover-overlay);
}

.ops-tab.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}

.ops-tab:disabled {
  color: var(--text-muted);
  cursor: default;
  opacity: 0.55;
}

/* ------------------------------------------------- overview page (two sections) */

#overview {
  padding: 4px 0 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.overview-section {
  padding: 0;
}
.overview-section + .overview-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--bg-glass-border);
}
.overview-heading {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 0 14px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.overview-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------- Compact view — connections */

#overview.compact .connection-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 28px;
  max-width: none;
  margin: 0;
}
#overview.compact .connection-card {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  transition:
    background 120ms,
    border-color 120ms;
}
#overview.compact .connection-card:hover {
  background: var(--hover-overlay);
  border-color: var(--card-hover-border);
}
#overview.compact .connection-card::before {
  display: none;
}
#overview.compact .connection-card .conn-type,
#overview.compact .connection-card .conn-url,
#overview.compact .connection-card .conn-description,
#overview.compact .connection-card .conn-enabled-badge {
  display: none;
}
#overview.compact .connection-card .conn-name-row {
  display: contents;
}
#overview.compact .connection-card .conn-card-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
#overview.compact .connection-card .conn-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-bright);
  white-space: nowrap;
}
#overview.compact .connection-card .conn-compact-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#overview.compact .connection-card .conn-compact-udos {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

/* ------------------------------------------------------ Compact view — UDOs */

#overview.compact .udo-grid {
  display: flex;
  flex-direction: column;
  padding: 0 28px;
  gap: 0;
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  padding: 0;
  margin: 0 28px;
  overflow: hidden;
}
/* Header row — uses the same grid template as data rows so labels align. */
#overview.compact .udo-grid-head {
  display: grid;
  grid-template-columns: 1fr 70px 90px 80px;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--bg-glass-border);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 600;
  /* The data rows have a 3px left border for hover indication; offset the
     header by the same amount so labels align with the columns underneath. */
  border-left: 3px solid transparent;
}
#overview.compact .udo-grid-head .col-fields,
#overview.compact .udo-grid-head .col-conns,
#overview.compact .udo-grid-head .col-mode {
  text-align: center;
}
#overview.compact .udo-grid-head .col-conns,
#overview.compact .udo-grid-head .col-mode {
  text-align: left;
}
#overview.compact .udo-card {
  display: grid;
  grid-template-columns: 1fr 70px 90px 80px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--bg-glass-border);
  border-left: 3px solid var(--udo-card-color, var(--source-spec));
  border-radius: 0;
  margin: 0;
  transition: background 120ms;
}
#overview.compact .udo-card:first-of-type {
  border-top: 0;
}
#overview.compact .udo-card:hover {
  background: var(--hover-overlay);
  transform: none;
  box-shadow: none;
}
#overview.compact .udo-card::before {
  display: none;
}
#overview.compact .udo-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-bright);
}
#overview.compact .udo-card h3 .compact-desc {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#overview.compact .udo-card .udo-card-desc {
  display: none;
}
#overview.compact .udo-card .udo-card-meta {
  display: flex;
  flex-wrap: nowrap;
  font-size: 10px;
  justify-content: flex-start;
}
#overview.compact .udo-card .udo-card-meta .pill {
  padding: 2px 7px;
  font-size: 10px;
  min-width: 44px;
  text-align: center;
}
#overview.compact .udo-card .conn-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
#overview.compact .udo-card .conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* Generic section loading placeholder used by both Connections + UDOs */
.section-loading {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ UDO grid */

.udo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 28px;
}
#overview .udo-grid {
  padding: 0 28px;
}
.udo-card {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--duration) var(--ease-spring),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.udo-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--udo-card-color, var(--udo-center)), transparent);
  opacity: 0.7;
  transition:
    opacity var(--duration) var(--ease-out),
    width var(--duration) var(--ease-out);
}
.udo-card:hover {
  transform: translateY(-2px);
  border-color: var(--udo-center-edge);
  box-shadow:
    var(--shadow-md),
    0 0 24px rgba(167, 139, 250, 0.08);
}
.udo-card:hover::before {
  width: 4px;
  opacity: 1;
}
.udo-card h3 {
  margin: 0 0 4px;
  font-family: 'Sora', 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-bright);
}
.udo-card .udo-card-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 4px 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.udo-card .udo-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  align-items: center;
}
.udo-card .udo-card-meta .pill {
  background: var(--bg-elevated);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--bg-glass-border);
  font-weight: 500;
  font-feature-settings: 'tnum' 1;
}

/* ----------------------------------------- connection-detail UDO sub-section */

.conn-udo-section {
  border-top: 1px solid var(--bg-glass-border);
  margin-top: 28px;
  padding: 18px 0 0;
}
.conn-udo-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 28px 12px;
}
.conn-udo-header h3 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 600;
}

/* --------------------------------------------------------- UDO detail canvas */

.udo-top-bar #udo-detail-title {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text-bright);
  flex: 1;
  border-left: 3px solid var(--udo-title-color, var(--udo-center));
  padding-left: 12px;
}

.udo-canvas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.3fr) minmax(280px, 1fr);
  gap: 32px;
  padding: 28px 28px 60px;
  align-items: start;
}

.udo-col {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius);
  padding: 0;
  z-index: 2;
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.udo-col::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
}
.udo-col-import::before {
  background: linear-gradient(180deg, var(--udo-import), transparent 80%);
}
.udo-col-center::before {
  background: linear-gradient(180deg, var(--udo-center), transparent 80%);
}
.udo-col-export::before {
  background: linear-gradient(180deg, var(--udo-export), transparent 80%);
}

.udo-col-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--bg-glass-border);
  position: sticky;
  top: 0;
  z-index: 3;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  background: var(--bg-glass);
}
.udo-col-head .head-eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.udo-col-import .head-eyebrow {
  color: var(--udo-import);
}
.udo-col-center .head-eyebrow {
  color: var(--udo-center);
}
.udo-col-export .head-eyebrow {
  color: var(--udo-export);
}
.udo-col-head .head-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
}

.udo-col-body {
  padding: 12px 14px 18px;
}

/* ---------------------------------------------------------- centre UDO header */

.udo-center-card {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--bg-glass-border);
  background: linear-gradient(180deg, var(--udo-center-soft), transparent 80%);
}
.udo-center-card .udo-center-name {
  font-family: 'Sora', 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-bright);
  line-height: 1.1;
}
.udo-center-card .udo-center-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.udo-center-card .udo-center-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
/* UDO meta edit button — sits inline next to the name */
.udo-meta-edit-btn {
  margin-left: 8px;
  vertical-align: middle;
  opacity: 0.45;
  font-size: 14px;
}
.udo-center-card:hover .udo-meta-edit-btn,
.udo-meta-edit-btn:focus {
  opacity: 1;
}

/* Inline meta-edit panel in the UDO center card header — matches the modal/form
   design language (glass panel, accent-ring inputs, secondary + primary buttons). */
.udo-meta-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  margin: 4px 0 8px;
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.udo-meta-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.udo-meta-form label input[type='text'],
.udo-meta-form label input:not([type]) {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  outline: none;
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.udo-meta-form label input[type='text']:focus,
.udo-meta-form label input:not([type]):focus {
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.udo-meta-form label input.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
/* "enabled" checkbox row — horizontal, normal-case */
.udo-meta-form label.udo-field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.udo-meta-form label.udo-field-checkbox input[type='checkbox'] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
/* footer buttons — secondary Cancel + primary gradient Save (mirrors modal footer) */
.udo-meta-form .udo-field-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}
.udo-meta-form .udo-field-actions button {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.udo-meta-form .udo-field-actions button[data-action='meta-cancel'] {
  background: transparent;
  border: 1px solid var(--btn-secondary-border);
  color: var(--text-secondary);
}
.udo-meta-form .udo-field-actions button[data-action='meta-cancel']:hover {
  color: var(--text-primary);
  border-color: var(--bg-glass-hover);
  background: var(--hover-overlay);
}
.udo-meta-form .udo-field-actions button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: 0;
  color: var(--btn-primary-text);
  box-shadow:
    var(--shadow-sm),
    0 0 16px var(--accent-glow);
}
.udo-meta-form .udo-field-actions button.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-md),
    0 0 24px var(--accent-glow);
}

/* identity strip removed — identity per endpoint is rendered inline in the
   role-block label instead, so context (which endpoint) is preserved. */

/* ---------------------------------------------------------- edge layer (SVG) */

.udo-edge-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4; /* above .udo-col (z=2) and sticky col-heads (z=3) */
  width: 100%;
  height: 100%;
  overflow: visible;
}
.udo-edge-layer path.udo-edge {
  fill: none;
  stroke-linecap: round;
  transition:
    opacity 180ms var(--ease-out),
    stroke-width 180ms var(--ease-out),
    filter 220ms var(--ease-out);
}
/* stroke colour comes from each path's inline style (set by udo-graph.js
   from the originating connection's --conn-color). No per-side default.
   Default stroke/opacity scale with density via custom props on the layer. */
.udo-edge-layer {
  --udo-edge-stroke: 1.6;
  --udo-edge-opacity: 0.55;
}
.udo-edge-layer path.udo-edge.dim {
  opacity: 0.22;
  stroke-width: 1.1;
}
.udo-edge-layer path.udo-edge.normal {
  opacity: var(--udo-edge-opacity);
  stroke-width: var(--udo-edge-stroke);
}
.udo-edge-layer path.udo-edge.highlight {
  opacity: 1;
  stroke-width: 2.4;
  filter: url(#udo-edge-glow);
}

/* ---------------------------------------- connection group inside side columns */

.udo-conn-group {
  /* Each group gets its own --conn-color (set inline by udo-detail.js).
     The accent stripe and any conn-tinted UI inside read it. */
  --conn-color: var(--text-muted);
  border: 1px solid var(--bg-glass-border);
  border-left: 3px solid var(--conn-color);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.014);
  position: relative;
}
.udo-conn-group::after {
  /* faint glow trail along the stripe so the colour reads against dark glass */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  width: 3px;
  background: var(--conn-color);
  filter: blur(8px);
  opacity: 0.5;
  pointer-events: none;
}

.udo-conn-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.018);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  user-select: none;
  gap: 10px;
}
.udo-conn-group-header:hover {
  background: var(--hover-overlay);
}
.udo-conn-group-header .header-name {
  /* auto width — the toggle zone next to it eats the remaining space so
     the user has room to click "outside the name" to expand/collapse. */
  flex: 0 1 auto;
  max-width: 60%;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 120ms var(--ease-out);
}
.udo-conn-group-header a.header-name:hover {
  color: var(--conn-color, var(--accent));
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--conn-color, var(--accent)) 60%, transparent);
  text-underline-offset: 3px;
}
.udo-conn-group-header .header-toggle-zone {
  flex: 0 1 12px;
  min-width: 12px;
  align-self: stretch;
}
.udo-conn-group-header .header-chev {
  display: inline-block;
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
  padding: 0 2px;
  transition: transform 200ms var(--ease-out);
}
.udo-conn-group-header {
  cursor: pointer;
}
.udo-conn-group-header:hover .header-chev {
  color: var(--text-primary);
}
.udo-conn-group.collapsed .header-chev {
  transform: rotate(-90deg);
}
.udo-conn-group-header .header-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.udo-conn-group-body {
  padding: 4px 10px 10px;
}
.udo-conn-group.collapsed .udo-conn-group-body {
  display: none;
}

.udo-role-block {
  padding: 6px 0 8px;
  border-top: 1px dashed var(--bg-glass-border);
  border-radius: 4px;
  transition:
    background 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}
.udo-role-block:first-child {
  border-top: 0;
}
.udo-role-block.flash {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.udo-role-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 4px 0 6px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.udo-role-label .role-endpoint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* --------------------------------------------------------- field rows (all 3) */

.udo-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  margin: 3px 0;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-size: 12px;
  cursor: default;
  transition:
    opacity 150ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    background 150ms var(--ease-out),
    border-color 150ms var(--ease-out);
}
.udo-field-row:hover {
  background: var(--hover-overlay);
  border-color: var(--bg-glass-border);
}
.udo-field-row[data-udo-field-id] {
  cursor: pointer;
}
.udo-col-center .udo-field-row {
  padding: 8px 12px;
}
.udo-col-center .udo-field-row:hover {
  border-color: var(--udo-center-edge);
}

.udo-field-row .row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.udo-col-center .row-name {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.udo-col-import .row-name,
.udo-col-export .row-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.udo-field-row .row-name .row-fieldtype {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--bg-glass-border);
}
.udo-field-row .row-name .row-display {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 11.5px;
}
.udo-field-row .row-chips {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}
.udo-field-row.dim {
  opacity: 0.32;
}
.udo-field-row.search-hidden {
  display: none !important;
}
/* "const" badge on unbound (source-less) export target rows in the detail overview */
.udo-unbound-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 5px;
  margin-right: 5px;
  border-radius: var(--radius-sm);
  background: var(--hover-overlay);
  border: 1px solid var(--bg-glass-border);
  color: var(--text-secondary);
  vertical-align: middle;
}
.udo-field-row.highlight {
  background: var(--udo-center-soft);
  border-color: var(--udo-center-edge);
  box-shadow:
    0 0 0 1px var(--udo-center-edge),
    0 0 18px var(--udo-center-soft);
}
.udo-col-import .udo-field-row.highlight,
.udo-col-export .udo-field-row.highlight {
  background: color-mix(in srgb, var(--conn-color, var(--accent)) 14%, transparent);
  border-color: color-mix(in srgb, var(--conn-color, var(--accent)) 50%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--conn-color, var(--accent)) 50%, transparent),
    0 0 18px color-mix(in srgb, var(--conn-color, var(--accent)) 18%, transparent);
}
.udo-field-row.broken {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.05);
}

/* Foreign field id rendered as a compact monospace fragment */
.row-fid {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: -0.02em;
}
.row-fid::before {
  content: '#';
  opacity: 0.5;
  margin-right: 2px;
}

/* --------------------------------------------------------------------- chips */

.udo-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: help;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' 1;
  line-height: 1.4;
}
.udo-chip[data-popover] {
  cursor: pointer;
}
.udo-chip[data-popover]:hover {
  filter: brightness(1.18);
}

.udo-chip.mode-primary {
  background: var(--udo-import-soft);
  color: var(--udo-import);
}
.udo-chip.mode-enrichment {
  background: var(--udo-center-soft);
  color: var(--udo-center);
}
.udo-chip.role {
  background: var(--udo-export-soft);
  color: var(--udo-export);
}
.udo-chip.transform {
  background: rgba(251, 191, 36, 0.12);
  color: var(--method-put);
  border-color: rgba(251, 191, 36, 0.18);
}
.udo-chip.identity {
  background: rgba(244, 114, 182, 0.12);
  color: #f472b6;
}
.udo-chip.linked-entity {
  background: rgba(96, 165, 250, 0.12);
  color: var(--method-post);
}
.udo-chip.warn {
  background: rgba(248, 113, 113, 0.16);
  color: var(--error);
  border-color: rgba(248, 113, 113, 0.35);
}
/* Marks a shared all-org field mapping shown under a per-org connection mapping —
   signals it's not a per-org duplicate but applies to every org on the connection. */
.udo-chip.all-org {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
  border-color: rgba(148, 163, 184, 0.3);
  letter-spacing: 0.02em;
}
/* Flow direction chips on UDO field rows — match the column accents so
   ←N visually points to the import column (green) and →N to the export
   column (amber). */
.udo-chip.flow-import {
  background: var(--udo-import-soft);
  color: var(--udo-import);
  border-color: var(--udo-import-edge);
}
.udo-chip.flow-export {
  background: var(--udo-export-soft);
  color: var(--udo-export);
  border-color: var(--udo-export-edge);
}

/* ----------------------------------------------------------------- popovers */

.udo-popover {
  position: absolute;
  z-index: 1100; /* above .udo-edit-overlay (1000) so chip popovers render in front of the mapping modal */
  background: var(--bg-elevated);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  box-shadow: var(--shadow-lg);
  max-width: 380px;
  pointer-events: auto;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  animation: udo-pop-in 160ms var(--ease-out);
}
@keyframes udo-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.udo-popover h4 {
  margin: 0 0 8px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 600;
}
.udo-popover pre {
  background: var(--bg-deep);
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  margin: 4px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
  border: 1px solid var(--bg-glass-border);
}

.udo-empty {
  padding: 28px 24px;
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.udo-empty strong {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
}
.udo-empty p {
  margin: 0;
  max-width: 30ch;
  line-height: 1.5;
}
.udo-empty code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* ----------------------------------- detail-view top bar tweaks (right-align) */

.udo-top-bar {
  gap: 16px;
}

/* UDO field filter — sits inside the centre card, just above the field list */
.udo-center-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--bg-glass-border);
}
.udo-field-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.udo-field-search {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  padding: 7px 32px 7px 12px;
  border-radius: var(--radius-xs);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  transition:
    background 120ms var(--ease-out),
    border-color 120ms var(--ease-out);
}
.udo-field-search:focus {
  outline: none;
  background: var(--input-focus-bg);
  border-color: var(--udo-center);
}
.udo-field-search::placeholder {
  color: var(--text-muted);
}
.udo-field-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 120ms,
    color 120ms;
}
.udo-field-search-clear.visible {
  display: inline-flex;
}
.udo-field-search-clear:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}
.udo-field-search-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
  flex-shrink: 0;
}

/* "Data updated" toast — fires when a background refresh delivered changes */
.data-updated-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--method-get) 50%, var(--bg-glass-border));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 240ms var(--ease-out),
    transform 240ms var(--ease-out);
}
.data-updated-toast.visible {
  opacity: 1;
  transform: translateY(0);
}
.data-updated-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--method-get);
  box-shadow: 0 0 6px var(--method-get);
}

/* Focus-mode hint pill */
.udo-focus-hint {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-glass-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out);
}
.udo-focus-hint.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.udo-focus-hint kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  padding: 2px 6px;
  background: var(--bg-deep);
  border: 1px solid var(--bg-glass-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text-primary);
}

/* ============================================================================
   UDO usage chips (rendered into connection-detail page)
   ============================================================================ */

.udo-usage-strip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}
.udo-usage-strip.endpoint {
  margin-left: 10px;
}
.udo-usage-strip.field {
  margin-left: 8px;
}

.udo-usage-chip {
  --udo-color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--udo-color) 35%, transparent);
  background: color-mix(in srgb, var(--udo-color) 12%, transparent);
  color: var(--udo-color);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1.4;
  transition:
    background 120ms var(--ease-out),
    border-color 120ms var(--ease-out),
    transform 120ms var(--ease-out);
}
.udo-usage-chip:hover {
  background: color-mix(in srgb, var(--udo-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--udo-color) 60%, transparent);
  transform: translateY(-1px);
}
.udo-usage-chip:focus-visible {
  outline: 2px solid var(--udo-color);
  outline-offset: 1px;
}

/* UDO info-card embedded in the connection hero alongside Discovery/Headers */
.conn-udo-card .conn-udo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.conn-udo-card .conn-udo-strip .udo-usage-chip {
  font-size: 11px;
  padding: 3px 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
}

/* ============================================================================
   UDO Mapping Editor — modal
   ----------------------------------------------------------------------------
   Visual language matches `.udo-popover` (line ~3623) — same elevated-glass
   surface, same backdrop-blur saturation lift, same accent system. Scaled up
   to a focused panel for multi-section editing. All colours go through the
   theme tokens so the modal flips with the dark/light theme switch.
   ============================================================================ */

.udo-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.75) 100%);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  animation: udo-edit-overlay-in 180ms var(--ease-out);
}
.udo-edit-overlay.hidden {
  display: none;
}

@keyframes udo-edit-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.udo-edit-dialog {
  width: min(900px, 100%);
  max-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  animation: udo-edit-dialog-in 220ms var(--ease-spring);
  overflow: hidden;
}

/* Thin accent stripe at the top — quietly signals "edit mode" */
.udo-edit-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 22%, var(--accent) 78%, transparent 100%);
  opacity: 0.7;
}

@keyframes udo-edit-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Respect user motion preference — overlay/dialog/popover entrance animations
   can trigger discomfort for vestibular-sensitive users (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .udo-edit-overlay,
  .udo-edit-dialog,
  .udo-popover {
    animation: none;
  }
}

.udo-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--bg-glass-border);
}

.udo-edit-title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-bright);
}

.udo-edit-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-edit-close:hover,
.udo-edit-close:focus-visible {
  color: var(--text-bright);
  background: var(--hover-overlay);
}
.udo-edit-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.udo-edit-body {
  padding: 18px 22px 6px;
  overflow: auto;
  flex: 1 1 auto;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.55;
}

.udo-edit-error {
  margin: 0 22px 12px;
  padding: 10px 14px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: var(--radius-sm);
  color: var(--error);
  font-size: 12px;
  font-weight: 500;
}

.udo-edit-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--bg-glass-border);
  background: var(--bg-glass);
}
.udo-edit-footer button {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.udo-edit-footer .udo-edit-cancel {
  background: transparent;
  border: 1px solid var(--btn-secondary-border);
  color: var(--text-secondary);
}
.udo-edit-footer .udo-edit-cancel:hover {
  color: var(--text-primary);
  border-color: var(--bg-glass-hover);
  background: var(--hover-overlay);
}
.udo-edit-footer .udo-edit-save {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: 0;
  color: var(--btn-primary-text);
  box-shadow:
    var(--shadow-sm),
    0 0 16px var(--accent-glow);
}
.udo-edit-footer .udo-edit-save:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-md),
    0 0 24px var(--accent-glow);
}
.udo-edit-footer .udo-edit-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ----------------------- Sections, labels, form rows ---------------------- */

.udo-edit-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--bg-glass-border);
}
.udo-edit-section:last-child {
  border-bottom: 0;
  margin-bottom: 8px;
  padding-bottom: 0;
}

.udo-edit-section .label-uc {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.udo-edit-section .field-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px;
  font-size: 12.5px;
  margin-bottom: 8px;
  align-items: center;
}
.udo-edit-section .field-row > .field-label {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ------------------------- Inputs, selects, toggles ----------------------- */

.udo-edit-input,
.udo-edit-select {
  width: 100%;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.udo-edit-input:focus,
.udo-edit-select:focus {
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.udo-edit-select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
textarea.udo-edit-input {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  resize: vertical;
  min-height: 56px;
  line-height: 1.45;
}

/* ----------------- Endpoint-config editor: card + form extras -------------- */
.info-card-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.info-card-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 0 2px;
}
.ecfg-checkbox {
  justify-self: start;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}
.ecfg-kv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.ecfg-kv-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.ecfg-empty {
  color: var(--text-muted);
  font-size: 12px;
}
.ecfg-add-btn {
  font-size: 12px;
}

.udo-edit-toggle-group {
  display: inline-flex;
  gap: 0;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.udo-edit-toggle-group button {
  padding: 6px 14px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-edit-toggle-group button:hover {
  color: var(--text-primary);
  background: var(--hover-overlay);
}
.udo-edit-toggle-group button.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}
/* role already configured on the connection — disabled + ✓-marked in the picker */
.udo-edit-toggle-group button:disabled,
.udo-edit-toggle-group button.taken {
  opacity: 0.4;
  color: var(--text-muted);
  cursor: not-allowed;
}
.udo-edit-toggle-group button.taken:hover {
  background: transparent;
  color: var(--text-muted);
}

.udo-edit-readonly-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--hover-overlay);
  padding: 8px 12px;
  border-left: 2px solid var(--bg-glass-border);
  margin-top: 8px;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* ------------------------------ Field-pill (row) -------------------------- */

.udo-edit-pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 5px 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-primary);
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
}
.udo-edit-pill:hover {
  border-color: var(--accent);
  background: var(--input-focus-bg);
}
.udo-edit-pill .chev {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
}
.udo-edit-pill.pill-mismatch {
  border-color: var(--error);
}
.udo-edit-pill.pill-mismatch:hover {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.06);
}

/* --------------------------------- Type tags ------------------------------ */

.udo-typetag {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.udo-typetag.tag-str {
  color: var(--source-metadata);
  background: var(--source-metadata-bg);
  border-color: rgba(34, 211, 238, 0.2);
}
.udo-typetag.tag-num {
  color: var(--method-put);
  background: var(--method-put-bg);
  border-color: var(--method-put-border);
}
.udo-typetag.tag-bool {
  color: var(--source-spec);
  background: var(--source-spec-bg);
  border-color: rgba(167, 139, 250, 0.22);
}
.udo-typetag.tag-mismatch {
  box-shadow: 0 0 0 1px var(--error) inset;
  border-color: transparent;
}

/* --------------------------- Field-mappings table ------------------------- */

.udo-edit-fields {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.udo-edit-fields thead tr {
  color: var(--text-muted);
  border-bottom: 1px solid var(--bg-glass-border);
  text-align: left;
}
.udo-edit-fields th {
  padding: 8px 8px 8px 0;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.udo-edit-fields tbody tr {
  border-bottom: 1px solid var(--table-row-border);
}
.udo-edit-fields tbody tr:last-child {
  border-bottom: 0;
}
.udo-edit-fields tbody tr:hover {
  background: var(--table-row-hover);
}
.udo-edit-fields td {
  padding: 8px 8px 8px 0;
  vertical-align: middle;
  color: var(--text-primary);
}
.udo-edit-fields .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.udo-edit-fields tr.row-mismatch {
  background: rgba(248, 113, 113, 0.04);
}
.udo-edit-fields tr.row-mismatch:hover {
  background: rgba(248, 113, 113, 0.07);
}
.udo-edit-fields .udo-edit-warn {
  color: var(--error);
  font-size: 14px;
  cursor: help;
  line-height: 1;
}

/* ----------------------------------- Badges ------------------------------- */

.udo-edit-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.02em;
}
.udo-edit-badge.ok {
  background: var(--method-get-bg);
  color: var(--method-get);
}
.udo-edit-badge.warn {
  background: var(--method-put-bg);
  color: var(--method-put);
}
.udo-edit-badge.manual {
  background: var(--source-spec-bg);
  color: var(--source-spec);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.udo-edit-badge.muted {
  background: transparent;
  color: var(--text-muted);
}

/* ----------------------- Re-run button + section header ------------------- */

.row-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.udo-edit-rerun {
  background: var(--method-get-bg);
  border: 1px solid var(--method-get-border);
  color: var(--method-get);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}
.udo-edit-rerun:hover {
  background: rgba(52, 211, 153, 0.18);
  border-color: var(--method-get);
}

/* ------------------------------ Mismatch banner --------------------------- */

.udo-edit-mismatch-banner {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--error);
  line-height: 1.5;
}

/* --------------------------- Field-picker popover ------------------------- */

.udo-edit-popover {
  position: absolute;
  z-index: 1100;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  box-shadow: var(--shadow-lg);
  max-height: 340px;
  overflow: auto;
  font-size: 11.5px;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  animation: udo-pop-in 160ms var(--ease-out);
}
.udo-picker-search {
  margin-bottom: 10px;
  padding: 7px 10px;
  font-size: 12px;
}
.udo-picker-group-label {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 4px 4px;
}
.udo-picker-group-label.muted {
  margin-top: 6px;
}
.udo-picker-row {
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background var(--duration) var(--ease-out);
}
.udo-picker-row:hover {
  background: var(--accent-dim);
}
.udo-picker-other {
  opacity: 0.65;
}
.udo-picker-other .udo-picker-row:hover {
  opacity: 1;
  background: var(--hover-overlay);
}

.udo-picker-clear {
  color: var(--text-muted);
  border-bottom: 1px dashed var(--bg-glass-border);
  margin-bottom: 6px;
  padding: 8px 10px !important;
  font-style: italic;
}
.udo-picker-clear:hover {
  background: rgba(248, 113, 113, 0.08);
  color: var(--error);
}
.udo-picker-clear-icon {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-style: normal;
  margin-right: 4px;
  color: var(--text-muted);
}
.udo-picker-clear:hover .udo-picker-clear-icon {
  color: var(--error);
}

/* ------------------------------- Add-card CTA ----------------------------- */

.udo-add-card {
  border: 1px dashed var(--bg-glass-border);
  padding: 14px;
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  margin-top: 10px;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-add-card:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* --------------------------- Inline icon buttons -------------------------- */

.udo-icon-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-icon-btn:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}
.udo-icon-btn.icon-danger:hover {
  color: var(--error);
}
.udo-icon-btn.confirm {
  background: rgba(248, 113, 113, 0.15);
  color: var(--error);
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
}

/* ============================================================================
   UDO Field Edit — shared form (used by udo-detail center column + mapping editor)
   ----------------------------------------------------------------------------
   The form is embedded into two narrow contexts: a ~360px center column row
   and a full-width table cell inside the mapping-editor modal. Both share one
   visual language — a softly elevated panel with a 2px accent stripe on the
   left edge as the "edit mode" signal (mirrors the modal's top stripe).
   All colours, fonts, easings flow through theme tokens so the component
   inherits whichever theme the page is in.
   ============================================================================ */

/* ----------------------- Standalone surface — center column triggers ------- */

/* + Add Field card — same visual recipe as .udo-add-card, just renamed for
   the field-management context. Kept as its own class so future tuning here
   doesn't drift the connection add-card. */
.udo-add-field-card {
  border: 1px dashed var(--bg-glass-border);
  padding: 12px 14px;
  margin-top: 10px;
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-add-field-card:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ✎/🗑 affordances on center-column rows. Always visible — flex-shrink:0
   so they don't get squashed when the field name + chips fill the row.
   Subtle dim-by-default with a small fade-up on row hover keeps them out
   of the way visually until the user is interested in the row. */
.udo-field-row[data-side='center'] {
  position: relative;
}
.udo-field-row[data-side='center'] .row-actions {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  opacity: 0.7;
  transition: opacity 140ms var(--ease-out);
}
.udo-field-row[data-side='center']:hover .row-actions,
.udo-field-row[data-side='center']:focus-within .row-actions {
  opacity: 1;
}
/* Tighter padding on the icon buttons inside the row so two of them fit
   without forcing the row taller. */
.udo-field-row[data-side='center'] .row-actions .udo-icon-btn {
  padding: 1px 4px;
  font-size: 10px;
  line-height: 1;
}

/* The shell that replaces the row when it goes into edit mode.
   Animation makes the swap feel deliberate — slides in from the row's leading
   edge while easing in opacity. Bounded max-height so the transition has
   something to interpolate against. */
.udo-field-edit-shell {
  display: block;
  margin: 4px 0;
  animation: udo-field-edit-shell-in 220ms var(--ease-spring);
}
@keyframes udo-field-edit-shell-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 1200px;
  }
}

/* Cascade-info hint that appears next to the "Delete?" confirm button when
   the field has cross-references that will be cascaded. Reads as a small
   amber pill — informational, not an error. */
.udo-field-cascade-hint {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--method-put);
  background: var(--method-put-bg);
  border: 1px solid var(--method-put-border);
  border-radius: var(--radius-xs);
  vertical-align: middle;
  line-height: 1.6;
  animation: udo-field-edit-shell-in 160ms var(--ease-out);
}

/* ----------------------- The form itself ---------------------------------- */

.udo-field-edit-form {
  position: relative;
  padding: 14px 14px 12px 16px;
  /* Sit on the elevated surface tier (same as dialog/popover) so the form
     reads as a separate layer above the page bg. Inputs inside use the
     darker --input-bg, so there's a clear visual hierarchy in both themes. */
  background: var(--bg-elevated);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Accent stripe on the left edge — visual rhyme with the modal's top accent
   stripe, scaled down to a vertical hairline for the embedded form. */
.udo-field-edit-form::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--accent) 18%, var(--accent) 82%, transparent 100%);
  opacity: 0.55;
}

/* Form row — label/input grid. Narrow enough to fit the ~360px center
   column without crowding, comfortable in the wider table-cell context.
   IMPORTANT: scoped under .udo-field-edit-form because `.udo-field-row` is
   ALSO used (with display:flex) by the data rows in the import/center/export
   columns — leaving these unscoped overrides those rows. */
.udo-field-edit-form .udo-field-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.4;
}
.udo-field-edit-form .udo-field-row:last-of-type {
  margin-bottom: 10px;
}

.udo-field-edit-form .udo-field-row > label {
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Stack variant for sections that need a vertical layout (e.g. ENUM chips). */
.udo-field-edit-form .udo-field-row.udo-field-row-stack {
  grid-template-columns: 1fr;
  gap: 6px;
}
.udo-field-edit-form .udo-field-row.udo-field-row-stack > label {
  margin-bottom: 2px;
}

/* Toggle row sits flush left without a label column — the toggle's own
   label provides the text. */
.udo-field-edit-form .udo-field-row.udo-field-toggle-row {
  grid-template-columns: 1fr;
  margin-top: 4px;
  margin-bottom: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--bg-glass-border);
}

/* Validation-error state on a row outlines the input child in red. */
.udo-field-edit-form .udo-field-row.has-error > .udo-field-input {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}
.udo-field-edit-form .udo-field-row.has-error > .udo-field-input:focus {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.04);
}

/* ----------------------- Inputs ------------------------------------------- */

.udo-field-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  outline: none;
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.udo-field-input::placeholder {
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
}
.udo-field-input:focus {
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.udo-field-input.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.01em;
}

/* When the row uses a select + an inline checkbox label (Type + required),
   the row's grid template is overridden inline. The select stretches and
   the checkbox sits next to it. Use auto-width on selects in such rows. */
.udo-field-row select.udo-field-input {
  cursor: pointer;
}
.udo-field-row select.udo-field-input option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Allow Type-row's select+checkbox to share the input column gracefully. */
.udo-field-row > select.udo-field-input + .udo-field-checkbox {
  margin-left: 10px;
}

/* Checkbox label — clickable strip with text. */
.udo-field-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.udo-field-checkbox input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}
.udo-field-checkbox:hover {
  color: var(--text-primary);
}

/* When a Type select shares its row with the required checkbox, allow the
   layout to fit. The grid auto-flow handles it because the parent row is
   `1fr` for the input column and the checkbox is appended. */
.udo-field-edit-form .udo-field-row:has(select.udo-field-input) {
  grid-template-columns: 90px minmax(0, 1fr) auto;
  column-gap: 12px;
}
.udo-field-edit-form .udo-field-row:has(select.udo-field-input) > select.udo-field-input {
  grid-column: 2;
}
.udo-field-edit-form .udo-field-row:has(select.udo-field-input) > .udo-field-checkbox {
  grid-column: 3;
}

/* ----------------------- Inline error / warn messages --------------------- */

.udo-field-error {
  grid-column: 1 / -1;
  padding: 4px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--error);
}

.udo-field-warn {
  margin: 4px 0 10px;
  padding: 8px 12px;
  background: var(--method-put-bg);
  border: 1px solid var(--method-put-border);
  border-radius: var(--radius-xs);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--method-put);
}

/* ----------------------- ENUM chip input ---------------------------------- */

.udo-enum-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration) var(--ease-out);
}
.udo-enum-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.udo-enum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 18px;
}
.udo-enum-chips:empty {
  min-height: 0;
}

.udo-enum-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.4;
}

.udo-enum-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-enum-remove:hover {
  background: rgba(248, 113, 113, 0.18);
  color: var(--error);
}

.udo-enum-input {
  width: 100%;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
}
.udo-enum-input::placeholder {
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
}

/* ----------------------- Action footer ------------------------------------ */

.udo-field-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--bg-glass-border);
}

.udo-field-actions button {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}

.udo-field-actions button[data-action='cancel'] {
  background: transparent;
  border: 1px solid var(--btn-secondary-border);
  color: var(--text-secondary);
}
.udo-field-actions button[data-action='cancel']:hover {
  color: var(--text-primary);
  border-color: var(--bg-glass-hover);
  background: var(--hover-overlay);
}

.udo-field-actions button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: 0;
  color: var(--btn-primary-text);
  box-shadow:
    var(--shadow-sm),
    0 0 16px var(--accent-glow);
}
.udo-field-actions button.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-md),
    0 0 24px var(--accent-glow);
}
.udo-field-actions button.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ----------------------- Inline surface — pending row in mapping editor --- */

/* Pending new-field rows live inside .udo-edit-fields table; they need to
   blend into the existing table styling but make clear they're pending. */
.udo-edit-fields tr[data-pending-id] {
  background: rgba(34, 211, 238, 0.025);
  border-bottom: 1px solid var(--table-row-border);
}
.udo-edit-fields tr[data-pending-id]:hover {
  background: rgba(34, 211, 238, 0.04);
}
.udo-edit-fields tr[data-pending-id] td {
  padding: 12px 8px 12px 0;
  vertical-align: top;
}
.udo-edit-fields tr[data-pending-id] td[colspan='3'] {
  padding-right: 16px;
}

/* The form embedded in the table cell can take the full available width.
   Loosen the inline padding since the table row already provides margin. */
.udo-edit-fields tr[data-pending-id] .udo-field-edit-form {
  margin: 0;
}

/* The discard × button next to the api-field pill on a pending row. */
.udo-edit-fields tr[data-pending-id] .udo-edit-pill + .udo-icon-btn {
  margin-left: 4px;
}

/* ============================================================================
   FieldArrayMatch edit-form — lives inside .udo-popover
   ----------------------------------------------------------------------------
   A compact multi-row filter editor sitting inside the existing popover shell
   (~360-440 px). Visual language inherits from .udo-field-edit-form and
   .udo-field-actions; inputs match .udo-edit-input; the add-row trigger mirrors
   .udo-add-card at inline scale; actions mirror .udo-field-actions exactly.
   All colours flow through theme tokens — amber for .udo-arraymatch-warn reuses
   --method-put / --method-put-bg / --method-put-border (already amber in the
   palette, no additional hardcoding needed).
   ============================================================================ */

/* ---- Container ------------------------------------------------------------ */

.udo-arraymatch-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Extend flush with the popover's existing padding edges */
  margin: 4px -2px 0;
}

/* ---- Filter rows ---------------------------------------------------------- */

.udo-arraymatch-row {
  display: grid;
  /* key ~42%, value fills rest; null-toggle + × sit in auto columns */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto auto;
  gap: 5px;
  align-items: center;
  padding: 6px 8px;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
}

.udo-arraymatch-row:focus-within {
  border-color: var(--input-border);
  background: var(--input-bg);
}

/* Error state: red outline + faint tint — mirrors .udo-field-row.has-error */
.udo-arraymatch-row.has-error {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.04);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.12);
}
.udo-arraymatch-row.has-error:focus-within {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* ---- Inputs — .udo-edit-input recipe, tightened for narrow popover -------- */

.udo-arraymatch-input {
  width: 100%;
  padding: 7px 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  outline: none;
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.udo-arraymatch-input::placeholder {
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
}
.udo-arraymatch-input:focus {
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Mono variant — key fields and literal values */
.udo-arraymatch-input.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.01em;
}

/* Disabled value input when null-toggle is on — dimmed but not dead grey */
.udo-arraymatch-input.value-input.disabled,
.udo-arraymatch-input.value-input:disabled {
  background: var(--bg-glass);
  border-color: var(--bg-glass-border);
  color: var(--text-muted);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
}

/* ---- Null-toggle ---------------------------------------------------------- */

/* Compact checkbox + "null" label sitting in the auto column */
.udo-arraymatch-null-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  transition: color var(--duration) var(--ease-out);
}
.udo-arraymatch-null-toggle input[type='checkbox'] {
  width: 12px;
  height: 12px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.udo-arraymatch-null-toggle:hover {
  color: var(--text-secondary);
}
.udo-arraymatch-null-toggle:has(input:checked) {
  color: var(--accent);
}

/* ---- Remove (×) button ---------------------------------------------------- */

.udo-arraymatch-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-arraymatch-remove:hover {
  background: rgba(248, 113, 113, 0.14);
  color: var(--error);
}

/* ---- "+ Add filter" trigger ----------------------------------------------- */

/* One-line dashed-border button — compact analogue of .udo-add-card */
.udo-arraymatch-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 1px dashed var(--bg-glass-border);
  border-radius: var(--radius-sm);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-arraymatch-add:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Cancel / Save footer ------------------------------------------------- */

/* Mirrors .udo-field-actions — top dashed divider, flex-end, gap 8px */
.udo-arraymatch-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--bg-glass-border);
}

.udo-arraymatch-actions button {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}

/* Ghost Cancel */
.udo-arraymatch-actions button[data-action='cancel'],
.udo-arraymatch-actions button[data-action='vr-cancel'],
.udo-arraymatch-actions button[data-action='cond-cancel'] {
  background: transparent;
  border: 1px solid var(--btn-secondary-border);
  color: var(--text-secondary);
}
.udo-arraymatch-actions button[data-action='cancel']:hover,
.udo-arraymatch-actions button[data-action='vr-cancel']:hover,
.udo-arraymatch-actions button[data-action='cond-cancel']:hover {
  color: var(--text-primary);
  border-color: var(--bg-glass-hover);
  background: var(--hover-overlay);
}

/* Primary Save — exact sibling of .udo-field-actions button.primary */
.udo-arraymatch-actions button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: 0;
  color: var(--btn-primary-text);
  box-shadow:
    var(--shadow-sm),
    0 0 16px var(--accent-glow);
}
.udo-arraymatch-actions button.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-md),
    0 0 24px var(--accent-glow);
}
.udo-arraymatch-actions button.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- Keyboard focus rings (WCAG 2.4.7) ----------------------------------- */
.udo-arraymatch-remove:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 1px;
}
.udo-arraymatch-add:focus-visible,
.udo-arraymatch-actions button.primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.udo-arraymatch-actions button[data-action='cancel']:focus-visible,
.udo-arraymatch-actions button[data-action='vr-cancel']:focus-visible,
.udo-arraymatch-actions button[data-action='cond-cancel']:focus-visible {
  outline: 2px solid var(--text-secondary);
  outline-offset: 2px;
}

/* ---- valueSource (reference field pull) rows ------------------------------ */
/* Label + full-width <select> stacked; reuses the arraymatch row chrome and
   .udo-arraymatch-input so the picker matches the array-filter editor visually. */
.udo-valuesource-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
}
.udo-valuesource-row:focus-within {
  border-color: var(--input-border);
  background: var(--input-bg);
}
.udo-valuesource-row.has-error {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.04);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.12);
}
.udo-valuesource-label {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
}

/* ---- Inline messages ------------------------------------------------------ */

/* Red error — appears below the errored row */
.udo-arraymatch-error {
  padding: 3px 2px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--error);
  line-height: 1.4;
}

/* Amber warn — duplicate-key or other non-fatal warning.
   Reuses --method-put (amber #fbbf24) already in the token set. */
.udo-arraymatch-warn {
  padding: 7px 10px;
  background: var(--method-put-bg);
  border: 1px solid var(--method-put-border);
  border-radius: var(--radius-xs);
  font-size: 11px;
  line-height: 1.45;
  color: var(--method-put);
}

/* ---- .udo-edit-pill.add-flt variant --------------------------------------- */

/* Compact dashed-border pill that triggers the arraymatch popover from a
   mapping-editor field row. Visual sibling of .udo-add-card, inline scale. */
.udo-edit-pill.add-flt {
  border-style: dashed;
  border-color: var(--bg-glass-border);
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 4px;
}
.udo-edit-pill.add-flt:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* ============================================================================
   Transforms-pipeline editor — Phase 2B
   ----------------------------------------------------------------------------
   Pipeline as a stack of glass slabs. Each step is one slab with a head bar
   (arrows | index | type-picker | ×) and an optional config body for the
   step's per-type form fields. The body nests under the head via left-edge
   indentation and an accent-coloured rule that brightens on focus-within,
   signalling "this configures the step above." The MAP type uses a compact
   [key] = [value] (−) sub-table that mirrors the .udo-arraymatch-row pattern.

   Visual sibling of the Phase 2A .udo-arraymatch-* family — same input recipe,
   same error/focus halos, same uppercase Sora micro-labels, same dashed-border
   add affordances. All colours flow through theme tokens; the only literals are
   alpha variants of --error: #f87171, matching the established Phase 2A pattern.
   ============================================================================ */

/* ---- Read-only summary popover -------------------------------------------- */

/* One line per pipeline step: mono accent-tinted index, then summary text.
   Subtle bottom rule between rows for vertical rhythm. */
.udo-transform-summary-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-primary);
  border-bottom: 1px solid var(--bg-glass-border);
}
.udo-transform-summary-row:last-child {
  border-bottom: 0;
}
.udo-transform-summary-row strong {
  flex-shrink: 0;
  width: 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* ---- Edit form container (sibling of .udo-arraymatch-edit-form) ----------- */

.udo-transform-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px -2px 0;
}

/* ---- Per-step slab -------------------------------------------------------- */

.udo-transform-row {
  display: flex;
  flex-direction: column;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.udo-transform-row:focus-within {
  border-color: var(--input-border);
  background: var(--input-bg);
}
.udo-transform-row.has-error {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.04);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.12);
}
.udo-transform-row.has-error:focus-within {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* ---- Row head — arrows | index | type-picker | × ------------------------- */

.udo-transform-row-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}

/* ---- Vertical Up/Down rocker ---------------------------------------------- */

.udo-transform-arrows {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.udo-transform-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
.udo-transform-arrow:hover:not(:disabled) {
  background: var(--accent-dim);
  color: var(--accent);
}
.udo-transform-arrow:active:not(:disabled) {
  transform: scale(0.92);
}
.udo-transform-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ---- Index badge ---------------------------------------------------------- */

/* Mono "1.", "2." etc. — secondary by default, accent on focus-within so the
   active slab self-identifies. */
.udo-transform-index {
  flex-shrink: 0;
  min-width: 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-align: center;
  transition: color var(--duration) var(--ease-out);
}
.udo-transform-row:focus-within .udo-transform-index {
  color: var(--accent);
}

/* ---- Grouped <select> type-picker ----------------------------------------- */

/* Mirrors .udo-edit-input recipe but keeps the native dropdown chevron — no
   appearance:none. Padding-right is generous to give the OS chevron breathing
   room. <optgroup> labels get italic+uppercase+muted; options stay plain. */
.udo-transform-type {
  width: 100%;
  padding: 6px 26px 6px 9px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.udo-transform-type:hover {
  border-color: var(--bg-glass-hover);
  background: var(--input-focus-bg);
}
.udo-transform-type:focus {
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
/* The supported (cross-browser) subset of <optgroup> styling */
.udo-transform-type optgroup {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-elevated);
}
.udo-transform-type option {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-primary);
  background: var(--bg-surface);
}

/* ---- × Remove button (sibling of .udo-arraymatch-remove) ------------------ */

.udo-transform-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-transform-remove:hover {
  background: rgba(248, 113, 113, 0.14);
  color: var(--error);
}

/* ---- Config sub-form (the body of the slab) ------------------------------- */

/* Indented past the arrow + index columns so the form aligns under the
   type-picker. The 2px left rule visually anchors the form to its parent
   step; on focus-within it brightens to accent-dim, reinforcing the
   "this configures the step above" relationship. */
.udo-transform-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 8px 8px 32px;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--bg-glass-border);
  transition: border-color var(--duration) var(--ease-out);
}
.udo-transform-row:focus-within .udo-transform-config {
  border-left-color: var(--accent-dim);
}

/* ---- Per-config field ----------------------------------------------------- */

.udo-transform-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Uppercase Sora micro-label, same scale as .udo-edit-pill.add-flt for
   typographic consistency across the popover. */
.udo-transform-field-label {
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Error decoration on the contained input (the input itself uses the
   .udo-arraymatch-input recipe; we just shift its border colour + halo). */
.udo-transform-field.has-error .udo-arraymatch-input {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.04);
}
.udo-transform-field.has-error .udo-arraymatch-input:focus {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* ---- Key-value table (MAP type) ------------------------------------------- */

.udo-transform-kv-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.udo-transform-kv-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.udo-transform-kv-type {
  width: 72px;
  flex-shrink: 0;
}
/* Single typed scalar (type-select + value control), e.g. MAP "default". */
.udo-transform-typed-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.udo-transform-typed-row > input,
.udo-transform-typed-row > select[data-typed='value'] {
  flex: 1 1 auto;
  min-width: 0;
}
.udo-transform-kv-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  user-select: none;
  padding: 0 2px;
}
.udo-transform-kv-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-transform-kv-remove:hover {
  background: rgba(248, 113, 113, 0.14);
  color: var(--error);
}
.udo-transform-kv-add {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: transparent;
  border: 1px dashed var(--bg-glass-border);
  border-radius: var(--radius-xs);
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-transform-kv-add:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.udo-transform-kv-empty {
  padding: 4px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
}

/* ---- + tf chip on rows without transforms (sibling of .add-flt) ----------- */

/* Visual pair with .udo-edit-pill.add-flt — same dashed-border, same Sora
   micro-cap label, same accent hover. The two read as a coordinated set
   when seen side-by-side on the same field-mapping row. */
.udo-edit-pill.add-tf {
  border-style: dashed;
  border-color: var(--bg-glass-border);
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 4px;
}
.udo-edit-pill.add-tf:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* + ref chip — value-source picker; same coordinated set as .add-flt / .add-tf */
.udo-edit-pill.add-vs {
  border-style: dashed;
  border-color: var(--bg-glass-border);
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 4px;
}
.udo-edit-pill.add-vs:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* ---- Keyboard focus rings (WCAG 2.4.7) ------------------------------------ */

/* Inputs and the type-picker self-indicate focus via the 3px accent-dim halo
   on :focus (matching the .udo-arraymatch-input pattern). Buttons additionally
   get a hard outline on :focus-visible so keyboard navigation is unmistakable. */
.udo-transform-arrow:focus-visible,
.udo-transform-kv-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.udo-transform-remove:focus-visible,
.udo-transform-kv-remove:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 1px;
}

/* ============================================================================
   ENRICHMENT modal redesign — Phase 2C
   ----------------------------------------------------------------------------
   Third in the editable-modal family after Phase 2A (.udo-arraymatch-*) and
   Phase 2B (.udo-transform-*). Same visual language, same density, same
   spacing rhythm. Components:
     · mode-chip-as-trigger (Variant A) — chip itself opens the edit modal
     · chip-multi-select for linkConfig.udoFields with type-tag chips
     · ENRICHMENT flow diagram (incoming → match → existing → merge)
     · LIST-role status banner (amber warn + actionable, green ok)
     · 🔑 KEY marker on field-mappings table rows
     · mode-switch discard hint
   All colours flow through theme tokens. Alpha variants are derived via
   color-mix() from --accent / --source-spec etc. so theme changes propagate
   to all tints. Remaining hardcoded literals are limited to:
     · alpha variants of --error: #f87171 (Phase 2A pattern, kept for visual
       consistency with the existing .udo-arraymatch-* family)
     · subtle white-overlay tints rgba(255, 255, 255, 0.04 / 0.16) — there is
       no token for these, so they remain explicit.
   ============================================================================ */

/* ---- Mode-chip-as-trigger (Task 1) ---------------------------------------- */

/* The PRIMARY/ENRICHMENT chip is now a real button. Hover reveals an inline
   caret and adds an accent halo. Click bubbles to the existing
   data-edit-mapping delegation in udo-detail.js. */
.udo-chip.mode-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 9px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition:
    background var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
/* Mode-specific tinting — matches the read-only chip styling so visual
   continuity is preserved when the chip becomes interactive. */
.udo-chip.mode-trigger.mode-primary {
  color: var(--source-spec);
  border-color: color-mix(in srgb, var(--source-spec) 25%, transparent);
  background: var(--source-spec-bg);
}
.udo-chip.mode-trigger.mode-enrichment {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  background: var(--accent-dim);
}
.udo-chip.mode-trigger:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transform: translateY(-1px);
}
.udo-chip.mode-trigger.mode-primary:hover {
  border-color: var(--source-spec);
  background: color-mix(in srgb, var(--source-spec) 18%, transparent);
  color: var(--source-spec);
  box-shadow: 0 0 12px color-mix(in srgb, var(--source-spec) 35%, transparent);
}
.udo-chip.mode-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.udo-chip.mode-trigger.mode-primary:focus-visible {
  outline-color: var(--source-spec);
}
.udo-chip.mode-trigger .mode-trigger-label {
  pointer-events: none;
}
/* Org-scope indicator riding on the mode chip (cm-level: mode + orgs together).
   Shown only when the mapping is restricted to specific orgs. */
.udo-chip.mode-trigger .mode-trigger-orgs {
  pointer-events: none;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 100px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--accent-dim);
  color: var(--accent);
}
/* Caret hidden by default; reveals on hover with a subtle width transition
   so the chip "grows" outward instead of shifting layout. */
.udo-chip.mode-trigger .mode-trigger-caret {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  margin-left: 0;
  font-size: 7px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-2px);
  transition:
    max-width var(--duration) var(--ease-out),
    margin-left var(--duration) var(--ease-out),
    opacity var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
  pointer-events: none;
}
.udo-chip.mode-trigger:hover .mode-trigger-caret,
.udo-chip.mode-trigger:focus-visible .mode-trigger-caret {
  max-width: 12px;
  margin-left: 5px;
  opacity: 1;
  transform: translateX(0);
}

/* ---- Mode-block wrapper + switch hint (Task 6) ---------------------------- */

.udo-mode-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.udo-mode-switch-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
  padding-top: 2px;
}

/* ---- Chip-multi-select (Task 2) ------------------------------------------- */

.udo-linkconfig-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* The container behaves like an input field — focus-within drives the halo,
   has-error keeps red precedence even when not focused. */
.udo-linkconfig-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 6px 7px;
  min-height: 38px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  cursor: text;
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.udo-linkconfig-chips:hover {
  border-color: var(--bg-glass-hover);
}
.udo-linkconfig-chips:focus-within,
.udo-linkconfig-chips.active {
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.udo-linkconfig-chips.has-error {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.04);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.12);
}
.udo-linkconfig-chips.has-error:focus-within,
.udo-linkconfig-chips.has-error.active {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* The selected-field chip — accent-tinted pill, mono name + tiny type tag + × */
.udo-linkconfig-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 9px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 100px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.udo-linkconfig-chip .mono {
  font-family: inherit;
}
.udo-linkconfig-chip .udo-typetag {
  font-size: 8px;
  padding: 1px 4px;
  letter-spacing: 0.06em;
}
.udo-linkconfig-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-radius: 50%;
  color: var(--accent);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-linkconfig-chip-remove:hover {
  background: rgba(248, 113, 113, 0.18);
  color: var(--error);
}
.udo-linkconfig-chip-remove:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 1px;
}

/* The "Add another field…" trigger input — readonly so we don't need to
   handle text input; clicks open the dropdown. */
.udo-linkconfig-chip-input {
  flex: 1 1 140px;
  min-width: 140px;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}
.udo-linkconfig-chip-input::placeholder {
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
}

/* ---- Available-fields dropdown (Task 2) ----------------------------------- */

.udo-linkconfig-dropdown {
  margin-top: 6px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow:
    var(--shadow-lg),
    0 0 24px color-mix(in srgb, var(--accent) 10%, transparent);
}
.udo-linkconfig-dropdown-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--bg-glass-border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.udo-linkconfig-dropdown-count {
  margin-left: auto;
  padding: 2px 7px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 100px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}
.udo-linkconfig-dropdown-empty {
  padding: 14px 11px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
}
.udo-linkconfig-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bg-glass-border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out);
}
.udo-linkconfig-dropdown-item:last-child {
  border-bottom: 0;
}
.udo-linkconfig-dropdown-item:hover {
  background: var(--accent-dim);
}
.udo-linkconfig-dropdown-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.udo-linkconfig-dropdown-item .udo-typetag {
  margin-left: auto;
  font-size: 8.5px;
}

/* ---- Inline error + helper + multimatch (Task 2) -------------------------- */

.udo-linkconfig-error {
  padding: 3px 2px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--error);
  line-height: 1.4;
}
.udo-linkconfig-helper {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
}
.udo-linkconfig-helper code {
  padding: 1px 5px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--method-put);
}
.udo-linkconfig-multimatch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.udo-linkconfig-multimatch label {
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.udo-linkconfig-multimatch select.udo-edit-select {
  width: 100%;
}

/* ---- ENRICHMENT flow diagram (Task 3) ------------------------------------- */

.udo-enrichment-flow {
  margin: 4px 0;
  padding: 13px 15px;
  background:
    radial-gradient(ellipse 70% 100% at 0% 50%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%),
    var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius-sm);
}
.udo-enrichment-flow-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.udo-enrichment-flow-head::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.udo-enrichment-flow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.udo-enrichment-flow-node {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.udo-enrichment-flow-node.incoming {
  background: var(--source-spec-bg);
  border-color: color-mix(in srgb, var(--source-spec) 30%, transparent);
  color: var(--source-spec);
}
.udo-enrichment-flow-node.match {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.udo-enrichment-flow-node-key {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.udo-enrichment-flow-node-key.muted {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-muted);
  opacity: 0.7;
}
.udo-enrichment-flow-node.match .udo-enrichment-flow-node-key + .udo-enrichment-flow-node-key {
  margin-left: 3px;
}
.udo-enrichment-flow-node.existing {
  background: var(--method-get-bg);
  border-color: var(--method-get-border);
  color: var(--method-get);
}
.udo-enrichment-flow-node.merge {
  background: var(--bg-elevated);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text-secondary);
}
.udo-enrichment-flow-arrow {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.udo-enrichment-flow-caption {
  margin-top: 11px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- LIST-role status banner (Task 4) ------------------------------------- */

.udo-listrole-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
}
.udo-listrole-banner.warn {
  background: var(--method-put-bg);
  border: 1px solid var(--method-put-border);
  color: var(--method-put);
}
.udo-listrole-banner.ok {
  background: var(--method-get-bg);
  border: 1px solid var(--method-get-border);
  color: var(--method-get);
}
.udo-listrole-banner-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.3;
}
.udo-listrole-banner-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.udo-listrole-banner-body strong {
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
}
.udo-listrole-banner.warn .udo-listrole-banner-body strong {
  color: var(--method-put);
}
.udo-listrole-banner.ok .udo-listrole-banner-body strong {
  color: var(--method-get);
}
.udo-listrole-banner-body p {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
}
.udo-listrole-banner.warn .udo-listrole-banner-body p {
  color: rgba(251, 191, 36, 0.82);
}
.udo-listrole-banner.ok .udo-listrole-banner-body p {
  color: rgba(52, 211, 153, 0.82);
}
.udo-listrole-banner-body small {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.udo-listrole-banner.warn .udo-listrole-banner-body small {
  color: rgba(251, 191, 36, 0.82);
}
.udo-listrole-banner.ok .udo-listrole-banner-body small {
  color: rgba(52, 211, 153, 0.82);
}

/* The inline action button — link-style. Sits flush at the body's left edge. */
.udo-listrole-banner-action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed currentColor;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  cursor: pointer;
  transition:
    color var(--duration) var(--ease-out),
    border-bottom-color var(--duration) var(--ease-out);
}
.udo-listrole-banner-action:hover {
  color: var(--accent-hover);
  border-bottom-style: solid;
}
.udo-listrole-banner-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- 🔑 KEY marker on field-mappings rows (Task 5) ------------------------ */

/* Row treatment: subtle accent gradient + 2px left rail rendered via the
   first <td>'s ::before so it doesn't fight with the table's own borders. */
.udo-edit-fields tr.is-link-key {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 4.5%, transparent) 0%, transparent 35%);
}
.udo-edit-fields tr.is-link-key td:first-child {
  position: relative;
}
.udo-edit-fields tr.is-link-key td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--accent-glow);
}

.udo-link-key-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  vertical-align: middle;
  margin-right: 4px;
}

/* ============================================================================
   Role-extras editor — Phase 3
   ----------------------------------------------------------------------------
   Fourth in the editable-modal family (after .udo-arraymatch-* / Phase 2A,
   .udo-transform-* / Phase 2B, .udo-linkconfig-* / Phase 2C). Same density,
   spacing rhythm, error-state pattern. Two visual blocks:
     · Parameter values — one card per endpoint parameter (head + source +
       conditional sub-form indented under an accent rail)
     · External ID field — single select with helper text
   Plus the read-only popover summary upgrade (Task 2).
   Alpha variants of --accent / --source-spec via color-mix() (Phase 2C
   pattern); --error alphas as rgba literals (Phase 2A pattern).
   ============================================================================ */

/* ---- Read-only popover summary (Task 2) ----------------------------------- */

.udo-paramvalue-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--bg-glass-border);
}
.udo-paramvalue-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.udo-paramvalue-name {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.udo-paramvalue-summary {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ---- Section + blocks (Task 3) -------------------------------------------- */

.udo-roleextras-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.udo-roleextras-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.udo-roleextras-block-head {
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Parameter list ------------------------------------------------------- */

.udo-roleextras-paramlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.udo-roleextras-paramrow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.udo-roleextras-paramrow:focus-within {
  border-color: var(--input-border);
  background: var(--input-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}
.udo-roleextras-paramrow.has-error {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.04);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.12);
}
.udo-roleextras-paramrow.has-error:focus-within {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* Row head: param name + type-tag + required pill */
.udo-roleextras-paramrow-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.udo-roleextras-paramname {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.udo-roleextras-required {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 100px;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Source row ---------------------------------------------------------- */

.udo-roleextras-source {
  display: flex;
  align-items: center;
  gap: 8px;
}
.udo-roleextras-source-label {
  flex-shrink: 0;
  min-width: 50px;
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.udo-roleextras-source-select {
  flex: 1;
  min-width: 0;
}

/* ---- Sub-form (indented under source row, accent rail when focused) ------- */

.udo-roleextras-subform {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 58px;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--bg-glass-border);
  transition: border-color var(--duration) var(--ease-out);
}
.udo-roleextras-paramrow:focus-within .udo-roleextras-subform {
  border-left-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.udo-roleextras-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.udo-roleextras-field-label {
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.udo-roleextras-field.has-error select,
.udo-roleextras-field.has-error input {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.04);
}
.udo-roleextras-field.has-error select:focus,
.udo-roleextras-field.has-error input:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* Italic muted hint for fieldId passthrough or complex parameter cases */
.udo-roleextras-passthrough-hint {
  padding: 4px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Inline error message (under errored row or field) */
.udo-roleextras-error {
  padding: 3px 2px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--error);
  line-height: 1.4;
}

/* ---- External ID field block (Task 5) ------------------------------------ */

.udo-roleextras-extid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.udo-roleextras-extid-select {
  width: 100%;
}
.udo-roleextras-extid-helper {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================================
   Phase 4 — Read-only chips for new schema fields (UDO Detail)
   ----------------------------------------------------------------------------
   .udo-chip.dimmed: a chip that signals "config exists but disabled" — used
   for triggerOnChange/incrementalPolling when their `enabled` flag is false.
   .udo-popover-disabled-banner: inline label inside a popover when the feature
   is configured-but-disabled.
   ============================================================================ */

.udo-chip.dimmed {
  opacity: 0.5;
  color: var(--text-muted);
}
.udo-chip.dimmed:hover {
  opacity: 0.75;
}

.udo-popover-disabled-banner {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 6px;
  background: var(--method-put-bg);
  color: var(--method-put);
  border: 1px solid var(--method-put-border);
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================================
   Read-only popover content utilities — Phase 4 polish
   ----------------------------------------------------------------------------
   Reusable layout primitives for popover BODIES. The .udo-popover shell
   already supplies the glass surface + h4 styling; these classes structure
   the content inside. Replaces the inline `style="…"` attributes that were
   used when each render function predated a unified design pass.

   Used by all render*Popover functions in udo-chips.js:
     · transforms / paramvalues — keep their existing summary-row classes
     · arraymatch (read-only) — `.udo-popover-match-row`
     · linkconfig — `.udo-popover-list` + `.udo-popover-meta`
     · trigger-onchange / incremental-polling / segment-by / reference-config /
       user-filter-param — `.udo-popover-kv` + optional `.udo-popover-subsection`
     · filter (import/export) — `.udo-popover-description` + `.udo-popover-clause`
     · sort — `.udo-popover-sort-row`

   Theme tokens only; alpha variants of --accent via color-mix() per Phase 2C.
   ============================================================================ */

/* Vertical stack of <strong>label:</strong> value rows in mono — most popovers
   use this as their main body. */
.udo-popover-kv {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.udo-popover-kv strong {
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 4px;
}

/* Sub-section divider + head + indented body — used for nested key-value
   groups (e.g. referenceConfig.embeddedPayload). */
.udo-popover-subsection {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--bg-glass-border);
}
.udo-popover-subsection-head {
  margin-bottom: 4px;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.udo-popover-subsection-body {
  padding: 2px 0 2px 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Optional italic description line between <h4> and main body. Used by
   Filter.description. */
.udo-popover-description {
  margin: -2px 0 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Footer "what is this for" hint — italic muted, dashed top divider. Used
   by userFilterParameter popover. */
.udo-popover-helper {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--bg-glass-border);
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Multi-line clause card — primary line (numbered + target) on top, indented
   secondary line (op + operand) below. Used by Filter clauses. */
.udo-popover-clause {
  margin-bottom: 6px;
  padding: 6px 9px;
  background: var(--param-bg);
  border: 1px solid var(--param-border);
  border-radius: var(--radius-xs);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.5;
}
.udo-popover-clause:last-child {
  margin-bottom: 0;
}
.udo-popover-clause-primary {
  color: var(--text-primary);
}
.udo-popover-clause-primary strong {
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}
.udo-popover-clause-secondary {
  margin-top: 3px;
  padding-left: 14px;
  color: var(--text-secondary);
  font-size: 10px;
}
.udo-popover-clause-secondary strong {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9px;
  margin-right: 3px;
}

/* Single-line key=value row — used by arraymatch read-only popover. Distinct
   from .udo-popover-kv: the keys here are user-data values (e.g. "scope"),
   not field-name labels, so they get accent treatment instead of muted. */
.udo-popover-match-row {
  margin-bottom: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-primary);
}
.udo-popover-match-row:last-child {
  margin-bottom: 0;
}
.udo-popover-match-row strong {
  color: var(--accent);
  font-weight: 600;
  margin-right: 4px;
}
.udo-popover-match-row em {
  font-style: normal;
  color: var(--text-muted);
  opacity: 0.85;
}

/* Compact single-line row with an accent left rail — used by sort items. */
.udo-popover-sort-row {
  margin-bottom: 4px;
  padding: 4px 9px;
  background: var(--param-bg);
  border-left: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--radius-xs);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.udo-popover-sort-row:last-child {
  margin-bottom: 0;
}
.udo-popover-sort-row strong {
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}

/* Bulleted list with accent-prefix — used by linkconfig. */
.udo-popover-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.7;
}
.udo-popover-list li {
  position: relative;
  padding: 0 0 0 12px;
  color: var(--text-primary);
}
.udo-popover-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Compact metadata row beneath a list — used by linkconfig multi-match policy. */
.udo-popover-meta {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--bg-glass-border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
}
.udo-popover-meta strong {
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 4px;
}

/* ============================================================================
   Phase 4 redesign — chip aggregation + field-row affordances
   ----------------------------------------------------------------------------
   The aggregator chip collapses 5 per-CM advanced-config chips into a single
   pill with a count. The field-ref arrow + uf glyph relocate per-field
   indicators out of the chip strip into inline affordances. Subordinate
   modifier de-emphasizes secondary chips that don't warrant aggregation.
   ============================================================================ */

/* Aggregator chip — pill with gear + label + count badge */
.udo-cfg-aggregator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 100px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-cfg-aggregator:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.udo-cfg-aggregator:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.udo-cfg-aggregator-gear {
  font-size: 14px;
  line-height: 1;
}
.udo-cfg-aggregator-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Section-head inside the aggregator popover */
.udo-popover-section {
  margin-bottom: 12px;
}
.udo-popover-section:last-child {
  margin-bottom: 0;
}
.udo-popover-section-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.udo-popover-section-head.active {
  color: var(--accent);
}
.udo-popover-section-head.disabled {
  color: var(--method-put);
}
.udo-popover-section-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.udo-popover-section-head.active .udo-popover-section-dot {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
.udo-popover-section-head.disabled .udo-popover-section-dot {
  background: var(--method-put);
}
.udo-popover-section-body {
  padding-left: 13px;
}

/* Field-row → arrow prefix for reference-resolution */
.udo-field-ref-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -2px;
  background: transparent;
  border: 0;
  color: var(--source-spec);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
.udo-field-ref-arrow:hover {
  color: var(--text-bright);
  transform: translateX(1px);
}
.udo-field-ref-arrow:focus-visible {
  outline: 2px solid var(--source-spec);
  outline-offset: 1px;
  border-radius: 3px;
}

/* Per-mapping uf glyph */
.udo-uf-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  background: transparent;
  border: 0;
  color: var(--source-spec);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition:
    opacity var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.udo-uf-glyph:hover {
  opacity: 1;
  color: var(--text-bright);
}
.udo-uf-glyph:focus-visible {
  outline: 2px solid var(--source-spec);
  outline-offset: 1px;
  border-radius: 3px;
}

/* Subordinate chip modifier — borderless, smaller, muted. Used by per-Role
   sort·N chip and reusable for any future de-emphasized chips. */
.udo-chip.subordinate {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 9px;
  padding: 2px 5px;
}
.udo-chip.subordinate:hover {
  background: var(--input-bg);
  color: var(--text-secondary);
  border-color: var(--input-border);
}

/* ============================================================================
   UDO config editors — modals, repeaters & header actions
   ----------------------------------------------------------------------------
   Standalone overlay editors built in udo-connection-settings.js (ucs-*),
   udo-identity-config-edit.js + udo-index-config-edit.js (uic-*) and
   udo-settings-edit.js (use-*). They mirror the .udo-edit-* mapping-editor
   design language so every editor feels native. Grouped selectors keep it DRY.
   ============================================================================ */

/* ----------------------------------- Overlay ----------------------------------- */
.ucs-overlay,
.uic-overlay,
.use-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.75) 100%);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  animation: udo-edit-overlay-in 180ms var(--ease-out);
}
.ucs-overlay.hidden,
.uic-overlay.hidden,
.use-overlay.hidden {
  display: none;
}

/* ----------------------------------- Dialog ------------------------------------ */
.ucs-modal,
.uic-modal,
.use-modal {
  width: min(950px, 100%);
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  animation: udo-edit-dialog-in 220ms var(--ease-spring);
  overflow: hidden;
}
.ucs-modal::before,
.uic-modal::before,
.use-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 22%, var(--accent) 78%, transparent 100%);
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .ucs-overlay,
  .uic-overlay,
  .use-overlay,
  .ucs-modal,
  .uic-modal,
  .use-modal {
    animation: none;
  }
}

/* ----------------------------------- Header ------------------------------------ */
.ucs-modal-header,
.uic-modal-header,
.use-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--bg-glass-border);
  flex: 0 0 auto;
}
.ucs-modal-title,
.uic-modal-title,
.use-modal-title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-bright);
}
.ucs-close-btn,
.uic-close-btn,
.use-close-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.ucs-close-btn:hover,
.uic-close-btn:hover,
.use-close-btn:hover,
.ucs-close-btn:focus-visible,
.uic-close-btn:focus-visible,
.use-close-btn:focus-visible {
  color: var(--text-bright);
  background: var(--hover-overlay);
}

/* ------------------------------------ Body ------------------------------------- */
.ucs-modal-body,
.uic-modal-body,
.use-modal-body {
  padding: 18px 22px 8px;
  overflow: auto;
  flex: 1 1 auto;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.55;
}

/* -------------------------------- Footer + buttons ----------------------------- */
.ucs-modal-footer,
.uic-modal-footer,
.use-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--bg-glass-border);
  background: var(--bg-glass);
  flex: 0 0 auto;
}
.ucs-btn,
.uic-btn,
.use-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  background: transparent;
  border: 1px solid var(--btn-secondary-border);
  color: var(--text-secondary);
}
.ucs-btn:hover,
.uic-btn:hover,
.use-btn:hover {
  color: var(--text-primary);
  border-color: var(--bg-glass-hover);
  background: var(--hover-overlay);
}
.ucs-btn-primary,
.uic-btn-primary,
.use-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: 0;
  color: var(--btn-primary-text);
  box-shadow:
    var(--shadow-sm),
    0 0 16px var(--accent-glow);
}
.ucs-btn-primary:hover,
.uic-btn-primary:hover,
.use-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-md),
    0 0 24px var(--accent-glow);
}

/* ----------------------------------- Sections ---------------------------------- */
.ucs-section,
.uic-section,
.use-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--bg-glass-border);
}
.ucs-section:last-child,
.uic-section:last-child,
.use-section:last-child {
  border-bottom: 0;
  margin-bottom: 6px;
  padding-bottom: 0;
}
.ucs-section-title,
.uic-section-title,
.use-section-title {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* --------------------------------- Rows & labels ------------------------------- */
.ucs-row,
.uic-row,
.use-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 6px 14px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.ucs-label,
.uic-label,
.use-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.ucs-note,
.uic-note,
.use-note {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 11px;
}
.use-hint {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 11px;
}
.use-org-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
}
.use-org-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.12s;
}
.use-org-item:hover {
  background: var(--hover-overlay);
}
.use-org-item input {
  accent-color: var(--accent);
  cursor: pointer;
}
.use-org-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.use-org-stale span {
  color: var(--text-muted);
}
.use-org-stale em {
  font-style: normal;
  color: var(--method-delete, #f87171);
  font-size: 11px;
}
/* Cascade-impact warning — lists orgs about to be orphaned by a scope change.
   Amber/informational, non-blocking (save still allowed). */
.use-cascade-warning {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--method-put-bg);
  border: 1px solid var(--method-put-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-primary);
}
.use-cascade-warning-head {
  font-weight: 600;
  color: var(--method-put);
  margin-bottom: 6px;
}
.use-cascade-warning-list {
  margin: 0 0 6px;
  padding-left: 18px;
}
.use-cascade-warning-list li {
  margin: 2px 0;
}
.use-cascade-warning-note {
  font-size: 11px;
  color: var(--text-muted);
}
/* checkbox rows flow inline instead of label|control grid */
.ucs-row:has(.ucs-checkbox-label),
.uic-row:has(.uic-checkbox-label) {
  display: flex;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
}
.ucs-row:has(.ucs-checkbox-label) > .ucs-label,
.uic-row:has(.uic-checkbox-label) > .uic-label {
  flex: 0 0 152px;
}

/* ----------------------------- Inputs, selects, areas -------------------------- */
.ucs-input,
.uic-input,
.use-input,
.udo-sort-field-select,
.udo-sort-dir-select,
.udo-roleextras-bulkid-select,
.udo-ufp-select {
  width: 100%;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  transition:
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.ucs-input:focus,
.uic-input:focus,
.use-input:focus,
.udo-sort-field-select:focus,
.udo-sort-dir-select:focus,
.udo-roleextras-bulkid-select:focus,
.udo-ufp-select:focus {
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.ucs-input option,
.uic-input option,
.use-input option,
.udo-sort-field-select option,
.udo-sort-dir-select option,
.udo-roleextras-bulkid-select option,
.udo-ufp-select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.ucs-textarea,
.uic-textarea,
.use-textarea,
textarea.ucs-input,
textarea.uic-input,
textarea.use-input {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  resize: vertical;
  min-height: 60px;
  line-height: 1.45;
}
.uic-input-sm {
  padding: 6px 8px;
  font-size: 12px;
}

/* --------------------------------- Checkbox labels ----------------------------- */
.ucs-checkbox-label,
.uic-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  font-size: 12.5px;
}
.ucs-checkbox-label input[type='checkbox'],
.uic-checkbox-label input[type='checkbox'] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ------------------------------------ Errors ----------------------------------- */
.ucs-errors,
.uic-errors,
.use-errors {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ucs-error-item,
.uic-error-item,
.use-error-item {
  color: var(--error);
  font-size: 12px;
  font-weight: 500;
}
.uic-field-error {
  display: block;
  color: var(--error);
  font-size: 11px;
  margin-top: 4px;
}
/* Resolved-name hint shown under an ObjectId input (id → human path) */
.uic-resolved,
.ucs-resolved {
  grid-column: 2;
  margin-top: -3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
  opacity: 0.85;
  word-break: break-all;
}
/* Raw ObjectId shown under a name dropdown (so the id stays visible) */
.uic-idhint {
  grid-column: 2;
  margin-top: -3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  word-break: break-all;
}

/* --------------------- Repeater sub-cards: clauses / sources / index ----------- */
.ucs-clauses,
.uic-sources-list,
.uic-index-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.ucs-clause-row,
.uic-source-row,
.uic-index-card {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-sm);
}
.ucs-clause-row,
.uic-source-row {
  padding: 28px 14px 6px;
}
.uic-index-card {
  padding: 14px;
}
.uic-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.uic-card-label {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* corner remove (× absolute) for clause + source cards */
.ucs-remove-clause,
.uic-remove-source {
  position: absolute;
  top: 7px;
  right: 8px;
}
.ucs-remove-clause,
.uic-remove-source,
.uic-remove-index,
.uic-remove-subrow,
.udo-sort-remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  transition: all var(--duration) var(--ease-out);
}
.ucs-remove-clause:hover,
.uic-remove-source:hover,
.uic-remove-index:hover,
.uic-remove-subrow:hover,
.udo-sort-remove:hover {
  color: var(--error);
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.25);
}

/* ghost "+ add" buttons */
.ucs-add-clause,
.uic-add-source,
.uic-add-index,
.uic-add-subrow,
.udo-edit-add-sort-row {
  background: transparent;
  border: 1px dashed var(--input-border);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.ucs-add-clause:hover,
.uic-add-source:hover,
.uic-add-index:hover,
.uic-add-subrow:hover,
.udo-edit-add-sort-row:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ---------------------------- Index subsections & subrows ---------------------- */
.uic-subsection {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--bg-glass-border);
}
.uic-subsection-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.uic-subrows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.uic-subrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uic-subrow .uic-input {
  flex: 1 1 auto;
}
.uic-subrow .uic-input[type='number'],
.uic-subrow select.uic-input {
  flex: 0 0 130px;
}

/* ------------------- Role extras (mapping editor): sort / bulkId / userFilter --- */
.udo-sort-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.udo-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.udo-sort-field-select {
  flex: 1 1 auto;
}
.udo-sort-dir-select {
  flex: 0 0 110px;
}
.udo-ufp-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.udo-ufp-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.udo-ufp-select {
  width: auto;
  max-width: 220px;
}

/* ------------------------ Header action buttons (UDO-level) -------------------- */
.udo-icon-btn[data-action='identity-edit'],
.udo-icon-btn[data-action='udo-settings'],
.udo-icon-btn[data-action='udo-indexes'] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding: 5px 11px;
  border-radius: 999px;
  margin-left: 6px;
}
.udo-icon-btn[data-action='identity-edit']:hover,
.udo-icon-btn[data-action='udo-settings']:hover,
.udo-icon-btn[data-action='udo-indexes']:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ------------------------- Per-connection settings (⚙) button ------------------ */
.udo-conn-settings-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  transition: all var(--duration) var(--ease-out);
}
.udo-conn-settings-btn:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

/* --------------- Reference-resolution group inside the field-edit form -------- */
.udo-field-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--bg-glass-border);
}
.udo-field-section-title {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* "+ Add role" affordance at the bottom of a connection-mapping group */
.udo-add-role-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 2px;
  background: transparent;
  border: 1px dashed var(--input-border);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.udo-add-role-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* Inline "+ Add UDO field" form inside the mapping editor — keep it a sensible
   form width instead of stretching across the (now wider) modal. */
tr[data-pending-id] .udo-field-edit-form {
  max-width: 480px;
}

/* ============================================================================
   C3/C4: Conditional mapping chips — + cond pill, set cond chip,
   + static pill, set static chip, condition-editor popover extensions
   ============================================================================ */

/* ---- + cond empty pill (mirrors .add-flt / .add-tf / .add-vs) ------------- */
.udo-edit-pill.add-cond {
  border-style: dashed;
  border-color: var(--bg-glass-border);
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 4px;
}
.udo-edit-pill.add-cond:hover {
  border-color: var(--source-spec);
  background: var(--source-spec-bg);
  color: var(--source-spec);
}

/* ---- set cond chip (overrides .udo-chip.transform amber to purple) --------- */
.udo-chip.udo-cond-chip {
  background: var(--source-spec-bg);
  color: var(--source-spec);
  border-color: rgba(167, 139, 250, 0.22);
}
.udo-chip.udo-cond-chip:hover {
  filter: brightness(1.18);
}

/* ---- + static empty pill -------------------------------------------------- */
.udo-edit-pill.add-static {
  border-style: dashed;
  border-color: var(--bg-glass-border);
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 4px;
}
.udo-edit-pill.add-static:hover {
  border-color: var(--udo-import);
  background: var(--udo-import-soft);
  color: var(--udo-import);
}

/* ---- set static chip ------------------------------------------------------ */
.udo-chip.udo-static-chip {
  background: var(--udo-import-soft);
  color: var(--udo-import);
  border-color: var(--udo-import-edge);
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.udo-chip.udo-static-chip:hover {
  filter: brightness(1.18);
}

/* ---- Static-value editor popover ----------------------------------------- */
.udo-static-editor-pop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.udo-static-editor-pop .udo-static-editor-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bg-glass-border);
}
.udo-static-editor-pop .udo-static-editor-head strong {
  font-size: 12px;
  color: var(--text-primary);
}
.udo-static-editor-pop .udo-static-editor-hint {
  font-size: 10.5px;
  color: var(--text-muted);
}
.udo-static-editor-pop .udo-static-value-error {
  font-size: 10.5px;
  color: var(--error);
  margin-top: -4px;
}

/* ---- whenFalse control inside the cond popover ---------------------------- */
.udo-cond-when-false-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-glass-border);
  margin-top: 4px;
}
.udo-cond-when-false-label {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ---- + value empty pill (replaces add-vs / add-cond / add-static) ---------- */
.udo-edit-pill.add-value {
  border-style: dashed;
  border-color: var(--bg-glass-border);
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 4px;
}
.udo-edit-pill.add-value:hover {
  border-color: var(--udo-import);
  background: var(--udo-import-soft);
  color: var(--udo-import);
}

/* ---- value chip (set states) ---------------------------------------------- */
.udo-chip.udo-value-chip {
  cursor: pointer;
}
.udo-chip.udo-value-chip--static {
  background: var(--udo-import-soft);
  color: var(--udo-import);
  border-color: var(--udo-import-edge);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.udo-chip.udo-value-chip--ref {
  background: rgba(251, 191, 36, 0.12);
  color: var(--method-put);
  border-color: rgba(251, 191, 36, 0.18);
}
.udo-chip.udo-value-chip:hover {
  filter: brightness(1.18);
}

/* ---- Value-rule editor popover --------------------------------------------- */
/* The value-rule popover is fixed-positioned (viewport coords) so it stays anchored
   to its chip even when the modal body scrolls; JS keeps left/top in sync. */
.udo-value-rule-popover {
  position: fixed;
  max-height: min(72vh, 540px);
  width: 380px;
  max-width: calc(100vw - 24px);
}
.udo-value-rule-pop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.udo-value-rule-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bg-glass-border);
}
.udo-value-rule-head strong {
  font-size: 12px;
  color: var(--text-primary);
}
.udo-value-rule-hint {
  font-size: 10.5px;
  color: var(--text-muted);
}
.udo-value-rule-source-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.udo-value-rule-radio-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-primary);
  cursor: pointer;
}
.udo-value-rule-radio-hint {
  color: var(--text-muted);
  font-size: 10.5px;
}
.udo-value-ref-pickers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
}
.udo-value-rule-cond-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-glass-border);
}
.udo-value-rule-cond-toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-primary);
  cursor: pointer;
}
.udo-value-rule-clauses {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 4px;
}
.udo-value-rule-static-error {
  font-size: 10.5px;
  color: var(--error);
  margin-top: -4px;
}

/* ============================================================================
   Tenant / Org selection screen + context bar
   ============================================================================ */

/* form-group is an alias for form-field (used by the API-key form) */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Selection shell — centered card wrapping the tenant tree */
/* ── Scope picker ────────────────────────────────────────────────────────────
   Choosing the (tenant, org) you'll configure. The org tiles are the focus:
   a monogram grid where the active scope glows. */
.select-shell {
  max-width: 760px;
  margin: 7vh auto 60px;
  padding: 44px 40px 40px;
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.35),
    0 1px 0 var(--bg-glass-shine) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.select-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.select-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--accent);
  margin-bottom: 8px;
}
.select-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-bright);
  margin: 0 0 6px;
}
.select-sub {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0;
}
.select-cancel {
  flex: none;
  padding: 7px 14px;
  background: var(--input-bg);
  border: 1px solid var(--btn-secondary-border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.select-cancel:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.select-tree {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 8px;
}
.select-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.select-tenant {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.select-tenant-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bg-glass-border);
}
.select-tenant-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--tc, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc, var(--accent)) 45%, transparent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--tc, var(--accent));
}
.select-tenant-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.select-tenant-meta {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.select-org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.select-org {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.select-org:hover {
  transform: translateY(-2px);
  background: var(--bg-glass-hover);
  border-color: color-mix(in srgb, var(--tc, var(--accent)) 45%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.select-org:focus-visible {
  outline: 2px solid var(--tc, var(--accent));
  outline-offset: 2px;
}
.select-org-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tc, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc, var(--accent)) 50%, transparent);
  color: var(--tc, var(--accent));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.select-org-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.select-org-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.select-org-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.select-org-check {
  margin-left: auto;
  flex: none;
  color: var(--tc, var(--accent));
  font-size: 15px;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.15s,
    transform 0.15s;
}

/* Tenant-wide tile: deliberately neutral (no accent monogram). */
.select-org.is-all .select-org-mark {
  background: var(--input-bg);
  border-color: var(--btn-secondary-border);
  color: var(--text-muted);
}

/* Active scope: tenant-color ring + glow + check. */
.select-org.is-active {
  border-color: var(--tc, var(--accent));
  background: color-mix(in srgb, var(--tc, var(--accent)) 12%, transparent);
  box-shadow:
    0 0 0 1px var(--tc, var(--accent)),
    0 8px 26px color-mix(in srgb, var(--tc, var(--accent)) 22%, transparent);
}
.select-org.is-active .select-org-check {
  opacity: 1;
  transform: scale(1);
}
.select-org.is-active .select-org-mark {
  background: var(--tc, var(--accent));
  border-color: var(--tc, var(--accent));
  color: #0a0e17;
}

@media (max-width: 560px) {
  .select-shell {
    padding: 28px 18px;
    margin-top: 3vh;
  }
  .select-title {
    font-size: 21px;
  }
  .select-org-grid {
    grid-template-columns: 1fr;
  }
}

/* Context bar */
/* ── Scope bar ──────────────────────────────────────────────────────────────
   Persistent "you are here" for the active (tenant, org). Quiet glass strip;
   the org pill is the single emphasized token, because acting on the wrong org
   is the failure this view exists to prevent. */
.context-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 20px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--bg-glass-border);
  box-shadow: 0 1px 0 var(--bg-glass-shine) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Signature anchor: a small accent node that reads as "scope". */
.ctx-mark {
  font-size: 13px;
  line-height: 1;
  color: var(--tc, var(--accent));
  opacity: 0.9;
  text-shadow: 0 0 10px color-mix(in srgb, var(--tc, var(--accent)) 40%, transparent);
}

.ctx-scope {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-left: -6px;
  padding: 5px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.ctx-scope:hover {
  background: var(--hover-overlay);
  border-color: var(--bg-glass-border);
}
.ctx-scope:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ctx-caret {
  flex: none;
  margin-left: 2px;
  font-size: 11px;
  color: var(--text-muted);
  transition:
    color 0.15s,
    transform 0.15s;
}
.ctx-scope:hover .ctx-caret {
  color: var(--accent);
  transform: translateY(1px);
}

.ctx-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.ctx-key {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-muted);
}

.ctx-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34vw;
}

.ctx-arrow {
  color: var(--text-muted);
  opacity: 0.6;
  font-size: 14px;
}

/* The API pill — which backend, color-coded by environment. */
.ctx-chip-api {
  align-items: center;
  padding: 4px 11px 4px 9px;
  border: 1px solid color-mix(in srgb, var(--ac, var(--accent)) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ac, var(--accent)) 12%, transparent);
  font: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.ctx-chip-api:hover {
  background: color-mix(in srgb, var(--ac, var(--accent)) 22%, transparent);
  border-color: var(--ac, var(--accent));
}
.ctx-chip-api:focus-visible {
  outline: 2px solid var(--ac, var(--accent));
  outline-offset: 2px;
}
.ctx-chip-api .ctx-key {
  color: var(--ac, var(--accent));
  opacity: 0.9;
}
.ctx-chip-api .ctx-val {
  color: var(--text-primary);
  font-weight: 500;
  max-width: 22vw;
}
.ctx-dot.ctx-api-dot {
  background: var(--ac, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--ac, var(--accent)) 55%, transparent);
}

/* The org pill — the emphasized decision. */
.ctx-chip-org {
  align-items: center;
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--tc, var(--accent));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tc, var(--accent)) 14%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc, var(--accent)) 14%, transparent);
}
.ctx-chip-org .ctx-key {
  color: var(--tc, var(--accent));
  opacity: 0.85;
}
.ctx-chip-org .ctx-val {
  color: var(--text-bright);
  font-weight: 600;
}

.ctx-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tc, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--tc, var(--accent)) 55%, transparent);
  flex: none;
  align-self: center;
}

/* Tenant-wide: no org scope — drop every accent so it never reads as a
   specific org. Deliberately neutral. */
.ctx-chip-org.ctx-chip-org--all {
  border-color: var(--btn-secondary-border);
  background: var(--input-bg);
  box-shadow: none;
}
.ctx-chip-org--all .ctx-key {
  color: var(--text-muted);
  opacity: 1;
}
.ctx-chip-org--all .ctx-val {
  color: var(--text-secondary);
  font-weight: 500;
}
.ctx-chip-org--all .ctx-dot {
  background: transparent;
  box-shadow: none;
  border: 1.5px solid var(--text-muted);
}

.ctx-action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: var(--input-bg);
  border: 1px solid var(--btn-secondary-border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.ctx-action-icon {
  font-size: 14px;
  line-height: 1;
}
.ctx-action:hover {
  background: rgba(248, 113, 113, 0.12);
  border-color: #f87171;
  color: #f87171;
}
.ctx-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .context-bar {
    gap: 8px;
    padding: 0 12px;
  }
  .ctx-mark {
    display: none;
  }
  .ctx-val {
    max-width: 26vw;
  }
  .ctx-action span:not(.ctx-action-icon) {
    display: none;
  }
}

/* Push content below the scope bar when it is visible. */
.context-bar:not(.hidden) ~ .step:not(.hidden) {
  padding-top: 46px;
}

/* ============================================================================
   Per-mapping organization control (.udo-org-*)
   ============================================================================ */

.udo-org-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.udo-org-helper {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 22px;
  margin-top: 2px;
}

/* ============================================================================
   Org-scope badges (header) + hidden-mappings note — org-focused view
   ============================================================================ */

.cm-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cm-badge-all {
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.cm-badge-shared {
  color: #b8860b;
  background: color-mix(in srgb, #f0b400 14%, transparent);
  border: 1px solid color-mix(in srgb, #f0b400 35%, transparent);
}

/* Legacy badge doubles as a menu trigger (Scope / Split). */
.cm-badge-menu {
  cursor: pointer;
  transition:
    filter var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.cm-badge-menu:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}

/* Anchored popover menu for the org-scope badge. */
.cm-org-menu {
  position: fixed;
  z-index: 1000;
  min-width: 240px;
  max-width: 320px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  font-family: 'Outfit', sans-serif;
}

.cm-org-menu-item {
  text-align: left;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.cm-org-menu-item:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

.cm-org-menu-head {
  padding: 6px 8px 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.cm-org-menu-warn {
  padding: 0 8px 6px;
  font-size: 11px;
  line-height: 1.4;
  color: #d8a01a;
}

.cm-org-menu-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 4px;
}

.cm-org-menu-cancel,
.cm-org-menu-go {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
}

.cm-org-menu-cancel {
  color: var(--text-dim);
  background: transparent;
  border-color: color-mix(in srgb, var(--text-dim) 30%, transparent);
}

.cm-org-menu-go {
  color: #fff;
  background: var(--accent);
}

.cm-org-menu-go:hover {
  filter: brightness(1.1);
}

/* Transient error toast (replaces alert() for split/scope failures). */
.udo-detail-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 1100;
  max-width: 480px;
  padding: 10px 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: #fff;
  background: #b33;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}

.udo-detail-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.udo-hidden-note {
  margin: 4px 0 8px;
  padding: 4px 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--text-dim) 8%, transparent);
  border-radius: 6px;
}

.udo-org-current {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.udo-org-current--legacy {
  color: #b8860b;
}

/* ============================================================================
   Add-card org-flow hint — subtle sub-label below "+ Add Import/Export" text
   ============================================================================ */

.udo-add-card-hint {
  display: block;
  margin-top: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
}

.udo-add-card:hover .udo-add-card-hint {
  opacity: 1;
}

/* ===== Pollings — grids inside overview sections ===== */
#overview #pollings-grid,
#overview #reconciliation-grid {
  padding: 0 28px;
}

/* ===== Shared overlay groups (recon + pollings) ===== */
.ov-grp{margin-top:14px}
.ov-gl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:7px}
.ov-badge{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 7px;border-radius:6px;text-transform:none;letter-spacing:0}
/* badge colour variants */
.ov-badge-rsrc-adapter{background:var(--source-spec-bg);color:var(--source-spec)}
.ov-badge-rsrc-udo{background:var(--method-post-bg);color:var(--method-post)}
.ov-badge-rsrc-poll{background:var(--accent-dim);color:var(--accent)}
.ov-badge-rsrc-unknown{background:var(--hover-overlay);color:var(--text-muted)}
.ov-badge-spec{background:var(--source-spec-bg);color:var(--source-spec)}
.ov-badge-post{background:var(--method-post-bg);color:var(--method-post)}
.ov-badge-error{background:rgba(248,113,113,.15);color:var(--error)}
.ov-badge-muted{background:var(--input-bg);color:var(--text-muted)}
/* health-colored badge variants (pollings) */
.ov-badge.ph-ok{background:var(--method-get-bg);color:var(--method-get)}
.ov-badge.ph-degr{background:var(--method-put-bg);color:var(--method-put)}
.ov-badge.ph-paused{background:var(--source-manual-bg);color:var(--source-manual)}
.ov-frow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--table-row-border);font-size:12.5px}
.ov-fn{color:var(--text-secondary)}
.ov-fv{font-family:'JetBrains Mono',monospace;color:var(--text-primary);text-align:right;word-break:break-all}
.ov-note{margin-top:18px;padding:11px 14px;font-size:12px;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(34,211,238,.2);border-radius:10px}
[data-theme='light'] .ov-note{color:var(--accent-hover);border-color:rgba(8,145,178,.2)}

/* ===== Pollings ===== */
.poll-toolbar{display:flex;align-items:center;gap:10px;margin:14px 0}
/* segmented control filter chips */
.poll-filters{display:inline-flex;align-items:center;gap:0;border:1px solid var(--input-border);border-radius:8px;overflow:hidden;background:var(--input-bg);padding:0}
.poll-fchip{padding:4px 10px;border:none;border-right:1px solid var(--input-border);background:transparent;color:var(--text-secondary);font:inherit;font-size:11.5px;cursor:pointer;transition:background .12s,color .12s}
.poll-fchip:last-child{border-right:none}
.poll-fchip.act{background:var(--accent-dim);color:var(--accent);font-weight:600}
.poll-fchip:hover:not(.act){background:var(--hover-overlay)}
.poll-refresh{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-secondary);cursor:pointer}
/* Shared connection color dot (inline style sets background) */
.conn-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;vertical-align:middle}
.poll-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.poll-card{border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s;position:relative}
.poll-card::before{content:'';position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(180deg,var(--el-color,var(--accent)),transparent);opacity:.7;transition:opacity .15s,width .15s}
.poll-card:hover::before{width:4px;opacity:1}
.poll-card:hover{border-color:var(--card-hover-border);box-shadow:var(--shadow-glow)}
.poll-band{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--bg-glass-border);background:linear-gradient(135deg,color-mix(in srgb,var(--el-color,var(--accent)) 14%,transparent),transparent)}
.poll-title{font-weight:600}.poll-title .x{color:var(--text-muted);margin:0 6px}
.poll-info{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--bg-glass-border);background:transparent;color:var(--text-secondary);cursor:pointer}
.poll-body{padding:13px 15px}
.poll-dl{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
.poll-dl div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--table-row-border);padding-bottom:6px}
.poll-dl dt{font-size:12px;color:var(--text-secondary)}
.poll-dl dd{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600}
.poll-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.poll-pill .d{width:6px;height:6px;border-radius:50%}
.ph-ok{background:var(--method-get-bg);color:var(--method-get)}.ph-ok .d{background:var(--method-get)}
.ph-degr{background:var(--method-put-bg);color:var(--method-put)}.ph-degr .d{background:var(--method-put)}
.ph-paused{background:var(--source-manual-bg);color:var(--source-manual)}.ph-paused .d{background:var(--source-manual)}
.poll-errline{margin-top:10px;font-size:11.5px;color:var(--method-put);background:var(--method-put-bg);border:1px solid var(--method-put-border);border-radius:8px;padding:7px 10px}
.poll-tablewrap{border-radius:var(--radius);overflow:hidden}
.poll-table{width:100%;border-collapse:collapse;font-size:13px}
.poll-table th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--table-border)}
.poll-table td{padding:12px 14px;border-bottom:1px solid var(--table-row-border)}
.poll-table tbody tr{cursor:pointer}
.poll-table tr:hover td{background:var(--table-row-hover)}
.poll-table .num{font-family:'JetBrains Mono',monospace;font-size:12px}
.poll-table .bad{color:var(--error);font-weight:600}.poll-table .muted{color:var(--text-muted)}
.poll-table tbody tr td:first-child{box-shadow:inset 4px 0 0 var(--el-color,var(--accent))}
.poll-empty{text-align:center;padding:60px 20px;color:var(--text-muted)}
.poll-scrim{position:fixed;inset:0;background:rgba(15,23,42,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:90}
.poll-ovl{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,92vw);max-height:86vh;overflow:auto;z-index:91;border-radius:var(--radius);background:var(--bg-glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
.poll-ovl::before{content:'';position:absolute;top:0;bottom:0;left:0;width:4px;background:linear-gradient(180deg,var(--el-color,var(--accent)),transparent);border-radius:var(--radius) 0 0 var(--radius);opacity:.85;pointer-events:none}
.poll-ovl .oh{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--bg-glass-border);position:sticky;top:0;background:linear-gradient(135deg,color-mix(in srgb,var(--el-color,var(--accent)) 14%,transparent),var(--bg-glass) 60%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.poll-ovl .oh h3{font-family:'Sora',sans-serif;font-size:15px;font-weight:700}.poll-ovl .oh .x{margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px}
.poll-ovl .ob{padding:6px 16px 16px}

@media (max-width:1100px){ .poll-cards{grid-template-columns:1fr} }
@media (max-width:720px){
  .poll-dl{grid-template-columns:1fr}
  /* poll-table has overflow-x:auto; no columns hidden on mobile */
  .poll-ovl{top:auto;bottom:0;left:0;transform:none;width:100vw;max-height:88vh;border-radius:var(--radius) var(--radius) 0 0}
}

/* ===== UDO polling health strip (compact chip bar, sits under the UDO detail header) ===== */
.udo-poll-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 20px;border-bottom:1px solid var(--bg-glass-border);background:var(--bg-glass);font-size:12px}
.udo-poll-bar-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.udo-poll-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.poll-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;text-decoration:none;transition:opacity .15s}
.poll-chip:hover{opacity:.75}
.poll-chip .d{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.poll-chip-meta{font-size:11px;font-weight:400;opacity:.75}
.poll-chip.ph-ok{background:var(--method-get-bg);color:var(--method-get)}.poll-chip.ph-ok .d{background:var(--method-get)}
.poll-chip.ph-degr{background:var(--method-put-bg);color:var(--method-put)}.poll-chip.ph-degr .d{background:var(--method-put)}
.poll-chip.ph-paused{background:var(--source-manual-bg);color:var(--source-manual)}.poll-chip.ph-paused .d{background:var(--source-manual)}

/* ===== Reconciliation ===== */
.recon-toolbar{display:flex;align-items:center;gap:10px;margin:14px 0}
/* segmented control filter chips */
.recon-filters{display:inline-flex;align-items:center;gap:0;border:1px solid var(--input-border);border-radius:8px;overflow:hidden;background:var(--input-bg);padding:0}
.recon-fchip{padding:4px 10px;border:none;border-right:1px solid var(--input-border);background:transparent;color:var(--text-secondary);font:inherit;font-size:11.5px;cursor:pointer;transition:background .12s,color .12s}
.recon-fchip:last-child{border-right:none}
.recon-fchip.act{background:var(--accent-dim);color:var(--accent);font-weight:600}
.recon-fchip:hover:not(.act){background:var(--hover-overlay)}
.recon-refresh{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-secondary);cursor:pointer}
.rcards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rcard{border-radius:var(--radius);overflow:hidden;position:relative}
.rcard::before{content:'';position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(180deg,var(--el-color,var(--accent)),transparent);opacity:.7;transition:opacity .15s,width .15s;z-index:1}
.rcard:hover::before{width:4px;opacity:1}
.rcard-off{opacity:.55}
.rcard{cursor:pointer}
.rcard:hover .rband{filter:brightness(1.08)}
.rband{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--bg-glass-border);background:linear-gradient(135deg,color-mix(in srgb,var(--el-color,var(--accent)) 14%,transparent),transparent)}
/* enabled/disabled status dot */
.ren{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ren.on{background:var(--success)}
.ren.off{background:var(--text-muted)}
.rtitle{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* source badge pills */
.rsrcb{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.rsrcb.rsrc-adapter{background:var(--source-spec-bg);color:var(--source-spec);border:1px solid rgba(167,139,250,.2)}
.rsrcb.rsrc-udo{background:var(--method-post-bg);color:var(--method-post);border:1px solid var(--method-post-border)}
.rsrcb.rsrc-poll{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(34,211,238,.2)}
.rsrcb.rsrc-unknown{background:var(--source-manual-bg);color:var(--text-muted);border:1px solid var(--input-border)}
.rinfo{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--bg-glass-border);background:transparent;color:var(--text-secondary);cursor:pointer;flex-shrink:0}
.rbody{padding:13px 15px}
.rkv{display:flex;gap:14px;margin-bottom:8px}
.rk{font-size:12px;color:var(--text-secondary)}
.rk b{color:var(--text-primary);font-weight:600}
/* snapshot kind pills */
.rsnaps{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.rsnap{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.rsnap-stock{background:var(--method-get-bg);color:var(--method-get);border:1px solid var(--method-get-border)}
.rsnap-demand{background:var(--method-put-bg);color:var(--method-put);border:1px solid var(--method-put-border)}
/* last-run derived line */
.rrun{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-top:4px}
.rrun-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rrun-dot.ok{background:var(--success)}
.rrun-dot.fail{background:var(--error)}
.rrun-dot.mid{background:var(--method-put)}
.rrun b.ok{color:var(--success)}
.rrun b.fail{color:var(--error)}
.rrun b.mid{color:var(--method-put)}
.rrun-note{color:var(--text-muted);font-size:10.5px}
.rrun-off{color:var(--text-muted);font-style:italic}
.rrun-none{color:var(--text-muted)}
.rrun .mono{font-family:'JetBrains Mono',monospace;font-size:11.5px}
/* table view */
.rtablewrap{border-radius:var(--radius);overflow:hidden}
.rtable{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.rtable th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--table-border)}
.rtable th.rth-en{width:28px}
.rtable th.rth-name{width:22%}
.rtable th.rth-sources{width:14%}
.rtable th.rth-snaps{width:7%}
.rtable th.rth-tgt{width:6%}
.rtable th.rth-health{width:11%}
.rtable th.rth-lpoll{width:11%}
.rtable th.rth-lsucc{width:11%}
.rtable th.rth-lnonempty{width:11%}
.rtable th.rth-fails{width:7%}
.rtable td{padding:10px 14px;border-bottom:1px solid var(--table-row-border)}
.rtable tbody tr{cursor:pointer}
.rtable tr:hover td{background:var(--table-row-hover)}
.rtable .u{font-weight:600;display:flex;align-items:center;gap:7px;min-width:0}
.rtable .rname-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rtable .num{font-family:'JetBrains Mono',monospace;font-size:12px}
.rtable .bad{color:var(--error);font-weight:600}
.rtable .muted{color:var(--text-muted)}
.rsrcb-sm{flex:0 0 auto;padding:1px 7px;font-size:9.5px;font-weight:600}
.rsnap-l{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:5px;font-size:9.5px;font-weight:700;margin-right:2px}
.rtable td.rsnaps-cell{white-space:nowrap;padding-left:8px;padding-right:8px}
.rtable tbody tr td:first-child{box-shadow:inset 4px 0 0 var(--el-color,var(--accent))}
.rtgt-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;font-family:'JetBrains Mono',monospace;font-size:12px}
.rtgt-line{display:flex;align-items:baseline;gap:5px;flex-wrap:nowrap}
.rtgt-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;display:inline-block}
.rempty{text-align:center;padding:60px 20px;color:var(--text-muted)}
/* overlay */
.rovl-host{position:fixed;inset:0;z-index:90;pointer-events:none}
.rovl-host>*{pointer-events:auto}
.rovl-scrim{position:fixed;inset:0;background:rgba(15,23,42,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:90}
.rovl{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,92vw);max-height:86vh;overflow:auto;z-index:91;border-radius:var(--radius);background:var(--bg-glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
.rovl::before{content:'';position:absolute;top:0;bottom:0;left:0;width:4px;background:linear-gradient(180deg,var(--el-color,var(--accent)),transparent);border-radius:var(--radius) 0 0 var(--radius);opacity:.85;pointer-events:none}
.rovl .oh{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--bg-glass-border);position:sticky;top:0;background:linear-gradient(135deg,color-mix(in srgb,var(--el-color,var(--accent)) 14%,transparent),var(--bg-glass) 60%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.rovl .oh h3{font-family:'Sora',sans-serif;font-size:15px;font-weight:700}.rovl .oh .x{margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px}
.rovl .ob{padding:6px 16px 16px}

@media (max-width:1100px){ .rcards{grid-template-columns:1fr} }
@media (max-width:720px){
  .rovl{top:auto;bottom:0;left:0;transform:none;width:100vw;max-height:88vh;border-radius:var(--radius) var(--radius) 0 0}
}

/* ============================================================================
   Multi-source reconciliation — card lanes, table source cluster, detail lanes
   Each trigger bundles several sources that coalesce into one snapshot; these
   surface every source (with its own health) instead of collapsing to source[0].
   ============================================================================ */
/* per-source kind accent — shared by card lanes, table sub-rows, detail lanes */
.rlane.rsrc-poll,.rsubsrc.rsrc-poll,.rsrc-lane.rsrc-poll{--k:var(--accent)}
.rlane.rsrc-adapter,.rsubsrc.rsrc-adapter,.rsrc-lane.rsrc-adapter{--k:var(--source-spec)}
.rlane.rsrc-udo,.rsubsrc.rsrc-udo,.rsrc-lane.rsrc-udo{--k:var(--method-post)}
.rlane.rsrc-unknown,.rsubsrc.rsrc-unknown,.rsrc-lane.rsrc-unknown{--k:var(--text-muted)}

/* per-source health dot */
.rhdot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto;vertical-align:middle}
.rhdot.h-ok{background:var(--method-get)}
.rhdot.h-degr{background:var(--method-put);box-shadow:0 0 7px var(--method-put)}
.rhdot.h-paused{background:var(--source-manual)}
.rhdot.h-none{background:var(--text-muted);opacity:.5}

/* card — source-count badge in the header band */
.rcount{margin-left:auto;flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--table-border);border-radius:999px;padding:2px 9px;white-space:nowrap}

/* card — one lane per source */
.rlanes{display:flex;flex-direction:column;border-top:1px solid var(--bg-glass-border);border-bottom:1px solid var(--bg-glass-border)}
.rlane{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:8px 15px 8px 12px;border-left:3px solid var(--k,var(--text-muted));border-bottom:1px solid var(--table-row-border)}
.rlane:last-child{border-bottom:none}
.rlane-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.rlane-ep{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlane-sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlane-sub-warn{color:var(--method-put)}
.rlane-right{display:flex;align-items:center;gap:8px;justify-self:end}
.rlane-cad{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-secondary)}

/* card — fan-in footer */
.rfoot{padding:11px 15px 13px}
.rfanin{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--text-secondary);margin-bottom:9px}
.rfanin-n{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--text-primary)}
.rfanin-arrow{flex:1;height:1px;background:linear-gradient(90deg,var(--bg-glass-border),var(--accent));position:relative}
.rfanin-arrow::after{content:'';position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left-color:var(--accent)}
.rout{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(34,211,238,.25);border-radius:999px;padding:2px 9px;white-space:nowrap}
.rmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rmpill{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-secondary);border:1px solid var(--table-border);border-radius:999px;padding:2px 8px}
.rmpill-off{opacity:.7}
.ragg{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary)}

/* compact table — Sources column */
.rcaret{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:9px;padding:2px 4px;flex:0 0 auto;transition:transform .15s}
.rcaret[aria-expanded="true"]{transform:rotate(90deg);color:var(--accent)}
.rsrc-cell{white-space:nowrap}
.rsrc-cluster{display:inline-flex;align-items:center;gap:5px}
.rchip{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.03em;padding:2px 5px;border-radius:4px;color:var(--k,var(--text-secondary));background:color-mix(in srgb,var(--k,var(--text-muted)) 14%,transparent)}
.rchip.rsrc-poll{--k:var(--accent)}.rchip.rsrc-adapter{--k:var(--source-spec)}.rchip.rsrc-udo{--k:var(--method-post)}.rchip.rsrc-unknown{--k:var(--text-muted)}
.rhcluster{display:inline-flex;gap:3px;margin-left:2px}
.rhcluster .rhdot{width:8px;height:8px}
.rsrc-count{display:none}

/* compact table — expandable per-source sub-rows */
.rsubrow{cursor:default}
.rsubrow.hidden{display:none}
.rsubrow>td{padding:0;background:var(--table-row-hover)}
.rsubinner{display:flex;flex-direction:column}
.rsubsrc{display:grid;grid-template-columns:auto minmax(0,1.5fr) minmax(0,1.6fr) auto auto;gap:12px;align-items:center;padding:7px 14px 7px 26px;border-bottom:1px solid var(--table-row-border);border-left:3px solid var(--k,var(--text-muted))}
.rsubsrc:last-child{border-bottom:none}
.rsub-ep{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsub-st{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsub-warn{color:var(--method-put)}
.rsub-cad{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-secondary);justify-self:end}

/* detail overlay — shared config panel (applies to all sources) */
.rovl.rovl-recon{width:min(680px,95vw)}
.rovl-recon .oh h3{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rshared{background:var(--accent-dim);border:1px solid rgba(34,211,238,.22);border-radius:var(--radius-sm);padding:12px 14px;margin:8px 0 4px}
.rshared-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px}
.rshared-sub{color:var(--text-muted);text-transform:none;letter-spacing:0;font-weight:400;margin-left:auto}
.rshared-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}

/* detail overlay — one separated lane per source */
.rsrc-lanes{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.rsrc-lane{background:var(--method-inner-bg);border:1px solid var(--bg-glass-border);border-left:3px solid var(--k,var(--text-muted));border-radius:var(--radius-sm);padding:12px 14px}
.rsrc-lane-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.rsrc-ep{font-weight:700;font-size:13.5px}
.rsrc-n{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-muted)}
.rsrc-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
.rsrc-colh{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-weight:600;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--table-row-border)}
.rsrc-colh-live{color:var(--method-get)}

/* detail overlay — fan-in output */
.rconverge{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;padding:11px 14px;background:var(--method-inner-bg);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm)}
.rconv-lbl{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.rconv-run{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:12px}
.rconv-st{font-size:9.5px;padding:1px 6px;border-radius:4px;background:var(--source-manual-bg);color:var(--text-secondary)}
.rconv-st.ok{background:var(--method-get-bg);color:var(--method-get)}
.rconv-st.partial{background:var(--method-put-bg);color:var(--method-put)}
.rconv-when{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
.rconv-note{font-size:12px;color:var(--text-muted)}

/* detail overlay — aggregate status chip in header */
.ostat{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:2px 9px;border-radius:999px}
.ostat.st-ok{background:var(--method-get-bg);color:var(--method-get)}
.ostat.st-degr{background:var(--method-put-bg);color:var(--method-put)}
.ostat.st-paused{background:var(--source-manual-bg);color:var(--text-secondary)}
.ostat.st-none{background:var(--source-manual-bg);color:var(--text-muted)}

@media (max-width:720px){
  .rovl.rovl-recon{width:100vw}
  .rsrc-cols{grid-template-columns:1fr}
  .rshared-grid{grid-template-columns:1fr}
}

/* ============================================================================
   Execution Runs — filter bar, type tags, status pills, card + table
   ============================================================================ */

/* Filter bar */
.runs-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0 10px;max-width:1400px;margin:0 auto 4px}
.runs-filterbar select{appearance:none;-webkit-appearance:none;background:var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;padding:6px 28px 6px 10px;border:1px solid var(--input-border);border-radius:var(--radius-xs);color:var(--text-primary);font:inherit;font-size:12.5px;cursor:pointer;transition:border-color .15s,background .15s;min-width:120px}
.runs-filterbar select:focus{outline:none;border-color:var(--accent);background-color:var(--input-focus-bg)}
.runs-filterbar select:hover{border-color:rgba(255,255,255,.15)}
.runs-filterbar .runs-filter-search{background:var(--input-bg);padding:6px 10px;border:1px solid var(--input-border);border-radius:var(--radius-xs);color:var(--text-primary);font:inherit;font-size:12.5px;min-width:220px}
.runs-filterbar .runs-filter-search:focus{outline:none;border-color:var(--accent);background-color:var(--input-focus-bg)}
.runs-filterbar .runs-filter-search::placeholder{color:var(--text-muted)}
[data-theme='light'] .runs-filterbar select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}

/* Runs page layout */
#runs{padding:0 24px 40px;max-width:1400px;margin:0 auto}

/* Type-family tag colors (extends .rsrcb) */
.run-type-tag{font-size:10.5px;font-weight:700;white-space:nowrap}
.run-type-import{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(34,211,238,.2)}
.run-type-export{background:var(--method-put-bg);color:var(--method-put);border:1px solid var(--method-put-border)}
.run-type-sync{background:var(--method-post-bg);color:var(--method-post);border:1px solid var(--method-post-border)}
.run-type-update{background:var(--method-patch-bg);color:var(--method-patch);border:1px solid var(--method-patch-border)}
.run-type-snapshot{background:var(--method-get-bg);color:var(--method-get);border:1px solid var(--method-get-border)}
.run-type-discovery{background:var(--source-spec-bg);color:var(--source-spec);border:1px solid rgba(167,139,250,.2)}
.run-type-webhook{background:var(--source-live-bg);color:var(--source-live);border:1px solid rgba(251,146,60,.2)}
.run-type-deferred{background:var(--source-manual-bg);color:var(--text-secondary);border:1px solid var(--input-border)}
.run-type-other{background:var(--source-manual-bg);color:var(--text-muted);border:1px solid var(--input-border)}

/* Run status pills (extend .poll-pill look) */
.run-st-ok{background:var(--method-get-bg);color:var(--method-get)}.run-st-ok .d{background:var(--method-get)}
.run-st-running{background:var(--accent-dim);color:var(--accent)}.run-st-running .d{background:var(--accent)}
.run-st-partial{background:var(--method-put-bg);color:var(--method-put)}.run-st-partial .d{background:var(--method-put)}
.run-st-retrying{background:var(--method-patch-bg);color:var(--method-patch)}.run-st-retrying .d{background:var(--method-patch)}
.run-st-fail{background:var(--method-delete-bg);color:var(--method-delete)}.run-st-fail .d{background:var(--method-delete)}
.run-st-cancelled{background:var(--source-manual-bg);color:var(--text-secondary)}.run-st-cancelled .d{background:var(--source-manual)}
.run-st-pending{background:var(--source-metadata-bg);color:var(--source-metadata)}.run-st-pending .d{background:var(--source-metadata)}

/* Run card (mirrors .rcard) */
.run-card .rbody{padding:13px 15px}
.run-card .bad{color:var(--error);font-weight:600}
.run-card .muted{color:var(--text-muted)}

/* Parent badge */
.run-parent-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:9.5px;font-weight:700;background:var(--source-spec-bg);color:var(--source-spec);border:1px solid rgba(167,139,250,.2);margin-left:auto}

/* Trigger glyph */
.run-glyph{font-size:12px;color:var(--text-muted);flex:0 0 auto}

/* Run compact table column widths */
.run-table.rtable th.run-th-bar{width:4px;padding:0}
.run-table.rtable th.run-th-type{width:13%}
.run-table.rtable th.run-th-status{width:12%}
.run-table.rtable th.run-th-udo{width:22%}
.run-table.rtable td.run-udo-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.run-table.rtable th.run-th-conn{width:5%}
.run-table.rtable th.run-th-succ{width:7%}
.run-table.rtable th.run-th-fail{width:7%}
.run-table.rtable th.run-th-filt{width:7%}
.run-table.rtable th.run-th-start{width:13%}
.run-table.rtable th.run-th-dur{width:10%}
.run-table.rtable td.run-bar-cell{padding:0;width:4px}
.run-table.rtable td{white-space:nowrap}
.run-table.rtable td.run-udo-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}

/* Tiles placeholder */
#runs-tiles:empty{display:none}

@media (max-width:1100px){ .run-cards.rcards{grid-template-columns:1fr} }
@media (max-width:720px){ .runs-filterbar{gap:6px}.runs-filterbar select{min-width:100px;font-size:12px} }

/* ── Run overlay: wider panel + count tiles ─────────────────────────────── */
.rovl.run-ovl{width:min(640px,94vw)}
.run-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px;margin:12px 0 4px}
.run-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:8px 10px;border-radius:8px;background:var(--bg-elevated);border:1px solid var(--bg-glass-border);gap:2px}
.run-tile-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.run-tile-val{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:var(--text-primary)}
.run-tile-val.bad{color:var(--error)}
.run-tile-val.ok{color:var(--success)}
.run-tile-val.muted{color:var(--text-muted)}

/* ── Runs page: dashboard tile bar ──────────────────────────────────────── */
.run-tiles-bar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 4px}
.run-tile-dash{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:96px;padding:10px 16px;border-radius:10px;background:var(--bg-elevated);border:1px solid var(--bg-glass-border);gap:3px;transition:border-color .2s}
.run-tile-dash.active{border-color:var(--accent-dim);animation:runTilePulse 2s ease-in-out infinite}
.run-tile-dash-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;white-space:nowrap}
.run-tile-dash-val{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--text-primary);line-height:1}
.run-tile-dash-val.bad{color:var(--error)}
.run-tile-dash-val.ok{color:var(--success)}
.run-tile-dash-val.muted{color:var(--text-muted)}
.run-tile-dash-val.active{color:var(--accent)}
@keyframes runTilePulse{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 10px 3px var(--accent-glow)}}

/* ── Run overlay: execution log timeline ────────────────────────────────── */
.run-timeline{margin-top:4px;display:flex;flex-direction:column;gap:0}
.run-tl-item{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid var(--table-row-border);font-size:12px}
.run-tl-item:last-child{border-bottom:none}
.run-tl-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;margin-top:4px;background:var(--text-muted)}
.run-tl-dot.ok{background:var(--success)}
.run-tl-dot.fail{background:var(--error)}
.run-tl-dot.running{background:var(--accent)}
.run-tl-body{flex:1;min-width:0}
.run-tl-action{font-weight:700;color:var(--text-primary);font-size:12.5px}
.run-tl-status{font-size:11px;color:var(--text-muted);margin-left:6px}
.run-tl-msg{color:var(--text-secondary);font-size:11.5px;margin-top:2px;word-break:break-word}
.run-tl-meta{flex-shrink:0;text-align:right;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-muted)}

/* ── Run overlay: skipped records ───────────────────────────────────────── */
.run-skips{display:flex;flex-direction:column;gap:0}
.run-skip{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--table-row-border);font-size:12px}
.run-skip:last-child{border-bottom:none}
.run-skip-cat{flex-shrink:0;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--method-delete-bg);color:var(--error)}
.run-skip-body{flex:1;min-width:0}
.run-skip-code{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--text-primary)}
.run-skip-reason{color:var(--text-secondary);font-size:11.5px;margin-top:2px;word-break:break-word}
.run-skip-ext{font-size:10.5px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-top:2px}
.run-skip-http{display:inline-block;font-size:9.5px;font-weight:700;padding:0 5px;border-radius:4px;background:var(--method-delete-bg);color:var(--error);vertical-align:middle;margin-left:5px}
.run-skip-err{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--error);background:var(--method-delete-bg);padding:5px 8px;border-radius:5px;margin-top:3px;white-space:pre-wrap;word-break:break-word}
.run-skips-more{font-size:11px;color:var(--text-muted);margin-top:6px;padding-top:4px;border-top:1px solid var(--table-row-border)}

/* ── Run overlay: child run items ───────────────────────────────────────── */
.run-child-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;border:1px solid var(--bg-glass-border);background:var(--bg-elevated);margin-bottom:6px;cursor:pointer;transition:background .15s}
.run-child-item:hover{background:var(--bg-glass-hover)}
.run-child-item:last-child{margin-bottom:0}

/* ── Run overlay: note at bottom ────────────────────────────────────────── */
.ov-note{font-size:11px;color:var(--text-muted);margin-top:14px;padding-top:10px;border-top:1px solid var(--bg-glass-border);font-style:italic}

/* ── Run overlay errors ─────────────────────────────────────────────────── */
.run-errors{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.run-error-item{font-size:12px;color:var(--error);background:var(--method-delete-bg);padding:6px 10px;border-radius:6px;word-break:break-word}

/* Endpoint search combobox — visual language matches the field-picker popover
   (.udo-edit-popover) and its rows (.udo-picker-row) so the dropdown reads as
   part of the same family as the rest of the editor. */
.udo-ep-combo { position: relative; flex: 1; }
.udo-ep-combo-input { width: 100%; }
.udo-ep-combo-panel {
  z-index: 1100; /* above the editor overlays (.udo-edit-overlay / .uic-overlay, 1000) */
  max-height: 340px;
  overflow: auto;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 11.5px;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
.udo-ep-combo-panel.hidden { display: none; }
.udo-ep-combo-item {
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--duration) var(--ease-out);
}
.udo-ep-combo-item:hover { background: var(--accent-dim); }
.udo-ep-combo-item.selected { color: var(--accent); }
.udo-ep-combo-empty {
  padding: 8px 10px;
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================================
   Field-type tree editor (fieldtype-editor.js)
   Uses only existing tokens — no new palette entries.
   ============================================================================ */

/* "Edit fields" / "Create fields" trigger button in the method-section header */
.field-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-left: 6px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius-xs);
  color: var(--accent);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
}
.method-section-header:hover .field-edit-btn {
  opacity: 1;
}
.field-edit-btn:hover {
  background: var(--accent);
  color: var(--btn-primary-text);
  border-color: var(--accent);
  opacity: 1;
}

/* Editor host: sits above the read-only field table inside .method-section-body-inner */
.fieldtype-editor {
  margin-top: 0;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--accent-glow);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.fieldtype-editor-hdr {
  margin-bottom: 10px;
}

/* Tree container */
.fieldtype-editor .field-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

/* Each node row: flex, aligns controls horizontally */
.fte-node-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

/* ID badge in editor rows */
.fte-field-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-border);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Path input */
.fte-path-input {
  flex: 1 1 120px;
  min-width: 80px;
  padding: 3px 6px;
  font-size: 12.5px;
}

/* Kind / scalar-type / type selects */
.fte-kind-select,
.fte-scalar-select,
.fte-type-select {
  flex-shrink: 0;
  padding: 3px 6px;
  font-size: 12px;
}
.fte-kind-select { width: 120px; }
.fte-scalar-select { width: 90px; }
.fte-type-select { width: 140px; }

/* Protection label: checkbox + source badge side-by-side */
.fte-protect-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.fte-protect-check {
  accent-color: var(--source-spec);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Add-child and delete buttons */
.fte-add-child-btn,
.fte-del-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fte-add-child-btn {
  color: var(--accent);
}
.fte-add-child-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.fte-del-btn {
  color: var(--method-delete);
}
.fte-del-btn:hover {
  background: var(--method-delete-bg);
  border-color: var(--method-delete-border);
}

/* Children block: indented via padding-left on each row (set inline) */
.fte-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* "Add field" (root level) and action bar */
.fte-add-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  background: var(--accent-dim);
  border: 1px dashed var(--accent-glow);
  border-radius: var(--radius-xs);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.fte-add-btn:hover {
  background: var(--accent);
  color: var(--btn-primary-text);
  border-color: var(--accent);
}

.fieldtype-editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.fte-save-btn {
  padding: 6px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--btn-primary-text);
  border: none;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.fte-save-btn:hover { opacity: 0.9; }
.fte-cancel-btn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.fte-cancel-btn:hover {
  background: var(--bg-glass);
  color: var(--text-primary);
}