/* Vome — diagram wrapper chrome.
 *
 * Paired with portal/static/js/diagram.js. Everything here is scoped to
 * .vome-diagram so it cannot leak into the rest of an article.
 *
 * Colour carries meaning: outbound and inbound are different hues so a
 * duplex link reads as two-way at a glance rather than needing a legend.
 */

.vome-diagram {
	--vd-out: #1f9d76;   /* leaving home / uploading */
	--vd-in:  #3f7fd0;   /* arriving home / downloading */
	--vd-line: currentColor;

	margin: 1.5rem 0;
	padding: 1rem;
	background: var(--bs-tertiary-bg, #f5f6f7);
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: .5rem;
}

.vome-diagram svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	overflow: visible;
}

.vome-diagram figcaption {
	margin-top: .75rem;
	font-size: .875rem;
	color: var(--bs-secondary-color, #6c757d);
	line-height: 1.5;
}

/* Enlarging is a real action, so it gets a real affordance. */
.vome-diagram--interactive {
	cursor: zoom-in;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.vome-diagram--interactive:hover,
.vome-diagram--interactive:focus-visible {
	border-color: var(--vd-out);
	box-shadow: 0 0 0 3px rgba(31, 157, 118, .18);
	outline: none;
}

/* ---- moving dots ---------------------------------------------------- */

.vome-diagram-dot { fill: var(--vd-out); }
.vome-diagram-dot--in { fill: var(--vd-in); }

/* prefers-reduced-motion: no dots, so say the same thing with arrows. */
.vome-diagram--static-flow [data-flow] {
	marker-end: url(#vd-arrow);
	stroke-dasharray: 6 4;
}

/* ---- overlay -------------------------------------------------------- */

.vome-diagram-overlay {
	position: fixed;
	inset: 0;
	z-index: 1080;
	background: rgba(10, 12, 14, .82);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	cursor: zoom-out;
}

.vome-diagram-overlay__inner {
	background: var(--bs-body-bg, #fff);
	color: var(--bs-body-color, #212529);
	border-radius: .6rem;
	padding: clamp(1rem, 3vw, 2rem);
	max-width: min(1100px, 96vw);
	max-height: 92vh;
	overflow: auto;
	cursor: default;
}

.vome-diagram-overlay__inner svg {
	width: 100%;
	height: auto;
	max-height: 78vh;
}

.vome-diagram-overlay__caption {
	margin: 1rem 0 0;
	font-size: .95rem;
	color: var(--bs-secondary-color, #6c757d);
}

.vome-diagram-overlay__close {
	position: absolute;
	top: .75rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.75rem;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	cursor: pointer;
}
.vome-diagram-overlay__close:hover,
.vome-diagram-overlay__close:focus-visible {
	background: rgba(255, 255, 255, .15);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.vome-diagram--interactive { transition: none; }
}