/* Custom styling to ensure Mermaid diagrams are large, readable, and responsive */

.mermaid {
  text-align: center;
  margin: 2rem 0;
  overflow-x: auto;
}

.mermaid svg {
  width: 100% !important;
  min-width: 650px;
  max-width: 1000px !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Enhance text readability inside Mermaid nodes */
.mermaid text {
  font-family: var(--md-text-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.mermaid .edgeLabel text {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Thicker node borders */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon,
.mermaid .node path {
  stroke-width: 2px !important;
}