/* ──────────────────────────────────────────────────────────────
   Mermaid — Site CSS
   - Mindmap: your custom palette (section-*)
   - Flowchart: blue theme with white text
   - Works in light & dark (via CSS vars)
   - Responsive width + centering
   ────────────────────────────────────────────────────────────── */

/* ===== Brand palette (edit to taste) ===== */
:root {
  /* === Mindmap Blue–Teal Theme === */
  --mm-root-fill:  #1e3a8a;
  --mm-sec0-fill:  #1e6091;
  --mm-sec1-fill:  #168aad;
  --mm-sec2-fill:  #34a0a4;
  --mm-sec3-fill:  #99d98c;



  /* uniform thicker grey stroke for all nodes */
  --mm-root-stroke:  #7a7a7a;
  --mm-sec0-stroke:  #7a7a7a;
  --mm-sec1-stroke:  #7a7a7a;
  --mm-sec2-stroke:  #7a7a7a;
  --mm-sec3-stroke:  #7a7a7a;

  /* optional text + fallback colors */
  --mm-fallback-fill:  #f8fafc;
  --mm-fallback-stroke:#7a7a7a;
  --mm-fallback-text:  #0f172a;

  /* edge color (grey-green neutral to fit palette) */
  --mm-edge: #7a7a7a;
}



/* ===== Shared text overrides (foreignObject + tspans) ===== */
.mermaid svg[id^="mermaid-"] {
  
  font-size: 110% !important;         /* small global bump */
}

.mermaid svg[id^="mermaid-"] text,
.mermaid svg[id^="mermaid-"] tspan {
  fill: #ffffff !important;           /* default white text */
  font-weight: 600;
}

.mermaid svg[id^="mermaid-"] foreignObject,
.mermaid svg[id^="mermaid-"] foreignObject * {
  color: #ffffff !important;
}

/* ===== Mindmap palette (section-* classes) ===== */
/* Root node */
.mermaid svg[id^="mermaid-"] .section-root rect,
.mermaid svg[id^="mermaid-"] .section-root path,
.mermaid svg[id^="mermaid-"] .section-root circle,
.mermaid svg[id^="mermaid-"] .section-root polygon {
  fill: var(--mm-root-fill) !important;
  stroke: var(--mm-root-stroke) !important;
  stroke-width: 4px !important;
}
.mermaid svg[id^="mermaid-"] .section-root text,
.mermaid svg[id^="mermaid-"] .section-root tspan { 
  fill: #ffffff !important;
  font-weight: 700 !important;
}

