.kvo-plot-map {
	--kvo-map-ink: #f2ecdc;
	--kvo-map-muted: rgba(242, 236, 220, .72);
	--kvo-map-brass: #d2ad66;
	--kvo-map-panel: #17382f;
	max-width: 1200px;
	margin: 2rem auto;
	color: var(--kvo-map-ink);
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

.kvo-plot-map *,
.kvo-plot-map *::before,
.kvo-plot-map *::after {
	box-sizing: border-box;
}

.kvo-plot-map__heading {
	margin-bottom: 1rem;
}

.kvo-plot-map__eyebrow {
	margin: 0 0 .45rem;
	color: var(--kvo-map-brass);
	font: 700 .68rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.kvo-plot-map__heading h2 {
	margin: 0;
	color: inherit;
	font: 400 clamp(1.8rem, 4vw, 3.25rem)/1.04 Georgia, "Times New Roman", serif;
	letter-spacing: -.035em;
}

.kvo-plot-map__canvas {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 360px;
	aspect-ratio: 16 / 9;
	border: 1px solid rgba(210, 173, 102, .38);
	background: #183c31;
	box-shadow: 0 20px 55px rgba(7, 22, 18, .24);
}

.kvo-plot-map__terrain,
.kvo-plot-map__markers {
	position: absolute;
	inset: 0;
}

.kvo-plot-map__terrain {
	overflow: hidden;
	background-color: #214c3c;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.kvo-plot-map__terrain img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.kvo-plot-map__terrain::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 24, 19, .06), rgba(6, 24, 19, .38));
	content: "";
}

.kvo-plot-map__markers {
	pointer-events: none;
}

.kvo-plot-map__marker {
	position: absolute;
	z-index: 1;
	width: min(30%, 230px);
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

.kvo-plot-map__marker[open] {
	z-index: 5;
}

.kvo-plot-map__marker > summary {
	display: flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: .55rem;
	padding: .42rem .68rem .42rem .45rem;
	border: 1px solid rgba(242, 236, 220, .72);
	border-radius: 999px;
	background: rgba(13, 42, 33, .92);
	color: var(--kvo-map-ink);
	cursor: pointer;
	list-style: none;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .28);
}

.kvo-plot-map__marker > summary::-webkit-details-marker {
	display: none;
}

.kvo-plot-map__marker > summary:focus-visible {
	outline: 3px solid #f2d28f;
	outline-offset: 3px;
}

.kvo-plot-map__marker-dot {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	border: 2px solid #fbf3df;
	border-radius: 50%;
	background: var(--kvo-map-brass);
	box-shadow: 0 0 0 4px rgba(210, 173, 102, .28);
}

.kvo-plot-map__marker--plot .kvo-plot-map__marker-dot {
	width: 17px;
	height: 17px;
	flex-basis: 17px;
	background: #f3d48e;
}

.kvo-plot-map__marker-label {
	overflow: hidden;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kvo-plot-map__popup {
	position: absolute;
	top: calc(100% + .55rem);
	left: 0;
	width: min(280px, 76vw);
	padding: 1rem;
	border: 1px solid rgba(210, 173, 102, .5);
	background: var(--kvo-map-panel);
	color: var(--kvo-map-ink);
	box-shadow: 0 12px 35px rgba(0, 0, 0, .38);
	font-size: .88rem;
	line-height: 1.5;
}

.kvo-plot-map__marker:nth-child(n + 4) .kvo-plot-map__popup {
	right: 0;
	left: auto;
}

.kvo-plot-map__popup strong {
	display: block;
	font: 400 1.2rem/1.15 Georgia, "Times New Roman", serif;
}

.kvo-plot-map__popup p {
	margin: .5rem 0 0;
	color: var(--kvo-map-muted);
}

.kvo-plot-map__popup .kvo-plot-map__popup-type,
.kvo-plot-map__popup .kvo-plot-map__popup-status {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.kvo-plot-map__popup a,
.kvo-plot-map__json-link {
	display: inline-block;
	margin-top: .8rem;
	color: var(--kvo-map-brass);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.kvo-plot-map__layers {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .7rem 1.2rem;
	padding: .9rem 0;
	border-bottom: 1px solid rgba(210, 173, 102, .3);
}

.kvo-plot-map__layers details {
	flex: 1 1 220px;
	color: var(--kvo-map-muted);
	font-size: .82rem;
	line-height: 1.45;
}

.kvo-plot-map__layers summary {
	width: fit-content;
	color: var(--kvo-map-ink);
	cursor: pointer;
	font-weight: 700;
}

.kvo-plot-map__layers summary:focus-visible,
.kvo-plot-map__json-link:focus-visible {
	outline: 2px solid var(--kvo-map-brass);
	outline-offset: 3px;
}

.kvo-plot-map__layers p {
	margin: .5rem 0 0;
}

.kvo-plot-map__json-link {
	margin: .1rem 0 0 auto;
	font-size: .82rem;
}

.kvo-plot-map__preview-note {
	display: inline-block;
	margin: 0 0 .75rem;
	padding: .35rem .65rem;
	border: 1px solid rgba(221, 185, 113, .55);
	border-radius: 999px;
	color: #f0cf8b;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.kvo-plot-map__unavailable {
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(210, 173, 102, .38);
	border-radius: 12px;
	background: #183c31;
	color: #f0eee5;
}

.kvo-plot-map__unavailable p {
	margin: .45rem 0 0;
	color: rgba(240, 238, 229, .78);
}

@media (max-width: 640px) {
	.kvo-plot-map__canvas {
		min-height: 420px;
		aspect-ratio: 1 / 1.08;
	}

	.kvo-plot-map__marker {
		width: min(52%, 200px);
	}

	.kvo-plot-map__marker-label {
		font-size: .68rem;
	}

	.kvo-plot-map__layers {
		display: block;
	}

	.kvo-plot-map__layers details {
		margin: .7rem 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.kvo-plot-map__marker > summary {
		transition: transform .16s ease, background-color .16s ease;
	}

	.kvo-plot-map__marker > summary:hover {
		transform: translateY(-2px);
		background: #24503f;
	}
}