/**
 * Comptableo Mermaid Studio - public styles.
 * All selectors are scoped to the cmo-mermaid component.
 */

figure.cmo-mermaid {
	--cmo-mermaid-brand: var(--ct-color-action, #2558d9);
	--cmo-mermaid-brand-strong: var(--ct-color-action-hover, #1e49b8);
	--cmo-mermaid-brand-soft: var(--ct-color-action-subtle, #eef3ff);
	--cmo-mermaid-accent: var(--ct-color-accent, #08766d);
	--cmo-mermaid-accent-soft: var(--ct-color-accent-subtle, #eaf6f4);
	--cmo-mermaid-navy: var(--ct-color-text-primary, #181a1f);
	--cmo-mermaid-ink: var(--ct-color-text-primary, #181a1f);
	--cmo-mermaid-muted: var(--ct-color-text-secondary, #5d626c);
	--cmo-mermaid-line: var(--ct-color-border, #e2e4e8);
	--cmo-mermaid-surface: var(--ct-color-surface, #ffffff);
	--cmo-mermaid-surface-soft: var(--ct-color-surface-subtle, #f7f7f8);
	--cmo-mermaid-warning: var(--ct-color-warning, #8a5200);
	--cmo-mermaid-warning-soft: var(--ct-color-warning-surface, #fff6e5);
	--cmo-mermaid-danger: var(--ct-color-danger, #b42318);
	--cmo-mermaid-danger-soft: var(--ct-color-danger-surface, #fff0ee);
	--cmo-mermaid-danger-contrast: var(--ct-color-action-contrast, #ffffff);
	--cmo-mermaid-focus: var(--ct-color-focus, #2558d9);
	--cmo-mermaid-focus-offset: var(--ct-color-focus-offset, #ffffff);
	--cmo-mermaid-grid: rgb(37 88 217 / 8%);
	--cmo-mermaid-node-shadow: rgb(37 88 217 / 13%);
	--cmo-mermaid-radius: 24px;
	--cmo-mermaid-target: var(--ct-size-target-min, 44px);
	--cmo-mermaid-motion: var(--ct-motion-duration-fast, 120ms) var(--ct-motion-easing-standard, ease);
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: clamp(18px, 3vw, 32px);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: clamp(36px, 5vw, 64px) 0;
	padding: clamp(24px, 3.5vw, 38px);
	overflow: hidden;
	color: var(--cmo-mermaid-ink);
	background: var(--cmo-mermaid-surface);
	border: 1px solid color-mix(in srgb, var(--cmo-mermaid-line) 88%, var(--cmo-mermaid-brand));
	border-radius: var(--cmo-mermaid-radius);
	box-shadow:
		0 1px 2px rgb(18 20 24 / 4%),
		0 18px 48px -30px rgb(18 20 24 / 32%);
	font-family: var(--ct-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-optical-sizing: auto;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	line-height: var(--ct-line-height-body, 1.55);
	text-align: left;
}

figure.cmo-mermaid[data-cmo-layout="portrait"] {
	max-inline-size: 56rem;
	margin-inline: auto;
}

figure.cmo-mermaid[data-cmo-layout="radial"] {
	max-inline-size: 68rem;
	margin-inline: auto;
}

figure.cmo-mermaid *,
figure.cmo-mermaid *::before,
figure.cmo-mermaid *::after {
	box-sizing: border-box;
}

figure.cmo-mermaid::before {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: clamp(24px, 3.5vw, 38px);
	inline-size: 72px;
	block-size: 4px;
	content: "";
	background: var(--cmo-mermaid-accent);
	border-radius: 0 0 var(--ct-radius-pill, 999px) var(--ct-radius-pill, 999px);
}

.cmo-mermaid .cmo-mermaid__header {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	align-content: start;
	gap: 9px;
	max-inline-size: 74ch;
	margin: 0 0 clamp(22px, 3vw, 30px);
}

.cmo-mermaid .cmo-mermaid__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ct-space-2, 0.5rem);
	margin: 0;
	color: var(--cmo-mermaid-accent);
	font-family: var(--ct-font-family-heading, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.12em;
	line-height: 1.35;
	text-transform: uppercase;
}

.cmo-mermaid .cmo-mermaid__eyebrow-mark {
	display: inline-block;
	inline-size: 2rem;
	block-size: 0.125rem;
	border-radius: var(--ct-radius-pill, 999px);
	background: var(--cmo-mermaid-accent);
}

.cmo-mermaid .cmo-mermaid__title {
	margin: 0;
	color: var(--cmo-mermaid-navy);
	font-family: var(--ct-font-family-heading, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: clamp(1.38rem, 2.4vw, 1.8rem);
	font-weight: 750;
	letter-spacing: -0.04em;
	line-height: 1.16;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.cmo-mermaid .cmo-mermaid__description {
	max-width: 68ch;
	margin: 0;
	color: var(--cmo-mermaid-muted);
	font-size: clamp(0.94rem, 1.3vw, 1rem);
	letter-spacing: -0.008em;
	line-height: 1.62;
}

figure.cmo-mermaid > .cmo-mermaid__title {
	grid-column: 1 / -1;
	margin-bottom: 6px;
}

figure.cmo-mermaid > .cmo-mermaid__description {
	grid-column: 1 / -1;
	margin-bottom: 18px;
}

.cmo-mermaid .cmo-mermaid__source,
.cmo-mermaid .cmo-mermaid-source,
.cmo-mermaid [data-cmo-mermaid-source],
.cmo-mermaid [data-role="source"][hidden] {
	display: none;
}

.cmo-mermaid .cmo-mermaid__canvas,
.cmo-mermaid [data-cmo-mermaid-canvas],
.cmo-mermaid [data-role="canvas"] {
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	width: 100%;
	min-height: 180px;
	place-items: center;
	padding: clamp(22px, 3.4vw, 42px);
	overflow: auto hidden;
	overscroll-behavior-inline: contain;
	/* ct-exception: the low-contrast dot field gives diagrams a precise editorial canvas without decorative imagery. */
	background-color: var(--cmo-mermaid-surface-soft);
	background-image: radial-gradient(circle, var(--cmo-mermaid-grid) 0.75px, transparent 0.9px);
	background-position: 0 0;
	background-size: 20px 20px;
	border: 1px solid color-mix(in srgb, var(--cmo-mermaid-line) 86%, var(--cmo-mermaid-brand));
	border-radius: 18px;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 64%),
		0 12px 34px -30px rgb(18 20 24 / 30%);
	scrollbar-color: var(--cmo-mermaid-brand) var(--cmo-mermaid-surface-soft);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.cmo-mermaid[data-cmo-state="ready"] :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) {
	min-height: 0;
}

.cmo-mermaid .cmo-mermaid__canvas[hidden],
.cmo-mermaid [data-cmo-mermaid-canvas][hidden],
.cmo-mermaid [data-role="canvas"][hidden] {
	display: none;
}

/* ct-exception: Mermaid emits ID-scoped SVG font rules; the shared product font must win while sizing follows the cascade. */
.cmo-mermaid .cmo-mermaid__canvas svg,
.cmo-mermaid [data-cmo-mermaid-canvas] svg,
.cmo-mermaid [data-role="canvas"] svg {
	display: block;
	width: 100%;
	/* Mermaid injects an inline pixel max-width. The important logical cap
	 * removes that intrinsic clamp so the trusted layout rules below can use
	 * the available canvas, while still preventing horizontal overflow. */
	max-width: 100% !important;
	max-inline-size: 100% !important;
	height: auto;
	min-height: 150px;
	margin: 0 auto;
	overflow: visible;
	font-family: var(--ct-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
	font-optical-sizing: auto;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* ct-exception: Mermaid writes intrinsic SVG dimensions; the scoped layout must control responsive sizing. */
.cmo-mermaid[data-cmo-layout="portrait"] :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg {
	inline-size: min(100%, 46rem) !important;
	block-size: auto !important;
	max-block-size: none;
}

/* ct-exception: Landscape and radial SVGs must override Mermaid's generated inline max-width. */
.cmo-mermaid[data-cmo-layout="landscape"] :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg {
	inline-size: 100% !important;
	block-size: auto !important;
}

.cmo-mermaid[data-cmo-layout="radial"] :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg {
	inline-size: min(100%, 60rem) !important;
	block-size: auto !important;
}

/* ct-exception: Mermaid emits inline typography on generated text nodes; the shared product font must win. */
.cmo-mermaid .cmo-mermaid__canvas svg text,
.cmo-mermaid .cmo-mermaid__canvas svg tspan,
.cmo-mermaid [data-cmo-mermaid-canvas] svg text,
.cmo-mermaid [data-cmo-mermaid-canvas] svg tspan,
.cmo-mermaid [data-role="canvas"] svg text,
.cmo-mermaid [data-role="canvas"] svg tspan {
	font-family: var(--ct-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
	text-rendering: geometricPrecision;
}

.cmo-mermaid .cmo-mermaid__canvas svg .node rect:not([rx]),
.cmo-mermaid .cmo-mermaid__canvas svg .node rect[rx="0"],
.cmo-mermaid [data-cmo-mermaid-canvas] svg .node rect:not([rx]),
.cmo-mermaid [data-cmo-mermaid-canvas] svg .node rect[rx="0"],
.cmo-mermaid [data-role="canvas"] svg .node rect:not([rx]),
.cmo-mermaid [data-role="canvas"] svg .node rect[rx="0"] {
	rx: var(--ct-radius-md, 8px);
	ry: var(--ct-radius-md, 8px);
}

.cmo-mermaid .cmo-mermaid__canvas svg .nodeLabel,
.cmo-mermaid [data-cmo-mermaid-canvas] svg .nodeLabel,
.cmo-mermaid [data-role="canvas"] svg .nodeLabel {
	font-weight: var(--ct-font-weight-semibold, 600);
	letter-spacing: -0.01em;
}

.cmo-mermaid .cmo-mermaid__canvas svg .edgeLabel,
.cmo-mermaid [data-cmo-mermaid-canvas] svg .edgeLabel,
.cmo-mermaid [data-role="canvas"] svg .edgeLabel {
	font-size: 0.75rem;
	font-weight: var(--ct-font-weight-semibold, 600);
}

/* ct-exception: Fixed, trusted theme rules override Mermaid's generated inline presentation attributes. */
.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg .node rect {
	fill: var(--cmo-mermaid-brand-soft) !important;
	stroke: var(--cmo-mermaid-brand) !important;
	stroke-width: 1.35px !important;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg .node polygon {
	fill: var(--cmo-mermaid-warning-soft) !important;
	stroke: var(--cmo-mermaid-warning) !important;
	stroke-width: 1.45px !important;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* ct-exception: Semantic start/end shapes use the trusted Comptableo accent palette. */
.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg .node :where(circle, ellipse, path) {
	fill: var(--cmo-mermaid-accent-soft) !important;
	stroke: var(--cmo-mermaid-accent) !important;
	stroke-width: 1.45px !important;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* ct-exception: the restrained SVG shadow separates semantic nodes from the diagram field at every scale. */
.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg .node > :where(rect, polygon, circle, ellipse, path) {
	filter: drop-shadow(0 5px 7px var(--cmo-mermaid-node-shadow));
}

.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg :where(.flowchart-link, .edge-thickness-normal) {
	stroke: var(--cmo-mermaid-muted) !important;
	stroke-width: 1.75px !important;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* ct-exception: Mermaid marker fills are generated inline and must follow the trusted connector color. */
.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg marker path {
	fill: var(--cmo-mermaid-muted) !important;
	stroke: var(--cmo-mermaid-muted) !important;
}

.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg .nodeLabel {
	color: var(--cmo-mermaid-ink) !important;
	fill: var(--cmo-mermaid-ink) !important;
	font-size: 1rem !important;
	font-weight: 650 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.018em !important;
	overflow: visible;
}

/*
 * Mermaid measures every rounded node before drawing it. Keep labels on the
 * same metrics used by the renderer and let multi-line labels remain visible;
 * the rendering configuration supplies the physical inner padding.
 */
.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg :where(.mindmap-node, .node) :where(.label, .nodeLabel) {
	max-inline-size: 100%;
	overflow-wrap: anywhere;
}

/* Mermaid's circular mind-map root omits the negative label offset used by
 * rectangular nodes. Centre the text on the shape origin so it cannot escape
 * the rounded boundary. The adjacent-sibling selector also protects ellipses. */
.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg .node > :is(circle, ellipse) + .label :where(text, tspan) {
	text-anchor: middle;
}

/* ct-exception: Mermaid writes cluster presentation inline; the trusted product palette must remain authoritative. */
.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg .cluster rect {
	fill: color-mix(in srgb, var(--cmo-mermaid-surface) 74%, var(--cmo-mermaid-brand-soft)) !important;
	stroke: color-mix(in srgb, var(--cmo-mermaid-line) 72%, var(--cmo-mermaid-brand)) !important;
	stroke-dasharray: 2 5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* ct-exception: Mermaid emits inline group typography; hierarchy labels need the product display weight. */
.cmo-mermaid :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"]
) svg :where(.cluster-label, .sectionTitle, .taskText) {
	font-weight: 750 !important;
	letter-spacing: -0.02em;
}

.cmo-mermaid .cmo-mermaid__toolbar,
.cmo-mermaid [data-cmo-mermaid-toolbar] {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	flex-wrap: wrap;
	align-self: start;
	gap: 4px;
	justify-content: flex-end;
	margin: 0;
	padding: 4px;
	background: var(--cmo-mermaid-surface-soft);
	border: 1px solid var(--cmo-mermaid-line);
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
}

.cmo-mermaid .cmo-mermaid__toolbar[hidden],
.cmo-mermaid [data-cmo-mermaid-toolbar][hidden] {
	display: none;
}

.cmo-mermaid .cmo-mermaid__export {
	display: inline-flex;
	max-width: 100%;
	min-width: var(--cmo-mermaid-target);
	min-height: var(--cmo-mermaid-target);
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	color: var(--cmo-mermaid-navy);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	box-shadow: none;
	font-family: var(--ct-font-family-heading, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: var(--ct-font-size-sm, 0.875rem);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--cmo-mermaid-motion);
	-webkit-appearance: none;
	appearance: none;
}

.cmo-mermaid .cmo-mermaid__export-label {
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: left;
}

.cmo-mermaid .cmo-mermaid__export:hover {
	color: var(--cmo-mermaid-brand-strong);
	background: var(--cmo-mermaid-surface);
	border-color: color-mix(in srgb, var(--cmo-mermaid-line) 70%, var(--cmo-mermaid-brand));
	box-shadow: var(--ct-shadow-xs, 0 1px 2px rgb(18 20 24 / 4%));
	transform: translateY(-1px);
}

.cmo-mermaid .cmo-mermaid__export:focus-visible {
	box-shadow: 0 0 0 2px var(--cmo-mermaid-focus-offset);
	outline: var(--ct-border-width-strong, 2px) solid var(--cmo-mermaid-focus);
	outline-offset: 2px;
}

.cmo-mermaid .cmo-mermaid__export:disabled {
	color: var(--cmo-mermaid-muted);
	background: var(--cmo-mermaid-surface-soft);
	box-shadow: none;
	cursor: wait;
	opacity: 0.7;
	transform: none;
}

.cmo-mermaid .cmo-mermaid__export-icon {
	display: grid;
	width: 22px;
	height: 22px;
	place-items: center;
	color: var(--cmo-mermaid-brand-strong);
	background: var(--cmo-mermaid-brand-soft);
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 900;
	line-height: 1;
}

.cmo-mermaid .cmo-mermaid__export:hover .cmo-mermaid__export-icon {
	color: var(--ct-color-action-contrast, #ffffff);
	background: var(--cmo-mermaid-brand);
}

.cmo-mermaid .cmo-mermaid__error {
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	gap: 7px;
	margin: 8px 0 0;
	padding: 16px 18px 16px 52px;
	color: var(--cmo-mermaid-danger);
	background: var(--cmo-mermaid-danger-soft);
	border: 1px solid var(--cmo-mermaid-danger);
	border: 1px solid color-mix(in srgb, var(--cmo-mermaid-danger) 24%, transparent);
	border-inline-start: 4px solid var(--cmo-mermaid-danger);
	border-radius: var(--ct-radius-xl, 14px);
}

.cmo-mermaid .cmo-mermaid__error::before {
	position: absolute;
	margin: 1px 0 0 -34px;
	content: "!";
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	color: var(--cmo-mermaid-danger-contrast);
	background: var(--cmo-mermaid-danger);
	border-radius: 999px;
	font-family: var(--ct-font-family-heading, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-weight: 700;
	line-height: 1;
}

.cmo-mermaid .cmo-mermaid__error[hidden] {
	display: none;
}

.cmo-mermaid .cmo-mermaid__error:focus-visible {
	box-shadow: 0 0 0 2px var(--cmo-mermaid-focus-offset);
	outline: var(--ct-border-width-strong, 2px) solid var(--cmo-mermaid-focus);
	outline-offset: 2px;
}

.cmo-mermaid .cmo-mermaid__error-title {
	display: block;
	font-family: var(--ct-font-family-heading, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.25;
}

.cmo-mermaid .cmo-mermaid__error-detail {
	display: block;
	font-size: 0.9rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.cmo-mermaid .cmo-mermaid__text-version {
	grid-column: 1 / -1;
	margin: 18px 0 0;
	padding: 0;
	color: var(--cmo-mermaid-muted);
	background: var(--cmo-mermaid-surface);
	border: 1px solid var(--cmo-mermaid-line);
	border-radius: 14px;
	box-shadow: 0 8px 24px -24px rgb(18 20 24 / 42%);
	font-size: 0.9rem;
}

.cmo-mermaid .cmo-mermaid__text-version summary {
	display: flex;
	min-height: var(--cmo-mermaid-target);
	align-items: center;
	gap: 9px;
	padding: 10px 14px;
	color: var(--cmo-mermaid-navy);
	font-family: var(--ct-font-family-heading, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 0.86rem;
	font-weight: 750;
	letter-spacing: -0.012em;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.cmo-mermaid .cmo-mermaid__text-version summary::-webkit-details-marker {
	display: none;
}

.cmo-mermaid .cmo-mermaid__text-version summary::before {
	display: grid;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	place-items: center;
	content: "+";
	color: var(--cmo-mermaid-brand-strong);
	background: var(--cmo-mermaid-brand-soft);
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1;
}

.cmo-mermaid .cmo-mermaid__text-version[open] summary::before {
	content: "−";
}

.cmo-mermaid .cmo-mermaid__text-version summary:focus-visible {
	box-shadow: 0 0 0 2px var(--cmo-mermaid-focus-offset);
	outline: var(--ct-border-width-strong, 2px) solid var(--cmo-mermaid-focus);
	outline-offset: 2px;
	border-radius: var(--ct-radius-lg, 10px);
}

.cmo-mermaid .cmo-mermaid__alternative {
	margin: 0;
	padding: 15px 17px;
	color: var(--cmo-mermaid-muted);
	background: var(--cmo-mermaid-surface-soft);
	border-top: 1px solid var(--cmo-mermaid-line);
	border-left: 3px solid var(--cmo-mermaid-accent);
	border-radius: 0 0 10px 10px;
	font-size: 0.9rem;
}

.cmo-mermaid .cmo-mermaid__alternative-label {
	color: var(--cmo-mermaid-navy);
	font-family: var(--ct-font-family-heading, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-weight: 700;
}

.cmo-mermaid figcaption,
.cmo-mermaid .cmo-mermaid__caption {
	grid-column: 1 / -1;
	max-width: 80ch;
	margin: 16px auto 0;
	color: var(--cmo-mermaid-muted);
	font-size: 0.82rem;
	font-style: normal;
	letter-spacing: 0.005em;
	line-height: 1.55;
	overflow-wrap: anywhere;
	text-align: center;
}

.cmo-mermaid .cmo-mermaid__editor-warning {
	grid-column: 1 / -1;
	margin: 14px 0 0;
	padding: 11px 14px;
	color: var(--cmo-mermaid-warning);
	background: var(--cmo-mermaid-warning-soft);
	border: 1px solid var(--cmo-mermaid-warning);
	border-radius: 10px;
	font-size: 0.83rem;
	font-weight: 700;
	line-height: 1.45;
}

/* ct-exception: Accessibility utility must remain visually hidden even when host themes style generic live-region elements. */
.cmo-mermaid .cmo-mermaid__visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* ct-exception: Layered gradients form the lightweight loading skeleton and animate only background paint. */
.cmo-mermaid[data-cmo-state="loading"] .cmo-mermaid__canvas::after,
.cmo-mermaid[data-cmo-state="loading"] [data-cmo-mermaid-canvas]::after,
.cmo-mermaid[data-cmo-state="loading"] [data-role="canvas"]::after {
	position: absolute;
	inset: 0;
	content: "";
	background:
		linear-gradient(
			105deg,
			transparent 35%,
			rgba(255, 255, 255, 0.72) 50%,
			transparent 65%
		),
		linear-gradient(var(--cmo-mermaid-brand-soft), var(--cmo-mermaid-brand-soft)) 12% 25% / 42% 18px no-repeat,
		linear-gradient(var(--cmo-mermaid-line), var(--cmo-mermaid-line)) 12% 48% / 76% 12px no-repeat,
		linear-gradient(var(--cmo-mermaid-line), var(--cmo-mermaid-line)) 12% 68% / 58% 12px no-repeat,
		var(--cmo-mermaid-surface-soft);
	background-size:
		220% 100%,
		42% 18px,
		76% 12px,
		58% 12px,
		auto;
	animation: cmo-mermaid-loading 1.15s ease-in-out infinite;
}

@keyframes cmo-mermaid-loading {
	from {
		background-position:
			150% 0,
			12% 25%,
			12% 48%,
			12% 68%,
			0 0;
	}

	to {
		background-position:
			-100% 0,
			12% 25%,
			12% 48%,
			12% 68%,
			0 0;
	}
}

figure.cmo-mermaid[data-cmo-resolved-theme="dark"],
figure.cmo-mermaid[data-cmo-theme="dark"] {
	--cmo-mermaid-brand: #7aa2ff;
	--cmo-mermaid-brand-strong: #96b5ff;
	--cmo-mermaid-brand-soft: #1c3268;
	--cmo-mermaid-accent: #5fc9bd;
	--cmo-mermaid-accent-soft: #153e3a;
	--cmo-mermaid-navy: #f8fafc;
	--cmo-mermaid-ink: #f8fafc;
	--cmo-mermaid-muted: #c4cbd5;
	--cmo-mermaid-line: #303b4e;
	--cmo-mermaid-surface: #111827;
	--cmo-mermaid-surface-soft: #172033;
	--cmo-mermaid-warning: #efbd69;
	--cmo-mermaid-warning-soft: #422f14;
	--cmo-mermaid-danger: #ff8e85;
	--cmo-mermaid-danger-soft: #4a211f;
	--cmo-mermaid-danger-contrast: #0d1422;
	--cmo-mermaid-focus: #96b5ff;
	--cmo-mermaid-grid: rgb(122 162 255 / 10%);
	--cmo-mermaid-node-shadow: rgb(0 0 0 / 30%);
	background: var(--cmo-mermaid-surface);
}

figure.cmo-mermaid[data-cmo-resolved-theme="dark"] :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"],
	.cmo-mermaid__toolbar,
	[data-cmo-mermaid-toolbar]
),
figure.cmo-mermaid[data-cmo-theme="dark"] :where(
	.cmo-mermaid__canvas,
	[data-cmo-mermaid-canvas],
	[data-role="canvas"],
	.cmo-mermaid__toolbar,
	[data-cmo-mermaid-toolbar]
) {
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

figure.cmo-mermaid[data-cmo-resolved-theme="neutral"],
figure.cmo-mermaid[data-cmo-theme="neutral"] {
	--cmo-mermaid-brand: #4b5563;
	--cmo-mermaid-brand-strong: #374151;
	--cmo-mermaid-brand-soft: #f0f1f3;
	--cmo-mermaid-accent: #5d626c;
	--cmo-mermaid-accent-soft: #f0f1f3;
	--cmo-mermaid-navy: #181a1f;
	--cmo-mermaid-ink: #181a1f;
	--cmo-mermaid-muted: #5d626c;
	--cmo-mermaid-line: #e2e4e8;
	--cmo-mermaid-surface: #ffffff;
	--cmo-mermaid-surface-soft: #f7f7f8;
	--cmo-mermaid-grid: rgb(75 85 99 / 8%);
	--cmo-mermaid-node-shadow: rgb(75 85 99 / 12%);
	background: var(--cmo-mermaid-surface);
}

@media (prefers-color-scheme: dark) {
	figure.cmo-mermaid[data-cmo-theme="auto"]:not([data-cmo-resolved-theme="light"]) {
		--cmo-mermaid-brand: #7aa2ff;
		--cmo-mermaid-brand-strong: #96b5ff;
		--cmo-mermaid-brand-soft: #1c3268;
		--cmo-mermaid-accent: #5fc9bd;
		--cmo-mermaid-accent-soft: #153e3a;
		--cmo-mermaid-navy: #f8fafc;
		--cmo-mermaid-ink: #f8fafc;
		--cmo-mermaid-muted: #c4cbd5;
		--cmo-mermaid-line: #303b4e;
		--cmo-mermaid-surface: #111827;
		--cmo-mermaid-surface-soft: #172033;
		--cmo-mermaid-focus: #96b5ff;
		--cmo-mermaid-grid: rgb(122 162 255 / 10%);
		--cmo-mermaid-node-shadow: rgb(0 0 0 / 30%);
		background: var(--cmo-mermaid-surface);
	}
}

@media (max-width: 640px) {
	figure.cmo-mermaid {
		--cmo-mermaid-radius: 18px;
		grid-template-columns: minmax(0, 1fr);
		margin: 28px 0;
		padding: 21px 16px 18px;
		border-radius: var(--cmo-mermaid-radius);
		box-shadow: 0 12px 34px -30px rgb(18 20 24 / 36%);
	}

	figure.cmo-mermaid::before {
		inset-inline-start: 16px;
		inline-size: 52px;
	}

	.cmo-mermaid .cmo-mermaid__header {
		grid-column: 1;
		grid-row: auto;
		margin-bottom: 18px;
		padding-right: 0;
	}

	.cmo-mermaid .cmo-mermaid__title {
		font-size: clamp(1.24rem, 6vw, 1.45rem);
	}

	.cmo-mermaid .cmo-mermaid__canvas,
	.cmo-mermaid [data-cmo-mermaid-canvas],
	.cmo-mermaid [data-role="canvas"] {
		margin-inline: -4px;
		padding: 14px 10px;
		width: calc(100% + 8px);
		background-size: 16px 16px;
		border-radius: 14px;
	}

	/* Keep Mermaid's 16px label system readable. Wide diagrams remain inside
	 * the rounded canvas and use its native horizontal scrolling instead of
	 * being compressed to illegible text at phone widths. */
	.cmo-mermaid :where(
		.cmo-mermaid__canvas,
		[data-cmo-mermaid-canvas],
		[data-role="canvas"]
	) svg {
		min-inline-size: clamp(30rem, var(--cmo-mermaid-natural-inline-size, 30rem), 100rem) !important;
	}

	.cmo-mermaid :where(
		.cmo-mermaid__canvas,
		[data-cmo-mermaid-canvas],
		[data-role="canvas"]
	)[data-cmo-scrollable="true"]:focus-visible {
		box-shadow: 0 0 0 2px var(--cmo-mermaid-focus-offset);
		outline: var(--ct-border-width-strong, 2px) solid var(--cmo-mermaid-focus);
		outline-offset: 2px;
	}

	.cmo-mermaid .cmo-mermaid__toolbar,
	.cmo-mermaid [data-cmo-mermaid-toolbar] {
		display: grid;
		grid-column: 1;
		grid-row: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: -4px 0 16px;
	}

	.cmo-mermaid .cmo-mermaid__export {
		width: 100%;
		padding-inline: 10px;
	}

	.cmo-mermaid .cmo-mermaid__error {
		padding: 14px 14px 14px 48px;
	}

	.cmo-mermaid figcaption,
	.cmo-mermaid .cmo-mermaid__caption {
		margin-inline: 2px;
		text-align: left;
	}
}

@media (max-width: 380px) {
	.cmo-mermaid .cmo-mermaid__toolbar,
	.cmo-mermaid [data-cmo-mermaid-toolbar] {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cmo-mermaid .cmo-mermaid__export {
		transition: none;
	}

	.cmo-mermaid .cmo-mermaid__export:hover {
		transform: none;
	}

	.cmo-mermaid[data-cmo-state="loading"] .cmo-mermaid__canvas::after,
	.cmo-mermaid[data-cmo-state="loading"] [data-cmo-mermaid-canvas]::after,
	.cmo-mermaid[data-cmo-state="loading"] [data-role="canvas"]::after {
		animation: none;
	}
}

@media (forced-colors: active) {
	figure.cmo-mermaid {
		border: 2px solid CanvasText;
		box-shadow: none;
		forced-color-adjust: auto;
	}

	.cmo-mermaid .cmo-mermaid__canvas,
	.cmo-mermaid [data-cmo-mermaid-canvas],
	.cmo-mermaid [data-role="canvas"],
	.cmo-mermaid .cmo-mermaid__export,
	.cmo-mermaid .cmo-mermaid__error {
		border: 1px solid CanvasText;
	}

	.cmo-mermaid .cmo-mermaid__export:focus-visible,
	.cmo-mermaid .cmo-mermaid__error:focus-visible {
		box-shadow: none;
		outline: 3px solid Highlight;
	}
}

@media print {
	figure.cmo-mermaid,
	figure.cmo-mermaid[data-cmo-resolved-theme="dark"],
	figure.cmo-mermaid[data-cmo-theme="dark"] {
		--cmo-mermaid-navy: #000000;
		--cmo-mermaid-ink: #000000;
		--cmo-mermaid-muted: #333333;
		--cmo-mermaid-line: #777777;
		--cmo-mermaid-surface: #ffffff;
		--cmo-mermaid-surface-soft: #ffffff;
		max-width: none;
		margin: 12mm 0;
		padding: 7mm;
		overflow: visible;
		color: #000000;
		background: #ffffff;
		border: 1pt solid #888888;
		border-radius: 0;
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	figure.cmo-mermaid::before,
	.cmo-mermaid .cmo-mermaid__toolbar,
	.cmo-mermaid [data-cmo-mermaid-toolbar],
	.cmo-mermaid .cmo-mermaid__live {
		display: none;
	}

	.cmo-mermaid .cmo-mermaid__canvas,
	.cmo-mermaid [data-cmo-mermaid-canvas],
	.cmo-mermaid [data-role="canvas"] {
		min-height: 0;
		padding: 0;
		overflow: visible;
		background: #ffffff;
		border: 0;
	}

	.cmo-mermaid .cmo-mermaid__canvas svg,
	.cmo-mermaid [data-cmo-mermaid-canvas] svg,
	.cmo-mermaid [data-role="canvas"] svg {
		min-inline-size: 0 !important;
		max-height: 190mm;
	}
}