/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* ============================================================
   Madinah Heritage Atlas — design system
   Palette: Madinah green · brass gold · parchment ivory
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  --text-3xl: clamp(2.5rem, 1.2rem + 4vw, 4.75rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Fonts */
  --font-display: 'Amiri', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Public Sans', 'Segoe UI', 'IBM Plex Sans Arabic', 'Amiri', system-ui, sans-serif;
  --font-ar: 'Amiri', 'Noto Naskh Arabic', serif;
  --font-ar-ui: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', sans-serif;

  --radius: 3px;
  --radius-lg: 6px;
  --arch: 46% 46% 4px 4px / 34% 34% 4px 4px;

  --header-h: 60px;

  /* Category hues (data-viz set — used only on the map + legend) */
  --c-mosque: oklch(0.58 0.11 162);
  --c-well: oklch(0.55 0.1 232);
  --c-fort: oklch(0.53 0.13 46);
  --c-mountain: oklch(0.5 0.07 285);
  --c-cemetery: oklch(0.48 0.04 200);
  --c-museum: oklch(0.55 0.12 320);
  --c-farm: oklch(0.55 0.12 128);
  --c-house: oklch(0.55 0.13 25);
  --c-landscape: oklch(0.56 0.07 100);
  --c-battlefield: oklch(0.5 0.16 18);
  --c-other: oklch(0.52 0.02 120);
}

/* ---------- Light (parchment) ---------- */
:root,
[data-theme='light'] {
  --bg: oklch(0.957 0.017 88);
  --bg-2: oklch(0.925 0.024 87);
  --surface: oklch(0.988 0.008 90);
  --surface-2: oklch(0.938 0.021 88);
  --ink: oklch(0.235 0.028 165);
  --ink-2: oklch(0.44 0.021 165);
  --ink-3: oklch(0.575 0.018 150);
  --line: oklch(0.865 0.026 85);
  --line-2: oklch(0.79 0.032 84);
  --gold: oklch(0.545 0.098 76);
  --gold-2: oklch(0.68 0.11 78);
  --green: oklch(0.32 0.062 168);
  --green-deep: oklch(0.235 0.05 168);
  --on-green: oklch(0.955 0.018 88);
  --shadow: 0 1px 2px oklch(0.3 0.04 160 / 0.07), 0 12px 32px oklch(0.3 0.04 160 / 0.09);
  --map-filter: sepia(0.3) saturate(0.72) brightness(1.03) contrast(0.94);
  --scrim: oklch(0.235 0.028 165 / 0.42);
}

/* ---------- Dark (night of the Haram) ---------- */
[data-theme='dark'] {
  --bg: oklch(0.185 0.024 168);
  --bg-2: oklch(0.155 0.022 168);
  --surface: oklch(0.222 0.026 168);
  --surface-2: oklch(0.268 0.03 168);
  --ink: oklch(0.935 0.022 86);
  --ink-2: oklch(0.775 0.021 86);
  --ink-3: oklch(0.63 0.02 90);
  --line: oklch(0.315 0.028 168);
  --line-2: oklch(0.385 0.032 168);
  --gold: oklch(0.79 0.1 82);
  --gold-2: oklch(0.86 0.1 86);
  --green: oklch(0.42 0.07 168);
  --green-deep: oklch(0.15 0.022 168);
  --on-green: oklch(0.955 0.018 88);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 16px 40px oklch(0 0 0 / 0.5);
  --map-filter: invert(0.93) hue-rotate(180deg) sepia(0.32) saturate(0.85) brightness(0.98)
    contrast(0.92);
  --scrim: oklch(0.11 0.02 168 / 0.62);

  --c-mosque: oklch(0.76 0.11 162);
  --c-well: oklch(0.74 0.1 232);
  --c-fort: oklch(0.75 0.12 56);
  --c-mountain: oklch(0.72 0.08 285);
  --c-cemetery: oklch(0.7 0.04 200);
  --c-museum: oklch(0.74 0.11 320);
  --c-farm: oklch(0.75 0.12 132);
  --c-house: oklch(0.74 0.12 30);
  --c-landscape: oklch(0.76 0.08 100);
  --c-battlefield: oklch(0.7 0.14 22);
  --c-other: oklch(0.7 0.02 120);
}

/* ============================================================
   Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
input {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  font-weight: 400;
  line-height: 1.14;
  text-wrap: balance;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection {
  background: var(--gold);
  color: var(--green-deep);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ar {
  font-family: var(--font-ar);
  direction: rtl;
  unicode-bidi: isolate;
}

/* Eyebrow / kicker */
.kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.kicker::before,
.kicker.center::after {
  content: '';
  height: 1px;
  width: clamp(20px, 5vw, 52px);
  background: linear-gradient(90deg, transparent, currentColor);
  flex: none;
}
.kicker.center {
  justify-content: center;
}
.kicker.center::after {
  background: linear-gradient(90deg, currentColor, transparent);
}

