/* ==========================================================================
   WORKFLOW BUILDER MOCKUP — TOOLBAR ALIGNMENT, MENU SPACING & ORCHESTRATOR CLEARANCE
   ========================================================================== */

:root {
  /* Central Node Color Tokens */
  --color-worker: #3b82f6;      /* Electric Blue */
  --color-verifier: #8b5cf6;    /* Electric Violet */
  --color-test: #22c55e;        /* Test node identity, per the plan token */
  --color-code: #f59e0b;        /* Metallic Amber */
  --color-tool: #06b6d4;        /* Electric Cyan */
  --color-synthesizer: #6366f1; /* Deep Indigo */
  --color-orchestrator: #a855f7;/* Metallic Purple */

  /* Semantic status, deliberately distinct from Test node identity. They were
     both #10b981, which is what made retuning the Test token look unsafe. */
  --status-success: #10b981;

  /* Shared by the left rail and the canvas control bar so the two columns
     cannot drift apart. Was hardcoded #3b82f6 in the control bar only. */
  --control-accent: #3b82f6;

  /* Edge behaviour tones. Type = behaviour, so colour encodes behaviour only;
     branch meaning lives in the label and the reason lives in the condition. */
  --edge-next: #64748b;         /* neutral hand-off */
  --edge-pass: #3b82f6;         /* succeeded */
  --edge-fail: #ef4444;         /* rejected */
  --edge-rework: #f59e0b;       /* send back for correction */
  --edge-retry: #0ea5e9;        /* infrastructure retry, neither pass nor fail */
  --edge-complete: #475569;     /* terminates at the workflow boundary */
  --edge-custom: #8b5cf6;       /* user-defined */

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* DARK THEME - ULTRA-CLEAN FROSTED GLASS */
body.dark-theme {
  --bg-app: #080c14;
  --bg-canvas: #0b0f19;
  --bg-header: rgba(13, 17, 28, 0.8);
  --bg-card: rgba(22, 29, 47, 0.65);
  --bg-panel: rgba(18, 24, 40, 0.85);
  --bg-input: rgba(11, 15, 25, 0.6);
  --bg-subbar: rgba(13, 17, 28, 0.75);
  --border-color: transparent;
  --border-bright: rgba(255, 255, 255, 0.14);
  --text-main: #f8fafc;
  --text-sub: #cbd5e1;
  --text-muted: #64748b;
  --grid-dot: rgba(255, 255, 255, 0.05);
  --shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.4);
  --path-stroke: #475569;
  --controlbar-bg: rgba(22, 29, 47, 0.65);
  --controlbar-btn-hover: rgba(255, 255, 255, 0.1);
  --anchor-bg: rgba(11, 15, 25, 0.9);
  --anchor-border: #3b82f6;
  --anchor-active: #0066cc;
  --node-bg: rgba(22, 29, 47, 0.8);
  --glass-blur: blur(16px) saturate(180%);

  /* 2D W LOGO THEME TOKENS: WHITE + BLUE NODES FOR DARK THEME */
  --logo-w-stroke: #ffffff;
  --logo-node-fill: #3b82f6;
}

/* LIGHT THEME - UNIFORM HEADER & CANVAS GRID COLOR */
body.light-theme {
  --bg-app: #f8fafc;
  --bg-canvas: #f8fafc;
  --bg-header: #f8fafc;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --bg-subbar: #f8fafc;
  --border-color: #e2e8f0;
  --border-bright: #e2e8f0;
  --text-main: #0f172a;
  --text-sub: #334155;
  --text-muted: #94a3b8;
  --grid-dot: rgba(0, 0, 0, 0.07);
  --shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.08);
  --path-stroke: #cbd5e1;
  --controlbar-bg: #ffffff;
  --controlbar-btn-hover: rgba(0, 0, 0, 0.05);
  --anchor-bg: #ffffff;
  --anchor-border: #2563eb;
  --anchor-active: #0066cc;
  --node-bg: #ffffff;
  --glass-blur: blur(16px) saturate(160%);

  /* 2D W LOGO THEME TOKENS: JUST BLACK + BLUE NODES FOR LIGHT THEME */
  --logo-w-stroke: #0f172a;
  --logo-node-fill: #2563eb;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-family);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* --------------------------------------------------------------------------
   MAIN WORKSPACE & TOP HEADER
   -------------------------------------------------------------------------- */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.top-header {
  height: 64px;
  background: var(--bg-header);
  backdrop-filter: var(--glass-blur);
  border-bottom: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  /*
   * position is required for z-index to apply at all — without it the header
   * stacked below the drawer and the Export dropdown opened behind the
   * inspector, where its items could not be clicked.
   */
  position: relative;
  z-index: 50;
  transition: background 0.2s ease;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* PROMINENT WORKSPACES BY {RUFEN. TOP-LEFT BRANDING */
.main-brand-anchor {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 2px 0;
  transition: transform 0.15s ease;
}

.brand-workflow-logo-img {
  /* 32px, up 30%. */
  width: 42px;
  height: 42px;
  background: transparent !important;
  transition: transform 0.2s ease;
}

.main-brand-anchor:hover {
  transform: scale(1.02);
}

.main-brand-anchor:hover .brand-workflow-logo-img {
  transform: scale(1.08);
}

.main-brand-title-group {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.main-brand-title {
  font-size: 30px; /* INCREASED BY AN ADDITIONAL 3 POINTS TO 30PX */
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.7px;
}

.main-brand-subtitle {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main); /* ADAPTS UNIFORMLY WITH THEME */
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 1px;
  opacity: 0.85;
}

.brand-divider {
  width: 1px;
  height: 28px;
  background: var(--border-bright);
  margin: 0 8px;
}

.workflow-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workflow-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.2px;
}

.edit-icon {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.12);
  border: none !important;
  color: var(--status-success);
  backdrop-filter: blur(8px);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-success);
}

.tab-bar {
  display: flex;
  gap: 4px;
  margin-left: 20px;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  border: none !important;
  background: transparent;
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.tab-item.active {
  background: var(--bg-card);
  color: var(--text-main);
  border: none !important;
  box-shadow: none !important;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* TOP RIGHT CORNER PRODUCT BRAND BADGE (RUFEN FAVICON & WORKSPACES) */
.product-brand-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-bright);
  margin-left: 6px;
  transition: all 0.15s ease;
}

.product-brand-badge:hover {
  border-color: #3b82f6;
  background: rgba(255, 255, 255, 0.12);
}

.brand-favicon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.brand-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: none !important;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 12px;
  font-weight: 600;
}

.user-role {
  font-size: 10px;
  color: var(--text-muted);
}

/* EXPANDABLE SEARCH COMPONENT (RIGHT NEXT TO WORKFLOWS BRANDING) */
.expandable-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 6px;
}

.search-toggle-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--controlbar-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1.5px solid var(--border-bright) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease !important;
}

.search-toggle-btn svg,
.search-toggle-btn i {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.8px !important;
}

.search-toggle-btn:hover {
  border-color: #3b82f6 !important;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1) !important;
  transform: translateY(-1px);
}

.search-input-wrapper {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid #3b82f6 !important;
  padding: 0 10px 0 12px;
  height: 38px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
}

body.light-theme .search-input-wrapper {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.expandable-search.active .search-input-wrapper {
  /* 250px was pushing its neighbours along the row; 70% of that still holds a
     workflow name comfortably. */
  width: 175px;
  opacity: 1;
  pointer-events: auto;
}

.search-inner-icon {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.8px !important;
  color: #3b82f6;
  flex-shrink: 0;
}

body.light-theme .search-inner-icon {
  color: #2563eb;
}

.search-input-wrapper input {
  background: transparent;
  border: none !important;
  outline: none !important;
  color: var(--text-main);
  font-size: 13px;
  width: 100%;
}

.search-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.search-close-btn svg,
.search-close-btn i {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2px !important;
}

.search-close-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.1);
}

/* OPTIMISED & UNIFORM HEADER BUTTONS (CREATE WORKFLOW & LOAD WORKFLOW) */
.btn-create,
.btn-load-workflow {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: none !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.btn-create {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.btn-create:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
}

.btn-load-workflow {
  background: #ff6600 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(255, 102, 0, 0.35) !important;
}

.btn-load-workflow:hover {
  background: #e65c00 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 102, 0, 0.45) !important;
}

.btn-create svg,
.btn-load-workflow svg,
.btn-create i,
.btn-load-workflow i {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.8px !important;
}

.workflow-library-menu .library-item {
  padding: 9px 14px;
  gap: 12px;
  transition: background 0.12s ease;
}

.workflow-library-menu .library-item:hover {
  background: rgba(255, 102, 0, 0.12) !important;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: none !important;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   PATTERNFLY TOPOLOGY VIEW TOOLBAR (DEAD-CENTERED TOP BUTTONS)
   -------------------------------------------------------------------------- */
.topology-view-toolbar {
  height: 56px;
  background: var(--bg-subbar);
  backdrop-filter: var(--glass-blur);
  border-bottom: none !important;
  display: flex;
  align-items: center;
  padding: 0 24px !important;
  position: relative;
  z-index: 35;
  transition: background 0.2s ease;
}

.pf-v5-c-toolbar__content {
  width: 100%;
}

.pf-v5-c-toolbar__content-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.pf-v5-c-toolbar__group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* DEAD-CENTER HORIZONTAL TOP TOOLBAR BUTTONS */
.center-toolbar-group {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 40;
}

.pf-v5-c-toolbar__group.pf-v5-m-align-right {
  margin-left: auto;
}

.pf-v5-c-toolbar__item {
  display: flex;
  align-items: center;
  position: relative;
}

/* UNIFIED 38PX GLASS BUTTON STYLING (LAYOUT, NODES, FILTER, SNAP, SEARCH) */

.pf-v5-c-button {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600 !important;
  height: 38px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px !important;
  background: var(--controlbar-bg) !important;
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-bright) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  color: var(--text-main);
  transition: all 0.15s ease;
}

.pf-v5-c-button:hover {
  border-color: #3b82f6 !important;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1) !important;
  transform: translateY(-2px);
}

.pf-v5-c-button.pf-v5-m-primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

.pf-v5-c-button.pf-v5-m-primary:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* UNIFORM TEST & SAVE TOOLBAR BUTTONS */
#btnTestWorkflow,
#btnResetCanvas {
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.pf-v5-c-button svg,
.pf-v5-c-button i {
  width: 16px !important; /* MATCHED 16PX ICON SIZE */
  height: 16px !important;
  font-size: 16px !important;
  stroke-width: 1.6px !important;
}

/* LIGHTWEIGHT CORE DEFINITION BANNER ABOVE CANVAS */
.core-definition-banner {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  border-radius: 20px;
  background: rgba(13, 17, 23, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: 0.2px;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.core-definition-banner span:first-child {
  font-weight: 700;
  color: var(--text-main);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.def-divider {
  color: #3b82f6;
  font-weight: 800;
}

.def-motto {
  color: #94a3b8;
  font-style: italic;
}

/* WIDER, FLATTER CONTROL-PLANE PILL ANCHORED TO CANVAS CHROME */
.orchestrator-control-pill {
  position: absolute;
  top: 76px;
  left: 140px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 34px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--controlbar-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.orchestrator-control-pill:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35) !important;
  transform: translateY(-1px);
}

.orch-pill-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
 * The Orchestrator's icon, replacing the pulsing LED. A blinking dot is status
 * hardware, not identity — it said "something is on" where the pill needed to
 * say "this is the Orchestrator".
 */
.orch-pill-icon {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2px !important;
  color: var(--color-orchestrator);
  flex: 0 0 auto;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 14px #3b82f6; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.orch-pill-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.9px;
  color: var(--text-main);
  text-transform: uppercase;
}

.orch-pill-status {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--status-success);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 7px;
  border-radius: 12px;
}

.orch-pill-metrics {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
}

/* EMBEDDED BOTTOM-RIGHT WORKFLOW NAME (INLINE HORIZONTALLY, PURE WHITE ICON) */
.edit-icon-sm {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.8px !important;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.edit-icon-sm {
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  stroke-width: 1.5px !important;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.edit-icon-sm:hover {
  color: #3b82f6 !important;
}

/* PATTERNFLY TOPOLOGY LAYOUTS & NODE OPTIONS DROPDOWN MENUS (PROPER WIDTH & POSITIONAL ALIGNMENT) */
.layout-options-menu,
.node-options-menu {
  min-width: 150px !important;
  width: max-content !important;
  background: var(--bg-panel) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
  border: 1px solid var(--border-bright) !important;
  padding: 6px 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important; /* ANCHORED CLEANLY BELOW BUTTON */
  margin-top: 6px !important;
  z-index: 1000 !important;
}

.layout-options-menu .pf-v5-c-menu__item,
.node-options-menu .pf-v5-c-menu__item {
  font-size: 12px;
  font-weight: 400 !important;
  padding: 6px 14px 6px 12px;
  gap: 10px;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.opt-check,
.layout-check {
  width: 14px !important;
  height: 14px !important;
  color: #3b82f6 !important;
  flex-shrink: 0;
  stroke-width: 2px !important;
}

/* DYNAMIC CANVAS OPTIONS TOGGLE EFFECTS */
body.hide-pills .pf-v5-c-topology-node__label-badge {
  display: none !important;
}

body.hide-edge-labels .pf-v5-c-topology-edge__label {
  display: none !important;
}

body.hide-badges .pf-v5-c-topology-node__badge-decoration {
  display: none !important;
}

body.hide-anchors .pf-v5-c-topology-connector-anchor {
  display: none !important;
}

/* --------------------------------------------------------------------------
   CANVAS AREA & PATTERNFLY PAN AND ZOOM VIEWPORT
   -------------------------------------------------------------------------- */
.canvas-area {
  flex: 1;
  position: relative;
  background-color: var(--bg-canvas);
  overflow: hidden;
  cursor: grab;
  transition: background-color 0.2s ease;
}

.canvas-area.panning {
  cursor: grabbing !important;
}

/* --------------------------------------------------------------------------
   MATCHED VERTICAL FLOATING TOOLBARS (TOP-LEFT NAV & BOTTOM-LEFT CANVAS CONTROL)
   -------------------------------------------------------------------------- */

/* 1. TOP-LEFT VERTICAL MAIN NAVIGATION TOOLBAR */
.floating-left-nav {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /*
   * The rail grows DOWN from the top and the canvas control bar grows UP from
   * the bottom, both at left:24px. On short viewports they met and the control
   * bar silently swallowed clicks meant for the lower rail buttons. Reserve the
   * control bar's column and scroll instead of overlapping.
   */
  max-height: calc(100% - 300px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
}

/* THEME TOGGLE BUTTON (VERTICAL AXIS OF LEFT TOOLBAR x=24px, HORIZONTAL AXIS OF TOP VIEW TOOLBAR) */
.floating-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  cursor: pointer;
  background: var(--controlbar-bg) !important;
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-bright) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.15s ease;
  pointer-events: auto;
}

.floating-nav-btn:hover {
  border-color: #3b82f6 !important;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1) !important;
  transform: translateY(-2px);
}

/* Superseded: a VIEW is marked with a thin border, a TOGGLE with a fill.
   This rule filled the active view solid AND forced white text, which left the
   Workflow icon white-on-white and invisible. */

.floating-nav-btn svg,
.floating-nav-btn i {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  stroke-width: 1.6px !important;
}

/* 2. BOTTOM-LEFT VERTICAL CANVAS CONTROL BAR (MATCHED STYLE & SIZE) */
.topology-canvas-control-bar {
  position: absolute;
  bottom: 28px;
  left: 24px;
  z-index: 45;
  display: flex;
  flex-direction: column; /* VERTICAL STACK */
  align-items: center;
  gap: 10px; /* MATCHED GAP */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
}

.pf-v5-c-topology-control-bar__button {
  width: 40px; /* MATCHED 40PX SIZE */
  height: 40px;
  flex: 0 0 auto;
  border-radius: 10px; /* MATCHED 10PX BORDER RADIUS */
  background: var(--controlbar-bg) !important;
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-bright) !important;
  outline: none !important;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  pointer-events: auto;
}

.pf-v5-c-topology-control-bar__button:hover {
  border-color: var(--control-accent) !important;
  color: var(--control-accent);
  background: color-mix(in srgb, var(--control-accent) 10%, transparent) !important;
  transform: translateY(-2px);
}

.pf-v5-c-topology-control-bar__button:active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  transform: translateY(0);
}

.pf-v5-c-topology-control-bar__button svg,
.pf-v5-c-topology-control-bar__button i {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  stroke-width: 1.6px !important;
}

.graph-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transition: transform 0.05s linear;

  /*
   * Above the edge layer (10), below the handles (40).
   *
   * This container is transformed for pan and zoom, and a transform creates a
   * stacking context — so everything inside it paints at the container's own
   * level no matter what z-index the nodes carry. The nodes said 20 and the
   * edges said 10, which looks decisive and did nothing: the container sat at
   * `auto`, and edge lines were drawn straight across node labels, through the
   * text. Lines belong behind the things they connect.
   */
  z-index: 20;

  /*
   * Being above the edges, this full-size container would otherwise swallow
   * every click meant for an edge label or the canvas behind it. Only the
   * nodes themselves take the pointer; the space between them stays as
   * transparent to a click as it looks.
   */
  pointer-events: none;
}

.graph-container > * {
  pointer-events: auto;
}

/* SVG CONNECTIONS LAYER MUST NOT BLOCK POINTER EVENTS FOR NODES UNDERNEATH */
.connections-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  z-index: 10;
  transform-origin: 0 0;
  transition: transform 0.05s linear;

  /*
   * An SVG root clips to its own box by default, and this one is PANNED AND
   * ZOOMED along with the graph — so its box is not the visible canvas, it is
   * the canvas as it was at the origin. Anything the graph reaches outside
   * that box was cut: drag a node left of the origin, or pan there, and its
   * edges were shorn off along an invisible vertical line while the nodes
   * themselves carried on painting, because nodes are HTML in a container that
   * does not clip. It read as a layer sitting over the left of the canvas.
   *
   * The clipping that SHOULD happen — at the edge of the visible canvas — is
   * done by #canvasViewport, which is overflow:hidden and is not transformed.
   */
  overflow: visible;
}

