/* ============================================
   Mermaid Component - Specifys.ai
   ============================================
   Styles for Mermaid diagrams and error handling
   This file extends the base mermaid styles from main-compiled.css
*/
/* Hide Mermaid's native error footer/logo only — DO NOT hide our custom
   `.mermaid-error*` wrappers. Mermaid 10 emits its own SVG-internal error
   elements (text.error-text, g.error-icon) which we keep hidden so we can
   render our own collapsible fallback card via DiagramEngine / mermaidManager. */
svg text.error-text,
svg g.error-icon,
svg[aria-describedby*=error] {
  display: none;
}

/* Inline fallback shown by DiagramEngine.buildInlineDiagramFallback when
   mermaid.parse / mermaid.render fail on a diagram embedded inside the
   Technical or Architecture tab body. */
.diagram-inline-fallback {
  margin: 16px 0;
  padding: 14px 16px;
  background: #fff8e6;
  border: 1px solid #f0d9a8;
  border-radius: 8px;
  color: #5c4a00;
  font-size: 14px;
}

.diagram-inline-fallback-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #8a5b00;
  margin-bottom: 6px;
}

.diagram-inline-fallback-msg {
  margin: 0 0 8px 0;
  color: #5c4a00;
}

.diagram-inline-fallback-source summary {
  cursor: pointer;
  user-select: none;
  color: #8a5b00;
  font-weight: 500;
  padding: 2px 0;
}

.diagram-inline-fallback-source pre {
  margin: 8px 0 0 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ecd9b5;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  color: #333;
}

/* Same fallback look-and-feel for the standalone mermaid manager
   (assets/js/mermaid.js) — used outside the spec viewer. */
.mermaid-error-source summary {
  cursor: pointer;
  user-select: none;
  margin-top: 8px;
  color: #8a5b00;
  font-weight: 500;
}

.mermaid-error-source pre {
  margin: 8px 0 0 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ecd9b5;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  color: #333;
  text-align: left;
}

/*# sourceMappingURL=mermaid.css.map */