/* Trishula docs — overrides on the cosmo theme */
.navbar .navbar-brand { font-weight: 700; letter-spacing: 0.3px; }

/* Callouts: NO fill, purple dashed left rule — high specificity to beat theme tints */
div.callout,
div.callout.callout-style-simple,
div.callout.callout-style-default,
div.callout.callout-titled {
  background: transparent !important;
  border: none !important;
  border-left: 3px dashed #712cf9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.55rem 1rem 0.55rem 1.05rem !important;
}
div.callout .callout-header,
div.callout .callout-body,
div.callout .callout-body-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
div.callout .callout-title { color: #712cf9 !important; font-weight: 600; }
div.callout .callout-icon,
div.callout .callout-icon-container {
  color: #712cf9 !important;
  background: transparent !important;
  border: none !important;
}

/* --- mermaid diagrams: dotted purple line boxes, NO fill (gray or otherwise) ---
   quarto renders mermaid as <svg class="flowchart mermaid-js">; target all its parts. */
svg.mermaid-js {
  background: transparent;
}
/* node boxes + subgraph (area) boxes: transparent fill, purple dotted outline */
svg.mermaid-js g.node rect.basic.label-container,
svg.mermaid-js g.node rect,
svg.mermaid-js g.node circle,
svg.mermaid-js g.node polygon,
svg.mermaid-js g.node path,
svg.mermaid-js g.cluster rect {
  fill: transparent !important;
  stroke: #712cf9 !important;
  stroke-width: 1.6px !important;
  stroke-dasharray: 5 4 !important;
}
/* subgraph AREA boxes slightly thicker (they encompass the others) */
svg.mermaid-js g.cluster rect {
  stroke-width: 2px !important;
}
/* edge labels: OPAQUE white cushion so text never overlaps the purple line */
svg.mermaid-js g.edgeLabel rect,
svg.mermaid-js g.edgeLabel polygon,
svg.mermaid-js g.edgeLabel .labelBkg {
  fill: #ffffff !important;
  fill-opacity: 1 !important;
  background: #ffffff !important;
  border: none !important;
}
svg.mermaid-js g.edgeLabel foreignObject,
svg.mermaid-js g.edgeLabel foreignObject div,
svg.mermaid-js g.edgeLabel span,
svg.mermaid-js g.edgeLabel p {
  fill: transparent !important;
  background: #ffffff !important;
  border: none !important;
  color: #333 !important;
}
/* spacing so labels never crowd node borders */
svg.mermaid-js g.edgeLabel .label { padding: 0 4px; }
/* arrowheads + edge lines: purple */
svg.mermaid-js marker path {
  fill: #712cf9 !important;
  stroke: #712cf9 !important;
}
svg.mermaid-js path.flowchart-link,
svg.mermaid-js .flowchart-link {
  stroke: #712cf9 !important;
  stroke-width: 1.3px !important;
}
/* inline-code chips: drop the gray slab */
body code {
  background: transparent;
  border: none;
  padding: 0;
}

/* mermaid container: no card */
.mermaid { background: transparent; border-radius: 0; padding: 0; }
img.figure-img, svg { max-width: 100%; height: auto; }

/* edge-label text: keep readable on the page background */
svg.mermaid-js g.edgeLabel foreignObject div,
svg.mermaid-js g.edgeLabel span,
svg.mermaid-js g.edgeLabel p {
  color: #444 !important;
}
svg.mermaid-js g.edgeLabel .edgeLabel,
svg.mermaid-js g.edgeLabel .labelBkg {
  background: transparent !important;
}