/* Orbit Workflow Builder — isolated three-pane composition workspace */
.builder-page {
  min-height: calc(100dvh - var(--topbar));
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.builder-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.builder-title-row { gap: 10px; align-items: center; }
.builder-name {
  width: min(520px, 58vw);
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  font: 600 24px/1.2 var(--font-body);
  letter-spacing: -.025em;
  padding: 2px 0;
}
.builder-name:hover { border-color: var(--border); }
.builder-name:focus { outline: 0; border-color: var(--accent); }
.builder-saved { color: var(--muted); font: 11px/1.2 var(--font-mono); white-space: nowrap; }
.builder-pagehead .lead { margin: 5px 0 0; max-width: 72ch; font-size: 13.5px; }
.builder-summary {
  display: flex;
  gap: 16px;
  color: var(--muted);
  font: 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.builder-summary strong { color: var(--fg); font-size: 13px; }

.builder-grid {
  flex: 1;
  min-height: 660px;
  display: grid;
  grid-template-columns: 248px minmax(500px, 1fr) 280px;
  gap: 12px;
  align-items: stretch;
}
.builder-grid > .panel { margin: 0; min-width: 0; overflow: hidden; }
.builder-library,
.builder-inspector { display: flex; flex-direction: column; }
.builder-inspector {
  align-self: start;
  position: sticky;
  top: 14px;
  max-height: calc(100dvh - 156px);
}
.builder-pane-head,
.builder-canvas-head {
  min-height: 64px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.builder-pane-head h2,
.builder-canvas-head h2 { margin: 3px 0 0; font-size: 15px; font-weight: 600; }
.key-hint { color: var(--muted); font: 10.5px/1 var(--font-mono); }

.builder-prompt { padding: 10px; border-bottom: 1px solid var(--border); }
.builder-prompt label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 550; }
.builder-prompt .textarea { min-height: 82px; max-height: 120px; margin-bottom: 7px; resize: vertical; font-size: 12px; line-height: 1.45; }
.builder-prompt .btn { min-height: 34px; }

.module-groups { padding: 8px; overflow: auto; }
.module-group + .module-group { margin-top: 11px; }
.module-group h3 {
  margin: 0 0 6px 4px;
  color: var(--muted);
  font: 10px/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.module-card {
  width: 100%;
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--fg);
  padding: 7px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  gap: 9px;
  align-items: center;
  text-align: left;
  cursor: grab;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.module-card:hover { background: var(--surface-2); border-color: var(--border); }
.module-card:active { cursor: grabbing; transform: scale(.985); }
.module-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.module-card strong { display: block; font-size: 12.5px; font-weight: 600; }
.module-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.module-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  place-items: center;
}
.module-icon svg { width: 14px; height: 14px; }
.module-icon.trigger { color: var(--accent); background: var(--accent-soft); }
.module-icon.watch { color: oklch(58% .14 228); background: oklch(58% .14 228 / .09); }
.module-icon.risk { color: var(--warn); background: color-mix(in oklch, var(--warn) 10%, transparent); }
.module-icon.execute { color: var(--yes); background: color-mix(in oklch, var(--yes) 10%, transparent); }
.module-add { color: var(--muted); font-size: 18px; text-align: center; }
.module-card:hover .module-add { color: var(--accent); }

.builder-canvas-panel { display: flex; flex-direction: column; }
.canvas-actions { display: flex; align-items: center; gap: 14px; }
.text-action,
.danger-action {
  min-height: 32px;
  border: 0;
  background: transparent;
  padding: 4px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
}
.text-action:hover { color: var(--accent); }
.danger-action { color: var(--no); }
.danger-action:hover { text-decoration: underline; }

.workflow-canvas {
  position: relative;
  flex: 1;
  min-height: 520px;
  padding: 24px 28px 30px;
  overflow: auto;
  background-color: color-mix(in oklch, var(--bg) 54%, var(--surface));
  background-image: radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--border) 74%, transparent) 1px, transparent 0);
  background-size: 18px 18px;
}
.workflow-list { width: min(100%, 660px); margin: 0 auto; }
.workflow-empty {
  width: min(100%, 420px);
  margin: 100px auto 0;
  padding: 42px 24px;
  border: 1px dashed color-mix(in oklch, var(--accent) 46%, var(--border));
  background: color-mix(in oklch, var(--surface) 90%, transparent);
  border-radius: 10px;
  text-align: center;
  color: var(--muted);
}
.workflow-empty strong { display: block; margin-top: 12px; color: var(--fg); font-size: 14px; }
.workflow-empty p { margin: 5px 0 0; font-size: 12px; }

