/* Cornwall Towns Explorer — full-page Living Map (Stage 1 rebuild).
   One unified control bar + one contextual panel. Desktop: map + right panel.
   Mobile: map fills, panel becomes a drag-up bottom sheet. */

:root {
	--exp-ink: #050509;
	--exp-blue: #5baeff;
	--exp-panel-w: 340px;
}

.explorer-map-page__intro { color: #5b6470; max-width: 60ch; }
.explorer-map-wrap { margin-top: 14px; }

/* Outer bordered box wraps map + panel together. */
.explorer-map-canvas {
	position: relative;
	border: 3px solid var(--exp-ink);
	border-radius: 18px;
	box-shadow: 6px 6px 0 var(--exp-ink);
	overflow: hidden;
	background: #eef6fb;
	height: 76vh;
	min-height: 520px;
	scroll-margin-top: 70px; /* clear the sticky site header when scrolled into view */
}

/* Shell: map stage + panel side by side on desktop. */
.explorer-map-shell { display: flex; height: 100%; }
.explorer-map-stage {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	isolation: isolate;
	overflow: hidden;
}
.explorer-map-canvas__map { position: absolute; inset: 0; z-index: 1; }

/* ---------- unified control bar (search row + chip row) ---------- */
.explorer-map-controls {
	position: absolute;
	top: 12px; left: 12px; right: 12px;
	z-index: 30;
	display: flex; flex-direction: column; gap: 8px;
	pointer-events: none;
}
.explorer-map-controls > * { pointer-events: auto; }

.explorer-map-chips {
	display: flex; gap: 8px; align-items: center;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.explorer-map-chips::-webkit-scrollbar { display: none; }

/* ---------- search ---------- */
.explorer-map-searchbar {
	position: relative;
	display: flex; align-items: center; gap: 8px;
	width: 100%; max-width: 380px;
	background: #fff;
	border: 2.5px solid var(--exp-ink);
	border-radius: 999px;
	box-shadow: 3px 3px 0 var(--exp-ink);
	padding: 8px 14px;
}
.explorer-map-search__icon { font-size: 13px; line-height: 1; opacity: .7; flex: 0 0 auto; }
.explorer-map-search__input {
	flex: 1 1 auto; min-width: 0;
	border: 0; outline: 0; background: transparent;
	font: 700 14px 'Inter', system-ui, sans-serif; color: var(--exp-ink);
}
.explorer-map-search__input::placeholder { color: #97a1b0; font-weight: 600; }
.explorer-map-search__input::-webkit-search-cancel-button { display: none; }
.explorer-map-search__clear {
	border: 0; background: #eef1f6; color: var(--exp-ink);
	width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
	font: 800 15px/1 'Inter', system-ui, sans-serif; flex: 0 0 auto;
}
.explorer-map-search__results {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0;
	margin: 0; padding: 6px; list-style: none;
	background: #fff; border: 2.5px solid var(--exp-ink); border-radius: 14px;
	box-shadow: 3px 3px 0 var(--exp-ink);
	max-height: 320px; overflow-y: auto; z-index: 60;
}
.explorer-map-search__results li {
	display: flex; align-items: center; gap: 9px;
	padding: 8px 10px; border-radius: 9px; cursor: pointer;
	font: 700 13px 'Inter', system-ui, sans-serif; color: var(--exp-ink);
}
.explorer-map-search__results li:hover,
.explorer-map-search__results li.is-active { background: #eef6ff; }
.exp-res__dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--exp-ink); flex: 0 0 auto; }
.exp-res__name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-res__type { font-size: 11px; font-weight: 800; color: #7a8598; text-transform: uppercase; letter-spacing: .03em; flex: 0 0 auto; }
.explorer-map-search__empty { padding: 10px; color: #7a8598; font: 600 13px 'Inter', system-ui, sans-serif; }

/* highlight pulse dropped on a searched place */
.explorer-pulse {
	width: 16px; height: 16px; border-radius: 50%;
	background: #ff3b6b; border: 2px solid var(--exp-ink);
	box-shadow: 0 0 0 rgba(255,59,107,.6);
	animation: exp-pulse 1.4s ease-out infinite;
}
@keyframes exp-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,59,107,.55); }
	70%  { box-shadow: 0 0 0 15px rgba(255,59,107,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,59,107,0); }
}

.explorer-chip {
	display: inline-flex; align-items: center; gap: 7px;
	flex: 0 0 auto;
	background: #fff;
	border: 2.5px solid var(--exp-ink);
	border-radius: 999px;
	box-shadow: 3px 3px 0 var(--exp-ink);
	cursor: pointer;
	font: 800 12px/1 'Inter', system-ui, sans-serif;
	padding: 8px 13px;
	color: var(--exp-ink);
	transition: transform .08s, box-shadow .08s, opacity .12s;
}
.explorer-chip__swatch {
	width: 11px; height: 11px; border-radius: 50%;
	border: 2px solid var(--exp-ink);
	background: var(--chip, #ccc);
	flex: 0 0 auto;
}
.explorer-chip__count { font-weight: 900; opacity: .55; font-size: 11px; }
.explorer-chip[aria-pressed="false"] { opacity: .5; }
.explorer-chip[aria-pressed="false"] .explorer-chip__swatch { background: #fff; }
.explorer-chip.is-on { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--exp-ink); opacity: 1; }
.explorer-chip.is-on .explorer-chip__count { opacity: .85; }

.explorer-map-dice {
	margin-left: auto;
	flex: 0 0 auto;
	background: #fff;
	border: 2.5px solid var(--exp-ink);
	border-radius: 10px;
	box-shadow: 3px 3px 0 var(--exp-ink);
	cursor: pointer;
	font-size: 15px;
	padding: 8px 11px;
	line-height: 1;
}
.explorer-map-dice:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--exp-ink); }

