/* Self-hosted Ethiopic glyphs (the site's CSP allows fonts from 'self' only). */
@font-face{font-family:'Noto Sans Ethiopic';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/noto-sans-ethiopic.woff2') format('woff2');unicode-range:U+030E,U+1200-1399,U+2D80-2DDE,U+AB01-AB2E}
/* Link back to the site from the full-page map. */
.sitelink{display:inline-block;margin:0 0 10px;font-size:13px;color:inherit;opacity:.8;text-decoration:none}
.sitelink:hover{opacity:1;text-decoration:underline}
/* 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 {
	behavior: url(#default#VML);
	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 {
	background-image: url(data:,layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:,layers-2x.png);
	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 */
	background-image: url(data:,marker-icon.png);
	}


/* 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;
		}
	}

.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* Layout: full-height app — filter rail on the left, map fills the rest; rail stacks above the map on phones. */
:root{
  --bg:#f3f4ef; --panel:#fbfbf8; --ink:#1d2420; --muted:#5f6a63; --line:#d9ddd4;
  --land:#e7eadf; --grid:#cfd5c7; --accent:#9a3b1f; --focus:#2c6e8f;
  --display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Ethiopic",sans-serif;
  --body:system-ui,"Noto Sans Ethiopic",-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --c0:#b3261e; --c1:#3d5a98; --c2:#7b3fa0; --c3:#3f3f46; --c4:#c2185b; --c5:#d97706; --c6:#0f766e; --c7:#8a5a2b; --c8:#2f7d32; --c9:#6b7280;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141816; --panel:#1b201d; --ink:#e7ebe5; --muted:#a3ada6; --line:#2e3631; --land:#1f2522; --grid:#2c3430; --accent:#e08a63; --focus:#7fb8d6;
  --c0:#f2675e; --c1:#7d9be0; --c2:#b98ad6; --c3:#c4c4cc; --c4:#f06292; --c5:#f5a524; --c6:#3fb8a9; --c7:#c9935c; --c8:#6cbf6f; --c9:#a1a7b3; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141816; --panel:#1b201d; --ink:#e7ebe5; --muted:#a3ada6; --line:#2e3631; --land:#1f2522; --grid:#2c3430; --accent:#e08a63; --focus:#7fb8d6;
  --c0:#f2675e; --c1:#7d9be0; --c2:#b98ad6; --c3:#c4c4cc; --c4:#f06292; --c5:#f5a524; --c6:#3fb8a9; --c7:#c9935c; --c8:#6cbf6f; --c9:#a1a7b3; color-scheme:dark}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--body)}
.app{height:100%;display:grid;grid-template-columns:330px 1fr}
.rail{background:var(--panel);border-right:1px solid var(--line);overflow:auto;padding-block:18px 24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:16px;display:flex;flex-direction:column;gap:18px;min-width:0}
h1{font:700 26px/1.05 var(--display);letter-spacing:.01em;margin:0;text-wrap:balance}
.sub{color:var(--muted);font-size:13.5px;margin:4px 0 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.stat b{display:block;font:600 20px/1.1 var(--mono);font-variant-numeric:tabular-nums}
.stat span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
legend{font:600 12px/1 var(--display);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:6px}
.cat{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.cat input{accent-color:var(--accent)}
.sw{width:11px;height:11px;border-radius:50%;flex:none;border:1.5px solid var(--panel);box-shadow:0 0 0 1px var(--line)}
.cat .n{margin-left:auto;font:12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
select,input[type=range]{width:100%}
select{font:14px var(--body);padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.yr{display:flex;justify-content:space-between;font:13px var(--mono);color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;font-size:14px}
.zones{display:flex;flex-direction:column;gap:3px}
.zr{display:grid;grid-template-columns:1fr 46px;gap:8px;align-items:center;font-size:13px;cursor:pointer;padding:2px 4px;border-radius:4px;background:none;border:0;color:var(--ink);text-align:left;font-family:var(--body)}
.zr:hover,.zr:focus-visible{background:var(--land);outline:none}
.zr .bar{grid-column:1/-1;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.zr .bar i{display:block;height:100%;background:var(--accent)}
.zr .n{text-align:right;font:12px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.note{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.note b{color:var(--ink)}
button.reset{font:600 13px var(--display);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);background:none;color:var(--ink);border-radius:6px;padding:7px 10px;cursor:pointer}
button.reset:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#map{height:100%;background:var(--land)}
.leaflet-container{background:var(--land);font-family:var(--body)}
.zlabel{font:600 11px/1.1 var(--display);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);white-space:nowrap;text-shadow:0 0 3px var(--land),0 0 3px var(--land)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--ink);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.leaflet-popup-content{margin:12px 14px;font:14px/1.4 var(--body);min-width:220px}
.pop h3{font:600 15px/1.25 var(--body);margin:0 0 6px}
.pop dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0 0 8px;font-size:13px}
.pop dt{color:var(--muted)} .pop dd{margin:0}
.pop .tag{display:inline-block;font:600 11px var(--display);text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:3px;color:#fff;margin-bottom:6px}
.pop .warn{font-size:12px;color:var(--accent)}
.pop a{color:var(--focus)}
.mc{display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--panel);font:600 12px var(--mono);background:var(--ink);opacity:.88;border:2px solid var(--panel)}
.leaflet-control-zoom a{background:var(--panel);color:var(--ink);border-color:var(--line)}
.leaflet-bar{border-color:var(--line)}
.leaflet-control-attribution{background:var(--panel)!important;color:var(--muted)}
.leaflet-control-layers{background:var(--panel);color:var(--ink);border:1px solid var(--line)!important}
.leaflet-control-layers-toggle{width:36px;height:36px;background:var(--panel)}
.leaflet-control-layers-toggle::after{content:"Map";font:600 11px var(--display);text-transform:uppercase;display:flex;height:100%;align-items:center;justify-content:center;color:var(--ink)}
@media (max-width:760px){.app{grid-template-columns:1fr;grid-template-rows:auto 60vh;height:auto}.rail{border-right:0;border-bottom:1px solid var(--line);padding-right:max(16px,env(safe-area-inset-right,0px));max-height:none}#map{height:60vh}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.zt{background:rgba(17,17,17,.85);color:#fff;border:0;font:600 13px/1.2 var(--body);box-shadow:none}.zt:before{display:none}

.mapwrap{position:relative;height:100%;min-height:0;overflow:hidden}
.mapwrap #map{height:100%}
.eth-border{animation:march 1.4s linear infinite}
@keyframes march{to{stroke-dashoffset:-36}}
.orom-glow{animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{stroke-opacity:.2;stroke-width:5px}50%{stroke-opacity:.6;stroke-width:12px}}
.zpoly,.rpoly{transition:fill-opacity .35s,fill .5s,stroke-width .2s}
.intro .zpoly{animation:fadein 1.2s 1s both}
.pin{animation:fadein .6s ease-out both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.pulse i{position:absolute;inset:0;border-radius:50%;border:2px solid #ff5a4f;animation:ring 2.2s ease-out infinite}
.pulse b{position:absolute;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#ff5a4f;box-shadow:0 0 6px #ff5a4f}
@keyframes ring{from{transform:scale(.3);opacity:1}to{transform:scale(2.6);opacity:0}}
.rl>span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:600 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88);text-shadow:0 1px 3px #000,0 0 8px #000;transition:opacity .4s}
.far .rl>span{opacity:0}
.mc{transition:transform .2s}.mc:hover{transform:scale(1.15)}
.bigyear{position:absolute;z-index:1000;left:64px;top:14px;font:700 clamp(36px,7vw,72px)/1 var(--display);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7);opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s;pointer-events:none}
.bigyear.show{opacity:.92;transform:none}
.tl{position:absolute;z-index:1000;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:rgba(17,20,18,.82);backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:calc(100% - 24px)}
.tlyears{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tl button{font:600 12.5px var(--mono);color:#e7ebe5;background:none;border:0;border-radius:999px;padding:7px 10px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.tl button:hover{background:rgba(255,255,255,.12)}
.tl button.on,.tl .ch.on{background:#fcd34d;color:#1d2420}
.tl .play{width:36px;height:36px;padding:0;background:#fcd34d;color:#1d2420;font-size:14px}
.tl .tour{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;border:1px solid rgba(255,255,255,.25)}
.tl button:focus-visible,.zcard button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.zcard{position:absolute;z-index:1000;left:12px;bottom:92px;width:270px;max-height:calc(100% - 120px);overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.zcard.in{animation:slidein .45s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.zcard h2{font:700 22px/1.1 var(--display);margin:0 0 10px}
.zcard .k{font:600 11px var(--display);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:10px 0 6px}
.zcard .k small{text-transform:none;letter-spacing:0;font-weight:400}
.zcard .x{position:absolute;right:8px;top:6px;border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;padding:4px 8px}
.kp{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kp div{border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.kp b{display:block;font:600 20px var(--mono)}.kp span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tb{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:13px;margin-bottom:6px}
.tb .n{font:12px var(--mono);color:var(--muted)}.tb .bar{grid-column:1/-1;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.tb .bar i{display:block;height:100%;animation:grow .7s ease-out both;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ys{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;height:70px;align-items:end}
.yb{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;border:0;background:none;padding:0;cursor:pointer;color:var(--muted)}
.yb i{display:block;width:100%;background:var(--line);border-radius:2px 2px 0 0;animation:growy .6s ease-out both;transform-origin:bottom}
.yb.on i{background:var(--accent)}.yb:hover i{filter:brightness(1.2)}
.yb span{font:10px var(--mono)}
@keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.legend{position:absolute;z-index:1000;right:12px;bottom:92px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--ink);animation:slidein .4s both}
.legend p{margin:0 0 5px;font:600 11px var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.legend .rp{display:flex;width:150px;height:10px;border-radius:2px;overflow:hidden}.legend .rp i{flex:1}
.legend .rt{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--muted)}
@media (max-width:760px){.mapwrap{height:70vh}.mapwrap #map{height:100%}.tl{bottom:24px;left:8px;right:8px;transform:none;max-width:none}.zcard{left:8px;right:8px;width:auto;bottom:80px;max-height:55%}.legend{bottom:auto;top:56px}.bigyear{left:56px}}

.bub{transform-box:fill-box;transform-origin:center;animation:pop .7s cubic-bezier(.2,1.5,.4,1) both;cursor:pointer}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.bl span{position:absolute;transform:translate(-50%,-50%);font:700 12px/1 var(--mono);color:#fff;text-shadow:0 1px 2px #000,0 0 4px rgba(0,0,0,.6);white-space:nowrap}
.mapbtns button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:4px;background:var(--panel);color:var(--ink);cursor:pointer;transition:background .25s,color .25s}
.mapbtns button:hover{background:var(--line)}
.mapbtns button.hot{background:#fcd34d;color:#1d2420;animation:hot 1.8s ease-in-out infinite}
@keyframes hot{0%,100%{box-shadow:0 0 0 0 rgba(252,211,77,.7)}50%{box-shadow:0 0 0 7px rgba(252,211,77,0)}}
.modes{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(17,20,18,.82);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.modebtn{font:600 12px var(--display);text-transform:uppercase;letter-spacing:.06em;color:#e7ebe5;background:none;border:0;border-radius:999px;padding:6px 11px;cursor:pointer;transition:background .2s,color .2s}
.modebtn.on{background:#fcd34d;color:#1d2420}
.mapbtns button:focus-visible,.modebtn:focus-visible,.backpill:focus-visible,.zoomhere:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.backpill{position:absolute;z-index:1000;top:14px;left:50%;transform:translate(-50%,-24px);opacity:0;pointer-events:none;font:600 13px var(--display);letter-spacing:.04em;color:#1d2420;background:#fcd34d;border:0;border-radius:999px;padding:9px 16px;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;transition:opacity .35s,transform .35s}
.backpill.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.bigyear{left:50%;right:auto;top:64px;transform:translate(-50%,-8px)}.bigyear.show{transform:translate(-50%,0)}
.bpop .k{font:600 11px var(--display);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:8px 0 5px}
.bpop .kp{margin-bottom:4px}
.rl2{list-style:none;margin:0 0 10px;padding:0;font-size:13px;max-height:150px;overflow:auto}
.rl2 li{padding:4px 0;border-top:1px solid var(--line)}.rl2 li span{display:block;font:11px var(--mono);color:var(--muted)}
.rl2 a{color:var(--ink);text-decoration:none}.rl2 a:hover{text-decoration:underline}
.zoomhere{width:100%;font:600 12.5px var(--display);text-transform:uppercase;letter-spacing:.06em;border:0;border-radius:6px;padding:8px;background:var(--ink);color:var(--panel);cursor:pointer}
.legend .gb{width:160px;height:10px;border-radius:5px}
.legend svg{display:block;color:var(--ink);margin-bottom:4px}.legend .lc{font:400 11.5px var(--body);text-transform:none;letter-spacing:0;margin:0 0 6px}
@media (max-width:760px){.backpill{top:auto;bottom:84px}}

.langs{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(17,20,18,.85);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.langbtn{font:600 12.5px var(--body);color:#e7ebe5;background:none;border:0;border-radius:999px;padding:6px 11px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.langbtn:hover{background:rgba(255,255,255,.12)}.langbtn.on{background:#fcd34d;color:#1d2420}
.langbtn:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.leaflet-top.leaflet-right .leaflet-control-layers{clear:both}
[lang="am"] .rl span,[lang="am"] legend,[lang="am"] .zcard .k,[lang="am"] .bpop .k,[lang="am"] .legend p,[lang="am"] .modebtn,[lang="am"] .tl .tour,[lang="am"] button.reset{letter-spacing:0;text-transform:none}
@media (max-width:760px){.langbtn{padding:6px 8px;font-size:12px}}

.bi{display:inline-flex;flex-direction:column;line-height:1.15;vertical-align:middle}
.bi .be{font-size:.78em;font-weight:400;opacity:.72;text-transform:none;letter-spacing:0;margin-top:1px}
.sub .bi,.zcard h2 .bi,.pop h3 .bi{display:flex}
.zcard h2 .bi .be{font:600 13px var(--body);opacity:.6;margin-top:3px}
h1 .bi .be{font:600 15px var(--body);opacity:.6;margin-top:4px}
.note .bpb,.note .beb{display:block}.note .beb{margin-top:6px;opacity:.75;font-size:.95em}
.sub .bi .be{font-size:.92em;margin-top:6px}
.tl .bi .be,.modebtn .bi .be,.langs .bi .be{font-size:.72em}
.rl .bi{align-items:center}.rl .bi .be{font-size:.8em}
.leaflet-control-layers label .bi{display:inline-flex}
[data-bi="1"] .tl button{padding-block:4px}
@media (prefers-reduced-motion:reduce){.eth-border,.orom-glow,.pulse i{animation:none!important}}
/* Phones: show the map first and the filters below it, so the map is what a
   visitor sees in the homepage frame and on the full page. */
@media (max-width:760px){.app{display:flex;flex-direction:column}.mapwrap{order:-1;flex:none}}
/* The type-of-violation filter shows no per-type incident counts. */
#cats .n{display:none}
/* The "Incidents by zone" list shows zones and relative bars, but no counts. */
.zr{grid-template-columns:1fr}.zr .n{display:none}
/* "Report a violation" button on the map (top left, beside the zoom control). */
.reportbtn{position:absolute;z-index:1000;top:10px;left:56px;display:inline-flex;flex-direction:column;align-items:flex-start;
  padding:9px 16px;border-radius:999px;background:#9A2E1F;color:#fff;text-decoration:none;font:700 14px/1.2 var(--display);
  box-shadow:0 6px 20px rgba(0,0,0,.35)}
.reportbtn:hover,.reportbtn:focus-visible{background:#7A2318;outline:2px solid #fff;outline-offset:2px}
.reportbtn .bi{display:flex;flex-direction:column}.reportbtn .be{font-weight:500;font-size:11px;opacity:.9}
/* Phones: the top edge holds the language switch, so the report button sits
   bottom right, above the timeline and the "back" pill. */
@media (max-width:760px){.reportbtn{top:auto;left:auto;right:10px;bottom:132px}}

/* ===== Animated "Report a violation" button =====
   Slides in once when the map loads, then a soft clay ring pulses outward to
   draw the eye. The pulse pauses on hover/focus, and all motion is off for
   visitors who ask for reduced motion. */
.reportbtn{
  box-shadow:0 6px 20px rgba(31,27,22,.25);
  animation:report-in .6s cubic-bezier(.2,.8,.2,1) .5s both, report-pulse 2.4s ease-out 1.3s infinite;
  transition:translate .2s ease, background-color .2s ease;
}
.reportbtn:hover,.reportbtn:focus-visible{translate:0 -2px;animation-play-state:running,paused}
@keyframes report-in{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes report-pulse{
  0%{box-shadow:0 0 0 0 rgba(154,46,31,.55),0 6px 20px rgba(31,27,22,.25)}
  70%{box-shadow:0 0 0 16px rgba(154,46,31,0),0 6px 20px rgba(31,27,22,.25)}
  100%{box-shadow:0 0 0 0 rgba(154,46,31,0),0 6px 20px rgba(31,27,22,.25)}
}
@media (prefers-reduced-motion:reduce){.reportbtn{animation:none}.reportbtn:hover,.reportbtn:focus-visible{translate:none}}

/* ===== Filters below the map =====
   The map comes first at full width; the filter panel sits underneath it,
   laid out in columns. Map height is --map-h: the homepage sets it to the
   screen height below the site header (and sizes its frame to fit map +
   filters); the full-page map uses 80% of the viewport. */
html,body{height:auto}
.app{display:flex;flex-direction:column;height:auto}
.mapwrap{order:-1;flex:none;height:var(--map-h,80vh);min-height:420px}
#map{height:100%}
.rail{border-right:0;border-top:1px solid var(--line);overflow:visible;max-height:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px 28px;align-items:start;
  padding:22px max(20px,env(safe-area-inset-right,0px)) 26px max(20px,env(safe-area-inset-left,0px))}
.rail>div:first-child,.rail>.note{grid-column:1/-1}
.rail>.reset{justify-self:start;align-self:start}
.rail .zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:3px 18px}
.rail>fieldset:has(#zones){grid-column:1/-1}

/* ===== Filter panel on the map (left, below the zoom/home/mode controls) ===== */
.mapfilters{position:absolute;z-index:1000;left:10px;top:175px;width:270px;max-width:calc(100% - 20px);
  max-height:calc(100% - 175px - 92px);display:flex;flex-direction:column;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);overflow:hidden}
.mf-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border:0;background:none;color:inherit;
  font:600 12px var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:left}
.mf-toggle::after{content:'';margin-left:auto;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.mf-toggle .bi{display:inline-flex;flex-direction:column;line-height:1.2}
.mf-toggle .be{font-size:.8em;font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}
.mf-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.mf-body{overflow:auto;padding:4px 12px 12px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line)}
.mapfilters.closed{width:auto;max-height:none}
.mapfilters.closed .mf-body{display:none}
.mapfilters.closed .mf-toggle::after{transform:rotate(-45deg)}
/* Don't stack the filter panel on top of an open zone card. */
.mapwrap:has(#zcard:not([hidden])) .mapfilters{display:none}
@media (max-width:760px){.mapfilters{width:min(240px,calc(100% - 180px))}} /* stays clear of the report button */

/* ===== Phones: keep the map controls from covering each other =====
   The bubble-size legend is a large box that covered the map, the layers
   button, the mode toggle, the filters and the report button, so it is
   hidden on phones (the intro text below the map explains the bubbles).
   The language buttons shrink so they sit beside the zoom buttons
   instead of over the "+" button, wrapping to a second line if needed. */
@media (max-width:760px){
  .legend{display:none!important}
  .leaflet-top.leaflet-right{max-width:calc(100% - 64px)}
  .langs{flex-wrap:wrap;justify-content:flex-end;max-width:100%;padding:2px;border-radius:14px}
  .langbtn{padding:5px 7px;font-size:11px}
  .langs .bi .be{display:none}
}