/* Girih ornament layer */
.girih {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gold);
  opacity: 0.14;
  pointer-events: none;
}
.girih-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Divider ornament */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--line-2);
}
.rule::before,
.rule::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 180px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.rule svg {
  color: var(--gold);
  opacity: 0.85;
}

/* ============================================================
   Header
   ============================================================ */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.hdr.solid {
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}
/* over the dark hero */
.hdr:not(.solid) {
  color: oklch(0.94 0.02 88);
}
.hdr:not(.solid) .brand svg,
.hdr:not(.solid) .brand span span {
  color: oklch(0.84 0.09 84);
}
.hdr:not(.solid) .nav a {
  color: oklch(0.92 0.02 88 / 0.82);
}
.hdr:not(.solid) .nav a:hover {
  color: oklch(0.98 0.01 88);
}
.hdr:not(.solid) .icon-btn {
  border-color: oklch(0.85 0.05 84 / 0.34);
  color: oklch(0.9 0.03 84);
}
.hdr:not(.solid) .icon-btn:hover {
  color: oklch(0.86 0.1 84);
  border-color: oklch(0.86 0.1 84);
  background: oklch(0.85 0.1 84 / 0.14);
}
.hdr .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: 1600px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  margin-inline-end: auto;
}
.brand svg {
  color: var(--gold);
  flex: none;
}
.brand b {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  display: block;
}
.brand span {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
  margin-top: 3px;
  display: block;
}
.nav {
  display: flex;
  gap: var(--space-5);
}
.nav a {
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  flex: none;
}
.icon-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: color-mix(in oklab, var(--gold) 9%, transparent);
}
@media (max-width: 860px) {
  .nav {
    display: none;
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: min(94vh, 880px);
  min-height: min(94svh, 880px);
  display: grid;
  align-items: center;
  padding-block: calc(var(--header-h) + var(--space-16)) calc(var(--space-16) * 2);
  background: var(--green-deep);
  color: var(--on-green);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 12%;
  background: linear-gradient(to top, var(--bg), transparent);
  z-index: 2;
  pointer-events: none;
}
.hero .girih {
  opacity: 0.26;
  color: oklch(0.82 0.1 84);
  mask-image: radial-gradient(78% 62% at 50% 46%, transparent 6%, #000 84%);
}
.hero-glow {
  position: absolute;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  left: 50%;
  top: 58%;
  translate: -50% -50%;
  background: radial-gradient(circle, oklch(0.55 0.09 168 / 0.55), transparent 66%);
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1000px;
}
.hero .kicker {
  color: oklch(0.83 0.1 82);
  justify-content: center;
}
.hero-ar {
  font-family: var(--font-ar);
  direction: rtl;
  font-size: clamp(1.75rem, 1rem + 3.6vw, 3.6rem);
  line-height: 1.5;
  color: oklch(0.87 0.09 84);
  margin-top: var(--space-6);
  font-weight: 700;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: var(--space-2);
}
.hero h1 em {
  font-style: italic;
  color: oklch(0.85 0.1 84);
}
.hero p.lede {
  font-size: var(--text-lg);
  color: oklch(0.87 0.02 90 / 0.82);
  max-width: 62ch;
  margin: var(--space-6) auto 0;
  text-wrap: pretty;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-10);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid oklch(0.8 0.1 84 / 0.2);
}
.hero-stats div {
  min-width: 92px;
}
.hero-stats b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 700;
  color: oklch(0.87 0.1 84);
  line-height: 1;
}
.hero-stats span {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: oklch(0.88 0.02 90 / 0.62);
  margin-top: var(--space-2);
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
  padding: 0.7rem 1.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--green-deep);
  background: oklch(0.85 0.1 84);
  border-radius: var(--radius);
  transition: translate 0.25s, box-shadow 0.25s;
}
.hero-cta:hover {
  translate: 0 -2px;
  box-shadow: 0 10px 26px oklch(0.1 0.02 168 / 0.4);
}

/* ============================================================
   Section furniture
   ============================================================ */
.sec {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  position: relative;
}
.sec-head {
  max-width: 68ch;
}
.sec-head.center {
  margin-inline: auto;
  text-align: center;
}
.sec-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--space-4);
}
.sec-head p {
  color: var(--ink-2);
  margin-top: var(--space-4);
  text-wrap: pretty;
}
.sec-head .ar-sub {
  font-family: var(--font-ar);
  direction: rtl;
  font-size: var(--text-lg);
  color: var(--gold);
  margin-top: var(--space-2);
}

/* ============================================================
   Atlas (map application)
   ============================================================ */
.atlas {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  scroll-margin-top: var(--header-h);
}
.atlas-shell {
  display: grid;
  grid-template-columns: 352px 1fr;
  height: clamp(560px, 82vh, 940px);
  height: clamp(560px, 82svh, 940px);
  position: relative;
}