/* ---------- floating zoom hint ---------- */
.explorer-map-hint {
	position: absolute;
	bottom: 14px; left: 50%;
	transform: translateX(-50%);
	z-index: 25;
	background: #fff;
	border: 2px solid var(--exp-ink);
	border-radius: 999px;
	font: 700 11px/1 'Inter', system-ui, sans-serif;
	letter-spacing: 0.04em;
	padding: 7px 14px;
	pointer-events: none;
	text-transform: uppercase;
	display: none;
}

/* ---------- contextual panel (right column on desktop) ---------- */
.explorer-map-panel {
	flex: 0 0 var(--exp-panel-w);
	width: var(--exp-panel-w);
	background: #fff;
	border-left: 3px solid var(--exp-ink);
	display: flex; flex-direction: column;
	min-height: 0;
}
.explorer-panel__grip { display: none; }
.explorer-map-panel__body {
	padding: 20px 20px 24px;
	overflow-y: auto;
	font: 500 14px/1.55 'Inter', system-ui, sans-serif;
	color: #1a2230;
}

.explorer-panel__eyebrow {
	font: 800 11px/1 'Inter', system-ui, sans-serif;
	letter-spacing: .08em; text-transform: uppercase; color: #7a8598;
	margin-bottom: 6px;
}
.explorer-panel__title { font: 900 22px/1.15 'Inter', system-ui, sans-serif; margin: 0 0 14px; color: var(--exp-ink); }

