/* ══════════════════════════════════════════════════════════════════════════════
   MERMAID — Diagram block
   On-demand: loaded only when article.embeds.styles includes 'mermaid'
   Tag: <mermaid title="...">…diagram source…</mermaid>
   ══════════════════════════════════════════════════════════════════════════════ */

.mermaid-block {
  margin: 1.5rem 0;
  text-align: center;
}

.mermaid-block .mermaid {
  display: block;
  background: transparent;
  padding: 1.5rem;
  overflow-x: auto;
  font-family: var(--font-sans);
  white-space: pre; /* preserve source until mermaid.js processes it */
}

/* After mermaid.js renders, it replaces <pre> content with an <svg> */
.mermaid-block .mermaid svg {
  max-width: 100%;
  height: auto;
}

.mermaid-block__caption {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding-bottom: 0.75rem;
}

/* ── Wrapper themes ── */

/* bordered — white bg, subtle border */
.mermaid-block--bordered {
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* navy — light navy tint */
.mermaid-block--navy {
  border-radius: var(--radius);
  background: #eef1f8;
}