/* --- Sidebar --- */
.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  position: relative;
  z-index: 3;
}
.side-top {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--space-3);
}
.search {
  position: relative;
}
.search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  translate: 0 -50%;
  color: var(--ink-3);
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 0.6rem 0.7rem 0.6rem 2.2rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.search input::placeholder {
  color: var(--ink-3);
}
.search input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 18%, transparent);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-2);
  background: var(--bg);
  transition: all 0.16s;
  white-space: nowrap;
}
.chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.chip:hover {
  border-color: var(--line-2);
  color: var(--ink);
}
.chip[aria-pressed='true'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-green);
}
.chip.sm {
  font-size: 0.6875rem;
  padding: 3px 8px;
}
.side-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.side-meta button {
  font-size: var(--text-xs);
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid transparent;
}
.side-meta button:hover {
  border-bottom-color: currentColor;
}

.side-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.side-list::-webkit-scrollbar {
  width: 9px;
}
.side-list::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 9px;
  border: 3px solid var(--surface);
}
.grp-hd {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--surface-2) 88%, transparent);
  backdrop-filter: blur(8px);
  border-block: 1px solid var(--line);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.grp-hd b {
  color: var(--gold);
  font-weight: 700;
}
.row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
  position: relative;
}
.row::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.2s;
}
.row:hover {
  background: var(--surface-2);
}
.row[aria-current='true'] {
  background: color-mix(in oklab, var(--gold) 11%, var(--surface));
}
.row[aria-current='true']::before {
  scale: 1 1;
}
.row-ico {
  margin-top: 3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: none;
}
.row-ico svg {
  width: 12px;
  height: 12px;
}
.row-txt {
  min-width: 0;
}
.row-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
}
.row-ar {
  display: block;
  font-family: var(--font-ar);
  direction: rtl;
  text-align: right;
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-top: 2px;
}
.row-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  margin-top: 5px;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rel i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.rel-high {
  color: oklch(0.55 0.12 158);
}
.rel-good {
  color: oklch(0.6 0.11 210);
}
.rel-traditional {
  color: oklch(0.62 0.12 74);
}
.rel-weak {
  color: oklch(0.58 0.14 28);
}
[data-theme='dark'] .rel-high {
  color: oklch(0.76 0.13 158);
}
[data-theme='dark'] .rel-good {
  color: oklch(0.76 0.11 215);
}
[data-theme='dark'] .rel-traditional {
  color: oklch(0.8 0.12 78);
}
[data-theme='dark'] .rel-weak {
  color: oklch(0.72 0.14 28);
}
.no-pin {
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--text-sm);
}
.empty svg {
  margin: 0 auto var(--space-4);
  color: var(--line-2);
}

/* --- Map --- */
.map-area {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-2);
}
#map {
  position: absolute;
  inset: 0;
  z-index: 0; /* contain Leaflet's internal z-indexes below overlays */
}
#map {
  background: var(--bg-2);
  font-family: var(--font-body);
}
#map .leaflet-tile-pane {
  filter: var(--map-filter);
}
.leaflet-container a {
  color: var(--gold);
}
.leaflet-control-attribution {
  font-family: var(--font-body);
  font-size: 10px !important;
  background: color-mix(in oklab, var(--surface) 85%, transparent) !important;
  color: var(--ink-3) !important;
}
.leaflet-bar {
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
}
.leaflet-bar a {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
}
.leaflet-bar a:hover {
  background: var(--bg-2) !important;
  color: var(--gold) !important;
}
.leaflet-top.leaflet-right {
  top: 4px;
}
.leaflet-div-icon.mk,
.mk {
  background: none;
  border: 0;
}
.map-status {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  max-width: 340px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink-2);
  box-shadow: var(--shadow);
}

