/*
 * cyto-pipeline.css
 * Stage color palette + Mermaid diagram zoom/scroll behaviour.
 * Colours are kept in sync with configs/pipeline-colors.toml.
 * React Flow: replicate these as JS style constants in the web-gui subtree.
 */

/* ── Stage CSS variables ─────────────────────────────────────────────────── */
:root {
  --cyto-io-fill:             #1e293b;
  --cyto-io-stroke:           #475569;
  --cyto-preprocessing-fill:  #0d7377;
  --cyto-preprocessing-stroke:#0a5c60;
  --cyto-segmentation-fill:   #7c3aed;
  --cyto-segmentation-stroke: #6d28d9;
  --cyto-tracking-fill:       #0369a1;
  --cyto-tracking-stroke:     #075985;
  --cyto-analysis-fill:       #b45309;
  --cyto-analysis-stroke:     #92400e;
  --cyto-output-fill:         #166534;
  --cyto-output-stroke:       #14532d;
  --cyto-optional-fill:       #6b7280;
  --cyto-optional-stroke:     #4b5563;
}

/* ── Mermaid diagram: horizontal scroll + minimum width ─────────────────── */
/* Prevents tall/wide diagrams from being clipped on narrow viewports.       */
.mermaid {
  overflow-x: auto;
  display: block;
  padding: 4px 0;
}

.mermaid svg {
  min-width: 560px;
  max-width: unset !important;
  height: auto;
}

/* ── Stage color legend table ─────────────────────────────────────────────── */
.stage-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 6px;
}