/* Shared Mermaid diagram wrapper — include on any page with .mermaid-wrap blocks */
.mermaid-wrap {
  width: 100%;
  max-width: 1200px;
  overflow-x: auto;
  margin: 1em 0;
  cursor: zoom-in;
  position: relative;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

.mermaid-wrap:hover {
  border-color: #ccc;
}

.mermaid-wrap .mermaid svg {
  width: 100%;
  max-width: 100%;
  height: auto !important;
}

/* Optional: small preview — add class mermaid-compact on the wrap */
.mermaid-wrap.mermaid-compact {
  max-height: 300px;
  overflow: hidden;
  background: #fafafa;
  border-color: #ddd;
  padding: 0.5em;
}

.mermaid-wrap.mermaid-compact .mermaid svg {
  width: auto;
  min-width: 100%;
}

.mermaid-wrap.mermaid-compact::after {
  content: "Click to zoom";
  display: block;
  text-align: center;
  font-size: 0.85em;
  color: #666;
  padding: 0.35em 0 0;
}

.mermaid-wrap.mermaid-compact:hover::after {
  color: #333;
}

/* Zoomed state (applied by mermaid-init.js on click) */
.mermaid-wrap.mermaid-zoomed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002;
  width: 95vw;
  max-width: 1400px;
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  padding: 1em;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
  cursor: zoom-out;
  border-color: #999;
}

.mermaid-wrap.mermaid-zoomed::after {
  display: none;
}

.mermaid-wrap.mermaid-zoomed .mermaid svg {
  width: 100%;
  max-width: 100%;
  height: auto !important;
}

.mermaid-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1001;
}