/* Mermaid cluster (subgraph) backgrounds — Quarto themeCSS uses these variables.
   Without them, cluster fills fall back to dark grey. See quarto-cli#9178. */
:root {
  --mermaid-bg-color: #ffffff;
  --mermaid-fg-color: #2c3e50;
  --mermaid-fg-color--lighter: #95a5a6;
  --mermaid-fg-color--lightest: #ecf0f1;
  --mermaid-edge-color: #7f8c8d;
  --mermaid-node-bg-color: rgba(44, 62, 80, 0.08);
  --mermaid-node-fg-color: #2c3e50;
  --mermaid-label-bg-color: #ffffff;
  --mermaid-label-fg-color: #2c3e50;
}

/* Subgraph titles in LR+TB flowcharts often overlap the first node; lift labels up. */
svg.mermaid-js .cluster-label {
  transform: translateY(-1.6rem);
}

/* Ensure light subgraph panels even when theme variables are missing. */
svg.mermaid-js .cluster rect {
  fill: #ecf0f1 !important;
  stroke: #bdc3c7 !important;
}

/* Center diagram cells; Quarto sets data-layout-align from fig-align: center */
.cell[data-layout-align="center"] .cell-output-display,
.cell-output-display:has(svg.mermaid-js) {
  display: flex;
  justify-content: center;
}

.cell-output-display svg.mermaid-js {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Fallback when themeVariables fontSize is not applied */
svg.mermaid-js .nodeLabel,
svg.mermaid-js .edgeLabel,
svg.mermaid-js .label text,
svg.mermaid-js .cluster-label {
  font-size: 13px !important;
}

/* HTML labels only: allow overflow if a diagram opts in via htmlLabels: true */
svg.mermaid-js foreignObject {
  overflow: visible !important;
}

svg.mermaid-js foreignObject div {
  text-align: center;
  line-height: 1.35;
}