/* ══════════════════════════════════════════════════════════════════
   Mermaid Diagram Theming -- centralized, matches journal palette
   ══════════════════════════════════════════════════════════════════ */

/* Container: constrain width, center, add subtle framing */
.mermaid {
  margin: 1.2em auto;
  padding: 0.8em 0;
  max-width: 720px;
  text-align: center;
}

/* Force SVG to not overflow */
.mermaid svg {
  max-width: 100% !important;
  height: auto !important;
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif !important;
}

/* ── Light mode ─────────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  /* Flowchart / graph nodes */
  --md-mermaid-node-bg-color: #eae6dd;
  --md-mermaid-node-fg-color: #1a1a2e;
  --md-mermaid-edge-color: #7a7590;
  --md-mermaid-label-bg-color: #faf8f5;
  --md-mermaid-label-fg-color: #1a1a2e;

  /* Sequence diagrams */
  --md-mermaid-sequence-actor-bg-color: #eae6dd;
  --md-mermaid-sequence-actor-fg-color: #1a1a2e;
  --md-mermaid-sequence-actor-border-color: #7a7590;
  --md-mermaid-sequence-actor-line-color: #c5c0b8;
  --md-mermaid-sequence-note-bg-color: #f3efe9;
  --md-mermaid-sequence-note-fg-color: #3a3a5c;
  --md-mermaid-sequence-note-border-color: #c5c0b8;
  --md-mermaid-sequence-message-fg-color: #1a1a2e;
  --md-mermaid-sequence-message-line-color: #7a7590;
  --md-mermaid-sequence-number-bg-color: #5c4db1;
  --md-mermaid-sequence-number-fg-color: #faf8f5;
  --md-mermaid-sequence-loop-bg-color: rgba(13, 115, 119, 0.04);
  --md-mermaid-sequence-loop-border-color: #0d7377;
  --md-mermaid-sequence-loop-fg-color: #0d7377;
}

/* ── Dark mode ──────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-mermaid-node-bg-color: #2a2a3e;
  --md-mermaid-node-fg-color: #e4e1d8;
  --md-mermaid-edge-color: #6b6680;
  --md-mermaid-label-bg-color: #1c1c28;
  --md-mermaid-label-fg-color: #e4e1d8;

  --md-mermaid-sequence-actor-bg-color: #2a2a3e;
  --md-mermaid-sequence-actor-fg-color: #e4e1d8;
  --md-mermaid-sequence-actor-border-color: #6b6680;
  --md-mermaid-sequence-actor-line-color: #3a3a50;
  --md-mermaid-sequence-note-bg-color: #22222e;
  --md-mermaid-sequence-note-fg-color: #a8a49a;
  --md-mermaid-sequence-note-border-color: #3a3a50;
  --md-mermaid-sequence-message-fg-color: #e4e1d8;
  --md-mermaid-sequence-message-line-color: #6b6680;
  --md-mermaid-sequence-number-bg-color: #a78bfa;
  --md-mermaid-sequence-number-fg-color: #16161e;
  --md-mermaid-sequence-loop-bg-color: rgba(45, 212, 191, 0.06);
  --md-mermaid-sequence-loop-border-color: #2dd4bf;
  --md-mermaid-sequence-loop-fg-color: #2dd4bf;
}

/* ── Font overrides inside diagrams ─────────────────────────────── */
.mermaid text,
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid .cluster-label,
.mermaid .actor,
.mermaid .messageText,
.mermaid .noteText,
.mermaid .loopText {
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif !important;
  font-size: 13px !important;
}

.mermaid .nodeLabel {
  font-weight: 500 !important;
}

.mermaid .cluster-label {
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mermaid .edgeLabel {
  font-size: 11px !important;
  font-weight: 400 !important;
}

.mermaid .noteText {
  font-size: 11px !important;
  font-style: italic;
}

/* Sequence diagram actor boxes: rounded */
.mermaid .actor {
  rx: 4px;
  ry: 4px;
}

/* Flowchart nodes: softer rounded corners */
.mermaid .node rect,
.mermaid .node polygon {
  rx: 4px;
  ry: 4px;
}

/* Subgraph/cluster borders */
.mermaid .cluster rect {
  rx: 6px;
  ry: 6px;
  stroke-width: 1.5px !important;
}