.drop-zone {
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  transition: height .12s ease;
}
.drop-zone::before {
  content: '';
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}
.drop-zone.is-over { height: 38px; }
.drop-zone.is-over::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.drop-zone.is-over::after {
  content: 'Drop here';
  position: absolute;
  right: 0;
  top: 3px;
  color: var(--accent);
  font: 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.workflow-node {
  position: relative;
  display: grid;
  grid-template-columns: 26px 36px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 2px 8px color-mix(in oklch, var(--fg) 5%, transparent);
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.workflow-node:hover { border-color: color-mix(in oklch, var(--fg) 26%, var(--border)); }
.workflow-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.workflow-node.is-dragging { opacity: .42; transform: scale(.985); }
.workflow-node.has-error { border-color: color-mix(in oklch, var(--no) 60%, var(--border)); }
.node-drag {
  width: 26px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  font: 16px/1 var(--font-mono);
  letter-spacing: -2px;
  touch-action: none;
}
.node-drag:active { cursor: grabbing; }
.node-icon { width: 36px; height: 36px; border-radius: 7px; border: 1px solid var(--border); display: grid; place-items: center; }
.node-icon svg { width: 15px; height: 15px; }
.workflow-node[data-kind='trigger'] .node-icon { color: var(--accent); background: var(--accent-soft); }
.workflow-node[data-kind='watch'] .node-icon { color: oklch(58% .14 228); background: oklch(58% .14 228 / .09); }
.workflow-node[data-kind='risk'] .node-icon { color: var(--warn); background: color-mix(in oklch, var(--warn) 10%, transparent); }
.workflow-node[data-kind='execute'] .node-icon { color: var(--yes); background: color-mix(in oklch, var(--yes) 10%, transparent); }
.node-copy { min-width: 0; }
.node-copy strong { display: block; font-size: 13.5px; font-weight: 600; }
.node-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-meta { display: flex; align-items: center; gap: 8px; }
.node-step { color: var(--muted); font: 10.5px/1 var(--font-mono); }
.node-stage {
  color: var(--muted);
  font: 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.workflow-node[data-kind='trigger'] .node-stage { color: var(--accent); }
.workflow-node[data-kind='watch'] .node-stage { color: oklch(58% .14 228); }
.workflow-node[data-kind='risk'] .node-stage { color: var(--warn); }
.workflow-node[data-kind='execute'] .node-stage { color: var(--yes); }
.node-chevron { color: var(--muted); }
.workflow-node.has-error .node-step { color: var(--no); }

.drag-ghost {
  position: fixed;
  z-index: 9999;
  width: 230px;
  min-height: 50px;
  padding: 9px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 34px color-mix(in oklch, var(--fg) 18%, transparent);
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
  pointer-events: none;
  transform: translate(14px, 14px) rotate(.5deg);
  opacity: .94;
}

.builder-validation {
  min-height: 50px;
  border-top: 1px solid var(--border);
  padding: 9px 14px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.validation-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yes); }
.builder-validation.has-errors .validation-dot { background: var(--no); }
.builder-validation.has-errors [data-validation-copy] { color: var(--no); }

.inspector-empty { margin: auto 0; padding: 40px 24px; text-align: center; color: var(--muted); }
.inspector-empty strong { display: block; margin-top: 12px; color: var(--fg); font-size: 13.5px; }
.inspector-empty p { margin: 5px auto 0; max-width: 26ch; font-size: 12px; line-height: 1.5; }
.inspector-form { padding: 14px; overflow: auto; display: grid; gap: 14px; }
.inspector-form .field { margin: 0; }
.inspector-form label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 550; }
.inspector-form .input,
.inspector-form .select { width: 100%; min-height: 40px; border-radius: 6px; font-size: 13px; }
.inspector-help { margin: -7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.inspector-actions { padding: 12px 14px; border-top: 1px solid var(--border); }
.move-actions { gap: 7px; margin-bottom: 7px; }
.move-actions .btn { flex: 1; }

.test-drawer { margin: 12px 0 0; }
.test-trace { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.trace-step { min-height: 78px; padding: 14px; border-right: 1px solid var(--border); }
.trace-step:last-child { border-right: 0; }
.trace-step span { color: var(--yes); font: 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.trace-step strong { display: block; margin-top: 8px; font-size: 12.5px; }
.trace-step small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }

@media (max-width: 1380px) {
  .builder-grid { grid-template-columns: 224px minmax(420px, 1fr) 268px; }
  .workflow-canvas { padding-inline: 24px; }
}
@media (max-width: 1120px) {
  .builder-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .builder-inspector { grid-column: 1 / -1; min-height: 320px; position: static; max-height: none; align-self: stretch; }
  .inspector-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspector-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .move-actions { width: 280px; margin: 0; }
}
@media (max-width: 820px) {
  .builder-page { padding: 14px 12px 86px; }
  .builder-pagehead { align-items: flex-start; }
  .builder-summary { display: none; }
  .builder-grid { min-height: 0; grid-template-columns: 1fr; }
  .builder-library,
  .builder-canvas-panel,
  .builder-inspector { grid-column: auto; min-height: auto; }
  .module-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .module-group + .module-group { margin-top: 0; }
  .workflow-canvas { min-height: 520px; padding-inline: 14px; }
  .builder-inspector { min-height: 360px; }
}
@media (max-width: 560px) {
  .builder-pagehead { display: block; }
  .builder-name { width: 100%; font-size: 20px; }
  .builder-saved { display: none; }
  .module-groups { grid-template-columns: 1fr; }
  .module-card { min-height: 58px; }
  .workflow-node { grid-template-columns: 24px 34px minmax(0, 1fr); }
  .node-meta { grid-column: 2 / -1; justify-content: space-between; }
  .node-drag { min-height: 44px; }
  .inspector-form { grid-template-columns: 1fr; }
  .inspector-actions { display: block; }
  .move-actions { width: 100%; margin-bottom: 8px; }
  .topbar-right [data-validate-workflow] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .module-card,
  .workflow-node,
  .drop-zone { transition: none; }
}