/* Map overlays */
.map-bar {
  position: absolute;
  z-index: 4;
  top: var(--space-4);
  left: var(--space-4);
  right: 58px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  pointer-events: none;
}
.map-bar > * {
  pointer-events: auto;
}
.zones {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: var(--shadow);
}
.legend {
  position: absolute;
  z-index: 4;
  left: var(--space-4);
  bottom: 26px;
  width: 232px;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--surface) 93%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.legend h4 {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.legend h4 + h4 {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.legend p {
  font-size: 0.75rem;
  color: var(--ink-2);
  line-height: 1.45;
}
.legend ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 5px;
}
.legend li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.legend li .rel {
  margin-top: 5px;
}
.legend li b {
  color: var(--ink);
  font-weight: 600;
}
.legend .rel i {
  width: 8px;
  height: 8px;
}
.legend-toggle {
  position: absolute;
  z-index: 4;
  left: var(--space-4);
  bottom: 26px;
  display: grid;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.legend { display: none; bottom: 66px; max-height: calc(100% - 140px); overflow: auto; }
.legend.show { display: block; }

/* --- Markers --- */
.mk {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--mk, var(--gold));
  transition: scale 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mk-in {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid currentColor;
  box-shadow: 0 2px 6px oklch(0.2 0.02 160 / 0.28);
}
.mk-in svg {
  width: 11px;
  height: 11px;
}
.mk::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  rotate: 45deg;
  opacity: 0;
  transition: opacity 0.2s, scale 0.2s;
  scale: 0.7;
}
.mk:hover {
  z-index: 5;
}
.mk:hover::after {
  opacity: 0.5;
  scale: 1;
}
.mk.is-sel {
  scale: 1.34;
  z-index: 6;
  color: var(--gold);
}
.mk.is-sel .mk-in {
  background: var(--gold);
  color: var(--green-deep);
  border-color: var(--gold);
}
.mk.is-sel::after {
  opacity: 1;
  scale: 1.12;
}
.mk.dim {
  opacity: 0.16;
  pointer-events: none;
  scale: 0.8;
}
.mk-lbl {
  position: absolute;
  top: 26px;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--ink);
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.mk:hover .mk-lbl,
.mk.is-sel .mk-lbl {
  opacity: 1;
}

/* --- Detail panel --- */
.panel {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  box-shadow: -18px 0 44px oklch(0.2 0.02 160 / 0.14);
  display: flex;
  flex-direction: column;
  translate: 101% 0;
  visibility: hidden;
  transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.4s;
}
.panel.open {
  translate: 0 0;
  visibility: visible;
}
.panel-hd {
  position: relative;
  flex: none;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--green-deep);
  color: var(--on-green);
  overflow: hidden;
}
.panel-hd .girih {
  opacity: 0.16;
  color: oklch(0.82 0.1 84);
}
.panel-hd-in {
  position: relative;
  z-index: 2;
}
.panel-close {
  position: absolute;
  z-index: 3;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid oklch(0.85 0.05 84 / 0.32);
  color: oklch(0.9 0.03 84);
  transition: background 0.2s, border-color 0.2s;
}
.panel-close:hover {
  background: oklch(0.85 0.1 84 / 0.18);
  border-color: oklch(0.85 0.1 84);
}
.panel-arch {
  width: 44px;
  height: 54px;
  margin-bottom: var(--space-4);
  border: 1px solid oklch(0.85 0.1 84 / 0.55);
  border-radius: var(--arch);
  display: grid;
  place-items: center;
  color: oklch(0.86 0.1 84);
}
.panel-arch svg {
  width: 18px;
  height: 18px;
}
.panel-cat {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.84 0.09 84);
}
.panel-hd h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: var(--space-2);
}
.panel-ar {
  font-family: var(--font-ar);
  direction: rtl;
  font-size: var(--text-lg);
  color: oklch(0.86 0.09 84);
  margin-top: var(--space-2);
}
.panel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1px solid oklch(0.85 0.05 84 / 0.34);
  color: oklch(0.9 0.03 84);
  background: oklch(0.85 0.1 84 / 0.1);
}
.badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.badge.b-high {
  color: oklch(0.85 0.13 158);
  border-color: oklch(0.85 0.13 158 / 0.4);
}
.badge.b-good {
  color: oklch(0.84 0.11 215);
  border-color: oklch(0.84 0.11 215 / 0.4);
}
.badge.b-traditional {
  color: oklch(0.86 0.12 82);
  border-color: oklch(0.86 0.12 82 / 0.4);
}
.badge.b-weak {
  color: oklch(0.8 0.14 28);
  border-color: oklch(0.8 0.14 28 / 0.42);
}

.panel-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  padding: var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.panel-body::-webkit-scrollbar {
  width: 9px;
}
.panel-body::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 9px;
  border: 3px solid var(--surface);
}
.panel-lede {
  font-size: var(--text-base);
  color: var(--ink);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
  text-wrap: pretty;
}
.blk {
  margin-top: var(--space-6);
}
.blk > h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.blk > h4::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--line);
}
.prose p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-wrap: pretty;
}
.prose p + p {
  margin-top: var(--space-3);
}
.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.geo {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.geo-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.geo-row svg {
  color: var(--gold);
  flex: none;
}
.geo code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.geo-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--ink-2);
  text-decoration: none;
  transition: all 0.18s;
}
.btn:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: color-mix(in oklab, var(--gold) 8%, transparent);
}
.btn svg {
  width: 13px;
  height: 13px;
}

.caveat {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--text-sm);
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--c-fort) 34%, var(--line));
  background: color-mix(in oklab, var(--c-fort) 8%, transparent);
  color: var(--ink-2);
}
.caveat svg {
  flex: none;
  margin-top: 2px;
  color: var(--c-fort);
}