/* --------------------------------------------------------------------------
   INDIVIDUALLY FLOATING BOTTOM NODE PALETTE BUTTONS (PROMINENT PRIMARY TOOL ELEMENTS)
   -------------------------------------------------------------------------- */
.floating-bottom-bar {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 180ms ease;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  z-index: 45;
}

/*
 * The inspector occupies the right 374px (350 wide + 24 inset). Centring the
 * palette on the FULL canvas therefore parks its rightmost buttons underneath
 * the panel, where they silently stop receiving clicks. Re-centre on the space
 * that is actually visible. Below 900px there is not enough room to shift, so
 * the palette keeps its place and scrolls instead.
 */
/* The quick bar stays put. It used to slide 187px left whenever a card opened,
   which read as a bug; the drawer is kept clear of it instead (see .panel-body
   max-height and .floating-right-panel bottom). */



.palette-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px; /* LARGER TOUCH TARGET */
  border-radius: 12px; /* LARGER BORDER RADIUS */
  background: var(--controlbar-bg) !important;
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-bright) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  color: var(--text-main) !important;
  font-size: 14px; /* LARGER PROMINENT FONT SIZE */
  font-weight: 500; /* REGULAR/MEDIUM FOR PRIMARY TOOL ELEMENTS */
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
}

.palette-btn span {
  color: var(--text-main) !important; /* UNIFORM MAIN TEXT */
  letter-spacing: -0.1px;
}

.palette-btn:hover {
  border-color: #3b82f6 !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35) !important;
}

.palette-btn:active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  transform: translateY(0);
}

.palette-btn:active span,
.palette-btn:active i {
  color: #ffffff !important;
}

/* COLORED ICONS FOR EACH NODE TYPE */






.palette-btn svg,
.palette-btn i {
  width: 18px !important; /* LARGER PROPORTIONAL ICONS */
  height: 18px !important;
  stroke-width: 1.6px !important;
}

/* --------------------------------------------------------------------------
   PATTERNFLY TOPOLOGY CONTEXT MENU (PROPORTIONAL 14PX ICONS & REGULAR TEXT)
   -------------------------------------------------------------------------- */
.pf-v5-c-menu {
  position: fixed !important;
  z-index: 999999 !important;
  min-width: 165px;
  background: var(--bg-panel);
  backdrop-filter: var(--glass-blur);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-bright);
  pointer-events: auto !important;
  /* Without a ceiling these menus grew past the viewport instead of
     scrolling, so the entries at the bottom were simply unreachable. */
  max-height: min(360px, calc(100vh - 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pf-v5-c-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-v5-c-menu__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 14px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.12s ease;
  white-space: nowrap;
}

.pf-v5-c-menu__item:hover {
  background: rgba(255, 255, 255, 0.12);
}

body.light-theme .pf-v5-c-menu__item:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* PROPORTIONAL 14PX COMPACT ICONS FOR CONTEXT MENU */
.pf-v5-c-menu__item svg,
.pf-v5-c-menu__item i {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  stroke-width: 1.6px !important;
  flex-shrink: 0 !important;
  color: var(--text-sub);
  opacity: 0.85;
}

.pf-v5-c-menu__item.pf-v5-m-danger svg,
.pf-v5-c-menu__item.pf-v5-m-danger i {
  color: #ef4444 !important;
  opacity: 1 !important;
}

.pf-v5-c-menu__item.pf-v5-m-danger {
  color: #ef4444;
}

.pf-v5-c-menu__item.pf-v5-m-danger:hover {
  background: rgba(239, 68, 68, 0.18);
}

.pf-v5-c-divider {
  height: 1px;
  background: var(--border-bright);
  margin: 4px 0;
}

/* DELETE EDGE & DELETE NODE BUTTON IN INSPECTOR DRAWER & CONTEXT MENU */
.btn-delete-node {
  width: 100% !important;
  height: 36px !important;
  margin-top: 16px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #ef4444 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.btn-delete-node svg,
.btn-delete-node i {
  width: 14px !important;
  height: 14px !important;
  stroke: #ef4444 !important;
  stroke-width: 1.8px !important;
}

.btn-delete-node:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25) !important;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   PATTERNFLY TOPOLOGY ANCHORS
   -------------------------------------------------------------------------- */
/* Placement only. The arrow itself is drawn further down, where the R4
   connection-handle rules live. */
.pf-v5-c-topology-connector-anchor {
  position: absolute;
  z-index: 30;
  cursor: crosshair;
}

.pf-v5-c-topology-connector-anchor.left { top: 50%; left: -14px; margin-top: -8px; }
.pf-v5-c-topology-connector-anchor.right { top: 50%; right: -14px; margin-top: -8px; }
.pf-v5-c-topology-connector-anchor.top { top: -14px; left: 50%; margin-left: -8px; }
.pf-v5-c-topology-connector-anchor.bottom { bottom: -14px; left: 50%; margin-left: -8px; }

/* LIVE DRAG EDGE PATH */
.connection-path.temp-drag-edge {
  stroke: #3b82f6;
  stroke-width: 2px;
  stroke-dasharray: 5 4;
  animation: pf-v5-c-topology-edge-dash 0.8s linear infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   PATTERNFLY TOPOLOGY EDGES & SELECTION
   -------------------------------------------------------------------------- */
.pf-v5-c-topology-edge__path {
  fill: none;
  stroke: var(--path-stroke);
  stroke-width: 2.2px;
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: stroke !important;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.pf-v5-c-topology-edge__path.pf-m-selected,
.pf-v5-c-topology-edge__path.selected {
  stroke: #3b82f6 !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
}

.pf-v5-c-topology-edge__path:hover {
  stroke: #3b82f6;
  stroke-width: 3px;
}

.pf-v5-c-topology-edge__path.animated {
  stroke-dasharray: 6 4;
  animation: pf-v5-c-topology-edge-dash 1.2s linear infinite;
}

@keyframes pf-v5-c-topology-edge-dash {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   CANONICAL EDGE BEHAVIOURS

   Edge type = behaviour, condition = why, label = what the human reads.
   `yes` / `no` are therefore NOT types; they are labels on a `next` edge.
   Semantic tone per the plan: next neutral, pass success, fail error,
   rework warning + dashed, retry informational + dashed, complete terminal.
   -------------------------------------------------------------------------- */
.pf-v5-c-topology-edge__path.next { stroke: var(--edge-next); }
.pf-v5-c-topology-edge__path.pass { stroke: var(--edge-pass); }
.pf-v5-c-topology-edge__path.fail { stroke: var(--edge-fail); }
.pf-v5-c-topology-edge__path.rework { stroke: var(--edge-rework); stroke-dasharray: 7 5; }
.pf-v5-c-topology-edge__path.retry { stroke: var(--edge-retry); stroke-dasharray: 3 4; }
.pf-v5-c-topology-edge__path.complete { stroke: var(--edge-complete); }
.pf-v5-c-topology-edge__path.webhook,
.pf-v5-c-topology-edge__path.schedule { stroke: var(--edge-retry); stroke-dasharray: 2 4; }
.pf-v5-c-topology-edge__path.custom { stroke: var(--edge-custom); }

.pf-v5-c-topology-edge__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-family: var(--font-mono);
  cursor: pointer;
  pointer-events: auto !important;
  backdrop-filter: blur(8px);

  /*
   * Wrap rather than run: a long label on one line reaches across the canvas
   * and sits over whatever is behind it. The box around this is measured after
   * wrapping, so however many lines it takes, all of them are visible —
   * previously the second line onwards was clipped away.
   */
  max-width: 150px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  margin: 8px;

  /*
   * Break inside a word when a word alone is wider than the pill. Wrapping
   * only at spaces leaves a long identifier — a URL, an event name like
   * `order.payment.captured.v2` — sticking out of its own background with the
   * end of it unreadable against the canvas.
   */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pf-v5-c-topology-edge__label.next { background: var(--edge-next); }
.pf-v5-c-topology-edge__label.pass { background: var(--edge-pass); }
.pf-v5-c-topology-edge__label.fail { background: var(--edge-fail); }
.pf-v5-c-topology-edge__label.rework { background: var(--edge-rework); }
.pf-v5-c-topology-edge__label.retry { background: var(--edge-retry); }
.pf-v5-c-topology-edge__label.complete { background: var(--edge-complete); }
.pf-v5-c-topology-edge__label.webhook,
.pf-v5-c-topology-edge__label.schedule { background: var(--edge-retry); }
.pf-v5-c-topology-edge__label.custom { background: var(--edge-custom); }

/* --------------------------------------------------------------------------
   CIRCULAR PATTERNFLY TOPOLOGY CUSTOM NODES (INNER COLORED CIRCLE SURROUNDED BY OUTER CIRCLE)
   -------------------------------------------------------------------------- */
.pf-v5-c-topology-node {
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 20;
  cursor: pointer;
  overflow: visible;
}

/* COMPACT SUB-ROLE BADGE DECORATION (TOP RIGHT OF CIRCLE) */
.pf-v5-c-topology-node__badge-decoration {
  position: absolute;
  /* Sits ABOVE the circle rather than beside it. Every node carries a badge
     now, and long ones (DETERMINISTIC, SYNTHESIS) previously ran left into the
     delete control on the selected node. */
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 10px;
  background: #8b5cf6;
  color: #ffffff;
  z-index: 25;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  white-space: nowrap;
}


/* OUTER CIRCLE RING */
.pf-v5-c-topology-node__circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  background: var(--node-bg);
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-bright);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.15s ease;
  pointer-events: auto;
}

/* INNER COLORED CIRCLE BADGE (SOLID ACCENT COLOR WITH WHITE ICON INSIDE) */
.pf-v5-c-topology-node__icon-box {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.15s ease;
}

/* --------------------------------------------------------------------------
   NODE IDENTITY

   --node-color is set per node from its canonical profile, so the icon,
   selection ring, badge and label pill all derive from one value instead of
   repeating a hex per component per type.
   -------------------------------------------------------------------------- */
.pf-v5-c-topology-node .pf-v5-c-topology-node__icon-box {
  background: var(--node-color) !important;
  color: #ffffff !important;
}

.pf-v5-c-topology-node .pf-v5-c-topology-node__label-badge {
  border-color: var(--node-color) !important;
}

.pf-v5-c-topology-node .badge-subrole {
  background: var(--node-color);
  color: #ffffff;
}

/* Resting ring: the node's colour, softened. */
.pf-v5-c-topology-node .pf-v5-c-topology-node__circle {
  border-color: color-mix(in srgb, var(--node-color) 40%, transparent);
}

/* Selection is shown in the node's OWN colour, and the text pill fills with it.
   Architect request; resting state keeps the approved mockup's white pill. */
.pf-v5-c-topology-node.selected .pf-v5-c-topology-node__circle {
  border-color: var(--node-color) !important;
  box-shadow: 0 0 0 3.5px var(--node-color),
              0 0 22px color-mix(in srgb, var(--node-color) 45%, transparent) !important;
}

.pf-v5-c-topology-node.selected .pf-v5-c-topology-node__label-badge {
  background: var(--node-color) !important;
  border-color: var(--node-color) !important;
}

.pf-v5-c-topology-node.selected .pf-v5-c-topology-node__label-title {
  color: #ffffff !important;
}

.palette-btn i { color: var(--node-color) !important; }


.pf-v5-c-topology-node__icon-box svg,
.pf-v5-c-topology-node__icon-box i {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  stroke: #ffffff !important;
  stroke-width: 1.8px !important;
}

/* OUTER CIRCLE COLOR OUTLINES IN DEFAULT STATE */

/* DEFAULT (UNSELECTED) ACTION TEXT PILL — OUTLINE IN NODE COLOR, NO FILL */
.pf-v5-c-topology-node__label-badge {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  padding: 3px 8px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  pointer-events: auto;
  background: var(--bg-card) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-bright) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.15s ease;
  cursor: pointer;
}

/* REGULAR NON-BOLD NODE ACTION TEXT */
.pf-v5-c-topology-node__label-title {
  font-size: 11px;
  font-weight: 400 !important; /* REGULAR NON-BOLD TEXT */
  color: var(--text-main);
  transition: color 0.15s ease;
}

/* NODE COLOR OUTLINES IN DEFAULT (UNSELECTED) STATE */

/* --------------------------------------------------------------------------
   NODE SELECTION: BOLD NODE-COLORED CIRCLE RING & NODE-COLORED PILL FILL
   -------------------------------------------------------------------------- */

/* 1. WORKER NODE (Electric Blue #3b82f6) */

/* 2. VERIFIER NODE (Electric Violet #8b5cf6) */

/* 3. TEST NODE */

/* 4. CODE NODE (Metallic Amber #f59e0b) */

/* 5. TOOL NODE (Electric Cyan #06b6d4) */

/* 6. SYNTHESIZER NODE (Deep Indigo #6366f1) */

/* SELECTED NODE TEXT TURNS WHITE REGULAR */
.pf-v5-c-topology-node.pf-m-selected .pf-v5-c-topology-node__label-title,
.pf-v5-c-topology-node.selected .pf-v5-c-topology-node__label-title {
  color: #ffffff !important;
  font-weight: 500 !important;
}

.node-delete-btn {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc2626;
  color: #ffffff;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.15s ease;
  z-index: 30;
}

.node-delete-btn i {
  font-size: 10px;
}

.pf-v5-c-topology-node:hover .node-delete-btn {
  opacity: 1;
  transform: scale(1);
}

.node-delete-btn:hover {
  background: #b91c1c;
  transform: scale(1.15) !important;
}

.floating-right-panel {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 350px;
  background: var(--bg-panel);
  backdrop-filter: var(--glass-blur);
  border: none !important;
  border-radius: 14px;
  box-shadow: var(--shadow-panel);
  display: none; /* HIDDEN BY DEFAULT (ONLY VISIBLE WHEN SOMETHING IS SELECTED) */
  flex-direction: column;
  z-index: 45;
  overflow: hidden;
  transition: background 0.2s ease;
}

.panel-header {
  padding: 14px 18px;
  border-bottom: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.panel-title i {
  color: #3b82f6;
}

.panel-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.selected-node-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-input);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: none !important;
}

