/*
 * The places map. The page works without it: every place and move is also in
 * the list below the map.
 */

.vam-map {
	position: relative;
	height: 30rem;
	max-height: 70vh;
	overflow: hidden;
	background: #eef1ec;
	border: 1px solid #d9d2c5;
	border-radius: 6px;
	touch-action: none;
	user-select: none;
	cursor: grab;
	outline-offset: 2px;
}

.vam-map.is-dragging {
	cursor: grabbing;
}

.vam-map:not(.vam-map--ready) {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 4rem;
	cursor: auto;
}

.vam-map__noscript {
	margin: 1rem;
}

.vam-map__tiles,
.vam-map__pins,
.vam-map__lines {
	position: absolute;
	inset: 0;
}

.vam-map__lines {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.vam-map__tile {
	position: absolute;
	width: 256px;
	height: 256px;
	max-width: none;
}

.vam-map__grid line {
	stroke: #c9cfc4;
	stroke-width: 1;
}

.vam-move {
	fill: none;
	stroke: #8a3b12;
	stroke-width: 2.5;
	opacity: .85;
}

.vam-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 .35rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #7a4a12;
	color: #fff;
	font: 600 .75rem/1 system-ui, sans-serif;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	cursor: pointer;
}

/* A town pin always sits above a region it lies in. */
.vam-pin--settlement {
	z-index: 2;
}

/* An area is drawn as a region, never as a point: "somewhere in here". */
.vam-pin--area {
	z-index: 1;
	width: 4rem;
	height: 4rem;
	padding: 0;
	border: 2px dashed #7a4a12;
	background: rgba(122, 74, 18, .12);
	box-shadow: none;
}

/* On the region's lower edge, so a town at its centre never hides it. */
.vam-pin__count {
	transform: translateY(2rem);
	padding: .1rem .35rem;
	border-radius: 999px;
	background: #7a4a12;
	color: #fff;
}

.vam-pin:focus-visible,
.vam-map__btn:focus-visible {
	outline: 3px solid #1d5fa8;
	outline-offset: 2px;
}

.vam-map__controls {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.vam-map__btn {
	width: 2.1rem;
	height: 2.1rem;
	border: 1px solid #bfb5a5;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.vam-map__popup {
	position: absolute;
	z-index: 3;
	width: min(20rem, calc(100% - 1rem));
	max-height: calc(100% - 1rem);
	overflow: auto;
	padding: .75rem 1rem;
	background: #fff;
	border: 1px solid #cbbfa9;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
	cursor: auto;
	user-select: text;
}

.vam-map__popup h3 {
	margin: 0 1.5rem .4rem 0;
	font-size: 1.05rem;
}

.vam-map__popup p {
	margin: 0 0 .4rem;
	font-size: .9rem;
}

.vam-map__area {
	color: #6b5f52;
	font-style: italic;
}

.vam-map__close {
	position: absolute;
	top: .25rem;
	right: .4rem;
	border: 0;
	background: none;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.vam-map-layers {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	margin: 0 0 .5rem;
	padding: 0;
	border: 0;
}

.vam-map-layers legend {
	float: left;
	margin-right: .5rem;
	font-weight: 600;
	font-size: 1rem;
}

.vam-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}

.vam-key-pin,
.vam-key-area,
.vam-key-move {
	display: inline-block;
	vertical-align: middle;
}

.vam-key-pin {
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	background: #7a4a12;
}

.vam-key-area {
	width: 1.1rem;
	height: 1.1rem;
	border: 2px dashed #7a4a12;
	border-radius: 50%;
	background: rgba(122, 74, 18, .12);
}

.vam-key-move {
	width: 1.8rem;
	border-top: 3px solid #8a3b12;
}

.vam-map-credit {
	margin: .4rem 0 0;
	font-size: .8rem;
	color: #6b5f52;
}

.vamshavali-places__rules {
	padding-left: 1.2rem;
}

.vam-place {
	padding: .5rem 0;
	border-top: 1px solid #eee6d8;
}

.vam-place:target {
	background: #fff8e6;
}

.vam-place h3 {
	margin: 0 0 .25rem;
	font-size: 1.1rem;
}

.vam-place__facts {
	margin: 0 0 .25rem;
}

.vam-moves li {
	margin-bottom: .4rem;
}

.vamshavali-places .vamshavali-muted {
	color: #6b5f52;
}

.vam-place__more summary {
	cursor: pointer;
	color: #7a4a12;
}

.vam-pin__label {
	position: absolute;
	transform: translate(.9rem, -50%);
	padding: 0 .25rem;
	background: rgba(255, 255, 255, .8);
	border-radius: 3px;
	font: .75rem/1.3 system-ui, sans-serif;
	color: #3d3226;
	white-space: nowrap;
	pointer-events: none;
}