.explorer-panel__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.explorer-stat {
	border: 2px solid var(--exp-ink); border-radius: 12px; padding: 10px 12px;
	display: flex; flex-direction: column; gap: 2px;
}
.explorer-stat__n { font: 900 22px/1 'Inter', system-ui, sans-serif; color: var(--exp-ink); }
.explorer-stat__l { font-size: 11px; font-weight: 700; color: #6a7486; text-transform: uppercase; letter-spacing: .03em; }

.explorer-legend { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.explorer-legend li { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13px; }
.explorer-legend li b { margin-left: auto; font-weight: 900; color: #6a7486; }
.explorer-legend__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--exp-ink); flex: 0 0 auto; }

.explorer-panel__hint { color: #5b6470; font-size: 13px; line-height: 1.5; margin: 6px 0 0; }

.explorer-panel__back {
	background: none; border: 0; padding: 0; margin: 0 0 8px;
	color: #0b6aa2; font: 800 13px 'Inter', system-ui, sans-serif; cursor: pointer;
}
.explorer-panel__back:hover { text-decoration: underline; }

.explorer-panel__meter { height: 10px; border: 2px solid var(--exp-ink); border-radius: 999px; overflow: hidden; background: #eef1f6; }
.explorer-panel__meter span { display: block; height: 100%; background: #2f855a; }
.explorer-panel__meter-label { font-size: 12px; font-weight: 700; color: #6a7486; margin: 6px 0 14px; }

.explorer-panel__links { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.explorer-panel__links a { color: #0b6aa2; font-weight: 800; font-size: 13px; text-decoration: none; }
.explorer-panel__links a:hover { text-decoration: underline; }

/* ---------- Leaflet chrome tweaks ---------- */
/* Drop the zoom control below the two-row control bar (search + chips) so it
   isn't hidden behind them. Clears both rows on desktop and mobile. */
.explorer-map-page .leaflet-top.leaflet-left { top: 108px; }
.explorer-map-page .leaflet-control-zoom a { border: 2px solid var(--exp-ink) !important; color: var(--exp-ink); font-weight: 800; }
.explorer-map-page .leaflet-tooltip { border: 2px solid var(--exp-ink); border-radius: 8px; font: 700 12px 'Inter', system-ui, sans-serif; }
.explorer-map-page .leaflet-interactive,
.explorer-map-page .leaflet-interactive:focus { outline: none; }

/* Mobile name-then-go bubble on settlement / beach / listing dots. */
.explorer-dot-popup .leaflet-popup-content-wrapper {
	border: 2px solid var(--exp-ink);
	border-radius: 999px;
	box-shadow: 2px 2px 0 var(--exp-ink);
	padding: 0;
	background: #fff;
}
.explorer-dot-popup .leaflet-popup-content {
	margin: 0;
	min-width: 0;
}
.explorer-dot-popup .leaflet-popup-tip {
	border: 2px solid var(--exp-ink);
	background: #fff;
	box-shadow: none;
}
.explorer-dot-bubble {
	display: block;
	width: 100%;
	max-width: min(78vw, 260px);
	margin: 0;
	padding: 11px 16px;
	border: 0;
	background: transparent;
	color: var(--exp-ink);
	font: 800 14px/1.25 'Inter', system-ui, sans-serif;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-tap-highlight-color: rgba(91, 174, 255, 0.35);
	touch-action: manipulation;
	pointer-events: auto;
}
.explorer-dot-bubble--static { cursor: default; }
.explorer-dot-bubble__name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}
.explorer-dot-bubble__sub {
	display: block;
	margin-top: 2px;
	font: 600 10px/1.2 'Inter', system-ui, sans-serif;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .04em;
	overflow: hidden;
	text-overflow: ellipsis;
}
.explorer-dot-bubble[data-explorer-dot-go]:active {
	background: #eef6ff;
}

/* ---------- mobile: panel becomes a drag-up bottom sheet ---------- */
@media (max-width: 1023px) {
	.explorer-map-canvas { height: 82vh; min-height: 520px; }
	.explorer-map-shell { display: block; height: 100%; }
	.explorer-map-stage { position: absolute; inset: 0; }

	.explorer-map-panel {
		position: absolute; left: 0; right: 0; bottom: 0;
		width: auto; flex: none;
		border-left: 0;
		border-top: 3px solid var(--exp-ink);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -4px 0 rgba(5,5,9,.08);
		z-index: 45;
		height: 46vh;
		/* Never taller than the map box, so the drag grip at the top of the
		   sheet is always visible + tappable (the map box is overflow:hidden;
		   a taller sheet used to clip the grip off-screen and get stuck). */
		max-height: calc(82vh - 70px);
		transition: height .26s cubic-bezier(.4,.14,.3,1);
		touch-action: none;
	}
	.explorer-map-panel.is-peek { height: 96px; overflow: hidden; }
	.explorer-map-panel.is-half { height: 46vh; }
	/* "Full" still leaves a ~90px strip of map above the grip so it can be
	   grabbed / tapped to pull the sheet back down. */
	.explorer-map-panel.is-full { height: calc(82vh - 90px); }

	.explorer-panel__grip {
		display: flex; align-items: center; justify-content: center;
		height: 34px; flex: 0 0 auto; cursor: grab; touch-action: none;
		position: relative;
	}
	.explorer-panel__grip::before {
		content: ""; width: 48px; height: 6px; border-radius: 999px; background: #b3bccb;
	}
	/* Tap-target hint arrow that flips when the sheet is fully open. */
	.explorer-panel__grip::after {
		content: "";
		position: absolute; right: 16px; top: 50%;
		width: 8px; height: 8px;
		border-right: 2px solid #b3bccb; border-bottom: 2px solid #b3bccb;
		transform: translateY(-70%) rotate(-135deg);
	}
	.explorer-map-panel.is-full .explorer-panel__grip::after {
		transform: translateY(-30%) rotate(45deg);
	}
	.explorer-map-panel__body { padding: 4px 18px 22px; }
	.explorer-map-panel.is-peek .explorer-map-panel__body { overflow: hidden; }

	/* On peek, show just the title line as a teaser — hide everything else so
	   the name is never half-clipped by the short sheet. */
	.explorer-map-panel.is-peek .explorer-panel__eyebrow,
	.explorer-map-panel.is-peek .explorer-panel__stats,
	.explorer-map-panel.is-peek .explorer-legend,
	.explorer-map-panel.is-peek .explorer-panel__hint,
	.explorer-map-panel.is-peek .explorer-panel__note,
	.explorer-map-panel.is-peek .explorer-panel__meter,
	.explorer-map-panel.is-peek .explorer-panel__meter-label,
	.explorer-map-panel.is-peek .explorer-panel__links,
	.explorer-map-panel.is-peek .explorer-place-key,
	.explorer-map-panel.is-peek .explorer-beach-badge,
	.explorer-map-panel.is-peek .explorer-beach-attrs,
	.explorer-map-panel.is-peek .explorer-beach-actions,
	.explorer-map-panel.is-peek .explorer-panel__back { display: none; }
	.explorer-map-panel.is-peek .explorer-panel__pad { padding: 2px 16px 0; }
	.explorer-map-panel.is-peek .explorer-panel__band { padding: 8px 16px; }
	.explorer-map-panel.is-peek .explorer-panel__title {
		margin: 0; font-size: 17px;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}

	.explorer-map-controls { top: 10px; left: 10px; right: 10px; }
	/* Icon-only search until tapped — frees the map. */
	.explorer-map-searchbar {
		box-sizing: border-box;
		width: 44px;
		max-width: 44px;
		min-width: 44px;
		min-height: 44px;
		height: 44px;
		padding: 0;
		gap: 0;
		justify-content: center;
		box-shadow: 2px 2px 0 var(--exp-ink);
		transition: width .18s ease, max-width .18s ease, padding .18s ease;
	}
	.explorer-map-searchbar:not(.is-open) .explorer-map-search__input,
	.explorer-map-searchbar:not(.is-open) .explorer-map-search__clear {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
		opacity: 0;
		pointer-events: none;
	}
	.explorer-map-searchbar:not(.is-open) .explorer-map-search__results {
		display: none !important;
	}
	.explorer-map-searchbar:not(.is-open) {
		cursor: pointer;
	}
	.explorer-map-searchbar:not(.is-open) .explorer-map-search__icon {
		font-size: 18px;
		opacity: 1;
		line-height: 1;
		pointer-events: none;
	}
	.explorer-map-searchbar.is-open {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: auto;
		min-height: 44px;
		padding: 6px 12px;
		gap: 8px;
		justify-content: flex-start;
	}
	.explorer-map-searchbar.is-open .explorer-map-search__input {
		position: static;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: auto;
		margin: 0;
		clip: auto;
		overflow: visible;
		white-space: normal;
		opacity: 1;
		pointer-events: auto;
		font-size: 16px; /* avoid iOS zoom-on-focus */
	}
	.explorer-map-searchbar.is-open .explorer-map-search__clear {
		position: static;
		width: 22px;
		height: 22px;
		min-width: 22px;
		min-height: 22px;
		margin: 0;
		clip: auto;
		overflow: visible;
		opacity: 1;
		pointer-events: auto;
	}
	.explorer-map-searchbar.is-open .explorer-map-search__icon {
		font-size: 12px;
		opacity: .7;
	}
	.explorer-map-searchbar.is-open .explorer-map-search__results {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		box-sizing: border-box;
	}
	.explorer-map-hint { bottom: calc(46vh + 12px); }
	.explorer-map-panel.is-peek ~ .explorer-map-hint { bottom: 86px; }
}

@media (max-width: 1023px) {
	/* keep hint above the sheet regardless of snap (simple fixed offset) */
	.explorer-map-hint { bottom: auto; top: 58px; }
}

/* ---------- homepage "Explore by town" pill row (below the map) ---------- */
.ch-sd-territory-map__towns { margin: 18px 0 0; }
.ch-sd-territory-map__towns .ch-sd-territory-map__index-title {
	font: 800 12px/1 'Inter', system-ui, sans-serif;
	letter-spacing: .06em; text-transform: uppercase; color: #7a8598;
	margin: 0 0 10px;
}
.ch-sd-territory-map__town-grid {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.ch-sd-territory-map__town-cell { margin: 0; }
.ch-sd-territory-map__town-link {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 13px;
	border: 2px solid var(--exp-ink); border-radius: 999px;
	background: #fff; box-shadow: 2px 2px 0 var(--exp-ink);
	font: 700 13px/1 'Inter', system-ui, sans-serif;
	color: var(--exp-ink); text-decoration: none;
	transition: transform .08s, box-shadow .08s;
}
.ch-sd-territory-map__town-link:hover { background: #eef6ff; transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--exp-ink); }
.ch-sd-territory-map__town-grid .ch-sd-territory-map__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--exp-ink); flex: 0 0 auto; }
.ch-sd-territory-map__index-note { font-size: 11px; color: #97a1b0; margin: 10px 0 0; }
.ch-sd-territory-map__more { font-weight: 800; }
.ch-sd-territory-map__more a { color: #0b6aa2; }

/* ============================================================
   SIDEBAR LEGEND ROWS AS LAYER CONTROLS (2026-07-09)
   Rows in the panel legend are clickable layer toggles that
   mirror the chip row. Hover previews the layer on the map.
   ============================================================ */
.explorer-legend__row {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	padding: 7px 10px;
	margin: 2px 0;
	border: 2px solid transparent;
	border-radius: 8px;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	position: relative;
}
.explorer-legend__row b { margin-left: auto; }
.explorer-legend__row:hover,
.explorer-legend__row:focus-visible {
	background: #f1f5f9;
	border-color: #0f172a;
	outline: none;
}
.explorer-legend__row:active { transform: scale(0.985); }
.explorer-legend__row:not(.is-on) { opacity: 0.45; }
.explorer-legend__row:not(.is-on) .explorer-legend__dot {
	background: transparent !important;
	box-shadow: inset 0 0 0 2.5px currentColor;
}
.explorer-legend__row.is-on::before {
	content: '';
	position: absolute;
	left: 0; top: 6px; bottom: 6px;
	width: 3px;
	border-radius: 2px;
	background: #0f172a;
}

/* 2026-07-09: chip row RETIRED — the sidebar/panel legend rows are the layer
   controls on every screen size (panel on desktop, bottom sheet on mobile).
   The hidden chip buttons stay in the DOM as state anchors for toggleLayer. */
.explorer-map-chips { display: none !important; }

/* ============================================================
   PANEL COMPACT + READABLE TYPE (2026-07-09, Gavin request)
   No inner panel scroll: tighter rhythm, no hint paragraph,
   and NO 900-weight smeared uppercase — 800 max, real word gaps.
   ============================================================ */
.explorer-panel__eyebrow {
	font-weight: 700;
	letter-spacing: 0.1em;
	word-spacing: 0.18em;
}
.explorer-panel__title {
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0.01em;
	word-spacing: 0.08em;
	margin-bottom: 10px;
}
.explorer-stat__n { font-weight: 800; }
.explorer-map-panel__body { padding: 14px 16px 16px; }
.explorer-panel__stats { gap: 8px; margin-bottom: 10px; }
.explorer-stat { padding: 7px 10px; }
.explorer-legend { gap: 2px; margin-bottom: 6px; }
.explorer-legend__row { padding: 4px 8px; margin: 0; }
.explorer-panel__hint { display: none; }

/* ============================================================
   SETTLEMENTS-STYLE PANEL (2026-07-09) — the ONE sidebar look.
   Navy header band + soft white stat cards + grey group labels,
   matching /cornwall-settlements/ exactly. Keep all map sidebars
   on this structure (see EXPLORER-SIDEBAR-CONTROLS-SPEC.md).
   ============================================================ */
.explorer-map-panel__body { padding: 0; }
.explorer-panel__pad { padding: 14px 16px 16px; }
.explorer-panel__band {
	background: #1e2a5a;
	color: #fff;
	padding: 14px 16px 12px;
}
.explorer-panel__band-title {
	margin: 0;
	font: 800 16px/1.2 'Inter', system-ui, sans-serif;
	letter-spacing: 0.04em;
	word-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}
.explorer-panel__band-sub {
	margin: 4px 0 0;
	font: 500 12.5px/1.4 'Inter', system-ui, sans-serif;
	color: rgba(255, 255, 255, 0.85);
}
.explorer-panel__group-label {
	font: 700 11px/1 'Inter', system-ui, sans-serif;
	letter-spacing: 0.09em;
	word-spacing: 0.14em;
	text-transform: uppercase;
	color: #8a93a6;
	margin: 12px 0 6px;
}
/* Soft stat cards (settlements look), replacing the hard black boxes. */
.explorer-stat {
	border: 1px solid #dfe4ee;
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
}
.explorer-stat__n { color: #1e2a5a; font-weight: 800; }
.explorer-stat__l { color: #8a93a6; }

/* ============================================================
   HOME MAP HUB (2026-07-11) — one map, three views.
   Top pill row switches Parishes / Settlements / Beaches;
   a Map/Satellite control sits on the map; the panel gains a
   teal coast accent + beach badge, and scrolls internally so
   parish/beach detail can never overflow the card again.
   ============================================================ */

/* --- top view switcher: one clean tab bar (matches the town/territory nav) --- */
.explorer-mode-switch {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 14px 0 0;
	background: #fff;
	border: 3px solid var(--exp-ink);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 3px 3px 0 var(--exp-ink);
}
.explorer-mode-switch__btn {
	appearance: none;
	border: 0;
	border-right: 2px solid #e6eaf1;
	background: #fff;
	color: #64748b;
	min-height: 50px;
	padding: 10px 6px;
	font: 900 clamp(0.66rem, 2.3vw, 0.82rem)/1.15 'Inter', system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .14s, color .14s, box-shadow .14s;
}
.explorer-mode-switch__btn:last-child { border-right: 0; }
.explorer-mode-switch__btn:hover { background: #f8fafc; color: var(--exp-ink); }
.explorer-mode-switch__btn.is-active {
	color: var(--exp-ink);
	background: #f8fafc;
	box-shadow: inset 0 -4px 0 #1e2a5a;
}
.explorer-mode-switch__btn:focus-visible { outline: 3px solid #5baeff; outline-offset: -3px; }

/* --- Google-Maps-style "Layers" tile: one thumbnail button that flips the base
   map between street and satellite. Sits bottom-left of the map. --- */
.explorer-layers-btn {
	position: absolute;
	left: 12px; bottom: 14px;
	z-index: 30;
	width: 56px; height: 56px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: #cdd8e2 center/cover no-repeat;
	/* Tile shows the CURRENT view: street map by default … */
	background-image: url('https://a.basemaps.cartocdn.com/rastertiles/voyager/11/995/691.png');
	box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}
/* … and satellite imagery once you've switched to satellite. */
.explorer-layers-btn.is-satellite {
	background-color: #2d4a2e;
	background-image: url('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/11/691/995');
}
.explorer-layers-btn__cap {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: block;
	background: rgba(20, 24, 34, .72);
	color: #fff;
	font: 800 9px/1.2 'Inter', system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 3px 2px;
	text-align: center;
}
.explorer-layers-btn:hover { border-color: #cbd5e1; }
.explorer-layers-btn:focus-visible { outline: 3px solid #5baeff; outline-offset: 2px; }

/* --- panel: scroll internally so detail never spills out (fixes image 4) --- */
.explorer-map-panel { min-height: 0; }
.explorer-map-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
.explorer-panel__note {
	font: 500 12px/1.5 'Inter', system-ui, sans-serif;
	color: #8a93a6;
	margin: 10px 0 0;
}
.explorer-panel__links { word-break: break-word; }

/* --- coast (beaches) accent + beach detail badge --- */
.explorer-panel__band--coast { background: #00796B; }
.explorer-beach-badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 12px;
	border-radius: 999px;
	color: #fff;
	font: 800 12px/1 'Inter', system-ui, sans-serif;
	letter-spacing: .02em;
}

/* --- make the map as large as the viewport sensibly allows --- */
.explorer-map-canvas {
	height: min(86vh, calc(100vh - 150px));
	min-height: 560px;
}

@media (max-width: 1023px) {
	.explorer-mode-switch__btn { min-height: 46px; padding: 8px 5px; }
	/* Lift Layers + black stack above the peek sheet (stack was at bottom:16px
	   and got half-covered by the dock). Compact row uses less vertical space. */
	.explorer-layers-btn,
	.explorer-map-stage .hub-explorer-layers-btn,
	.explorer-map-stage .duchy-map-chrome-layers {
		bottom: 108px;
		left: 10px;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}
	/* 44px tile: shrink caption so "LAYERS" does not clip the S. */
	.explorer-layers-btn__cap,
	.explorer-map-stage .hub-explorer-layers-btn__cap,
	.explorer-map-stage .duchy-map-chrome-layers .hub-explorer-layers-btn__cap {
		font-size: clamp(6px, 1.7vw, 8px);
		font-weight: 800;
		letter-spacing: 0;
		line-height: 1;
		padding: 2px 0;
		gap: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: clip;
	}
	.explorer-map-stage .hub-explorer-layers-btn__ico {
		display: none;
	}
	.explorer-map-stage .hub-explorer-gmaps-stack,
	.explorer-map-stage .duchy-map-chrome-stack {
		right: 10px;
		bottom: 108px;
		flex-direction: row;
		padding: 3px 5px;
		gap: 1px;
	}
	.explorer-map-stage .hub-explorer-gmaps-stack__btn {
		width: 30px;
		height: 30px;
		min-width: 30px;
		min-height: 30px;
	}
	.explorer-map-shell:has(.explorer-map-panel.is-half) .hub-explorer-gmaps-stack,
	.explorer-map-shell:has(.explorer-map-panel.is-half) .duchy-map-chrome-stack,
	.explorer-map-shell:has(.explorer-map-panel.is-half) .explorer-layers-btn,
	.explorer-map-shell:has(.explorer-map-panel.is-half) .hub-explorer-layers-btn,
	.explorer-map-shell:has(.explorer-map-panel.is-half) .duchy-map-chrome-layers {
		bottom: calc(46vh + 12px);
	}
	.explorer-map-shell:has(.explorer-map-panel.is-full) .hub-explorer-gmaps-stack,
	.explorer-map-shell:has(.explorer-map-panel.is-full) .duchy-map-chrome-stack,
	.explorer-map-shell:has(.explorer-map-panel.is-full) .explorer-layers-btn,
	.explorer-map-shell:has(.explorer-map-panel.is-full) .hub-explorer-layers-btn,
	.explorer-map-shell:has(.explorer-map-panel.is-full) .duchy-map-chrome-layers {
		bottom: calc(88vh + 8px);
	}
}

/* ============================================================
   LEGEND + DETAIL RICHNESS (2026-07-11) — match the standalone
   settlements/beaches pages: dot-status key, type colours, and
   a proper beach detail card.
   ============================================================ */

/* Static (non-clickable) legend rows — the "what the ring means" key. */
.explorer-legend--static { margin-bottom: 10px; }
.explorer-legend--static li {
	display: flex; align-items: center; gap: 9px;
	font-weight: 600; font-size: 12.5px; color: #3a4252;
	padding: 3px 0;
}
.explorer-legend__ring {
	width: 13px; height: 13px; border-radius: 50%;
	background: #fff; border: 3px solid #999;
	flex: 0 0 auto;
}

/* Type-coloured parish place-name links keep their inline colour on hover. */
.explorer-place-link { text-decoration: none; }
.explorer-place-link:hover { text-decoration: underline; }

/* Beach detail card — key/value attribute rows + stacked action buttons. */
.explorer-beach-attrs {
	display: flex; flex-direction: column; gap: 6px;
	margin: 4px 0 12px;
}
.explorer-beach-attr {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px;
	border: 1px solid #dfe4ee; border-radius: 10px;
	background: #fff; padding: 8px 11px;
}
.explorer-beach-attr__k { font: 600 12.5px/1.3 'Inter', system-ui, sans-serif; color: #6a7486; }
.explorer-beach-attr__v { font: 800 13px/1.3 'Inter', system-ui, sans-serif; color: #1e2a5a; text-align: right; }

.explorer-beach-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.explorer-beach-btn {
	display: block; text-align: center; text-decoration: none;
	border: 2px solid var(--exp-ink); border-radius: 10px;
	padding: 10px 12px;
	font: 800 13px/1 'Inter', system-ui, sans-serif;
	color: var(--exp-ink); background: #fff;
	box-shadow: 2px 2px 0 var(--exp-ink);
	transition: transform .08s, box-shadow .08s, background .12s;
}
.explorer-beach-btn:hover { background: #eef6ff; }
.explorer-beach-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--exp-ink); }
.explorer-beach-btn--primary { background: #f5a623; border-color: var(--exp-ink); }
.explorer-beach-btn--primary:hover { background: #ffb840; }

/* "Whole of Cornwall" top-left fit — retired; Fit lives on the shared chrome stack. */
.explorer-fit-ctl { display: none !important; }

/* Never show Leaflet ± / default controls on explorer maps — black BR stack only. */
.explorer-map-stage .leaflet-control-zoom,
.explorer-map-page .leaflet-control-zoom {
	display: none !important;
}

/* Orphan Layers tiles that chrome used to inject onto the Leaflet pane (before
   host resolution pointed at .explorer-map-stage). Keep only the stage button. */
.explorer-map-canvas__map > .hub-explorer-layers-btn,
.explorer-map-canvas__map > .duchy-map-chrome-layers,
.leaflet-container > .hub-explorer-layers-btn,
.leaflet-container > .duchy-map-chrome-layers {
	display: none !important;
}

/* Colour key under the parish place list — explains the name colours. */
.explorer-place-key {
	display: flex; flex-wrap: wrap; gap: 6px 14px;
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid #e6eaf1;
}
.explorer-place-key__item {
	display: inline-flex; align-items: center; gap: 6px;
	font: 700 12px/1 'Inter', system-ui, sans-serif;
	color: #4a5568;
}
.explorer-place-key__dot {
	width: 10px; height: 10px; border-radius: 50%;
	border: 1.5px solid rgba(0, 0, 0, .2);
	flex: 0 0 auto;
}