.preview-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-icon-box svg {
  stroke-width: 1.5px !important;
  stroke: #ffffff !important;
}

.preview-info {
  display: flex;
  flex-direction: column;
}

.preview-title {
  font-size: 14px;
  font-weight: 700;
}

.preview-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
}

.form-select, .form-input, .form-textarea {
  background: var(--bg-input);
  backdrop-filter: blur(8px);
  border: none !important;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 13px;
  outline: none;
  transition: all 0.15s ease;
}

.form-select:focus, .form-input:focus, .form-textarea:focus {
  background: rgba(255, 255, 255, 0.12);
}

.form-textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.4;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-sub);
}

.slider-input {
  width: 100%;
  accent-color: #3b82f6;
}

.toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-sub);
  padding: 4px 0;
}

/* --------------------------------------------------------------------------
   CODING INSTRUCTIONS VIEW OVERLAY (FUNCTION SPECIFICATIONS f(x))
   -------------------------------------------------------------------------- */
.coding-instructions-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  /* --bg-main has never existed; this resolved to nothing, so the coding view
     was transparent and the canvas showed through its text. --bg-app is the
     token the rest of the app uses for a full-bleed surface. */
  background: var(--bg-app);
  backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  padding: 24px 32px 32px 88px;
  box-sizing: border-box;
}

.coding-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-bright);
  margin-bottom: 20px;
}

.coding-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.coding-header-icon {
  width: 28px !important;
  height: 28px !important;
  color: #3b82f6 !important;
  stroke-width: 2px !important;
}

.coding-title-group h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.2;
}

.coding-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
}

.coding-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coding-action-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.coding-action-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.coding-action-btn.primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.coding-action-btn.primary:hover {
  background: #1d4ed8;
}

.coding-view-body {
  display: flex;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.coding-sidebar {
  width: 260px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coding-sidebar-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-sub);
  margin: 0 0 6px 0;
}

.coding-function-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.fn-badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fn-badge-item:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
}

.fn-badge-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.fn-badge-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coding-editor-container {
  flex: 1;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.editor-mac-controls {
  height: 38px;
  background: #161b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}

.mac-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mac-dot.red { background: #ff5f56; }
.mac-dot.yellow { background: #ffbd2e; }
.mac-dot.green { background: #27c93f; }

.editor-filename {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #8b949e;
}

.coding-code-pre {
  margin: 0;
  padding: 20px 24px;
  flex: 1;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: #e6edf3;
  background: transparent;
}

/* ==========================================================================
   DRAWER VIEWS (F3 / F3H)
   Library, node profile, orchestrator control plane, help and validation.
   All colour comes from --node-color / --edge-* tokens; no per-type rules.
   ========================================================================== */

.drawer-tabs { display: flex; gap: 6px; margin-bottom: 12px; }

.drawer-tabs button {
  flex: 1;
  padding: 7px;
  border: 1px solid var(--border-bright);
  background: var(--bg-card);
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sub);
}

.drawer-tabs button.is-active {
  background: var(--text-main);
  border-color: var(--text-main);
  color: var(--bg-app);
}

.drawer-rule {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-sub);
  background: var(--bg-canvas);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 12px;
}

.drawer-hint { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.drawer-hint--ok { color: var(--status-success); }

.drawer-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.drawer-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  background: var(--bg-card);
  margin-bottom: 8px;
}

.drawer-card__head { display: flex; gap: 10px; }
.drawer-card__icon { color: var(--node-color, var(--text-muted)); flex: 0 0 auto; }
.drawer-card__title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.drawer-card__badge { color: var(--node-color, var(--text-muted)); margin-left: 4px; }
.drawer-card__body { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-sub); }

.drawer-card__add {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid var(--node-color, var(--border-bright));
  background: transparent;
  color: var(--node-color, var(--text-main));
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.drawer-card__add:hover { background: color-mix(in srgb, var(--node-color) 12%, transparent); }

.drawer-profile { margin-bottom: 6px; }

.drawer-profile > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--node-color, var(--text-sub));
  padding: 6px 0;
}

.drawer-profile h5 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 10px 0 4px;
}

.drawer-profile p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-sub); }
.drawer-profile ul { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.5; color: var(--text-sub); }

.drawer-ledger { margin: 0; padding-left: 16px; font-size: 12px; color: var(--text-sub); line-height: 1.6; }

.drawer-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.drawer-issues button {
  display: flex;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  background: var(--bg-card);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-main);
}

.drawer-issues button strong {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}

.drawer-issues .is-error button strong { color: var(--edge-fail); }
.drawer-issues .is-warning button strong { color: var(--edge-rework); }

.help-example {
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--bg-card);
}

.help-example__title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.help-example__tag { color: var(--text-muted); margin-left: 6px; font-size: 10px; }

.help-example__diagram {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-sub);
  background: var(--bg-canvas);
  border-radius: 6px;
  padding: 8px;
  margin: 6px 0;
  overflow-x: auto;
  white-space: pre;
}

.help-example__note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

.help-nodes, .help-edges { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.help-nodes li, .help-edges li { font-size: 12px; line-height: 1.45; color: var(--text-sub); }
.help-node { display: flex; align-items: center; gap: 8px; }
.help-node__icon { color: var(--node-color); display: flex; }
.help-edges li { padding-left: 2px; }

/* Rail scrollbar is hidden; the column is short and scrolls only when cramped. */
.floating-left-nav::-webkit-scrollbar { display: none; }

/* Short viewports: tighten the rail so all entries stay reachable without scrolling. */
@media (max-height: 820px) {
  /* Both columns shrink together so they stay visually identical. */
  .floating-left-nav { gap: 7px; }
  .floating-left-nav .floating-nav-btn,
  .topology-canvas-control-bar .pf-v5-c-topology-control-bar__button { width: 36px; height: 36px; }
}

/* Live validation readout on the control-plane pill. */
#orchMetrics.has-issues { color: var(--edge-rework); font-weight: 700; }

/* Export menu and transient confirmations. */
.export-menu {
  position: fixed;
  min-width: 190px;
  /* Rendered to <body>, so this is a real top-level layer. */
  z-index: 300;
}

.wf-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--text-main);
  color: var(--bg-app);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--shadow-panel);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 200;
}

.wf-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.wf-toast[data-tone='warn'] { background: var(--edge-rework); color: #fff; }
.wf-toast[data-tone='error'] { background: var(--edge-fail); color: #fff; }

/* --------------------------------------------------------------------------
   EDGE BOUNDARY MARKERS (F4)

   Where the graph meets the outside world. Deliberately not nodes: they are
   not draggable, never appear in definition.nodes, and carry no node chrome.
   -------------------------------------------------------------------------- */
.wf-boundary {
  cursor: pointer;
  /* #svgEdges is pointer-events:none so the canvas stays pannable through it;
     interactive children must opt back in, as the edge paths do. */
  pointer-events: auto;
}

.wf-boundary__ring {
  fill: var(--bg-canvas);
  stroke: var(--edge-retry);
  stroke-width: 1.6;
  stroke-dasharray: 3 3;
}

.wf-boundary--out .wf-boundary__ring {
  stroke: var(--edge-complete);
  stroke-dasharray: none;
}

.wf-boundary__stop { fill: var(--edge-complete); }

.wf-boundary__label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--text-muted);
  text-transform: uppercase;
}

.wf-boundary:hover .wf-boundary__ring { stroke-width: 2.4; }

/* ==========================================================================
   F9Q — RESPONSIVE

   Authoring is desktop/tablet-first. On a phone the plan requires
   load / view / pan / zoom / select / inspect / help / export to work without
   broken layout, and allows a concise "best edited on a larger screen"
   affordance instead of forcing node-dragging parity.
   ========================================================================== */

