/* Playbook flowchart SVG: node-type colors + edge styling. The renderer only
 * sets classes; all color lives here. Loaded only on the playbook show page. */
.playbook-flowchart-svg {
  width: 100%;
  height: 100%;
  cursor: grab;
}
.playbook-flowchart-svg:active { cursor: grabbing; }

/* Edges */
.flowchart-edge {
  fill: none;
  stroke: #a0aec0;
  stroke-width: 1.5;
}
.flowchart-arrow { fill: #a0aec0; }
.flowchart-edge-label-bg { fill: #ffffff; stroke: #e0e4eb; stroke-width: 1; }
.flowchart-edge-label { font-size: 10px; fill: #4a5568; }

/* Nodes — base card */
.flowchart-node {
  fill: #ffffff;
  stroke: #e0e4eb;
  stroke-width: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}
.flowchart-node-accent { fill: transparent; stroke: none; }
.flowchart-node-name { font-size: 13px; font-weight: 500; fill: #1a202c; }
.flowchart-node-subtitle { font-size: 11px; fill: #718096; }

/* Accent stripe color by task type */
.flowchart-node-condition .flowchart-node-accent { fill: #f5a623; }
.flowchart-node-regular .flowchart-node-accent { fill: #5c6bc0; }
.flowchart-node-playbook .flowchart-node-accent { fill: #e91e63; }
.flowchart-node-collection .flowchart-node-accent { fill: #26a69a; }

/* Start (pill) + title (section) get a solid fill, white text */
.flowchart-node-start .flowchart-node { fill: #4a4a4a; stroke: #3a3a3a; }
.flowchart-node-start .flowchart-node-name,
.flowchart-node-title .flowchart-node-name { fill: #ffffff; }
.flowchart-node-title .flowchart-node { fill: #4a7c7c; stroke: #3a6c6c; }

/* The playbook's entry node gets a highlighted border */
.flowchart-node-start-task .flowchart-node { stroke: #4db8b8; stroke-width: 2; }