.srcs {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.srcs li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.srcs .n {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
  font-size: 0.8125rem;
  min-width: 1.2em;
  flex: none;
}
.srcs a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  word-break: break-word;
}
.srcs a:hover {
  color: var(--gold);
}
.srcs .no-url {
  color: var(--ink-2);
}
.panel-nav {
  flex: none;
  display: flex;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.panel-nav button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.2s, background 0.2s;
}
.panel-nav button:hover {
  color: var(--gold);
  background: var(--surface);
}
.panel-nav button + button {
  border-inline-start: 1px solid var(--line);
}

/* ============================================================
   Clusters / journeys
   ============================================================ */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
}
@media (max-width: 980px) {
  .zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .zone-grid {
    grid-template-columns: 1fr;
  }
}
.zone-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.25s, translate 0.25s, box-shadow 0.25s;
}
.zone-card:hover {
  border-color: var(--gold);
  translate: 0 -3px;
  box-shadow: var(--shadow);
}
.zone-card .girih {
  opacity: 0.05;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 72%);
}
html[data-theme='dark'] .zone-card .girih {
  opacity: 0.09;
}
.zone-num {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.zone-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: var(--space-3);
  position: relative;
}
.zone-card .zar {
  font-family: var(--font-ar);
  direction: rtl;
  font-size: 1.05rem;
  color: var(--ink-3);
  margin-top: 2px;
  position: relative;
}
.zone-card p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-top: var(--space-3);
  flex: 1;
  position: relative;
  text-wrap: pretty;
}
.zone-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  position: relative;
}
.zone-foot b {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.zone-card:hover .zone-foot svg {
  translate: 3px 0;
}
.zone-foot svg {
  color: var(--gold);
  transition: translate 0.25s;
}

/* ============================================================
   Method / sources
   ============================================================ */
.method {
  background: var(--green-deep);
  color: var(--on-green);
  position: relative;
  overflow: hidden;
}
.method .girih {
  opacity: 0.13;
  color: oklch(0.82 0.1 84);
}
.method .wrap {
  position: relative;
  z-index: 2;
}
.method .kicker {
  color: oklch(0.84 0.09 84);
}
.method h2 {
  color: var(--on-green);
}
.method .sec-head p {
  color: oklch(0.88 0.02 90 / 0.78);
}
.method .sec-head .ar-sub {
  color: oklch(0.85 0.09 84);
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.mcard {
  padding: var(--space-6);
  border: 1px solid oklch(0.8 0.08 84 / 0.22);
  border-radius: var(--radius-lg);
  background: oklch(0.3 0.05 168 / 0.34);
}
[data-theme='dark'] .mcard {
  background: oklch(0.24 0.03 168 / 0.5);
}
.mcard svg {
  color: oklch(0.85 0.1 84);
  margin-bottom: var(--space-4);
}
.mcard h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}
.mcard p {
  font-size: var(--text-sm);
  color: oklch(0.88 0.02 90 / 0.76);
  margin-top: var(--space-3);
  text-wrap: pretty;
}
.mcard ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.1em;
  font-size: var(--text-sm);
  color: oklch(0.88 0.02 90 / 0.76);
}
.mcard li + li {
  margin-top: var(--space-2);
}
.bank-wrap {
  margin-top: var(--space-8);
  border: 1px solid oklch(0.8 0.08 84 / 0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bank-wrap h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  padding: var(--space-4) var(--space-5);
  background: oklch(0.3 0.05 168 / 0.4);
  border-bottom: 1px solid oklch(0.8 0.08 84 / 0.22);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.bank-wrap h3 svg {
  color: oklch(0.82 0.1 84);
  flex: none;
}
.srcbank {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-5);
}
.srcbank span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 12px;
  font-size: var(--text-xs);
  border: 1px solid oklch(0.8 0.08 84 / 0.26);
  border-radius: 100px;
  color: oklch(0.88 0.03 86 / 0.85);
}
.srcbank span b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: oklch(0.84 0.1 84);
}

