.mermaid .clickable .nodeLabel,
.mermaid .clickable .nodeLabel *,
.mermaid a .nodeLabel,
.mermaid a .nodeLabel *,
.mermaid a text,
.mermaid a tspan {
	color: #0d6efd !important;
	fill: #0d6efd !important;
	text-decoration: underline !important;
}
.mermaid .clickable:hover .nodeLabel,
.mermaid .clickable:hover .nodeLabel *,
.mermaid a:hover .nodeLabel,
.mermaid a:hover .nodeLabel *,
.mermaid a:hover text,
.mermaid a:hover tspan {
	color: #0a58ca !important;
	fill: #0a58ca !important;
}

/* Reusable mermaid node palette (`app`, `step`, `jshook`, `javahook`).
   Defined here as CSS rather than `classDef` lines in a per-diagram snippet
   so diagrams only need the `:::app` etc. annotation — the class lands on
   the rendered node and these rules color it. `!important` is required to
   beat mermaid's ID-scoped per-diagram <style> (theme: base). Selectors
   target every shape element a flowchart node may render as (rect / stadium
   / diamond) and are mermaid-11 specific; revisit on a mermaid upgrade. */
.mermaid g.node.app > .label-container,
.mermaid g.node.app rect,
.mermaid g.node.app polygon,
.mermaid g.node.app path {
	fill: #c3f7c8 !important;
	stroke: #3a414a !important;
}
.mermaid g.node.step > .label-container,
.mermaid g.node.step rect,
.mermaid g.node.step polygon,
.mermaid g.node.step path {
	fill: #cfe4ff !important;
	stroke: #3a414a !important;
}
.mermaid g.node.jshook > .label-container,
.mermaid g.node.jshook rect,
.mermaid g.node.jshook polygon,
.mermaid g.node.jshook path {
	fill: #fff3d9 !important;
	stroke: #3a414a !important;
}
.mermaid g.node.javahook > .label-container,
.mermaid g.node.javahook rect,
.mermaid g.node.javahook polygon,
.mermaid g.node.javahook path {
	fill: #dfe3e8 !important;
	stroke: #3a414a !important;
}

/* Style mermaid hover tooltips so they can hold a small pre-formatted snippet */
.mermaidTooltip {
	max-width: 480px !important;
	padding: 8px 12px !important;
	background: #1f2937 !important;
	color: #f9fafb !important;
	border-radius: 6px !important;
	text-align: left !important;
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
	white-space: pre !important;
	pointer-events: none !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
	z-index: 9999 !important;
}
.mermaidTooltip pre {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: inherit !important;
	font: inherit !important;
	white-space: pre !important;
}

/* Modal opened by clicking a mermaid node that uses openMermaidModal() */
.mermaid-modal-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.mermaid-modal-backdrop.is-open { display: flex; }
.mermaid-modal-content {
	position: relative;
	background: #1f2937;
	color: #f9fafb;
	border-radius: 8px;
	padding: 32px 24px 20px;
	max-width: 800px;
	max-height: 80vh;
	overflow: auto;
	box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.mermaid-modal-close {
	position: absolute;
	top: 6px;
	right: 12px;
	background: none;
	border: none;
	color: #f9fafb;
	font-size: 22px;
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
}
.mermaid-modal-content pre {
	margin: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.5;
	white-space: pre;
}
.mermaid-modal-content code {
	background: transparent !important;
	padding: 0 !important;
	color: inherit !important;
}

/* Tab container for switching between sibling mermaid diagrams */
.mermaid-tabs-nav {
	display: flex;
	gap: 4px;
	margin-bottom: 8px;
	border-bottom: 1px solid #d1d5db;
}
.mermaid-tab {
	background: none;
	border: none;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 14px;
	color: #6b7280;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.mermaid-tab:hover { color: #374151; }
.mermaid-tab.is-active {
	color: #0d6efd;
	border-bottom-color: #0d6efd;
	font-weight: 500;
}
.mermaid-tab-panel.is-hidden { display: none; }
/* Center every mermaid diagram on the page's vertical axis. Without this, mermaid sets
   `width:100%; max-width:<intrinsic>px` and the SVG sits left-aligned, so sibling diagrams
   with different intrinsic widths (e.g. tab panels) appear to shift when switched. */
.mermaid > svg { display: block; margin-inline: auto; }