/**
 * The network map on another page (Phase 4.1): a facility page's
 * "Connections on the network map" section, and the history hub's preview.
 * The canvas paints itself with the map's own renderer, so this is only the
 * frame round it: the stage, two zoom buttons in its corner, and a caption
 * with Fit and "Open on the full map". Colours from css/colors.css.
 */

.kop-network-embed {
	margin: 0 0 1.25rem;
	padding: 0;
}

.kop-network-embed[hidden] {
	display: none;
}

.kop-network-embed__stage {
	position: relative;
	height: 360px;
	border: 1px solid #d8d2bd;
	border-radius: 8px;
	background: var(--kop-white, #fff);
	overflow: hidden;
}

@media (min-width: 768px) {
	.kop-network-embed__stage {
		height: 440px;
	}
}

.kop-network-embed__canvas {
	display: block;
	width: 100%;
	height: 100%;
	/* A vertical swipe scrolls the page past the map; the pointer handlers
	 * take sideways drags (pan) and two fingers (pinch). */
	touch-action: pan-y;
}

.kop-network-embed__zoom {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.kop-network-embed__zoom .kop-network-embed__button {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1;
}

.kop-network-embed__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: var(--kop-text-primary, #000435);
}

.kop-network-embed__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.kop-network-embed__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.3rem 0.8rem;
	border: 1px solid #d8d2bd;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--kop-midnight-blue, #000435);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 4, 53, 0.1);
}
/* States Kadence would otherwise colour (a:focus midnight, button:focus navy fill). */
.kop-network-embed__button:focus, .kop-network-embed__button:active { background: rgba(255, 255, 255, 0.94); color: var(--kop-midnight-blue, #000435); }


.kop-network-embed__button:hover {
	border-color: var(--kop-teal, #33A7B5);
}

.kop-network-embed__button:focus-visible {
	outline: 2px solid var(--kop-teal, #33A7B5);
	outline-offset: 2px;
}

.kop-network-embed__open {
	border-color: var(--kop-navy-blue, #000080);
	background: var(--kop-navy-blue, #000080);
	color: var(--kop-white, #fff);
}

.kop-network-embed__open:hover,
.kop-network-embed__open:focus-visible {
	background: var(--kop-midnight-blue, #000435);
	color: var(--kop-white, #fff);
}

/* The history hub's preview shows its still until the map has painted. */
.kop-network-embed__still img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #d8d2bd;
	border-radius: 8px;
}

.kop-network-embed__still[hidden],
.kop-network-embed__stage[hidden],
.kop-network-embed__button[hidden] {
	display: none;
}

/* A starter view is a board of its own, laid out for the map's tall stage,
 * so the preview gets more height than a facility's map. */
.kop-network-embed--still .kop-network-embed__stage {
	height: 520px;
}

@media (min-width: 768px) {
	.kop-network-embed--still .kop-network-embed__stage {
		height: 640px;
	}
}