/**
 * Visitor Map — front-end styles.
 *
 * Colours are exposed as custom properties so a theme can override any of
 * them without touching this file. The JS renderer reads them at draw time.
 */

.vmap,
.vmap-badge {
	container-type: inline-size;

	/* Default: white. Land is a pale grey-blue, dots carry all the colour. */
	--vmap-ocean: #ffffff;
	--vmap-land: #e6ebf0;
	--vmap-coast: #c2ccd7;
	--vmap-grid: rgba( 15, 23, 36, 0.055 );
	--vmap-fresh: #ffc400;
	--vmap-week: #e09b00;
	--vmap-old: #a66f00;
	--vmap-ink: #16202c;
	--vmap-muted: #5f7185;
	--vmap-edge: rgba( 15, 23, 36, 0.14 );
	--vmap-radius: 10px;

	color: var( --vmap-ink );
	font-size: 14px;
	line-height: 1.45;
}

/* Explicit light aliases, so theme="white" and theme="paper" both resolve. */
.vmap--theme-white,
.vmap--theme-paper {
	--vmap-ocean: #ffffff;
	--vmap-land: #e6ebf0;
	--vmap-coast: #c2ccd7;
	--vmap-grid: rgba( 15, 23, 36, 0.055 );
	--vmap-fresh: #ffc400;
	--vmap-week: #e09b00;
	--vmap-old: #a66f00;
	--vmap-ink: #16202c;
	--vmap-muted: #5f7185;
	--vmap-edge: rgba( 15, 23, 36, 0.14 );
}

.vmap--theme-ink {
	--vmap-ocean: #0b1220;
	--vmap-land: #23364d;
	--vmap-coast: #33506f;
	--vmap-grid: rgba( 255, 255, 255, 0.05 );
	--vmap-fresh: #ffd23d;
	--vmap-week: #e8a516;
	--vmap-old: #b57c14;
	--vmap-ink: #dce6f2;
	--vmap-muted: #8195ad;
	--vmap-edge: rgba( 255, 255, 255, 0.09 );
}

.vmap--theme-slate {
	--vmap-ocean: #141618;
	--vmap-land: #2c3033;
	--vmap-coast: #43494e;
	--vmap-fresh: #ffd23d;
	--vmap-week: #e8a516;
	--vmap-old: #b57c14;
	--vmap-ink: #e3e5e6;
	--vmap-muted: #979d9f;
}

/* Map -------------------------------------------------------------------- */

.vmap__stage {
	position: relative;
	overflow: hidden;
	border: 1px solid var( --vmap-edge );
	border-radius: var( --vmap-radius );
	background: var( --vmap-ocean );
}

.vmap__canvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

/* Static map with expansion off: clicks pass straight through it. */
.vmap[data-controls="0"][data-expand="0"] .vmap__canvas,
.vmap-badge[data-expand="0"] .vmap-badge__canvas {
	cursor: default;
	pointer-events: none;
	touch-action: auto;
}

/* Static map with expansion on: click opens it full screen, nothing else. */
.vmap[data-controls="0"][data-expand="1"] .vmap__canvas,
.vmap-badge[data-expand="1"] .vmap-badge__canvas {
	cursor: zoom-in;
	touch-action: auto;
}

.vmap[data-controls="0"] .vmap__canvas:focus-visible {
	outline: 2px solid var( --vmap-ink );
	outline-offset: 2px;
}

.vmap__canvas.is-dragging {
	cursor: grabbing;
}

.vmap__status {
	position: absolute;
	inset: auto 12px 12px 12px;
	padding: 8px 10px;
	border-radius: 6px;
	background: rgba( 0, 0, 0, 0.42 );
	color: var( --vmap-ink );
	font-size: 12px;
	text-align: center;
	pointer-events: none;
}

.vmap--theme-paper .vmap__status,
.vmap--theme-white .vmap__status,
.vmap .vmap__status {
	background: rgba( 255, 255, 255, 0.82 );
	color: var( --vmap-ink );
	box-shadow: 0 1px 3px rgba( 15, 23, 36, 0.12 );
}

.vmap--theme-ink .vmap__status,
.vmap--theme-slate .vmap__status {
	background: rgba( 0, 0, 0, 0.42 );
	box-shadow: none;
}

.vmap__tip {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-width: 240px;
	padding: 7px 10px;
	border: 1px solid var( --vmap-edge );
	border-radius: 6px;
	background: rgba( 8, 12, 20, 0.92 );
	color: #f2f6fb;
	font-size: 12px;
	line-height: 1.35;
	pointer-events: none;
	white-space: nowrap;
}

.vmap--theme-paper .vmap__tip,
.vmap--theme-white .vmap__tip,
.vmap .vmap__tip {
	background: rgba( 255, 255, 255, 0.97 );
	color: var( --vmap-ink );
	box-shadow: 0 2px 8px rgba( 15, 23, 36, 0.16 );
}