@media (max-width: 767px) {
  /* Header: keep the primary actions reachable, drop what is optional. */
  .top-header {
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .tab-bar,
  .brand-divider,
  .product-brand-badge,
  .expandable-search,
  .topology-view-toolbar .pf-v5-c-toolbar__content-section > *:not(.pf-v5-m-align-right) {
    display: none !important;
  }

  .main-brand-title { font-size: 20px; }
  .main-brand-subtitle { font-size: 10px; }

  .header-right { gap: 8px; flex-wrap: wrap; }
  .header-right .pf-v5-c-button span { display: none; }
  .header-right .pf-v5-c-button { padding: 8px; }

  /*
   * The quick bar is 699px wide; in a 390px viewport four of its six buttons
   * were off-screen and unreachable. Scroll it rather than clip it.
   */
  .floating-bottom-bar {
    left: 8px;
    right: 8px;
    transform: none;
    max-width: none;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .floating-bottom-bar::-webkit-scrollbar { display: none; }
  body.panel-open .floating-bottom-bar { transform: none; }
  .palette-btn { flex: 0 0 auto; }

  /* Drawer becomes a full-width bottom sheet. */
  .floating-right-panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 62vh;
    border-radius: 14px 14px 0 0;
  }

  /* Canvas controls tuck into the corner and stay clear of the sheet. */
  .topology-canvas-control-bar { bottom: 84px; left: 8px; }
  .floating-left-nav { left: 8px; max-height: calc(100% - 260px); }
  .floating-nav-btn { width: 32px; height: 32px; }

  /*
   * The sheet covers the bottom 62vh, which put the lower rail entries
   * (Library, Validate, Help) underneath it where they stopped receiving
   * clicks. Keep the rail inside the space the sheet leaves.
   */
  /* Measured from the CANVAS, not the viewport: the header wraps on a phone,
     so the rail does not start at the top of the screen. */
  body.panel-open .floating-left-nav { max-height: calc(100% - 62vh - 40px); }
  body.panel-open .topology-canvas-control-bar { display: none; }

  .orchestrator-control-pill { left: 8px; right: 8px; max-width: none; }

  /* Authoring notice: honest about what a phone is good for here. */
  .wf-small-screen-note {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 130px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    color: var(--text-sub);
    font-size: 11.5px;
    line-height: 1.45;
    text-align: center;
    z-index: 46;
  }
}

@media (min-width: 768px) {
  .wf-small-screen-note { display: none; }
}

/* --------------------------------------------------------------------------
   F9Q — phone overflow corrections

   The clipping guard only inspected buttons, so these ran off the right edge
   unnoticed: the header action row, the graph-law banner and the control pill.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Header actions wrap instead of running off the edge. */
  .top-header .pf-v5-c-toolbar,
  .top-header .pf-v5-c-toolbar__content,
  .top-header .pf-v5-c-toolbar__content-section,
  .top-header .pf-v5-c-toolbar__group {
    flex-wrap: wrap !important;
    width: 100%;
    max-width: 100%;
  }

  .top-header .pf-v5-c-toolbar__group.pf-v5-m-align-right {
    justify-content: flex-start;
    margin-left: 0 !important;
  }

  /* The law still reads; only the elaboration is dropped. */
  /* There is no bottom-left corner to spare on a phone: the quick bar owns
     the full width of it. The law is reference material, not a control, so it
     yields rather than overlapping. */
  .core-definition-banner { display: none; }

  .wf-legend {
    left: 8px;
    right: 8px;
    bottom: auto;
    top: 76px;
    max-width: none;
  }

  .core-definition-banner .def-divider,
  .core-definition-banner .def-motto { display: none; }

  .orchestrator-control-pill {
    max-width: calc(100% - 16px);
    overflow: hidden;
  }

  .orch-pill-metrics { white-space: nowrap; }

  /* The note is guidance about authoring; once the sheet is open it would
     simply sit on top of the fields it is talking about. */
  body.panel-open .wf-small-screen-note { display: none; }
}

/* --------------------------------------------------------------------------
   The Test / Validate / Export / Save row lives in .topology-view-toolbar,
   inside the CANVAS — not in .top-header. Wrap rules aimed at the header never
   matched it, so Save hung 32px past the right edge on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .topology-view-toolbar,
  .topology-view-toolbar .pf-v5-c-toolbar__content,
  .topology-view-toolbar .pf-v5-c-toolbar__content-section,
  .topology-view-toolbar .pf-v5-c-toolbar__group {
    flex-wrap: wrap !important;
    max-width: 100%;
    row-gap: 6px;
  }

  .topology-view-toolbar .pf-v5-c-toolbar__group.pf-v5-m-align-right {
    margin-left: 0 !important;
    justify-content: flex-start;
  }

  /* Icon-only actions: the labels are what pushed the row past the edge. */
  .topology-view-toolbar .pf-v5-c-button span { display: none; }
  .topology-view-toolbar .pf-v5-c-button { padding: 8px 10px; }

  .core-definition-banner {
    justify-content: center;
    overflow: hidden;
    font-size: 10px;
  }
}

/* The workflow-name footer sat underneath the quick bar on a phone, so both
   were unreadable. The name is already shown in the header. */
@media (max-width: 767px) {
}

/* ==========================================================================
   R1 — CHROME CORRECTIONS (staging review)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Left rail: individually floating buttons, identical to the canvas control
   bar (+ / -). Same size, radius, surface, border, shadow, hover and palette —
   they are the same class of control and should not look like two systems.
   -------------------------------------------------------------------------- */
.floating-left-nav { gap: 10px; }

.floating-nav-btn {
  width: 40px;
  height: 40px;
  /* Both columns must not be squeezed by their flex parent, or the two
     controls end up different heights. */
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--controlbar-bg) !important;
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-bright) !important;
  outline: none !important;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  pointer-events: auto;
}

.floating-nav-btn:hover {
  border-color: var(--control-accent) !important;
  color: var(--control-accent);
  background: color-mix(in srgb, var(--control-accent) 10%, transparent) !important;
  transform: translateY(-2px);
}

/* A toggle reads as on/off: filled when on, plain when off. */
.floating-nav-btn.is-toggled-on {
  background: var(--control-accent) !important;
  border-color: var(--control-accent) !important;
  color: #ffffff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--control-accent) 40%, transparent) !important;
}

/* The current VIEW is marked with a thin border only. It is a mode, so it must
   read differently from an on/off toggle. */
.floating-nav-btn[data-kind="view"].active {
  border-color: var(--control-accent) !important;
  color: var(--control-accent);
  background: var(--controlbar-bg) !important;
}

.floating-nav-btn[data-kind="view"].active:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--control-accent) 10%, transparent) !important;
}

/* --- Graph law: heads the control plane, readable in both themes ---------- */
.core-definition-banner {
  transform: none;
  background: color-mix(in srgb, var(--color-synthesizer) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-synthesizer) 22%, transparent);
  backdrop-filter: none;
  color: var(--text-sub);
  white-space: nowrap;
}

.core-definition-banner .def-law {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-synthesizer);
}

.core-definition-banner .def-motto { font-style: italic; color: var(--text-muted); }
.core-definition-banner .def-divider { color: var(--text-muted); }

/* --- Orchestrator pill: carries the control-plane identity colour --------- */
.orchestrator-control-pill {
  top: 20px;
  /* Clear of the left rail (24px inset + 40px wide) — at left:24px the pill
     sat on top of it and hid the active navigation button. */
  left: 84px;
  background: color-mix(in srgb, var(--color-orchestrator) 12%, var(--bg-card)) !important;
  border: 1.5px solid color-mix(in srgb, var(--color-orchestrator) 45%, transparent) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-orchestrator) 22%, transparent) !important;
}

.orchestrator-control-pill:hover {
  border-color: var(--color-orchestrator) !important;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--color-orchestrator) 34%, transparent) !important;
}

.orch-pill-label { color: var(--color-orchestrator) !important; font-weight: 700; }

/* --- Uniform control sizing ---------------------------------------------- */
/*
 * The right-hand actions form one column across both rows: Create + Load above,
 * Validate + Export + Save below. Their widths are derived from each other
 * rather than both being hand-tuned, so the column survives a label change.
 */
:root {
  --action-btn-w: 104px;
  --action-gap: 10px;
  /* Three buttons and two gaps below; two buttons and one gap above. */
  --action-column-w: calc(var(--action-btn-w) * 3 + var(--action-gap) * 2);
  --header-btn-w: calc((var(--action-column-w) - var(--action-gap)) / 2);
}

.topology-view-toolbar .pf-v5-c-button {
  height: 38px;
  min-width: var(--action-btn-w);
  justify-content: center;
  padding: 0 14px;
  gap: 7px;
  font-size: 13px;
  border-radius: 10px;
}

/* Same start and end axis as the row beneath. */
.header-right {
  gap: var(--action-gap);
}

.header-right .btn-create,
.header-right .btn-load-workflow {
  width: var(--header-btn-w) !important;
  min-width: var(--header-btn-w) !important;
  flex: 0 0 auto;
  justify-content: center !important;
}

/* Icon-only actions stay square rather than stretching to the text width. */
.topology-view-toolbar .pf-v5-c-button.is-icon-only,
.topology-view-toolbar #btnSearchToggle {
  min-width: 38px;
  width: 38px;
  padding: 0;
}

/* Search must not expand over its neighbours. */
.expandable-search { position: relative; z-index: 60; }
.expandable-search.is-open { min-width: 168px; }

/* --- Bottom quick bar: uniform buttons, icons keep node identity ---------- */
.palette-btn {
  height: 42px;
  min-width: 132px;
  justify-content: center;
  padding: 0 16px;
  font-size: 13px;
}

/* Regression from F2: the identity colour was flattened out of the icons. */
.palette-btn i,
.palette-btn svg { color: var(--node-color) !important; }

/* Text stays neutral so the colour reads as identity, not emphasis. */
.palette-btn span { color: var(--text-main); font-weight: 600; }

.palette-btn:hover {
  border-color: var(--node-color) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--node-color) 26%, transparent) !important;
}

/* Catalogue selects: the custom free-text field that appears under "Custom…". */
.wf-custom-value { margin-top: 6px; }
.wf-field-note { margin-top: 6px; font-size: 11px; color: var(--text-muted); line-height: 1.45; }

/* ==========================================================================
   R3 — DRAWER CORRECTIONS (staging review)
   ========================================================================== */

/* The Verifier's derived sub-role belongs in the header, next to the type,
   not in a box at the foot of the form. */
.preview-role { color: var(--node-color, var(--text-main)); font-weight: 700; }

/* --- Compact enough that a node's configuration fits without scrolling ---- */
#panelBody .form-group { margin-bottom: 12px; }
#panelBody .form-label { margin-bottom: 5px; font-size: 12px; font-weight: 600; }

#panelBody .form-input,
#panelBody .form-select { height: 34px; font-size: 12.5px; }

#panelBody .form-textarea { min-height: 62px; font-size: 12.5px; line-height: 1.45; }
#panelBody .wf-field-note { margin-top: 4px; }
#panelBody .drawer-section-label { margin: 12px 0 8px; padding-top: 10px; }
#panelBody .selected-node-preview { margin-bottom: 10px; }
#panelBody .drawer-profile > summary { padding: 4px 0; }

/* --- Delete: matches the design language instead of a pink pill ----------- */
.btn-delete-node {
  height: 34px !important;
  margin-top: 14px !important;
  background: transparent !important;
  border: 1px solid var(--border-bright) !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

.btn-delete-node:hover {
  background: color-mix(in srgb, var(--edge-fail) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--edge-fail) 45%, transparent) !important;
  color: var(--edge-fail) !important;
}

/* --- Node delete affordance: quiet until you mean it ---------------------- */
.pf-v5-c-topology-node:hover .node-delete-btn {
  opacity: 0.2;
  transform: scale(1);
}

.node-delete-btn:hover {
  opacity: 0.8 !important;
  transform: scale(1.08) !important;
}

/* --- Editable fields read as editable ------------------------------------ */
#panelBody .form-input:focus,
#panelBody .form-textarea:focus,
#panelBody .form-select:focus {
  outline: none;
  border-color: var(--anchor-border) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--anchor-border) 16%, transparent) !important;
}

/* Pair related controls so a node's configuration fits without scrolling. */
.wf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wf-form-row .form-group { margin-bottom: 8px; }
.wf-field-note--row { margin: -4px 0 12px; }

#panelBody .form-textarea { min-height: 54px; }
#panelBody .selected-node-preview { margin-bottom: 8px; }

/* The drawer stopped 220px short of the viewport for no reason, forcing a
   scroll on nodes whose configuration would otherwise fit. Extend it to just
   above the quick bar and reclaim that space. */
@media (min-width: 768px) {
  /* Stops above the quick bar so the bar never has to move out of its way. */
  .panel-body { max-height: calc(100vh - 250px); padding: 14px 18px; }

  /*
   * A LIMIT, not a height. Pinning both top and bottom stretched the card to
   * fill whatever space there was, so a node with little to configure produced
   * a full-height panel with the footer floating in the middle of it and dead
   * space below — 85px of it on a 1080-tall screen, and more on a taller one.
   * The card now ends where its contents do, and still never reaches the bar.
   */
  .floating-right-panel { max-height: calc(100% - 120px); }
}

