/* Mermaid diagrams.
 *
 * The shortcode emits the diagram inside <pre class="mermaid">. Two things are
 * handled here:
 *
 *  1. Strip the theme's code-block chrome (lighter background + padding) so the
 *     diagram sits directly on the page background.
 *  2. Drive every diagram color from the site's CSS custom properties. Mermaid's
 *     own injected <style> does not apply in this setup, so without these rules
 *     nodes fall back to the SVG default (black fill, no stroke). Using the theme
 *     variables here also means diagrams follow the active color scheme — and any
 *     future theme switch — with no JavaScript re-render.
 */

pre.mermaid {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 1.5rem auto;
  overflow-x: auto;
  text-align: center;
  line-height: normal;
}

pre.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Node shapes: page-background fill with an accent outline (clean wireframe). */
pre.mermaid .node rect,
pre.mermaid .node circle,
pre.mermaid .node ellipse,
pre.mermaid .node polygon,
pre.mermaid .node path {
  fill: var(--background-color) !important;
  stroke: var(--accent-color) !important;
  stroke-width: 1.5px !important;
}

/* Labels (HTML and SVG text). */
pre.mermaid .nodeLabel,
pre.mermaid .edgeLabel,
pre.mermaid .label,
pre.mermaid text {
  color: var(--text-color) !important;
  fill: var(--text-color) !important;
}

/* Edges and their arrowheads. */
pre.mermaid .flowchart-link,
pre.mermaid .edgePath path,
pre.mermaid path.path {
  stroke: var(--accent-color) !important;
  fill: none !important;
}

pre.mermaid .arrowheadPath,
pre.mermaid marker path,
pre.mermaid .marker {
  fill: var(--accent-color) !important;
  stroke: var(--accent-color) !important;
}

/* Edge label backgrounds should match the page, not a default light box. */
pre.mermaid .edgeLabel,
pre.mermaid .edgeLabel rect,
pre.mermaid .labelBkg {
  background-color: var(--background-color) !important;
  fill: var(--background-color) !important;
}