/* Flagged table */
.flag-wrap {
  margin-top: var(--space-8);
  border: 1px solid oklch(0.8 0.08 84 / 0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.flag-wrap h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  padding: var(--space-4) var(--space-5);
  background: oklch(0.3 0.05 168 / 0.4);
  border-bottom: 1px solid oklch(0.8 0.08 84 / 0.22);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.flag-wrap h3 svg {
  color: oklch(0.8 0.14 40);
  flex: none;
}
.flag-list {
  list-style: none;
  padding: var(--space-4) var(--space-5);
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  color: oklch(0.88 0.02 90 / 0.8);
}
.flag-list li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.flag-list li::before {
  content: '△';
  color: oklch(0.8 0.14 40);
  font-size: 0.7em;
  flex: none;
}

/* ============================================================
   Footer
   ============================================================ */
.ftr {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: var(--space-12);
}
.ftr-in {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-4);
}
.ftr-in .rule {
  width: min(100%, 520px);
}
.ftr p {
  font-size: var(--text-sm);
  color: var(--ink-3);
  max-width: 62ch;
}
.ftr .dua {
  font-family: var(--font-ar);
  direction: rtl;
  font-size: var(--text-2xl);
  line-height: 1.7;
  color: var(--gold);
}
.ftr-meta {
  font-size: var(--text-xs) !important;
  color: var(--ink-3);
  opacity: 0.8;
}
.ftr-meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-2, currentColor);
  text-underline-offset: 2px;
}
.ftr-meta a:hover {
  color: var(--gold);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .atlas-shell {
    grid-template-columns: 300px 1fr;
  }
  .panel {
    width: min(400px, 100%);
  }
}
@media (max-width: 860px) {
  .atlas-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: auto;
  }
  .map-area {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    height: 52vh;
    height: 52svh;
    min-height: 340px;
    order: 1;
    border-bottom: 1px solid var(--line);
  }
  .side {
    order: 2;
    border-inline-end: 0;
    max-height: none;
    overflow: visible;
  }
  .side-list {
    overflow: visible;
    max-height: none;
    flex: none;
  }
  .grp-hd {
    position: static;
  }
  .legend {
    display: none;
  }
  .legend.show {
    display: block;
    bottom: 66px;
  }
  .legend-toggle {
    display: grid;
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }
  .panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 88vh;
    height: 88svh;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    translate: 0 101%;
    position: fixed;
    z-index: 80;
  }
  .panel.open {
    translate: 0 0;
  }
  .map-bar {
    right: 52px;
    top: var(--space-3);
    left: var(--space-3);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .map-bar::-webkit-scrollbar {
    display: none;
  }
  .map-bar .chip {
    flex: none;
    white-space: nowrap;
  }
  .map-bar .zones {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .map-bar .zones::-webkit-scrollbar {
    display: none;
  }
  .brand b {
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
  }
  .brand svg {
    width: 24px;
    height: 24px;
  }
  .zones {
    max-width: 100%;
  }
}
@media (max-width: 520px) {
  .hero-stats {
    gap: var(--space-6) var(--space-8);
  }
  .panel-body,
  .panel-hd {
    padding-inline: var(--space-5);
  }
}


/* ============================================================
   v2 additions: schematic base map, classical-source layer,
   incidents, filters
   ============================================================ */
:root,
[data-theme='light'] {
  --bm-harra: oklch(0.46 0.03 40 / 0.16);
  --bm-harra-edge: oklch(0.42 0.035 40 / 0.35);
  --bm-mount: oklch(0.55 0.05 70 / 0.42);
  --bm-mount-edge: oklch(0.45 0.06 65 / 0.7);
  --bm-wadi: oklch(0.6 0.08 230 / 0.75);
  --bm-wadi-halo: oklch(0.9 0.03 230 / 0.6);
  --bm-sea: oklch(0.82 0.05 225 / 0.55);
  --bm-coast: oklch(0.55 0.07 225 / 0.7);
  --bm-label: oklch(0.38 0.03 60);
  --bm-ring: oklch(0.545 0.098 76);
}
[data-theme='dark'] {
  --bm-harra: oklch(0.12 0.01 40 / 0.45);
  --bm-harra-edge: oklch(0.5 0.03 40 / 0.35);
  --bm-mount: oklch(0.42 0.04 70 / 0.5);
  --bm-mount-edge: oklch(0.6 0.05 70 / 0.6);
  --bm-wadi: oklch(0.68 0.08 230 / 0.7);
  --bm-wadi-halo: oklch(0.3 0.04 230 / 0.6);
  --bm-sea: oklch(0.3 0.05 230 / 0.6);
  --bm-coast: oklch(0.6 0.07 225 / 0.6);
  --bm-label: oklch(0.8 0.03 80);
  --bm-ring: oklch(0.79 0.1 82);
}
.bm-harra { fill: var(--bm-harra); stroke: var(--bm-harra-edge); stroke-width: 1; stroke-dasharray: 2 4; }
.bm-mount { fill: var(--bm-mount); stroke: var(--bm-mount-edge); stroke-width: 1.2; }
.bm-wadi { fill: none; stroke: var(--bm-wadi); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bm-wadi-halo { fill: none; stroke: var(--bm-wadi-halo); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.bm-sea { fill: var(--bm-sea); stroke: none; }
.bm-coast { fill: none; stroke: var(--bm-coast); stroke-width: 1.4; }
.bm-haram { fill: var(--gold); fill-opacity: 0.16; stroke: var(--gold); stroke-width: 1.2; }
.leaflet-div-icon.bm-lbl {
  background: none;
  border: 0;
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
  translate: -50% -50%;
  text-align: center;
  font-family: var(--font-body);
  color: var(--bm-label);
  pointer-events: none;
  line-height: 1.15;
}
.bm-lbl span {
  display: block;
  font-family: var(--font-ar-ui);
  font-size: 0.85em;
  opacity: 0.8;
}
.bm-harra-lbl { font-size: 11px; font-style: italic; letter-spacing: 0.06em; opacity: 0.85; }
.bm-wadi-lbl { font-size: 10px; font-style: italic; color: var(--bm-wadi); }
.bm-mount-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bm-mount-lbl span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bm-city-lbl { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.bm-town-lbl { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.bm-sea-lbl { font-family: var(--font-display); font-size: 16px; font-style: italic; letter-spacing: 0.2em; color: var(--bm-coast); }

/* Classical-source pins: hollow core inside a dashed ring */
.mk-txt .mk-in {
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border-style: dashed;
  border-width: 1.6px;
}
.mk-txt .mk-in::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dotted currentColor;
  opacity: 0.75;
}
.area-ring {
  fill: var(--bm-ring);
  fill-opacity: 0.08;
  stroke: var(--bm-ring);
  stroke-width: 1.6;
  stroke-dasharray: 6 5;
}
.txt-tag {
  color: var(--gold);
  font-weight: 600;
}
.chip[role='radio'][aria-checked='true'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-green);
}
.inc-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.inc-filter span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.inc-filter select {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.75rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 10px;
}
.inc-link {
  margin-left: 0.4em;
  font-size: var(--text-sm);
  color: var(--gold);
}
.geo-row.loc-approximate strong,
.geo-row.loc-area strong {
  color: var(--gold);
}

/* Legend swatches */
.lg-mk,
.lg-ring {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-2);
  background: var(--surface);
}
.lg-mk.lg-txt {
  border-style: dashed;
  outline: 1px dotted var(--ink-2);
  outline-offset: 2px;
}
.lg-ring {
  border: 1.5px dashed var(--bm-ring);
  background: color-mix(in oklab, var(--bm-ring) 12%, transparent);
}

/* Incidents section */
.inc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
  align-items: start;
}
.inc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.inc header {
  display: grid;
  gap: 2px;
}
.inc-yr {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.inc h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
  text-wrap: balance;
}
.inc-ar {
  font-family: var(--font-ar);
  color: var(--ink-3);
}
.inc ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2px;
}
.inc li button {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  text-align: left;
  padding: 4px 6px;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.inc li button:hover,
.inc li button:focus-visible {
  background: var(--surface-2);
  color: var(--ink);
}
.inc li .dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  translate: 0 -1px;
}
.inc li em {
  margin-left: auto;
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--ink-3);
}
.inc-map {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gold);
  border-bottom: 1px solid currentColor;
}