/* Final trim so a node's configuration fits at standard desktop heights. */
#panelBody .form-group { margin-bottom: 10px; }
#panelBody .form-textarea { min-height: 50px; }
#panelBody .drawer-profile > summary { padding: 2px 0; font-size: 10.5px; }
#panelBody .drawer-section-label { margin: 10px 0 6px; padding-top: 8px; }
.btn-delete-node { margin-top: 10px !important; }
#panelBody .toggle-group { margin-top: 8px; }

/* Verifier carries two textareas (Mission and Checks), which is what pushed it
   past the fold. They stay resizable; only the resting height is reduced. */
#panelBody .form-textarea { min-height: 44px; }
#panelBody .selected-node-preview { margin-bottom: 6px; padding-bottom: 6px; }
#panelBody .wf-field-note--row { margin: -6px 0 8px; font-size: 10.5px; }

/* ==========================================================================
   R2 — CONTROLS THAT NOW DO SOMETHING
   ========================================================================== */

/* Menus anchor under their OWN button; without this both the Layout and Nodes
   menus dropped under Layout. */
.topology-view-toolbar .pf-v5-c-toolbar__item { position: relative; }

/* Canvas grid, toggled from the rail. */
body.show-canvas-grid .canvas-area {
  background-image: radial-gradient(circle, var(--grid-dot) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
}

/* Checkable menu rows: visible state, not an invisible check. */
.wf-menu-title {
  padding: 9px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wf-check-item { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.wf-check-item__icon { color: var(--node-color); width: 15px; height: 15px; }

.wf-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--bg-input);
}

.wf-check.is-on {
  background: var(--anchor-border);
  border-color: var(--anchor-border);
  color: #fff;
}

.wf-check svg { width: 11px; height: 11px; }

/* Topology legend overlay. */
.wf-legend {
  position: absolute;
  right: 24px;
  bottom: 96px;
  z-index: 44;
  min-width: 172px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  box-shadow: var(--shadow-panel);
  font-size: 11.5px;
}

.wf-legend__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.wf-legend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.wf-legend__list li { display: flex; align-items: center; gap: 8px; color: var(--text-sub); font-weight: 600; }
.wf-legend__list em { margin-left: auto; font-style: normal; color: var(--text-muted); }
.wf-legend__empty { color: var(--text-muted); font-weight: 400; }

.wf-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--node-color);
  flex: 0 0 auto;
}

/* Test: a run is an action, so it reads as one. */
#btnTestWorkflow.is-running { position: relative; overflow: hidden; }

#btnTestWorkflow.is-running::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-worker) 34%, transparent), transparent);
  animation: wf-scan 1.1s linear infinite;
}

@keyframes wf-scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  #btnTestWorkflow.is-running::after { animation: none; }
}

/* A dropdown anchors to its nearest POSITIONED ancestor. These menus live in
   .center-toolbar-group, not .topology-view-toolbar, so a rule scoped to the
   latter never matched and every menu anchored to the group — dropping the
   Nodes and Filter menus underneath the Layout button. */
.pf-v5-c-toolbar__item:has(> .pf-v5-c-menu) { position: relative; }

/* --------------------------------------------------------------------------
   Toolbar dropdowns are positioned in JS (anchorMenuToButton) because the
   toolbar groups are themselves absolutely positioned and CSS anchoring
   resolved every menu against the group.

   An earlier rule pinned `position/top/left` with !important, which silently
   beat the inline styles — the JS set left:585px and the computed value stayed
   0px, so Nodes and Filter both opened under the Layout button.
   -------------------------------------------------------------------------- */
/* Nothing is pinned here: the position is set from JS with priority, which is
   the only way to beat the legacy !important rules above. */

/* Assumption ledger rows: editable, because they form part of the handover. */
.wf-ledger-row { display: grid; grid-template-columns: 1fr 104px 28px; gap: 6px; margin-bottom: 6px; }
.wf-ledger-row .form-select { padding: 0 6px; }

.wf-ledger-remove {
  border: 1px solid var(--border-bright);
  background: transparent;
  border-radius: 7px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-ledger-remove:hover { color: var(--edge-fail); border-color: var(--edge-fail); }

.wf-ledger-add {
  width: 100%;
  height: 32px;
  margin-top: 4px;
  border: 1px dashed var(--border-bright);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wf-ledger-add:hover { color: var(--control-accent); border-color: var(--control-accent); }

/* ==========================================================================
   PATTERNFLY-STYLE DROPDOWNS

   Replaces the native <select>, which rendered as the OS grey popup: no group
   labels, no dividers, no check on the selected item, and unstyleable.
   ========================================================================== */

.wf-dropdown { position: relative; }

.pf-v5-c-menu-toggle {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-bright);
  background: var(--bg-input);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * No blue glow when opened. The toggle sits alongside plain text inputs in the
 * drawer, and a control that lights up blue only while open reads as a
 * validation state rather than an open menu. The chevron already says it is
 * open, and the menu itself is the feedback.
 */
.pf-v5-c-menu-toggle:hover { border-color: var(--border-strong, #cbd5e1); }
.pf-v5-c-menu-toggle[aria-expanded='true'] { border-color: var(--border-strong, #cbd5e1); }
.pf-v5-c-menu-toggle:focus-visible {
  outline: 2px solid var(--control-accent);
  outline-offset: 1px;
}

.pf-v5-c-menu-toggle__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-v5-c-menu-toggle__text.is-placeholder { color: var(--text-muted); }
.pf-v5-c-menu-toggle__controls { display: flex; color: var(--text-muted); flex: 0 0 auto; }
.pf-v5-c-menu-toggle__controls svg { width: 14px; height: 14px; }

.wf-dropdown__menu {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--bg-panel) !important;
  border: 1px solid color-mix(in srgb, var(--control-accent) 24%, var(--border-bright)) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
}

.wf-dropdown__menu[hidden] { display: none; }

.pf-v5-c-menu__group + .pf-v5-c-menu__group { margin-top: 2px; }

.pf-v5-c-menu__group-title {
  margin: 0;
  padding: 7px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wf-dropdown__menu .pf-v5-c-menu__list { list-style: none; margin: 0; padding: 0; }

.wf-dropdown__menu .pf-v5-c-menu__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  color: var(--text-main);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.wf-dropdown__menu .pf-v5-c-menu__item:hover {
  background: color-mix(in srgb, var(--control-accent) 9%, transparent);
}

/* The current value is named in blue, matching its tick. */
.wf-dropdown__menu .pf-v5-c-menu__item.pf-m-selected,
.wf-dropdown__menu .pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-text {
  color: var(--control-accent);
  font-weight: 600;
}

/* Blue check on the selected entry, per the design language. */
.pf-v5-c-menu__item-select-icon { display: flex; color: var(--control-accent); width: 14px; flex: 0 0 auto; }
.pf-v5-c-menu__item-select-icon svg { width: 14px; height: 14px; }
.pf-v5-c-menu__item-description { display: block; font-size: 11px; color: var(--text-muted); }

.wf-dropdown__menu .pf-v5-c-divider {
  height: 1px;
  margin: 5px 0;
  background: var(--border-bright);
  list-style: none;
}

/* ==========================================================================
   R4 — CONNECTION HANDLES

   draw.io behaviour: hovering a node reveals an arrow at every connection
   point, quiet enough not to clutter; hovering one makes it unmistakably the
   thing you are about to grab.
   ========================================================================== */

/*
 * Just an arrow. A circle around it was a second shape saying nothing the
 * arrow did not already say, and six nodes' worth of them cluttered the canvas.
 * The hit area stays generous; only the paint is minimal.
 */
.pf-v5-c-topology-connector-anchor {
  width: 16px;
  height: 16px;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--control-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  cursor: crosshair;
}

/* The arrow itself: a CSS triangle, so no extra markup is needed. */
.pf-v5-c-topology-connector-anchor::after {
  content: '';
  width: 0;
  height: 0;
  border: 5px solid transparent;
}

.pf-v5-c-topology-connector-anchor.right::after { border-left-color: currentColor; margin-left: 4px; }
.pf-v5-c-topology-connector-anchor.left::after { border-right-color: currentColor; margin-right: 4px; }
.pf-v5-c-topology-connector-anchor.bottom::after { border-top-color: currentColor; margin-top: 4px; }
.pf-v5-c-topology-connector-anchor.top::after { border-bottom-color: currentColor; margin-bottom: 4px; }

/* Present but quiet while the node is hovered. */
.pf-v5-c-topology-node:hover .pf-v5-c-topology-connector-anchor {
  opacity: 0.7;
}

/* The one under the pointer is unambiguous: half again as large, fully opaque,
   and still nothing but the arrow. */
.pf-v5-c-topology-node .pf-v5-c-topology-connector-anchor:hover {
  opacity: 1 !important;
  transform: scale(1.5);
  background: transparent !important;
}

/* While dragging a connection, the whole canvas is in link mode. */
body.is-linking { cursor: crosshair; }
body.is-linking .pf-v5-c-topology-node { transition: none; }

.pf-v5-c-topology-node.is-drop-target .pf-v5-c-topology-node__circle {
  border-color: var(--control-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--control-accent) 30%, transparent) !important;
}

/* --- Repointing an existing edge ----------------------------------------- */
.wf-edge-endpoint {
  fill: var(--bg-panel);
  stroke: var(--control-accent);
  stroke-width: 2;
  cursor: grab;
  pointer-events: auto;
}

.wf-edge-endpoint:hover { fill: var(--control-accent); r: 7; }
.wf-edge-endpoint:active { cursor: grabbing; }

/* The edge most likely to be grabbed is highlighted before you commit. */
.pf-v5-c-topology-edge__path.is-candidate {
  stroke: var(--control-accent) !important;
  stroke-width: 3 !important;
}

/*
 * Endpoint handles must clear BOTH the nodes and their connector anchors.
 *
 * Nodes are z-index 20 and anchors are 30. At 30 this layer only tied with the
 * anchors, and a tie goes to whichever paints last — the anchor, an HTML
 * sibling later in the document. So an endpoint resting on a node, which is
 * exactly where every endpoint rests, was covered by that node's anchor:
 * pressing the handle to move the edge started a NEW edge from the anchor
 * underneath instead. Repointing was not stiff, it was unreachable.
 *
 * The layer itself is pointer-events:none, so lifting it intercepts nothing
 * beyond the handles themselves.
 */
.connections-svg-layer.handles-layer {
  z-index: 40;
}

/* ==========================================================================
   R5 — MENU AFFORDANCES

   The graph law now heads the control plane, and every menu option that can be
   switched shows a real checkbox rather than a tick that disappears when off.
   ========================================================================== */

/*
 * Reference material lives in the bottom-left corner, stacked clear of the
 * zoom column: the legend above, the graph law below it. Neither belongs in
 * the middle of the canvas, where they competed with the graph itself.
 */
/*
 * The graph law is a caption on the canvas, not a control. Every pill shape in
 * this UI is something you can press; giving the law one made it look like a
 * button that did nothing. It is now plain text sitting on the canvas directly
 * under the toolbar, where it reads as a heading for the workspace.
 */
.core-definition-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  margin: 0;
  z-index: 40;
  padding: 0;
  gap: 7px;

  background: none !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  backdrop-filter: none;

  font-size: 10.5px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.core-definition-banner .def-law {
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.09em;
}

/* The legend keeps the bottom-left corner to itself now. */
.wf-legend {
  top: auto;
  right: auto;
  left: 84px;
  bottom: 84px;
  max-width: 260px;
}

/* --- 1 & 5. Chrome clearances -------------------------------------------- */

/*
 * Back where it was, plus slack inside the box.
 *
 * The rail is a scroll container, and hovering a button lifts it 2px. The first
 * button sits flush against the container's top edge, so that lift pushed its
 * top border outside the box and overflow clipped it — the Workflow button's
 * outline vanished on hover, and only that one, because only it is at the edge.
 *
 * The padding gives the lift somewhere to go, and `top`/`left` come back by the
 * same amounts so nothing actually moves.
 */
.floating-left-nav {
  top: 32px;
  left: 16px;
  padding: 6px 8px;
}

/* Clear of both the rail and the toolbar above it, rather than tight against
   the corner where all three met. */
.orchestrator-control-pill {
  top: 38px;
  left: 108px;
}

.core-definition-banner .def-motto { color: var(--text-muted); }

/*
 * Outline checkboxes. A solid blue fill made a checked row read as selected
 * rather than enabled, and four filled squares in a row overpowered the labels
 * they belong to. The box is a blue outline; the tick inside carries the state.
 */
.wf-check,
.pf-v5-c-menu__item .wf-check {
  width: 15px !important;
  height: 15px !important;
  border-radius: 4px !important;
  border: 1.5px solid var(--control-accent) !important;
  background: transparent !important;
  color: var(--control-accent) !important;
  opacity: 1 !important;
}

.wf-check svg,
.wf-check i,
.pf-v5-c-menu__item .wf-check svg,
.pf-v5-c-menu__item .wf-check i {
  width: 10px !important;
  height: 10px !important;
  color: var(--control-accent) !important;
  stroke: var(--control-accent) !important;
  opacity: 1 !important;
  stroke-width: 3px !important;
}

/* Unchecked is an empty box, not an absence. */
.wf-check:not(.is-on) { border-color: var(--border-bright) !important; }

.wf-check-item:hover .wf-check:not(.is-on),
.pf-v5-c-menu__item:hover .wf-check:not(.is-on) { border-color: var(--control-accent) !important; }

/* --- 9. Delete: the edge version is the correct one ----------------------- */
/*
 * `.panel-body` is a flex column, and the button was allowed to shrink. In the
 * node drawer, which has more content, that squashed a 34px button to 16px —
 * the same class rendering at two different heights.
 */
.btn-delete-node { flex: 0 0 auto !important; }

/* --- 7. The live drag path ------------------------------------------------ */
/*
 * An SVG path defaults to fill:black, so the curve's enclosed area was painted
 * solid — the "black background" that appeared mid-drag.
 */
.connection-path,
.connection-path.temp-drag-edge,
#svgEdges path,
#svgHandles path { fill: none; }

/* --- 8. Repointing an edge is visible while it happens -------------------- */
.pf-v5-c-topology-edge__path.is-repointing {
  opacity: 0.25;
  stroke-dasharray: 4 4;
}

.wf-edge-endpoint.is-dragging { fill: var(--control-accent); stroke: var(--control-accent); }

/* ==========================================================================
   R5 — CONTROL SHADOWS AND THE CODE VIEW
   ========================================================================== */

/*
 * A 12px blur at 20% black spilled further than the 10px gap between buttons,
 * so a stack of them read as one continuous shadow rather than separate
 * controls. The blur now stays inside each button's own footprint.
 */
.floating-nav-btn,
.pf-v5-c-topology-control-bar__button {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 5px rgba(15, 23, 42, 0.08) !important;
}

.floating-nav-btn:hover,
.pf-v5-c-topology-control-bar__button:hover {
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.12), 0 4px 10px rgba(59, 130, 246, 0.14) !important;
}

.floating-left-nav { gap: 12px; }
.topology-canvas-control-bar { gap: 12px; }

/* The rail stays usable in the Code view: it is navigation, and the overlay
   covered it purely because it sat higher in the stack. Scoped to that view —
   raised globally, the rail overlaps and swallows the zoom controls on a
   short viewport. */
body.is-code-view .floating-left-nav { z-index: 95; }

body.is-code-view .topology-canvas-control-bar,
body.is-code-view .node-palette-bar,
body.is-code-view .core-definition-banner,
body.is-code-view .orchestrator-control-pill { display: none; }

/* The contextual drawer describes the graph, so it never opens over the code. */
body.is-code-view #rightPanel { display: none !important; }

/* ==========================================================================
   R6 — LEGEND CONTENT AND EDITABLE FIELDS
   ========================================================================== */

.wf-legend__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-bright);
  font-size: 11px;
  color: var(--text-muted);
}

.wf-legend__summary strong { color: var(--text-main); font-weight: 700; }
.wf-legend__summary .is-warn strong { color: var(--edge-fail); }

.wf-legend__title + .wf-legend__list { margin-bottom: 8px; }
.wf-legend__list:last-child { margin-bottom: 0; }

/* Edges are lines, not swatches — the key should look like what it labels. */
.wf-legend__line {
  width: 14px;
  height: 0;
  flex: 0 0 auto;
  border-top: 2px solid var(--node-color);
}

.wf-legend__line.is-dashed { border-top-style: dashed; }

/*
 * A gentle hint that a field takes typing.
 *
 * The inputs were flat panels with no edge, indistinguishable from the read-only
 * text around them. Rather than boxing everything in — which would make the
 * drawer look like a form to fill in — the field carries a faint underline that
 * firms up as the pointer approaches, and a text cursor.
 */
/* !important is needed only because the base rule declares `border: none
   !important`; without matching it, the underline never paints. */
#panelBody .form-input,
#panelBody .form-textarea {
  cursor: text;
  border-bottom: 1px solid color-mix(in srgb, var(--control-accent) 22%, transparent) !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#panelBody .form-input:hover,
#panelBody .form-textarea:hover {
  border-bottom-color: color-mix(in srgb, var(--control-accent) 55%, transparent) !important;
  background: color-mix(in srgb, var(--control-accent) 3%, var(--bg-input));
}

#panelBody .form-input:focus,
#panelBody .form-textarea:focus {
  border-bottom-color: var(--control-accent) !important;
}

