/* Mermaid zoom: hover magnifier + themed fullscreen modal */

/* Zoomable diagram hint */
.mermaid-zoomable {
	cursor: zoom-in;
	position: relative;
	border-radius: 0.5rem;
	transition: background-color 0.15s ease;
}

.mermaid-zoomable:hover,
.mermaid-zoomable:focus-visible {
	background-color: var(--fg-muted-1);
	outline: none;
}

/* Magnifying glass icon shown on hover/focus */
.mermaid-zoomable::after {
	content: "";
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 1.5rem;
	height: 1.5rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	background-color: var(--accent-color);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3Ccircle cx='11' cy='11' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3Ccircle cx='11' cy='11' r='3'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.mermaid-zoomable:hover::after,
.mermaid-zoomable:focus-visible::after {
	opacity: 1;
}

/* Modal: ~100px border of blurred backdrop on all sides */
#mermaid-zoom-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
}

#mermaid-zoom-modal.open {
	display: block;
}

.mermaid-zoom-backdrop {
	position: absolute;
	inset: 0;
	background: var(--bg-overlay, rgb(0 0 0 / 0.85));
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.mermaid-zoom-inner {
	position: absolute;
	/* ~100px breathing room all round; shrinks on small screens */
	inset: clamp(1rem, 6vmin, 100px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fg-muted-3);
	border-radius: 0.75rem;
	background: var(--bg-color);
	overflow: hidden;
}

.mermaid-zoom-figure {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.mermaid-zoom-figure svg {
	/* Override Mermaid's inline max-width so the diagram fills the modal */
	max-width: 100% !important;
	max-height: 100%;
	width: auto;
	height: auto;
}

.mermaid-zoom-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fg-muted-3);
	border-radius: 50%;
	background: var(--fg-muted-1);
	color: var(--fg-color);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.mermaid-zoom-close:hover,
.mermaid-zoom-close:focus-visible {
	background: var(--accent-color);
	color: var(--fg-contrast);
	outline: none;
}