/* Playbook flowchart SVG: node-type colors + edge styling. The renderer only
 * sets classes; all color lives here. Loaded only on the playbook show page.
 *
 * The card and edge neutrals are Tailwind's --color-* properties so they flip
 * with the theme. The accent stripes and the solid start/title nodes stay
 * literal: they are saturated (or dark under white text) and read on both. */
.playbook-flowchart-svg {
  width: 100%;
  height: 100%;
  cursor: grab;
}
.playbook-flowchart-svg:active { cursor: grabbing; }

/* Edges */
.flowchart-edge {
  fill: none;
  stroke: var(--color-gray-400, #a0aec0);
  stroke-width: 1.5;
}
.flowchart-arrow { fill: var(--color-gray-400, #a0aec0); }
.flowchart-edge-label-bg { fill: var(--color-surface, #ffffff); stroke: var(--color-gray-200, #e0e4eb); stroke-width: 1; }
.flowchart-edge-label { font-size: 10px; fill: var(--color-gray-600, #4a5568); }

/* Nodes — base card */
.flowchart-node {
  fill: var(--color-surface, #ffffff);
  stroke: var(--color-gray-200, #e0e4eb);
  stroke-width: 1;
  filter: drop-shadow(var(--chart-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: var(--color-gray-900, #1a202c); }
.flowchart-node-subtitle { font-size: 11px; fill: var(--color-gray-500, #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; }