/* The placeholder says what to type, so it should not read as a value. */
#panelBody .form-input::placeholder,
#panelBody .form-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
  font-style: italic;
}

/* ==========================================================================
   R6 — TITLE, TOAST, DRAWER DENSITY, FEEDBACK, EXPORT
   ========================================================================== */

/* The rename affordance was a 14px glyph against a 15px title — easy to miss
   and a small target. */
.edit-icon-sm {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2px !important;
  padding: 2px;
  border-radius: 6px;
}

.workflow-title-group .edit-icon-sm:hover {
  color: var(--control-accent);
  background: color-mix(in srgb, var(--control-accent) 10%, transparent);
}

/*
 * Messages appear above the workflow name, where the action that triggers them
 * lives. Centred at the bottom they were a long way from the control the user
 * had just pressed.
 */
.wf-toast {
  left: auto;
  right: 24px;
  bottom: 64px;
  transform: translateY(12px);
  max-width: min(360px, calc(100vw - 48px));
}

.wf-toast.is-visible { transform: translateY(0); }

/* --- Drawer density ------------------------------------------------------- */
/*
 * The inspector showed about four fields before scrolling. Tightening the
 * vertical rhythm — not the type size — fits roughly a third more without
 * making anything harder to read.
 */
#panelBody .form-group { margin-bottom: 10px; }

#panelBody .form-label {
  margin-bottom: 3px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

#panelBody .form-input,
#panelBody .form-select { height: 30px; padding: 0 9px; font-size: 12px; }
#panelBody .form-textarea { padding: 7px 9px; font-size: 12px; line-height: 1.45; }
#panelBody .panel-section { margin-bottom: 12px; padding-bottom: 12px; }
#panelBody .form-hint { margin-top: 4px; font-size: 10.5px; line-height: 1.4; }
#panelBody .pf-v5-c-menu-toggle { height: 30px; font-size: 12px; }

/* --- Feedback ------------------------------------------------------------- */
.wf-kind-options { display: flex; flex-direction: column; gap: 6px; }

.wf-kind-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-bright);
  background: var(--bg-input);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wf-kind-option:hover { border-color: var(--control-accent); }

.wf-kind-option.is-selected {
  border-color: var(--control-accent);
  background: color-mix(in srgb, var(--control-accent) 7%, transparent);
}

.wf-kind-option__label { font-size: 12px; font-weight: 600; color: var(--text-main); }
.wf-kind-option.is-selected .wf-kind-option__label { color: var(--control-accent); }
.wf-kind-option__hint { font-size: 10.5px; color: var(--text-muted); }

.wf-inline-check { margin: 4px 0 12px; font-size: 12px; color: var(--text-sub); }

.btn-primary-wide {
  width: 100%;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--control-accent);
  background: var(--control-accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.btn-primary-wide:hover { filter: brightness(1.08); }
.btn-primary-wide svg, .btn-primary-wide i { width: 14px; height: 14px; }

/* --- Export: same shape as the Nodes menu -------------------------------- */
.export-menu { min-width: 210px; padding-bottom: 8px; }
.export-menu .wf-menu-action { width: calc(100% - 16px); margin: 6px 8px 0; }
.export-menu .wf-check-item { gap: 9px; }

/* ==========================================================================
   R7 — TEACHING HEADER

   Picture first, one sentence second, configuration after that. The diagram
   answers "what is this for" faster than any prose can, and does not have to
   be read to be understood.
   ========================================================================== */

.wf-type-header {
  margin-bottom: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--node-color) 24%, transparent);
  background: color-mix(in srgb, var(--node-color) 6%, var(--bg-panel));
}

.drawer-node-banner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  box-sizing: border-box;
}

.drawer-banner-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

/*
 * The type name and its badge live in the panel header, not here. Repeating
 * them above a diagram that already says [ TOOL ] printed the word twice in
 * the same block.
 */
.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.panel-title #panelHeaderTitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.panel-title__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.panel-title__badge {
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--node-color, var(--text-muted)) 36%, transparent);
  background: color-mix(in srgb, var(--node-color, var(--text-muted)) 12%, transparent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--node-color, var(--text-muted));
  white-space: nowrap;
}

/*
 * The banner artwork. Inlined SVG, so it inherits this page's custom properties
 * and recolours with the theme — an <img> could not.
 */
.drawer-node-banner {
  display: block;
  width: 100%;
  margin-bottom: 9px;
  /* Reserves the artwork's height so the panel does not jump as it loads. */
  min-height: 96px;
}

.drawer-node-banner svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 150px;
  overflow: visible;
}

/* Nothing left in the block: no banner, no rule above the instance name. */
.wf-type-header:has(.drawer-node-banner:empty) .wf-type-header__instance {
  border-top: none;
  padding-top: 0;
}

/* The instance's own name, subordinate to the type it teaches. */
.wf-type-header__instance {
  margin: 0;
  padding-top: 7px;
  border-top: 1px dashed color-mix(in srgb, var(--node-color) 22%, transparent);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
}

/*
 * Hint icons. `font-size` does nothing to a lucide SVG — it carries width and
 * height attributes — so the glyph rendered at its natural size and dwarfed the
 * label beside it.
 */
.wf-hint-icon {
  width: 13px !important;
  height: 13px !important;
  stroke-width: 2px !important;
  color: var(--text-muted);
  cursor: help;
  vertical-align: -1px;
  transition: color 0.15s ease;
}

.wf-hint-icon:hover,
.wf-hint-icon:focus-visible { color: var(--control-accent); }

.toggle-group input[type='checkbox'] {
  width: 15px;
  height: 15px;
  accent-color: var(--control-accent);
  cursor: pointer;
}

/*
 * Hint tooltip.
 *
 * The native `title` on the wrapper is the accessible baseline and always
 * works. This adds a styled bubble on top so the explanation matches the rest
 * of the UI and appears immediately rather than after the OS delay.
 */
.wf-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  cursor: help;
}

/*
 * The bubble lives on <body>, positioned by app.js.
 *
 * Drawn as a ::after on the hint it was clipped by the drawer's own overflow,
 * and `position: fixed` would not have escaped either — an ancestor with
 * backdrop-filter becomes the containing block and clips it just the same.
 */
.wf-tooltip {
  position: fixed;
  z-index: 500;

  max-width: 240px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--text-main);
  color: var(--bg-app);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;

  opacity: 0;
  /* Not opacity alone: a transparent element is still laid out, still hit by
     the pointer and still read out. */
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
  box-shadow: var(--shadow-panel);
}

.wf-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* ==========================================================================
   SCROLLBARS

   The default grey is the browser's, and it reads as chrome from another
   application. These are the app's own, in the accent colour, and quiet until
   the panel is actually hovered.
   ========================================================================== */

.wf-dropdown__menu,
.pf-v5-c-menu,
.wf-legend,
.coding-code-pre,
.coding-sidebar {
  /* Firefox: thumb then track. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--control-accent) 45%, transparent) transparent;
}

.wf-dropdown__menu::-webkit-scrollbar,
.pf-v5-c-menu::-webkit-scrollbar,
.wf-legend::-webkit-scrollbar,
.coding-code-pre::-webkit-scrollbar,
.coding-sidebar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.wf-dropdown__menu::-webkit-scrollbar-track,
.pf-v5-c-menu::-webkit-scrollbar-track,
.wf-legend::-webkit-scrollbar-track,
.coding-code-pre::-webkit-scrollbar-track,
.coding-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.wf-dropdown__menu::-webkit-scrollbar-thumb,
.pf-v5-c-menu::-webkit-scrollbar-thumb,
.wf-legend::-webkit-scrollbar-thumb,
.coding-code-pre::-webkit-scrollbar-thumb,
.coding-sidebar::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: color-mix(in srgb, var(--control-accent) 38%, transparent);
  /* Inset via a transparent border, so the bar does not touch the panel edge. */
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background 0.15s ease;
}

/* Firmer once you are in the panel, solid once you are on the bar itself. */
.wf-dropdown__menu:hover::-webkit-scrollbar-thumb,
.pf-v5-c-menu:hover::-webkit-scrollbar-thumb,
.wf-legend:hover::-webkit-scrollbar-thumb,
.coding-code-pre:hover::-webkit-scrollbar-thumb,
.coding-sidebar:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--control-accent) 62%, transparent);
  background-clip: content-box;
}

.wf-dropdown__menu::-webkit-scrollbar-thumb:hover,
.pf-v5-c-menu::-webkit-scrollbar-thumb:hover,
.wf-legend::-webkit-scrollbar-thumb:hover,
.coding-code-pre::-webkit-scrollbar-thumb:hover,
.coding-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--control-accent);
  background-clip: content-box;
}

/* The corner where two bars meet defaults to a grey square. */
.coding-code-pre::-webkit-scrollbar-corner { background: transparent; }

/* ==========================================================================
   SCROLL HINTS

   A scrollbar answers "where am I in this document". In a panel this size the
   only question is "is there more?", so the answer is a short column of dots
   in the corner the panel is hiding content behind.
   ========================================================================== */

/* The drawer has no bar of its own; the dots replace it entirely. */
.panel-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.panel-body::-webkit-scrollbar { width: 0; height: 0; }

/*
 * Drawn on the panel rather than the scrolling body: a pseudo-element on a
 * scroller is positioned against the scrolled content and slides away with it.
 */
