@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* Diagrams are authored with pastel node fills + dark labels. Keep a light "paper"
   panel in both light and dark portal themes so text never disappears. */
.mermaid-diagram {
  margin: 1.25rem 0 1.75rem;
  padding: 1.25rem 1rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow-x: auto;
  color: #0f172a;
  font-family: "IBM Plex Sans", var(--font-sans), system-ui, sans-serif;
}
.mermaid-diagram svg { max-width: 100%; height: auto; }

/* htmlLabels live in foreignObject spans — inherit readable ink on the paper panel */
.mermaid-diagram .nodeLabel,
.mermaid-diagram .edgeLabel,
.mermaid-diagram .label,
.mermaid-diagram .cluster-label,
.mermaid-diagram foreignObject div,
.mermaid-diagram foreignObject span {
  color: #0f172a !important;
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif !important;
}
.mermaid-diagram .edgeLabel {
  background-color: #f8fafc !important;
}
.mermaid-diagram .cluster rect {
  fill: #e2e8f0 !important;
  stroke: #94a3b8 !important;
}
.mermaid-diagram .cluster-label,
.mermaid-diagram .cluster span {
  color: #0f172a !important;
  fill: #0f172a !important;
}

@media (prefers-color-scheme: dark) {
  .mermaid-diagram {
    background: #f1f5f9;
    border-color: #64748b;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  }
}

.flow-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.55rem 1.1rem;
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "IBM Plex Sans", var(--font-sans), system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.flow-legend strong { color: var(--text); font-weight: 600; }
.flow-legend .swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 1px solid rgba(15, 23, 42, 0.18);
}

.flow-callout {
  border-left: 4px solid var(--accent);
  padding: 0.85rem 1.1rem;
  margin: 1rem 0 1.25rem;
  background: var(--accent-muted);
  border-radius: 0 8px 8px 0;
  font-family: "IBM Plex Sans", var(--font-sans), system-ui, sans-serif;
  color: var(--text);
}
.flow-callout.warn { border-left-color: #d97706; background: rgba(217, 119, 6, 0.12); }
.flow-callout.ok { border-left-color: #059669; background: rgba(5, 150, 105, 0.12); }

.rst-content .flow-toc a { font-family: "IBM Plex Sans", var(--font-sans), system-ui, sans-serif; }