/* Mermaid diagram lines & arrows — shared by inline previews and full-size page */

.mermaid-styled path.flowchart-link,
.mermaid-styled .edgePath path,
.mermaid-styled .edgePaths path {
  stroke: #334155 !important;
  stroke-width: 3px !important;
  fill: none !important;
}

.mermaid-styled path.edge-thickness-normal,
.mermaid-styled path.edge-pattern-solid,
.mermaid-styled path.edge-pattern-dotted,
.mermaid-styled path.edge-pattern-dashed {
  stroke-width: 3px !important;
}

.mermaid-styled marker path,
.mermaid-styled path.arrowMarkerPath {
  fill: #334155 !important;
  stroke: #334155 !important;
  stroke-width: 2px !important;
}

.mermaid-styled .messageLine0,
.mermaid-styled .messageLine1 {
  stroke: #334155 !important;
  stroke-width: 3px !important;
  fill: none !important;
}

.mermaid-styled line {
  stroke: #475569 !important;
  stroke-width: 2.5px !important;
}

.mermaid-styled .node rect,
.mermaid-styled .node polygon,
.mermaid-styled .cluster rect,
.mermaid-styled .basic.outer-path {
  stroke: #64748b !important;
  stroke-width: 2px !important;
}

.mermaid-styled .actor-line {
  stroke: #64748b !important;
  stroke-width: 2.5px !important;
}

/* Full-size diagram page — thicker strokes & arrows */
.mermaid-styled-full path.flowchart-link,
.mermaid-styled-full .edgePath path,
.mermaid-styled-full .edgePaths path {
  stroke: #0f172a !important;
  stroke-width: 6px !important;
}

.mermaid-styled-full path.edge-thickness-normal,
.mermaid-styled-full path.edge-pattern-solid,
.mermaid-styled-full path.edge-pattern-dotted,
.mermaid-styled-full path.edge-pattern-dashed {
  stroke-width: 6px !important;
  stroke: #0f172a !important;
}

.mermaid-styled-full marker path,
.mermaid-styled-full path.arrowMarkerPath {
  fill: #0f172a !important;
  stroke: #0f172a !important;
  stroke-width: 4px !important;
}

.mermaid-styled-full .messageLine0,
.mermaid-styled-full .messageLine1 {
  stroke: #0f172a !important;
  stroke-width: 5px !important;
}

.mermaid-styled-full line,
.mermaid-styled-full .actor-line {
  stroke: #334155 !important;
  stroke-width: 4px !important;
}

.mermaid-styled-full .node rect,
.mermaid-styled-full .node polygon,
.mermaid-styled-full .cluster rect,
.mermaid-styled-full .basic.outer-path {
  stroke: #475569 !important;
  stroke-width: 3px !important;
}

/* —— Animation —— */
.diagram-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.65rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.diagram-btn {
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}

.diagram-btn:hover:not(:disabled) {
  background: #f1f5f9;
}

.diagram-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.diagram-step-label {
  flex: 1;
  min-width: 12rem;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.35;
}

.mermaid-anim-dimmed {
  opacity: 0.28 !important;
  transition: opacity 0.26s ease;
}

.mermaid-anim-active {
  opacity: 1 !important;
  filter: drop-shadow(0 0 8px rgba(14, 116, 144, 0.4));
  transition: filter 0.26s ease, opacity 0.26s ease;
}

/* Nested labels inherit dimmed opacity unless reset on the active step */
.mermaid-anim-active .label,
.mermaid-anim-active .nodeLabel,
.mermaid-anim-active .cluster-label,
.mermaid-anim-active foreignObject,
.mermaid-anim-active foreignObject div,
.mermaid-anim-active foreignObject span,
.mermaid-anim-active foreignObject p {
  opacity: 1 !important;
}

.mermaid-anim-active.messageText,
.mermaid-anim-active.messageText tspan {
  font-weight: 700 !important;
  fill: #0f766e !important;
}

/* Flowchart box text — Mermaid uses HTML labels inside foreignObject */
.mermaid-anim-active .nodeLabel foreignObject div,
.mermaid-anim-active .nodeLabel foreignObject span,
.mermaid-anim-active .nodeLabel foreignObject p,
.mermaid-anim-active .cluster-label foreignObject div {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.mermaid-anim-active .edgeLabel foreignObject div,
.mermaid-anim-active .edgeLabel foreignObject span {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.mermaid-anim-active .labelText,
.mermaid-anim-active .labelText tspan {
  fill: #0f172a !important;
  font-weight: 700 !important;
}

.mermaid-anim-edge-flow {
  stroke-dasharray: 12 8 !important;
  animation: mermaid-flow 0.825s linear infinite;
}

@keyframes mermaid-flow {
  to { stroke-dashoffset: -20; }
}

.integration-diagram .diagram-controls {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.integration-diagram .diagram-link .diagram-controls {
  margin: 0 0 0.5rem;
  border: none;
  background: transparent;
  padding: 0;
}