.floating-right-panel::before,
.floating-right-panel::after {
  content: '';
  position: absolute;
  right: 9px;
  z-index: 6;

  width: 6px;
  height: 52px;
  /* Seven dots, drawn rather than typed, so they stay crisp at any zoom. */
  background-repeat: no-repeat;
  background-size: 6px 6px;
  color: var(--control-accent);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/*
 * The dots taper in the direction of travel — largest and firmest at the edge
 * you are scrolling toward, fading to nothing away from it. A uniform column
 * said "there is more"; this also says which way.
 */
.floating-right-panel::before {
  top: 52px;
  transform: translateY(4px);
  background-image:
    radial-gradient(circle 0.75px at center, color-mix(in srgb, currentColor 24%, transparent) 99%, transparent 100%),
    radial-gradient(circle 0.95px at center, color-mix(in srgb, currentColor 35%, transparent) 99%, transparent 100%),
    radial-gradient(circle 1.2px at center, color-mix(in srgb, currentColor 47%, transparent) 99%, transparent 100%),
    radial-gradient(circle 1.45px at center, color-mix(in srgb, currentColor 60%, transparent) 99%, transparent 100%),
    radial-gradient(circle 1.7px at center, color-mix(in srgb, currentColor 74%, transparent) 99%, transparent 100%),
    radial-gradient(circle 2.0px at center, color-mix(in srgb, currentColor 88%, transparent) 99%, transparent 100%),
    radial-gradient(circle 2.3px at center, currentColor 99%, transparent 100%);
  background-position: 0 0px, 0 8px, 0 16px, 0 24px, 0 32px, 0 40px, 0 48px;
}

.floating-right-panel::after {
  bottom: 66px;
  transform: translateY(-4px);
  background-image:
    radial-gradient(circle 2.3px at center, currentColor 99%, transparent 100%),
    radial-gradient(circle 2.0px at center, color-mix(in srgb, currentColor 88%, transparent) 99%, transparent 100%),
    radial-gradient(circle 1.7px at center, color-mix(in srgb, currentColor 74%, transparent) 99%, transparent 100%),
    radial-gradient(circle 1.45px at center, color-mix(in srgb, currentColor 60%, transparent) 99%, transparent 100%),
    radial-gradient(circle 1.2px at center, color-mix(in srgb, currentColor 47%, transparent) 99%, transparent 100%),
    radial-gradient(circle 0.95px at center, color-mix(in srgb, currentColor 35%, transparent) 99%, transparent 100%),
    radial-gradient(circle 0.75px at center, color-mix(in srgb, currentColor 24%, transparent) 99%, transparent 100%);
  background-position: 0 0px, 0 8px, 0 16px, 0 24px, 0 32px, 0 40px, 0 48px;
}

.floating-right-panel.can-scroll-up::before,
.floating-right-panel.can-scroll-down::after {
  opacity: 0.7;
  transform: translateY(0);
}

/* Reading the panel is when you want to know there is more of it. */
.floating-right-panel:hover.can-scroll-up::before,
.floating-right-panel:hover.can-scroll-down::after {
  opacity: 1;
}

/*
 * Theme toggle, now first in the toolbar. It joins the existing icon-only
 * family rather than getting a rule of its own.
 *
 * The !important is not decoration: `.pf-v5-c-button` declares
 * `padding: 0 14px !important` at a lower specificity, and an important
 * declaration beats a more specific one that is not.
 */
.topology-view-toolbar .pf-v5-c-button.is-icon-only {
  padding: 0 !important;
  gap: 0 !important;
}

/*
 * Larger than the icons beside a label. Those sit next to their own words and
 * only need to be recognised; this one carries the whole button, so at 16px it
 * read as an afterthought in a 38px box.
 */
.topology-view-toolbar .pf-v5-c-button.is-icon-only svg,
.topology-view-toolbar .pf-v5-c-button.is-icon-only i {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.9px !important;
  flex: 0 0 auto;
}

/*
 * The Verifier's derived sub-role, spelled out beneath the two fields that
 * produce it. The badge in the header says WHICH; this says what that means.
 */
.wf-derived-note {
  margin: 2px 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-verifier) 24%, transparent);
  background: color-mix(in srgb, var(--color-verifier) 7%, transparent);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-sub);
}

.wf-derived-note strong {
  display: inline-block;
  margin-right: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-verifier);
}

/* A hint inside a label must not inherit the label's weight or spacing. */
.form-label .wf-hint { margin-left: 5px; font-weight: 400; letter-spacing: 0; }

/*
 * Drawer footer.
 *
 * A sibling of the scrolling body, not the last thing inside it, so it is the
 * bottom of the WINDOW rather than the bottom of the content. Sticky positioning
 * only pins once you have scrolled that far; this is always there.
 *
 * The panel is a flex column: header, body (which takes the slack and scrolls),
 * footer.
 */
.panel-footer {
  /*
   * One height, always. The footer is where the delete control lives, and a
   * strip that grows and shrinks with the panel above it moves the button
   * under the pointer between one node and the next — the same click lands on
   * a different thing depending on how much configuration the last node had.
   */
  flex: 0 0 auto;

  /*
   * A strip, sized to the control it holds: the 36px button plus 8px of air
   * either side, and the border. It was 60, which left 27px of nothing around
   * a 34px button — most visible on a large screen, where the card is tall and
   * the dead band at the bottom of it is the first thing the eye lands on.
   */
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  padding: 0 16px;

  border-top: 1px solid var(--border-bright);
  background: var(--bg-panel);
}

.panel-footer[hidden] { display: none; }

/* Spaced by the footer's own padding. */
/* Spaced by the footer, which owns the height. */
.panel-footer .btn-delete-node {
  margin-top: 0 !important;
  flex: 1 1 auto;
}

/*
 * The footer sits below the body, and the panel is as tall as its contents.
 *
 * The body deliberately keeps its own max-height rather than taking
 * `flex: 1 1 auto`. The panel's height is auto, so a child that flexes against
 * it is circular — the browser resolves that to zero, collapsing the body and
 * the panel with it, which put the whole drawer off-screen.
 *
 * `display` is also NOT restated here: the base rule is `display: none`, and
 * repeating it in a later rule shows the panel before anything opens it.
 */
.floating-right-panel .panel-footer { flex: 0 0 auto; }

/* The bottom hint clears the footer; see its `bottom` above. */

/* The edge's route, standing in for the artwork a node type gets. */
.wf-edge-route {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-sub);
}

.wf-edge-route__end {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wf-edge-route__end:last-child { text-align: right; }

/* The connection itself, in the edge's own colour. */
.wf-edge-route__arrow {
  position: relative;
  flex: 0 0 34px;
  height: 1.5px;
  background: var(--node-color);
}

.wf-edge-route__arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: var(--node-color);
}

/*
 * Sun and moon.
 *
 * Outlined in what each stands for — the moon in the app's accent blue, the sun
 * in amber — so the button reads at a glance as "the mode you are switching
 * to", not just "a glyph". A notch smaller than the toolbar's own icons: at
 * full size it dominated a row where everything else is a label.
 */
.topology-view-toolbar #btnThemeToggle svg,
.topology-view-toolbar #btnThemeToggle i {
  width: 15px !important;
  height: 15px !important;
  /* Slightly heavier stroke, so a smaller glyph does not read as fainter. */
  stroke-width: 2.1px !important;
}

/* Light theme shows the moon: the dark mode you would switch to. */
body.light-theme .topology-view-toolbar #btnThemeToggle {
  color: var(--control-accent) !important;
  border-color: color-mix(in srgb, var(--control-accent) 40%, transparent) !important;
}

body.light-theme .topology-view-toolbar #btnThemeToggle:hover {
  background: color-mix(in srgb, var(--control-accent) 10%, transparent) !important;
}

/* Dark theme shows the sun. */
body:not(.light-theme) .topology-view-toolbar #btnThemeToggle {
  color: #f59e0b !important;
  border-color: color-mix(in srgb, #f59e0b 45%, transparent) !important;
}

body:not(.light-theme) .topology-view-toolbar #btnThemeToggle:hover {
  background: color-mix(in srgb, #f59e0b 12%, transparent) !important;
}

.topology-view-toolbar #btnThemeToggle svg { stroke: currentColor !important; }

/* ==========================================================================
   HEADER: THE DOCUMENT BESIDE THE PRODUCT
   ========================================================================== */

.header-left { display: flex; align-items: center; }

/* Enough air that the two read as separate things, not one long title. */
.header-left .brand-divider {
  margin: 0 16px;
  height: 26px;
  background: var(--border-bright);
  flex: 0 0 auto;
}

.header-left .workflow-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.workflow-doc-icon {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.8px !important;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.header-left .workflow-name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   FEEDBACK

   Bottom-right, away from the authoring controls: it is about the product,
   not about the graph being built.
   ========================================================================== */

.wf-feedback-fab {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 46;

  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 20px;

  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 3px 8px rgba(15, 23, 42, 0.08);
  color: var(--text-sub);

  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wf-feedback-fab svg,
.wf-feedback-fab i {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.9px !important;
  flex: 0 0 auto;
}

.wf-feedback-fab:hover {
  border-color: var(--control-accent);
  color: var(--control-accent);
  transform: translateY(-1px);
}

/* Open, it reads as on — the same on/off language as the rail toggles. */
.wf-feedback-fab.is-toggled-on {
  background: color-mix(in srgb, var(--control-accent) 12%, transparent);
  border-color: var(--control-accent);
  color: var(--control-accent);
}

/* On a phone the label is the first thing to go, then the button itself. */
@media (max-width: 900px) {
  .wf-feedback-fab span { display: none; }
  .wf-feedback-fab { padding: 0; width: 34px; justify-content: center; }
}

@media (max-width: 767px) {
  .wf-feedback-fab { display: none; }
  .header-left .brand-divider,
  .header-left .workflow-title-group { display: none; }
}

/* Submission status: sending, sent, or what went wrong. */
.wf-form-status {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  border: 1px solid var(--border-bright);
  background: var(--bg-input);
  color: var(--text-sub);
}

.wf-form-status[hidden] { display: none; }

.wf-form-status[data-tone='ok'] {
  border-color: color-mix(in srgb, var(--color-test) 40%, transparent);
  background: color-mix(in srgb, var(--color-test) 9%, transparent);
  color: var(--color-test);
}

.wf-form-status[data-tone='warn'] {
  border-color: color-mix(in srgb, var(--edge-rework) 40%, transparent);
  background: color-mix(in srgb, var(--edge-rework) 9%, transparent);
  color: var(--edge-rework);
}

.wf-form-status[data-tone='error'] {
  border-color: color-mix(in srgb, var(--edge-fail) 40%, transparent);
  background: color-mix(in srgb, var(--edge-fail) 9%, transparent);
  color: var(--edge-fail);
}

.btn-primary-wide:disabled { opacity: 0.6; cursor: progress; }

/* A checkbox whose consequence needs spelling out. */
.wf-inline-check { align-items: flex-start; }
.wf-inline-check .wf-check { margin-top: 1px; }

.wf-inline-check__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.35;
}

.wf-inline-check__text em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-muted);
}

/*
 * The zoom column's buttons can be toggles too — the topology legend is one.
 * It shares the rail's on/off language: filled when on, plain when off.
 */
.pf-v5-c-topology-control-bar__button.is-toggled-on {
  background: var(--control-accent) !important;
  border-color: var(--control-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--control-accent) 40%, transparent) !important;
}

/*
 * Nothing in the drawer shrinks.
 *
 * `.panel-body` is a flex column, and a flex child defaults to `flex-shrink: 1`
 * — so as soon as the content is taller than the panel, the browser squeezes
 * every fixed-height control to make it fit. A 34px button rendered at 16px,
 * and it changed as content came and went, which is why it looked like the act
 * of sending shrank the button rather than the layout always being wrong.
 *
 * The panel scrolls; that is what it is for. Applied to all children rather
 * than to each control as it is noticed, because the delete button had exactly
 * this bug and fixing it there did not fix it here.
 */
#panelBody > * { flex-shrink: 0; }

/* ==========================================================================
   COMMUNITY

   A public library. Browsing needs no account; the account lives at the top so
   its absence is visible before anyone reaches the publish button.
   ========================================================================== */

.wf-community-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-bright);
  background: var(--bg-input);
  font-size: 11.5px;
  color: var(--text-sub);
}

.wf-community-account__who strong { color: var(--text-main); }

.wf-linkish {
  border: 0;
  background: none;
  padding: 0;
  color: var(--control-accent);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.wf-linkish:hover { text-decoration: underline; }

.wf-community-list { display: flex; flex-direction: column; gap: 8px; }

.wf-community-card {
  padding: 10px 11px;
  border-radius: 9px;
  border: 1px solid var(--border-bright);
  background: var(--bg-card);
}

.wf-community-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.wf-community-card__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
}

.wf-community-card__meta { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }

.wf-community-card__body {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-sub);
}

.wf-community-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--text-muted);
}

.wf-community-card__stats .is-mine { color: var(--control-accent); font-weight: 700; }

.wf-community-card__open {
  width: 100%;
  margin-top: 9px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border-bright);
  background: transparent;
  color: var(--text-sub);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wf-community-card__open:hover {
  border-color: var(--control-accent);
  color: var(--control-accent);
}

.wf-empty {
  margin: 0;
  padding: 14px 10px;
  border-radius: 8px;
  border: 1px dashed var(--border-bright);
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
}

/* --- Sign-in ------------------------------------------------------------- */

.wf-signin-why {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-sub);
}

.wf-or {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 11px 0;
  font-size: 10.5px;
  color: var(--text-muted);
}

