/*
 * Tailscale-inspired styling for Mermaid diagrams on the CSE docsite.
 * Works together with the theme set in assets/js/mermaid-init.js.
 * Kept as plain CSS (loaded from _includes/head.html) so it needs no SCSS build.
 */

.mermaid {
  font-family: "Inter UI", ui-sans-serif, system-ui, sans-serif;
  /* Diagrams render at natural (bigger) size; scroll if wider than the column */
  overflow-x: auto;
  text-align: center;
}
.mermaid svg {
  height: auto;
}

/* Rounded corners + thin borders on nodes (flowcharts) */
.mermaid .node rect,
.mermaid .node polygon {
  rx: 10px;
  ry: 10px;
  stroke-width: 1.5px;
}

/* Inline icons (e.g. CSE cloud) inside node labels — keep small */
.mermaid .node img,
.mermaid .nodeLabel img {
  display: inline-block !important;
  width: 18px !important;
  height: auto !important;
  vertical-align: -3px;
  margin-right: 5px;
}
/* The CSE cloud reads as a brand mark — render it a little larger */
.mermaid .node img[src*="cse-icon"] {
  width: 24px !important;
  vertical-align: -7px;
}

/* Node label typography */
.mermaid .nodeLabel,
.mermaid .node .label,
.mermaid .node span,
.mermaid .node p {
  font-family: "Inter UI", ui-sans-serif, system-ui, sans-serif;
  color: #1F2933;
}

/* Edge (Yes/No) labels as opaque WHITE pills so the connector line does not
   show through the text. The outer wrappers stay transparent; the inner span
   carries the solid white pill. */
.mermaid .edgeLabel,
.mermaid .edgeLabel .label,
.mermaid .edgeLabel .labelBkg {
  background: transparent !important;
}
.mermaid .edgeLabel foreignObject {
  overflow: visible;
}
.mermaid .edgeLabel foreignObject span {
  display: inline-block;
  background: #E8ECF2 !important;   /* solid muted pill, opaque over the line */
  color: #1F2933;
  font-size: 12px;
  border: none;
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Subgraph titles as muted pills (matching the edge-label pills) */
.mermaid .cluster-label foreignObject {
  overflow: visible;
}
.mermaid .cluster-label .nodeLabel {
  display: inline-block;
  background: #E8ECF2;
  color: #1F2933;
  border-radius: 999px;
  padding: 2px 12px;
}
.mermaid .cluster-label p {
  margin: 0;
}

/* Thin connectors */
.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke-width: 1.5px;
}

/* Sequence-diagram participants: rounded + thin to match the flowchart nodes */
.mermaid .actor {
  stroke-width: 1.5px;
  rx: 8px;
  ry: 8px;
}