.vmap--theme-ink .vmap__tip,
.vmap--theme-slate .vmap__tip {
	background: rgba( 8, 12, 20, 0.92 );
	color: #f2f6fb;
	box-shadow: none;
}

.vmap__tip span {
	font-variant-numeric: tabular-nums;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	opacity: 0.75;
}

.vmap__controls {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vmap__controls button {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var( --vmap-edge );
	border-radius: 6px;
	background: rgba( 8, 12, 20, 0.6 );
	color: var( --vmap-ink );
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.vmap__controls button:hover {
	background: #ffffff;
	border-color: var( --vmap-muted );
}

.vmap__controls button:focus-visible {
	outline: 2px solid var( --vmap-ink );
	outline-offset: 2px;
}

.vmap--theme-paper .vmap__controls button,
.vmap--theme-white .vmap__controls button,
.vmap .vmap__controls button {
	background: rgba( 255, 255, 255, 0.88 );
	color: var( --vmap-ink );
	box-shadow: 0 1px 2px rgba( 15, 23, 36, 0.12 );
}

.vmap--theme-ink .vmap__controls button,
.vmap--theme-slate .vmap__controls button {
	background: rgba( 8, 12, 20, 0.6 );
	box-shadow: none;
}

.vmap--theme-ink .vmap__controls button:hover,
.vmap--theme-slate .vmap__controls button:hover {
	background: #ffffff;
	border-color: var( --vmap-muted );
}

/* Counters. Tabular monospace figures, read like an instrument panel. ----- */

.vmap__stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 68px, 1fr ) );
	gap: 1px;
	margin: 10px 0 0;
	padding: 0;
	background: var( --vmap-edge );
	border: 1px solid var( --vmap-edge );
	border-radius: var( --vmap-radius );
	overflow: hidden;
}

.vmap__stats > div {
	margin: 0;
	padding: 9px 10px;
	background: var( --vmap-ocean );
}

.vmap__stats dt {
	margin: 0;
	color: var( --vmap-muted );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.vmap__stats dd {
	margin: 2px 0 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp( 15px, 4.6cqw, 19px );
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.vmap__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 8px 0 0;
	color: var( --vmap-muted );
	font-size: 11px;
}

.vmap__key {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border: 1px solid rgba( 0, 0, 0, 0.28 );
	border-radius: 50%;
	vertical-align: -1px;
}

.vmap__key--fresh {
	background: var( --vmap-fresh );
}

.vmap__key--week {
	background: var( --vmap-week );
}

.vmap__key--old {
	background: var( --vmap-old );
}

/* Badge ------------------------------------------------------------------ */

.vmap-badge {
	display: block;
	padding: 10px;
	border: 1px solid var( --vmap-edge );
	border-radius: var( --vmap-radius );
	background: var( --vmap-ocean );
	color: var( --vmap-ink );
	text-decoration: none;
}

/* No title, no figures: the badge is just the map, so drop the frame padding. */
.vmap-badge--bare {
	padding: 0;
	overflow: hidden;
}

.vmap-badge--bare .vmap-badge__stage {
	border-radius: calc( var( --vmap-radius ) - 1px );
}

a.vmap-badge:hover {
	border-color: var( --vmap-muted );
}

.vmap-badge__title {
	display: block;
	margin-bottom: 7px;
	color: var( --vmap-muted );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vmap-badge__stage {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 6px;
}

.vmap-badge__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.vmap-badge__figures {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	color: var( --vmap-muted );
	font-size: 11px;
}

.vmap-badge__figures b {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var( --vmap-ink );
}

.vmap-counter b {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums;
}

@container ( max-width: 360px ) {

	.vmap__stats > div {
		padding: 7px 8px;
	}

	.vmap__stats dt {
		font-size: 9px;
		letter-spacing: 0.06em;
	}

	.vmap__controls button {
		width: 26px;
		height: 26px;
		font-size: 13px;
	}

	.vmap__legend {
		gap: 4px 10px;
		font-size: 10px;
	}

	.vmap__status {
		font-size: 11px;
	}
}

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

/* Full-screen overlay ----------------------------------------------------- */

.vmap-fs {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 12px, 3vw, 40px );
	background: rgba( 10, 14, 22, 0.86 );
	backdrop-filter: blur( 3px );
}

.vmap-fs__map {
	width: 100%;
	max-width: 1600px;
}

.vmap-fs__map .vmap__stage {
	height: min( 86vh, calc( ( 100vw - 6vw ) * 0.389 ) );
	min-height: 240px;
	box-shadow: 0 18px 60px rgba( 0, 0, 0, 0.45 );
}

.vmap-fs__map .vmap__canvas {
	cursor: grab;
	pointer-events: auto;
	touch-action: none;
}

.vmap-fs__close {
	position: absolute;
	top: clamp( 10px, 2vw, 24px );
	right: clamp( 10px, 2vw, 24px );
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.4 );
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.vmap-fs__close:hover {
	background: rgba( 0, 0, 0, 0.7 );
}

.vmap-fs__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}