/* Depth sections */
.mermaid svg[id^="mermaid-"] .section-0 rect,
.mermaid svg[id^="mermaid-"] .section-0 path,
.mermaid svg[id^="mermaid-"] .section-0 circle,
.mermaid svg[id^="mermaid-"] .section-0 polygon {
  fill: var(--mm-sec0-fill) !important;
  stroke: var(--mm-sec0-stroke) !important;
}
.mermaid svg[id^="mermaid-"] .section-0 text,
.mermaid svg[id^="mermaid-"] .section-0 tspan { fill: #ffffff !important; }

.mermaid svg[id^="mermaid-"] .section-1 rect,
.mermaid svg[id^="mermaid-"] .section-1 path,
.mermaid svg[id^="mermaid-"] .section-1 circle,
.mermaid svg[id^="mermaid-"] .section-1 polygon {
  fill: var(--mm-sec1-fill) !important;
  stroke: var(--mm-sec1-stroke) !important;
}
.mermaid svg[id^="mermaid-"] .section-1 text,
.mermaid svg[id^="mermaid-"] .section-1 tspan { fill: #ffffff !important; }

.mermaid svg[id^="mermaid-"] .section-2 rect,
.mermaid svg[id^="mermaid-"] .section-2 path,
.mermaid svg[id^="mermaid-"] .section-2 circle,
.mermaid svg[id^="mermaid-"] .section-2 polygon {
  fill: var(--mm-sec2-fill) !important;
  stroke: var(--mm-sec2-stroke) !important;
}
.mermaid svg[id^="mermaid-"] .section-2 text,
.mermaid svg[id^="mermaid-"] .section-2 tspan { fill: #ffffff !important; }

.mermaid svg[id^="mermaid-"] .section-3 rect,
.mermaid svg[id^="mermaid-"] .section-3 path,
.mermaid svg[id^="mermaid-"] .section-3 circle,
.mermaid svg[id^="mermaid-"] .section-3 polygon {
  fill: var(--mm-sec3-fill) !important;
  stroke: var(--mm-sec3-stroke) !important;
}
.mermaid svg[id^="mermaid-"] .section-3 text,
.mermaid svg[id^="mermaid-"] .section-3 tspan { fill: #ffffff !important; }

/* Fallback for other section-* */
.mermaid svg[id^="mermaid-"] [class^="section-"] rect,
.mermaid svg[id^="mermaid-"] [class^="section-"] path,
.mermaid svg[id^="mermaid-"] [class^="section-"] circle,
.mermaid svg[id^="mermaid-"] [class^="section-"] polygon {
  fill: var(--mm-fallback-fill) !important;
  stroke: var(--mm-fallback-stroke) !important;
}
.mermaid svg[id^="mermaid-"] [class^="section-"] text,
.mermaid svg[id^="mermaid-"] [class^="section-"] tspan {
  fill: var(--mm-fallback-text) !important;
}

/* Mindmap branches/edges */
.mermaid svg[id^="mermaid-"] .edge,
.mermaid svg[id^="mermaid-"] .mindmap-edges path,
.mermaid svg[id^="mermaid-"] .mindmap-edges line,
.mermaid svg[id^="mermaid-"] [class^="section-edge-"] {
  stroke: var(--mm-edge) !important;
  stroke-width: 2px !important;
  fill: none !important;
}

/* Optional: tiny underline lines Mermaid adds in some node styles */
.mermaid svg[id^="mermaid-"] .node-line-0,
.mermaid svg[id^="mermaid-"] .node-line-1,
.mermaid svg[id^="mermaid-"] .node-line-2 {
  stroke: rgba(0,0,0,0.25) !important;
}


:root {
  --mm-node-blue: #1570ef;           /* inner node fill (light) */
  --mm-surface: rgba(0,0,0,0.06);    /* cluster/edge-label pill bg on light */
  --mm-edge: color-mix(in srgb, currentColor 70%, transparent);
}
html.dark {
  --mm-node-blue: #1363d1;           /* inner node fill (dark) */
  --mm-surface: rgba(255,255,255,0.08); /* cluster/edge-label pill bg on dark */
  --mm-edge: color-mix(in srgb, currentColor 60%, transparent);
}

.mermaid svg[id^="mermaid-"] .label text,
.mermaid svg[id^="mermaid-"] text,
.mermaid svg[id^="mermaid-"] tspan,
.mermaid svg[id^="mermaid-"] foreignObject,
.mermaid svg[id^="mermaid-"] foreignObject * {
  fill: currentColor !important;
  color: currentColor !important;
}

.mermaid svg[id^="mermaid-"] .node rect,
.mermaid svg[id^="mermaid-"] .node circle,
.mermaid svg[id^="mermaid-"] .node ellipse,
.mermaid svg[id^="mermaid-"] .node polygon,
.mermaid svg[id^="mermaid-"] .node path {
  fill: var(--mm-node-blue) !important;
  stroke: none !important;
}

.mermaid svg[id^="mermaid-"] .node .label text,
.mermaid svg[id^="mermaid-"] .node .label tspan,
.mermaid svg[id^="mermaid-"] .node foreignObject,
.mermaid svg[id^="mermaid-"] .node foreignObject * {
  fill: #ffffff !important;
  color: #ffffff !important;
  font-weight: 600;
}

.mermaid svg[id^="mermaid-"] .cluster rect {
  fill: var(--mm-surface) !important;
  stroke: none !important;
}
.mermaid svg[id^="mermaid-"] .cluster text,
.mermaid svg[id^="mermaid-"] .cluster span {
  fill: currentColor !important;
  color: currentColor !important;
  font-weight: 600;
}

.mermaid svg[id^="mermaid-"] .edgePath .path,
.mermaid svg[id^="mermaid-"] .flowchart-link {
  stroke: var(--mm-edge) !important;
  stroke-width: 2px !important;
  fill: none !important;
}
.mermaid svg[id^="mermaid-"] .marker,
.mermaid svg[id^="mermaid-"] .arrowheadPath {
  fill: var(--mm-edge) !important;
  stroke: var(--mm-edge) !important;
}

.mermaid svg[id^="mermaid-"] .edgeLabel rect {
  fill: var(--mm-surface) !important;
  stroke: none !important;
  opacity: 1 !important;
}
.mermaid svg[id^="mermaid-"] .edgeLabel span,
.mermaid svg[id^="mermaid-"] .edgeLabel text {
  fill: currentColor !important;
  color: currentColor !important;
  font-weight: 500;
}

.mermaid svg[id^="mermaid-"] rect.text { fill: none !important; }

/* ===== Layout: responsive width + centering in docs ===== */
.vp-doc .mermaid > svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}
.vp-doc .mermaid {
  display: flex;
  justify-content: center;
}