.process-builder {
  display: grid;
  gap: .85rem;
  margin-top: .75rem;
}
.process-builder__intro {
  display: grid;
  gap: .25rem;
}
.process-builder__intro--hidden {
  display: none;
}
.process-builder__intro h3,
.process-builder__intro p {
  margin: 0;
}
.process-builder__intro p {
  color: var(--muted);
}
.process-builder__objective {
  max-width: 78ch;
  color: var(--fg) !important;
  font-weight: 600;
}
.process-builder__objective:empty {
  display: none;
}
.process-builder__shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  align-items: stretch;
}
.process-builder__library,
.process-builder__canvas {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
}
.process-builder__library {
  display: grid;
  gap: .45rem;
  align-content: start;
  padding: .6rem;
}
.process-builder__library h4 {
  margin: 0;
  font-size: 14pt;
}
.process-builder__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
}
.process-builder__palette-card,
.process-builder__node {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg);
}
.process-builder__palette-card[data-card-id="customer_request"],
.process-builder__node[data-card-id="customer_request"] {
  border-color: color-mix(in oklab, var(--donkerblauw) 52%, var(--border));
  background: color-mix(in oklab, var(--donkerblauw) 10%, var(--card));
}
.process-builder__palette-card[data-card-id="customer_data"],
.process-builder__node[data-card-id="customer_data"] {
  border-color: color-mix(in oklab, var(--groen) 50%, var(--border));
  background: color-mix(in oklab, var(--groen) 11%, var(--card));
}
.process-builder__palette-card[data-card-id="maintenance_contract"],
.process-builder__node[data-card-id="maintenance_contract"] {
  border-color: color-mix(in oklab, var(--geel) 54%, var(--border));
  background: color-mix(in oklab, var(--geel) 12%, var(--card));
}
.process-builder__palette-card[data-card-id="planning"],
.process-builder__node[data-card-id="planning"] {
  border-color: color-mix(in oklab, var(--lichtblauw) 48%, var(--border));
  background: color-mix(in oklab, var(--lichtblauw) 10%, var(--card));
}
.process-builder__palette-card[data-card-id="ai_agent"],
.process-builder__node[data-card-id="ai_agent"] {
  border-color: color-mix(in oklab, var(--paars) 52%, var(--border));
  background: color-mix(in oklab, var(--paars) 11%, var(--card));
}
.process-builder__palette-card[data-card-id="draft_reply"],
.process-builder__node[data-card-id="draft_reply"] {
  border-color: color-mix(in oklab, var(--oranje) 50%, var(--border));
  background: color-mix(in oklab, var(--oranje) 10%, var(--card));
}
.process-builder__palette-card[data-card-id="employee"],
.process-builder__node[data-card-id="employee"] {
  border-color: color-mix(in oklab, var(--rood) 42%, var(--border));
  background: color-mix(in oklab, var(--rood) 8%, var(--card));
}
.process-builder__palette-card[data-card-id="final_confirmation"],
.process-builder__node[data-card-id="final_confirmation"] {
  border-color: color-mix(in oklab, var(--grijs) 54%, var(--border));
  background: color-mix(in oklab, var(--grijs) 10%, var(--card));
}
.process-builder__palette-card[data-card-id="user"],
.process-builder__node[data-card-id="user"],
.process-builder__palette-card[data-card-id="prompt"],
.process-builder__node[data-card-id="prompt"] {
  border-color: color-mix(in oklab, var(--donkerblauw) 44%, var(--border));
  background: color-mix(in oklab, var(--donkerblauw) 9%, var(--card));
}
.process-builder__palette-card[data-card-id="llm"],
.process-builder__node[data-card-id="llm"],
.process-builder__palette-card[data-card-id="documents"],
.process-builder__node[data-card-id="documents"] {
  border-color: color-mix(in oklab, var(--paars) 42%, var(--border));
  background: color-mix(in oklab, var(--paars) 8%, var(--card));
}
.process-builder__palette-card[data-card-id="crm"],
.process-builder__node[data-card-id="crm"],
.process-builder__palette-card[data-card-id="api"],
.process-builder__node[data-card-id="api"] {
  border-color: color-mix(in oklab, var(--groen) 44%, var(--border));
  background: color-mix(in oklab, var(--groen) 10%, var(--card));
}
.process-builder__palette-card[data-card-id="logging"],
.process-builder__node[data-card-id="logging"],
.process-builder__palette-card[data-card-id="human_control"],
.process-builder__node[data-card-id="human_control"] {
  border-color: color-mix(in oklab, var(--geel) 46%, var(--border));
  background: color-mix(in oklab, var(--geel) 10%, var(--card));
}
.process-builder__palette-card[data-card-id="output"],
.process-builder__node[data-card-id="output"] {
  border-color: color-mix(in oklab, var(--lichtblauw) 52%, var(--border));
  background: color-mix(in oklab, var(--lichtblauw) 12%, var(--card));
}
[data-builder-id="chapter-5-business-process"] [data-card-type="input"] {
  border-color: color-mix(in oklab, var(--donkerblauw) 52%, var(--border));
  background: color-mix(in oklab, var(--donkerblauw) 10%, var(--card));
}
[data-builder-id="chapter-5-business-process"] [data-card-type="agent"] {
  border-color: color-mix(in oklab, var(--paars) 52%, var(--border));
  background: color-mix(in oklab, var(--paars) 10%, var(--card));
}
[data-builder-id="chapter-5-business-process"] [data-card-type="mens"] {
  border-color: color-mix(in oklab, var(--rood) 46%, var(--border));
  background: color-mix(in oklab, var(--rood) 9%, var(--card));
}
[data-builder-id="chapter-5-business-process"] [data-card-type="systeem"],
[data-builder-id="chapter-5-business-process"] [data-card-type="tool"] {
  border-color: color-mix(in oklab, var(--groen) 48%, var(--border));
  background: color-mix(in oklab, var(--groen) 10%, var(--card));
}
[data-builder-id="chapter-5-business-process"] [data-card-type="bron"] {
  border-color: color-mix(in oklab, var(--geel) 52%, var(--border));
  background: color-mix(in oklab, var(--geel) 11%, var(--card));
}
[data-builder-id="chapter-5-business-process"] [data-card-type="controle"] {
  border-color: color-mix(in oklab, var(--oranje) 50%, var(--border));
  background: color-mix(in oklab, var(--oranje) 10%, var(--card));
}
[data-builder-id="chapter-5-business-process"] [data-card-type="output"] {
  border-color: color-mix(in oklab, var(--lichtblauw) 52%, var(--border));
  background: color-mix(in oklab, var(--lichtblauw) 12%, var(--card));
}
.process-builder__palette-card {
  display: grid;
  gap: .32rem;
  padding: .45rem;
  cursor: grab;
}
.process-builder__palette-card[aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
}
.process-builder__palette-main,
.process-builder__node-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .38rem;
  align-items: start;
  min-width: 0;
}
.process-builder__icon {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-weight: 900;
}
.process-builder__palette-card strong,
.process-builder__node strong {
  display: block;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: normal;
}
.process-builder__title-wrap {
  min-width: 0;
}
.process-builder__type {
  display: inline-flex;
  width: fit-content;
  margin-top: .2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .12rem .45rem;
  color: var(--muted);
  font-size: 14pt;
  line-height: 1.2;
}
.process-builder__description {
  margin: 0;
  color: var(--muted);
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: normal;
}
.process-builder__palette-card button,
.process-builder__toolbar button {
  min-height: 36px;
}
.process-builder__workspace {
  min-width: 0;
}
.process-builder__canvas {
  position: relative;
  min-height: 680px;
  overflow: auto;
  resize: vertical;
  background:
    linear-gradient(color-mix(in oklab, var(--border) 36%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--border) 36%, transparent) 1px, transparent 1px),
    color-mix(in oklab, var(--surface-2) 72%, transparent);
  background-size: 32px 32px;
}
.process-builder__canvas:focus {
  outline: 2px solid var(--donkerblauw);
  outline-offset: 3px;
}
.process-builder__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}
.process-builder__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.process-builder__links path {
  fill: none;
  stroke: var(--donkerblauw);
  stroke-width: 3;
}
.process-builder__links path.process-builder__link--active {
  stroke: var(--geel);
  stroke-width: 4;
}
.process-builder__node {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: .35rem;
  width: min(270px, calc(100% - 24px));
  min-height: 124px;
  padding: .45rem;
  box-shadow: 0 8px 18px color-mix(in oklab, #000 18%, transparent);
  touch-action: none;
}
.process-builder__node:focus,
.process-builder__node--selected {
  outline: 2px solid var(--geel);
  outline-offset: 2px;
}
.process-builder__node--active {
  border-color: var(--groen);
  background: color-mix(in oklab, var(--groen) 12%, var(--card));
}
.process-builder__node--ok {
  border-color: var(--groen) !important;
  background: color-mix(in oklab, var(--groen) 18%, var(--card)) !important;
}
.process-builder__node--error {
  border-color: var(--rood) !important;
  background: color-mix(in oklab, var(--rood) 14%, var(--card)) !important;
}
.process-builder__node--active {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--donkerblauw) 42%, transparent), 0 8px 18px color-mix(in oklab, #000 18%, transparent);
}
.process-builder__node[data-card-type="agent"] {
  border-color: color-mix(in oklab, var(--paars) 58%, var(--border));
}
.process-builder__node[data-card-type="human"] {
  border-color: color-mix(in oklab, var(--rood) 46%, var(--border));
}
.process-builder__node[data-card-type="final"] {
  border-color: color-mix(in oklab, var(--grijs) 58%, var(--border));
}
.process-builder__node-controls {
  display: flex;
  gap: .35rem;
  justify-content: flex-end;
  align-items: center;
}
.process-builder__node-controls button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
  line-height: 1;
  font-weight: 800;
}
.process-builder__node-controls button span {
  display: block;
  transform: translateY(-1px);
}
.process-builder__port {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid var(--fg);
  border-radius: 999px;
  background: var(--surface);
  transform: translateY(-50%);
}
.process-builder__port--in {
  left: -8px;
}
.process-builder__port--out {
  right: -8px;
}
.process-builder__node--connecting .process-builder__port--out {
  background: var(--geel);
}
.process-builder__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.process-builder__toolbar button {
  flex: 1 1 180px;
}
.process-builder__reset {
  border-color: var(--rood);
}
.process-builder__feedback {
  display: grid;
  gap: .4rem;
}
.process-builder__feedback:empty {
  display: none;
}
.process-builder__message {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .75rem;
  background: var(--surface);
}
.process-builder__message--success {
  border-color: var(--groen);
}
.process-builder__message--warning {
  border-color: var(--geel);
}
.process-builder__message--error {
  border-color: var(--rood);
}
.process-builder__log {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding-left: 1.4rem;
}
.process-builder__log:empty {
  display: none;
}
.process-builder__log li {
  padding: .35rem .5rem;
  border-radius: 8px;
  background: color-mix(in oklab, var(--surface) 78%, transparent);
}
.process-builder__log-step--ok {
  border: 1px solid var(--groen);
  background: color-mix(in oklab, var(--groen) 14%, var(--surface)) !important;
}
.process-builder__log-step--error {
  border: 1px solid var(--rood);
  background: color-mix(in oklab, var(--rood) 12%, var(--surface)) !important;
}
.process-builder__log-step--ok::marker {
  color: var(--groen);
}
.process-builder__log-step--error::marker {
  color: var(--rood);
}
@media (max-width: 900px) {
  .process-builder__shell {
    grid-template-columns: 1fr;
  }
  .process-builder__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .process-builder__canvas {
    min-height: 700px;
  }
}
@media (max-width: 620px) {
  .process-builder__cards {
    grid-template-columns: 1fr;
  }
  .process-builder__node {
    width: min(240px, calc(100% - 20px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .process-builder *,
  .process-builder *::before,
  .process-builder *::after {
    transition: none !important;
    animation: none !important;
  }
}