/* Leaflet writes fill-opacity 0.2 as an attribute; the tokens carry their own alpha. */
.bm-harra, .bm-mount, .bm-sea { fill-opacity: 1; }
/* Base-map renderer lives in its own pane; Leaflet only exempts the overlay pane's svg from max-width. */
.leaflet-container .leaflet-base-pane svg { max-width: none !important; max-height: none !important; }
/* Long incident names in the select must not widen the sidebar on phones. */
.side, .side-top, .side-top > * { min-width: 0; }

/* Older in-app webviews drop svh; keep the map from ever collapsing to zero height. */
.map-area { min-height: 340px; }

/* Google Maps links */
.gmap-ctl {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px !important; padding: 7px 11px;
  font: 600 0.75rem var(--font-body); color: var(--ink) !important; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 100px; box-shadow: var(--shadow);
}
.gmap-ctl:hover { border-color: var(--gold); }
.btn-g { border-color: var(--gold); }
.gmaps { background: var(--bg-2); border-block: 1px solid var(--line); }
.gmaps-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6, 32px); align-items: center; }
.gmaps h2 { margin-block: 0.3em 0.5em; }
.gmaps p { color: var(--ink-2); line-height: 1.6; }
.gmaps-steps { margin: 0; padding: var(--space-4, 18px) var(--space-4, 18px) var(--space-4, 18px) 2.2em; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); display: grid; gap: 10px; color: var(--ink-2); line-height: 1.5; }
.gmaps-steps a { color: var(--gold); font-weight: 600; }
@media (max-width: 860px) { .gmaps-in { grid-template-columns: 1fr; } }