.wf-or::before,
.wf-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-bright);
}

.btn-secondary-wide {
  width: 100%;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--border-bright);
  background: transparent;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-secondary-wide:hover { border-color: var(--control-accent); color: var(--control-accent); }
.btn-secondary-wide:disabled { opacity: 0.6; cursor: progress; }

/* ==========================================================================
   LOAD WORKFLOW MENU

   The same PatternFly menu as the drawer's dropdowns, rather than a second
   design that happened to sit under a different button.
   ========================================================================== */

/*
 * `.pf-v5-c-menu` declares `position: fixed !important` and
 * `z-index: 999999 !important` for the canvas context menu. Without matching
 * that, this menu becomes a fixed, top-layer panel anchored to `top: 100%` of
 * the VIEWPORT — off the bottom of the window, and covering the drawer on its
 * way there.
 */
.workflow-library-menu {
  position: absolute !important;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 274px;
  max-width: 320px;
  padding: 6px 0;
  z-index: 1000 !important;
}

/* Beats `.pf-v5-c-menu { display: flex }`, which would otherwise show it. */
.workflow-library-menu[hidden] { display: none !important; }

.workflow-library-menu .pf-v5-c-menu__item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  height: auto !important;
  white-space: normal !important;
}

.workflow-library-menu .pf-v5-c-menu__item:hover {
  background: color-mix(in srgb, var(--control-accent) 9%, transparent);
}

/* Each entry carries its own colour, set inline from a node token. */
.workflow-library-menu .pf-v5-c-menu__item-icon {
  display: flex;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--item-color, var(--text-muted));
}

.workflow-library-menu .pf-v5-c-menu__item-icon svg,
.workflow-library-menu .pf-v5-c-menu__item-icon i {
  width: 15px !important;
  height: 15px !important;
  color: inherit !important;
  opacity: 1 !important;
}

.workflow-library-menu .pf-v5-c-menu__item-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.workflow-library-menu .pf-v5-c-menu__item-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}

.workflow-library-menu .pf-v5-c-menu__item-description {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

.workflow-library-menu .pf-v5-c-menu__group-title {
  margin: 0;
  padding: 7px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.workflow-library-menu .pf-v5-c-divider {
  height: 1px;
  margin: 5px 0;
  border: 0;
  background: var(--border-bright);
}

.workflow-library-menu .pf-v5-c-divider[hidden],
.workflow-library-menu .pf-v5-c-menu__group[hidden] { display: none; }

.workflow-library-menu .pf-v5-c-menu__list { list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   CURSORS

   `.canvas-area` carries `cursor: grab`, which is right for the pannable
   surface and wrong for everything floating on top of it — the rail, the zoom
   column, the node bar, the drawer, the pill, the legend. All of them live
   inside the canvas, so all of them inherited the palm, and a button that
   looks draggable reads as one you cannot press.
   ========================================================================== */

.canvas-area .floating-left-nav,
.canvas-area .topology-canvas-control-bar,
.canvas-area .floating-bottom-bar,
.canvas-area .floating-right-panel,
.canvas-area .orchestrator-control-pill,
.canvas-area .wf-legend,
.canvas-area .core-definition-banner,
.canvas-area .coding-instructions-view {
  cursor: default;
}

/* Anything pressable says so. The FAB is a button, not a container, so it is
   deliberately absent from the list above — a container rule would outrank
   `.canvas-area button` and win. */
.canvas-area button,
.canvas-area a,
.canvas-area summary,
.canvas-area [role='button'],
.canvas-area .pf-v5-c-menu__item,
.canvas-area .wf-check-item,
.canvas-area .wf-kind-option,
.canvas-area .orchestrator-control-pill,
.canvas-area .wf-community-card__open {
  cursor: pointer;
}

/* Anything you type into says that instead. */
.canvas-area input[type='text'],
.canvas-area input[type='email'],
.canvas-area input:not([type]),
.canvas-area textarea {
  cursor: text;
}

.canvas-area input[type='checkbox'] { cursor: pointer; }

/* The two that are genuinely drag targets keep their own. */
.canvas-area .pf-v5-c-topology-connector-anchor { cursor: crosshair; }
.canvas-area .wf-edge-endpoint { cursor: grab; }
.canvas-area .wf-hint { cursor: help; }

/* Disabled means "not now", not "press me". */
.canvas-area button:disabled { cursor: not-allowed; }

/* ==========================================================================
   SIGN IN WITH GOOGLE

   Google's guidelines specify the button: their mark on a white or blue
   surface, the mark never recoloured or cropped, and the wording from their
   approved list. This is the light variant.
   ========================================================================== */

.btn-google {
  width: 100%;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #dadce0;
  background: #ffffff;

  /* Roboto is what the guidelines call for; the stack falls back gracefully. */
  font-family: 'Roboto', var(--font-family);
  font-size: 14px;
  font-weight: 500;
  color: #3c4043;

  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn-google:hover {
  background: #f8f9fa;
  border-color: #d2d5d9;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.btn-google:active { background: #f1f3f4; }

.btn-google:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Fixed size and never recoloured — a hard requirement of the guidelines. */
.btn-google__mark {
  display: flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.btn-google__mark svg { width: 18px; height: 18px; }

/*
 * The button keeps Google's own colours in dark theme rather than inverting.
 * Their mark on a dark surface is a different approved variant; recolouring
 * this one is not permitted, and a white button is legible either way.
 */
body:not(.light-theme) .btn-google { border-color: #5f6368; }

/* The little AI check beside the model list. */
.wf-model-check {
  margin-left: auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--control-accent);
  cursor: pointer;
  transition: background 0.15s ease;
}

.wf-model-check:hover { background: color-mix(in srgb, var(--control-accent) 12%, transparent); }
.wf-model-check svg, .wf-model-check i { width: 13px !important; height: 13px !important; }

/* The label becomes a row, so the button can sit at its end. */
#panelBody .form-label { display: flex; align-items: center; gap: 5px; }

.wf-form-status[data-tone='busy'] { color: var(--text-muted); }

/*
 * The bend handle.
 *
 * Distinct from the endpoint handles: those repoint an edge, this only
 * reshapes it. Two gestures that look identical but do different things is how
 * someone reconnects an edge while trying to tidy it.
 */
.wf-edge-bend {
  fill: var(--bg-panel);
  stroke: var(--control-accent);
  stroke-width: 2;
  stroke-dasharray: 3 2;
  cursor: move;
  pointer-events: auto;
}

.wf-edge-bend:hover {
  fill: var(--control-accent);
  stroke-dasharray: none;
  r: 6.5;
}

.canvas-area .wf-edge-bend { cursor: move; }

/* A suggestion should not look like a failure. */
.drawer-hint--warn {
  border-color: color-mix(in srgb, var(--edge-fail) 40%, transparent);
  background: color-mix(in srgb, var(--edge-fail) 8%, transparent);
  color: var(--edge-fail);
}

.drawer-issues li button strong {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.drawer-issues .is-error button strong {
  background: color-mix(in srgb, var(--edge-fail) 14%, transparent);
  color: var(--edge-fail);
}

.drawer-issues .is-warning button strong {
  background: color-mix(in srgb, var(--edge-rework) 14%, transparent);
  color: var(--edge-rework);
}

.wf-community-card__actions { display: flex; gap: 6px; margin-top: 9px; }
.wf-community-card__actions .wf-community-card__open { margin-top: 0; flex: 1; }

/* Quiet until wanted: withdrawing is permanent. */
.wf-community-card__withdraw {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border-bright);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.wf-community-card__withdraw:hover {
  border-color: var(--edge-fail);
  color: var(--edge-fail);
  background: color-mix(in srgb, var(--edge-fail) 8%, transparent);
}

.wf-community-card__withdraw svg,
.wf-community-card__withdraw i { width: 13px !important; height: 13px !important; }

/* Two lists, one at a time. */
.wf-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 10px;
  padding: 3px;
  border-radius: 9px;
  background: var(--bg-input);
  border: 1px solid var(--border-bright);
}

.wf-tab {
  flex: 1;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wf-tab:hover { color: var(--text-main); }

.wf-tab.is-active {
  background: var(--bg-panel);
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.wf-tab em {
  font-style: normal;
  opacity: 0.65;
  font-size: 10.5px;
}

/*
 * Publishing is the one irreversible action in this panel, so it is the one
 * black button in the app — distinct from the blue used everywhere something
 * can simply be undone.
 */
.btn-publish {
  width: 100%;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--text-main);
  background: var(--text-main);
  color: var(--bg-app);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.btn-publish:hover { filter: brightness(1.25); }
.btn-publish:disabled { opacity: 0.55; cursor: progress; }
.btn-publish svg, .btn-publish i { width: 14px; height: 14px; }

/*
 * The anchor a repoint will land on.
 *
 * Highlighting the node alone was not enough: a node has four anchors, and the
 * drop has to say which one, or letting go is a guess.
 */
.pf-v5-c-topology-connector-anchor.is-drop-anchor {
  opacity: 1 !important;
  transform: scale(1.8) !important;
  color: var(--control-accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--control-accent) 60%, transparent));
}

/* Every anchor on a candidate node shows itself, so there is something to aim
   at rather than a target that appears only once the pointer is on it. */
body.is-linking .pf-v5-c-topology-node.is-drop-target .pf-v5-c-topology-connector-anchor {
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   MULTI-SELECT

   Ctrl or Cmd adds to a selection; the same modifier turns an empty-canvas
   drag into a marquee rather than a pan, so the existing habit of dragging to
   pan is left alone. Not Shift — on a node that already means "draw an edge".
   -------------------------------------------------------------------------- */

.wf-marquee {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  border: 1px solid var(--control-accent);
  background: color-mix(in srgb, var(--control-accent) 12%, transparent);
  border-radius: 2px;
}

.wf-selection-summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 6px;
}


/* --------------------------------------------------------------------------
   CANVAS HINT

   Bottom-left, the one free corner: the legend and the Feedback button both
   live bottom-right, and the rail runs down the left edge above it.
   -------------------------------------------------------------------------- */

.wf-canvas-hint {
  position: absolute;

  /* Directly under GRAPH = NODES + EDGES: the eye is already there on arrival,
     and the two read as one short note about how the canvas works. */
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 30;
  margin: 0;

  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  opacity: 0.55;

  /* It answers a question; it is not a control. Clicks belong to the canvas
     underneath, including a drag that starts on top of it. */
  pointer-events: none;
  user-select: none;
}


/* --------------------------------------------------------------------------
   VERSION FOOTER

   Bottom-left corner, quieter than the multi-select hint above it: it answers
   "which build is this?" and should never compete with the graph.
   -------------------------------------------------------------------------- */

.wf-canvas-footer {
  position: absolute;
  left: 80px;
  bottom: 18px;
  z-index: 30;

  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  opacity: 0.45;

  pointer-events: none;
  user-select: none;
}

/*
 * Neither the hint nor the version survives a phone.
 *
 * The quick bar takes the bottom of a narrow screen, and both of these sit in
 * that strip — a quality test catches them overlapping it. They are also the
 * two least load-bearing things on the canvas: the hint describes a modifier
 * key there is no keyboard for, and the version answers a question nobody asks
 * on a phone.
 */
@media (max-width: 767px) {
  .wf-canvas-hint,
  .wf-canvas-footer {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   SAVE MENU + SIGN-IN PROMPT
   -------------------------------------------------------------------------- */

/* Sized to its own words rather than to the widest menu in the toolbar. */
.save-menu {
  min-width: 0;
  width: max-content;
}

.save-menu .pf-v5-c-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-right: 18px;
  white-space: nowrap;
}

.save-menu .pf-v5-c-menu__item small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

/*
 * The caret has to earn its place inside the button's EXISTING width. The
 * action column is derived from a fixed button width, and the header buttons
 * above are sized from that same figure — so a wider Save moved both axes and
 * broke the column the header and toolbar share.
 */
.wf-caret {
  width: 12px;
  height: 12px;
  margin-left: -1px;
  opacity: 0.7;
  flex: 0 0 auto;
}

#btnSaveWorkflow {
  width: var(--action-btn-w);
  padding: 0 10px;
  gap: 5px;
}

/*
 * The sign-in prompt asks a question and offers the way to answer it, which is
 * why it is a dialog rather than a toast — a toast can say "you are not signed
 * in" but cannot do anything about it.
 */
.wf-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(13, 17, 23, 0.45);
  backdrop-filter: blur(2px);
}

.wf-modal[hidden] { display: none; }

.wf-modal__card {
  width: min(420px, 100%);
  padding: 22px 24px 18px;
  border-radius: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  box-shadow: var(--shadow-panel);
}

.wf-modal__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.wf-modal__body {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-sub);
}

.wf-modal__note {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.wf-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   MODEL PICKER

   Family, tier, version. Tier and version share a row because they are one
   decision read left to right — "Opus 5" — and the id they compose is echoed
   beneath so the user sees what the workflow will actually store.
   -------------------------------------------------------------------------- */

.wf-model-parts {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 6px;
  margin-top: 6px;
}

.wf-model-version {
  text-align: center;
  font-family: var(--font-mono);
}

.wf-model-id {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* A setting that splits into several labelled rows — one per Verifier sub-role.
   The label column is fixed so the three dropdowns line up as one control. */
.form-subrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.form-subrow__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 74px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.form-subrow .wf-dropdown {
  flex: 1 1 auto;
  min-width: 0;
}