/* ===== Mermaid Diagrams ===== */
/*  Dual-render: each diagram exists as light + dark SVG.
    CSS only handles layout and visibility toggling. */

/* ── Outer container ── */
.mermaid-dual {
  margin: 1.5rem auto;
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-code);
  overflow-x: auto;
  text-align: center;
}

/* ── Visibility: show one, hide the other ── */
.mermaid-d { display: block; }
.mermaid-d--dark { display: none; }

html.dark .mermaid-d { display: none; }
html.dark .mermaid-d--dark { display: block; }

/* ── SVG sizing ── */
.mermaid-d svg {
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.mermaid-d svg foreignObject {
  overflow: visible;
}

.mermaid-d svg .nodeLabel,
.mermaid-d svg .edgeLabel,
.mermaid-d svg foreignObject div {
  line-height: 1.3;
}

.mermaid-d svg .nodeLabel p {
  margin: 0;
}