/* Make Mermaid diagrams responsive and readable */
.mermaid {
  max-width: 100%;
  margin: 2rem auto;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
  min-height: 400px;
}

/* Mobile: stack vertically when narrow */
@media (max-width: 768px) {
  .mermaid svg {
    min-height: 600px; /* Taller for vertical flow */
  }
}

/* Homepage hero diagram - extra large */
.index-hero-diagram .mermaid svg {
  min-height: 500px;
}

@media (max-width: 768px) {
  .index-hero-diagram .mermaid svg {
    min-height: 700px;
  }
}

/* Decision tree diagrams - taller for branching */
.decision-diagram .mermaid svg {
  min-height: 550px;
}

@media (max-width: 768px) {
  .decision-diagram .mermaid svg {
    min-height: 750px;
  }
}

/* Audit content diagrams - extra tall for hierarchy */
.audit-diagram .mermaid svg {
  min-height: 600px;
}

@media (max-width: 768px) {
  .audit-diagram .mermaid svg {
    min-height: 800px;
  }
}