/* Mermaid flowchart/sequence chrome after sync strips <style> for CSP.
   Sequence diagrams keep presentation fills. Flowcharts need these class rules. */
.prose .mermaid-diagram svg {
  font-family: var(--font-sans, "IBM Plex Sans", "Segoe UI", sans-serif);
  font-size: 14px;
}

.prose .mermaid-diagram .node rect,
.prose .mermaid-diagram .node circle,
.prose .mermaid-diagram .node ellipse,
.prose .mermaid-diagram .node polygon,
.prose .mermaid-diagram .node path {
  fill: #334155;
  stroke: #94a3b8;
  stroke-width: 1.25px;
}

.prose .mermaid-diagram .label,
.prose .mermaid-diagram .nodeLabel,
.prose .mermaid-diagram .edgeLabel,
.prose .mermaid-diagram .label text,
.prose .mermaid-diagram span,
.prose .mermaid-diagram text {
  fill: #e2e8f0;
  color: #e2e8f0;
}

.prose .mermaid-diagram .edgeLabel rect,
.prose .mermaid-diagram .labelBkg {
  /* Opaque chip so arrow strokes do not cut through edge label glyphs. */
  fill: #1e293b;
  opacity: 1;
  stroke: none;
}

.prose .mermaid-diagram .flowchart-link,
.prose .mermaid-diagram .edgePath .path,
.prose .mermaid-diagram path.path {
  stroke: #94a3b8;
  fill: none;
  stroke-width: 1.75px;
}

.prose .mermaid-diagram .marker,
.prose .mermaid-diagram .arrowMarkerPath,
.prose .mermaid-diagram .arrowheadPath {
  fill: #94a3b8;
  stroke: #94a3b8;
}

.prose .mermaid-diagram .cluster rect {
  fill: #1e293b;
  stroke: #64748b;
}

.prose .mermaid-diagram .cluster text,
.prose .mermaid-diagram .cluster-label text {
  fill: #f8fafc;
}

.prose .mermaid-diagram .entityBox rect,
.prose .mermaid-diagram .attributeBoxEven rect,
.prose .mermaid-diagram .attributeBoxOdd rect {
  fill: #334155;
  stroke: #94a3b8;
}
.prose .mermaid-diagram .entityLabel text,
.prose .mermaid-diagram .relationshipLabel text {
  fill: #e2e8f0;
}
.prose .mermaid-diagram .actor,
.prose .mermaid-diagram .actor-box {
  fill: #334155;
  stroke: #94a3b8;
}
.prose .mermaid-diagram .note {
  fill: #475569;
  stroke: #94a3b8;
}