.vl-runtime-dag {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  background: #0a0d12;
  display: flex;
  flex-direction: column;
}

/* Composition navigation (host side, above the canonical editor frame):
   breadcrumb of the expanded Group / Workflow / Iteration path, the selected
   container's expand control, read-only round history, revision history and a
   legend of the edge semantics present. It never edits or executes anything. */
.vl-runtime-dag__nav {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 10px;
  border-bottom: 1px solid #2a3140;
  background: #12161c;
  color: #9ca8b8;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.vl-runtime-dag__nav[hidden] { display: none; }
.vl-runtime-dag__crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vl-runtime-dag__crumb {
  font: inherit;
  color: #e6edf3;
  background: #1a1f27;
  border: 1px solid #2a3140;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.vl-runtime-dag__crumb[aria-current="location"] { border-color: #58a6ff; color: #58a6ff; cursor: default; }
.vl-runtime-dag__sep { color: #556273; }
.vl-runtime-dag__btn {
  font: inherit;
  color: #e6edf3;
  background: #1a1f27;
  border: 1px solid #2a3140;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.vl-runtime-dag__btn:disabled { opacity: .45; cursor: default; }
.vl-runtime-dag__group { display: inline-flex; align-items: center; gap: 4px; }
.vl-runtime-dag__viewing { color: #e6edf3; }
.vl-runtime-dag__history { color: #d29922; }
.vl-runtime-dag__legend { display: inline-flex; gap: 10px; margin-left: auto; }
.vl-runtime-dag__legend i {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid #9ca8b8;
  vertical-align: middle;
  margin-right: 4px;
}
.vl-runtime-dag__legend i[data-semantic="message"],
.vl-runtime-dag__legend i[data-semantic="result"],
.vl-runtime-dag__legend i[data-semantic="delegation"] { border-top-style: dashed; border-top-color: #39c5cf; }
.vl-runtime-dag__legend i[data-semantic="feedback"] { border-top-style: dotted; border-top-color: #db61a2; }
.vl-runtime-dag__legend i[data-semantic="data"] { border-top-style: dotted; border-top-color: #3fb950; }
.vl-runtime-dag__legend i[data-semantic="contains"],
.vl-runtime-dag__legend i[data-semantic="executes"] { border-top-style: dotted; }
.vl-runtime-dag__body { flex: 1; min-height: 0; position: relative; }

.vl-runtime-dag__frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  background: #0a0d12;
}
.vl-runtime-dag__body > .vl-runtime-dag__frame { position: absolute; inset: 0; min-height: 0; }