/* Real street and terrain layer (OpenStreetMap via Overture), painted in-page */
:root,
[data-theme='light'] {
  --osm-motor: oklch(0.78 0.11 70);
  --osm-major: oklch(0.86 0.08 85);
  --osm-road: oklch(0.99 0.004 80);
  --osm-casing: oklch(0.8 0.015 70);
  --osm-minor: oklch(0.95 0.006 80);
  --osm-rail: oklch(0.55 0.02 60);
  --osm-water: oklch(0.7 0.07 230 / 0.8);
  --osm-water-fill: oklch(0.82 0.06 225);
  --osm-green: oklch(0.86 0.06 140 / 0.8);
  --osm-farm: oklch(0.88 0.05 125 / 0.7);
  --osm-cemetery: oklch(0.84 0.03 150 / 0.8);
  --osm-rock: oklch(0.72 0.03 50 / 0.35);
  --osm-quarry: oklch(0.82 0.015 60 / 0.6);
}
[data-theme='dark'] {
  --osm-motor: oklch(0.62 0.09 70);
  --osm-major: oklch(0.5 0.05 75);
  --osm-road: oklch(0.42 0.015 70);
  --osm-casing: oklch(0.2 0.01 60);
  --osm-minor: oklch(0.34 0.01 70);
  --osm-rail: oklch(0.6 0.02 60);
  --osm-water: oklch(0.62 0.08 230 / 0.75);
  --osm-water-fill: oklch(0.35 0.06 230);
  --osm-green: oklch(0.38 0.05 145 / 0.7);
  --osm-farm: oklch(0.34 0.04 130 / 0.6);
  --osm-cemetery: oklch(0.33 0.025 150 / 0.7);
  --osm-rock: oklch(0.2 0.01 40 / 0.5);
  --osm-quarry: oklch(0.32 0.01 60 / 0.6);
}
.bm-harra.bm-harra-soft { fill-opacity: 0.45; }
.leaflet-osm-pane canvas { image-rendering: auto; }
.osm-peak-lbl { font-size: 10.5px; font-weight: 600; color: var(--bm-label); text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg); }
.osm-wadi-lbl { font-size: 10.5px; font-style: italic; color: var(--bm-wadi); text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg); }

/* Chooser for pins that overlap at the current zoom */
.pick-pop .leaflet-popup-content-wrapper,
.pick-pop .leaflet-popup-tip { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.pick-pop .leaflet-popup-content { margin: 12px 14px; font-family: var(--font-body); }
.pick-h { margin: 0 0 8px !important; font-size: 12px; font-weight: 600; color: var(--ink-2); padding-right: 14px; }
.pick-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; }
.pick-list button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 8px; border: 0; border-radius: 6px; background: none; color: inherit;
  font: inherit; font-size: 13px; cursor: pointer;
}
.pick-list button:hover, .pick-list button:focus-visible { background: var(--bg-2); }
.pick-list em { color: var(--ink-2); font-size: 11px; }
.pick-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--mk, var(--gold)); }

/* ============================================================
   v3 polish: WCAG AA contrast, skip link, mobile menu,
   stat grid, legend rhythm, controls clear of the panel
   ============================================================ */
:root,
[data-theme='light'] {
  --ink-3: oklch(0.505 0.018 150);
}
[data-theme='dark'] {
  --ink-3: oklch(0.7 0.02 90);
}
.rel-high { color: oklch(0.5 0.12 158); }
.rel-good { color: oklch(0.5 0.1 215); }
.rel-traditional { color: oklch(0.52 0.11 70); }
.rel-weak { color: oklch(0.52 0.15 28); }
[data-theme='light'] .grp-hd b { color: oklch(0.47 0.09 74); }

/* Count inside chips: readable in both resting and active states */
.chip .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed='true'] .n,
.chip[role='radio'][aria-checked='true'] .n { color: inherit; opacity: 0.85; }

/* Skip link */
.skip {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 14px;
  background: var(--green);
  color: var(--on-green);
  border-radius: var(--radius-lg);
  translate: 0 -200%;
  transition: translate 0.2s;
}
.skip:focus { translate: 0 0; }

/* Hero stats: an even grid, no orphan row */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-10);
  max-width: 760px;
  margin-inline: auto;
}
@media (max-width: 520px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
}

/* Legend: separate each group, not just consecutive headings */
.legend p + h4,
.legend ul + h4 {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* Keep zoom + Google Maps controls and zone bar clear of the open panel (desktop) */
@media (min-width: 861px) {
  .leaflet-top.leaflet-right { transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
  .map-area:has(.panel.open) .leaflet-top.leaflet-right { right: min(440px, 100%); }
  .map-area:has(.panel.open) .map-bar { right: calc(min(440px, 100%) + 16px); }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .map-area:has(.panel.open) .leaflet-top.leaflet-right { right: min(400px, 100%); }
  .map-area:has(.panel.open) .map-bar { right: calc(min(400px, 100%) + 16px); }
}

/* Mobile menu */
.menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn { display: grid; }
  .hdr.menu-open .nav {
    display: grid;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .hdr.menu-open .nav a {
    color: var(--ink);
    padding: var(--space-3) 0;
    min-height: 44px;
    border-bottom: 1px solid var(--line);
  }
  .hdr.menu-open .nav a:last-child { border-bottom: 0; }
}
.ftr-meta { opacity: 1; }