/*
 * zmanimmap4.css  -  (c) 2007-2026 Eliyahu Hershfeld
 */

:root {
	--kj-brown: #6b4226;        /* headers, table head, active tab */
	--kj-brown-dark: #4f2f18;
	--kj-brown-light: #8a5a2b;  /* links, buttons */
	--kj-cream: #fff7ec;        /* text on brown */
	--kj-beige: #f6f0e3;        /* zebra stripe / surfaces */
	--kj-beige-2: #ece1cd;      /* inactive tab background */
	--kj-tan-border: #d8c7ad;
	--kj-text: #3b2f23;         /* warm dark-brown body text */
	--rhumb: #1a4fd6;           /* matches the blue map line  */
	--geodesic: #1e7e34;        /* matches the green map line */
}

/* ---- Layout ---------------------------------------------------------- */
html, body { height: 100%; margin: 0; padding: 0; }
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--kj-text);
	display: flex;
	flex-direction: column;
}
#topbar { flex: 0 0 auto; }
#map { flex: 1 1 auto; min-height: 0; width: 100%; }

a { color: var(--kj-brown-light); }
.rhumb, .rhumb a { color: var(--rhumb); }
.geodesic, .geodesic a { color: var(--geodesic); }

/* ---- Search + Link control (header bar above the map) --------------- */
#topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: #fff;
	border-bottom: 1px solid var(--kj-tan-border);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	z-index: 2;
}
.map-search-control {
	display: flex;
	flex-wrap: wrap;            /* extra icons drop to a second row on narrow screens */
	gap: 6px;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 760px;
}
.topbar-controls {
	display: none;              /* portrait: date/calc live in the info window */
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}
.topbar-controls input[type="date"],
.topbar-controls select {
	height: 40px;
	font-size: 15px;
	padding: 2px 8px;
	border: 1px solid var(--kj-tan-border);
	border-radius: 8px;
	background: #fff;
}
.map-search-control input[type="text"] {
	flex: 1 1 150px;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	font-size: 16px;
	border: 1px solid var(--kj-tan-border);
	border-radius: 8px;
}
/* Print / share icon buttons in the search bar. */
.map-search-control .search-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 48px;
	min-height: 44px;
	padding: 0 10px;
	color: var(--kj-brown-dark);
	background: var(--kj-beige-2);
	border: 1px solid var(--kj-tan-border);
	border-radius: 8px;
	cursor: pointer;
}
.map-search-control .search-action:hover { background: var(--kj-beige); }
.map-search-control .search-action svg { width: 22px; height: 22px; }
.map-search-control button {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--kj-cream);
	background: var(--kj-brown);
	border: none;
	border-radius: 8px;
	cursor: pointer;
}
.map-search-control button:hover { background: var(--kj-brown-dark); }

/* ---- Google InfoWindow chrome ---------------------------------------- */
/* Google's header row (and its close button) is disabled in JS; we render    */
/* our own .iw-close. Just trim the bubble's content padding here.            */
.gm-style-iw.gm-style-iw-c { padding: 8px 8px 12px !important; }
.gm-style-iw-d { overflow: auto !important; }

/* Google paints the InfoWindow at a default spot for a frame (or several, on a
   slow cold load) before snapping it to the marker. We hide the bubble at
   creation and reveal it from JS only once its position has stopped moving, so
   the mis-positioned frames are never seen. */
.gm-style .gm-style-iw-c { opacity: 0; transition: opacity 0.18s ease-out; }
.gm-style .gm-style-iw-c.iw-shown { opacity: 1; }

/* ---- Info window content -------------------------------------------- */
.infowindow { position: relative; margin: 0; width: 100%; box-sizing: border-box; }
.iw-wrap { position: relative; }
.iw-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--kj-text);
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	z-index: 3;
}
.iw-close:hover { background: var(--kj-beige); }
.iw-close:focus { outline: none; }
.iw-close:focus-visible { outline: none; }
/* Inside the tabbed window the close sits in-flow at the end of the tab row, so
   it's always in the corner and the scrolling tabs never slide under it. */
.zm-topbar .iw-close {
	position: static;
	flex: 0 0 auto;
	width: 38px;
	height: auto;
	align-self: stretch;
	background: #fff;
}
.koselinfowindow { width: min(82vw, 340px); max-width: 100%; padding-top: 30px; box-sizing: border-box; }
.koselinfowindow img { width: 100%; height: auto; display: block; }
.kosel-figure { margin: 0 0 8px; }
.kosel-figure a { display: block; }
.kosel-figure figcaption {
	margin-top: 4px;
	font-size: 11px;
	font-style: italic;
	color: var(--kj-brown-light);
	line-height: 1.3;
}

/* ---- Tab widget ------------------------------------------------------ */
/*
 * Stable size + pinned bar:
 *   .zm-tabs   = FIXED height, overflow hidden -> window doesn't jump per tab
 *   .zm-tabbar = flex:0 0 auto -> always visible
 *   .zm-panel  = flex:1 1 auto, overflow:auto -> the only scrolling region
 */
.zm-tabs {
	display: flex;
	flex-direction: column;
	/* A firm width (no max-width:100%) so the Google bubble is forced to this
	   width instead of collapsing to the table's natural width. Paired with the
	   InfoWindow minWidth set in JS so iOS can't shrink it. */
	width: min(96vw, 500px);
	height: min(72vh, 480px);   /* fixed, so height is the same on every tab */
	overflow: hidden;
}

.zm-topbar {
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
	border-bottom: 2px solid var(--kj-tan-border);
}

.zm-tabbar {
	flex: 1 1 auto;
	min-width: 0;               /* allow the bar to shrink and scroll, not push the X */
	display: flex;
	flex-wrap: nowrap;          /* always one row */
	overflow-x: auto;           /* scroll horizontally if they don't fit */
	overflow-y: hidden;
	scrollbar-width: none;      /* hide the scrollbar (Firefox) */
	gap: 4px;
	background: #fff;
}
.zm-tabbar::-webkit-scrollbar { display: none; }   /* hide the scrollbar (WebKit) */

.zm-tab {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 8px 11px;
	font-size: 13px;
	font-weight: 600;
	color: var(--kj-brown);
	background: var(--kj-beige-2);
	border: none;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	white-space: nowrap;
}
.zm-tab:hover { background: #e3d4ba; }
.zm-tab.active {
	color: var(--kj-brown-dark);
	background: #fff;
	box-shadow: inset 0 -3px 0 var(--kj-brown);
}
.zm-tab:focus { outline: none; }
.zm-tab:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--kj-brown); }

.zm-panel {
	display: none;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
	-webkit-overflow-scrolling: touch;
	padding-top: 8px;
	padding-right: 4px;
}
.zm-panel h3 { font-size: 1.05em; margin: 0.6em 0 0.3em; color: var(--kj-brown-dark); }
.zm-panel img { max-width: 100%; height: auto; display: block; border-radius: 6px; }

/* ---- Zmanim tables --------------------------------------------------- */
table.tigerStripe {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
table.tigerStripe td, table.tigerStripe th { padding: 6px 8px; border: none; vertical-align: top; }

/* keep the time on one line; let the label column wrap instead */
table.tigerStripe td:last-child,
table.tigerStripe th:last-child {
	white-space: nowrap;
	text-align: right;
	width: 1%;
}

table.tigerStripe tbody tr:nth-child(even),
table.tigerStripe tbody tr.odd { background: var(--kj-beige); }

table.tigerStripe tr.tablehead th {
	background: var(--kj-brown);
	color: var(--kj-cream);
	font-weight: 600;
	text-align: start;
	position: sticky;
	top: 0;
	z-index: 1;
}
.tablehead a { color: var(--kj-cream); text-decoration: underline; }

/* in-table divider for the Shaah Zmanis duration rows (not sticky) */
table.tigerStripe tr.zm-sectionhead td {
	background: var(--kj-brown);
	color: var(--kj-cream);
	font-weight: 600;
}

.zm-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 6px 0;
	font-size: 13px;
}
.zm-controls label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--kj-text);
}
.zm-controls input[type="date"],
.zm-controls select {
	height: 34px;
	font-size: 15px;
	padding: 1px 6px;
	border: 1px solid var(--kj-tan-border);
	border-radius: 6px;
	background: #fff;
}
.zm-xls {
	display: none;                 /* hidden on mobile (see desktop media query) */
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 30px;
	color: var(--kj-brown-light);
	border: 1px solid var(--kj-tan-border);
	border-radius: 6px;
	text-decoration: none;
}
.zm-xls svg { width: 18px; height: 18px; }
.zm-xls:hover { background: var(--kj-beige); }

/* ---- Day/night time slider (map control, bottom-center) -------------- */
.nite-slider {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	/* Inset from the screen edges on phones so the rounded ends aren't clipped;
	   comfortably wide on desktop where there's room. */
	width: min(640px, calc(100vw - 28px));
	/* Float above the bottom map controls (Map/Satellite toggle + Google logo at
	   bottom-left) so the centered pill never overlaps them. */
	margin: 0 0 56px;
	padding: 7px 14px;
	background: rgba(255, 247, 236, 0.94);
	border: 1px solid var(--kj-tan-border);
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
	font-size: 13px;
	color: var(--kj-text);
}
.nite-slider input[type="range"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 20px;
	margin: 0;
	vertical-align: middle;
	background: transparent;
	accent-color: var(--kj-brown);
}
.nite-slider .nite-live {
	flex: 0 0 auto;
	padding: 4px 13px;
	font-size: 13px;
	line-height: 1.25;
	font-weight: 600;
	white-space: nowrap;
	color: var(--kj-brown-dark);
	background: var(--kj-beige-2);
	border: 1px solid var(--kj-tan-border);
	border-radius: 999px;
	cursor: pointer;
}
.nite-slider .nite-live.on {
	color: var(--kj-cream);
	background: var(--kj-brown);
	border-color: var(--kj-brown);
}
.nite-slider .nite-time {
	flex: 0 0 auto;
	min-width: 74px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---- Desktop refinements --------------------------------------------- */
@media (min-width: 700px) {
	.map-search-control { flex: 0 0 auto; }
	.map-search-control input[type="text"] { width: 320px; flex: 0 0 320px; }
	.zm-tab { font-size: 15px; }
	table.tigerStripe { font-size: 13px; }
	.zm-tabs { width: 470px; height: min(56vh, 430px); }

	.nite-slider { padding: 9px 18px; gap: 12px; font-size: 14px; }
	.nite-slider .nite-live { padding: 5px 15px; font-size: 14px; }
	.nite-slider .nite-time { min-width: 82px; }

	/* date, algorithm and the download icon all live in the header bar; the
	   in-window controls row is empty on wide screens, so hide it. */
	.topbar-controls { display: flex; }
	.topbar-controls .zm-xls { display: inline-flex; height: 40px; width: 38px; }
	.zm-controls { display: none; }
}

/* Short viewports (typically phone landscape): the info window must fit in the
   map area below the header, otherwise its top overflows up and the header
   masks it. Keep it shorter than the available height. Placed last so it wins
   over the rules above when both match. */
@media (max-height: 520px) {
	.zm-tabs { height: calc(100vh - 150px); }
}

/* Location spinner: shown while we wait for the browser's geolocation so the
   user sees feedback instead of a blank map that then jumps to their location.
   Non-blocking (pointer-events: none) and removed once the location settles. */
.geo-spinner {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.geo-spinner.hide { opacity: 0; }
.geo-spinner-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 22px;
	background: var(--kj-cream);
	border: 1px solid var(--kj-tan-border);
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	color: var(--kj-text);
	font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.geo-spinner-ring {
	width: 30px;
	height: 30px;
	border: 3px solid var(--kj-beige-2);
	border-top-color: var(--kj-brown);
	border-radius: 50%;
	animation: geo-spin 0.8s linear infinite;
}
@keyframes geo-spin { to { transform: rotate(360deg); } }

/* ---- i18n (Hebrew / RTL) --------------------------------------------- */
/* Language toggle: secondary (outline) style to set it apart from Search/Link. */
.map-search-control .lang-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 0 12px;
	background: var(--kj-beige-2);
	border: 1px solid var(--kj-tan-border);
}
.map-search-control .lang-toggle svg {
	display: block;
	width: 26px;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.map-search-control .lang-toggle:hover { background: var(--kj-beige); }

/* In a right-to-left panel the time column sits on the left, so hug that edge. */
[dir="rtl"] table.tigerStripe td:last-child,
[dir="rtl"] table.tigerStripe th:last-child { text-align: left; }

/* ---- Next-upcoming-zman highlight (only when viewing today) ----------- */
table.tigerStripe tbody tr.zm-next td {
	font-weight: 700;
	background: #fde6c8;
}
table.tigerStripe tbody tr.zm-next td:first-child {
	border-inline-start: 3px solid var(--kj-brown);
}

/* ---- Prev/next-day arrow buttons ------------------------------------- */
.date-nav {
	flex: 0 0 auto;
	min-width: 32px;
	padding: 0 8px;
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	color: var(--kj-brown-dark);
	background: var(--kj-beige-2);
	border: 1px solid var(--kj-tan-border);
	border-radius: 6px;
	cursor: pointer;
}
.date-nav:hover { background: var(--kj-beige); }
.zm-controls .date-nav { height: 34px; }
.topbar-controls .date-nav { height: 40px; border-radius: 8px; }

/* ---- "Use my location" map button ------------------------------------ */
.locate-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 10px 92px 0;     /* sit above the tilt control / attribution */
	color: var(--kj-brown);
	background: #fff;
	border: none;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
.locate-btn:hover { background: var(--kj-cream); }
.locate-btn svg { width: 22px; height: 22px; }

/* ---- Respect reduced-motion preferences ------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.gm-style .gm-style-iw-c { transition: none; }
	.geo-spinner { transition: none; }
	.geo-spinner-ring { animation: none; }
	.zm-toast { transition: opacity .01s; }
}

/* ---- Visible keyboard focus (accessibility) -------------------------- */
.zm-tab:focus-visible,
.iw-close:focus-visible,
.date-nav:focus-visible,
.lang-toggle:focus-visible,
.search-action:focus-visible,
.locate-btn:focus-visible,
.zm-action:focus-visible,
.map-search-control button:focus-visible {
	outline: 2px solid var(--kj-brown-dark);
	outline-offset: 2px;
}
.zm-panel:focus { outline: none; }   /* focusable for scrolling, but no focus ring */

/* ---- Print / Share icon buttons -------------------------------------- */
.zm-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	color: var(--kj-brown-dark);
	background: var(--kj-beige-2);
	border: 1px solid var(--kj-tan-border);
	border-radius: 8px;
	cursor: pointer;
}
.zm-action:hover { background: var(--kj-beige); }
.zm-action svg { width: 18px; height: 18px; }
.topbar-controls .zm-action { width: 40px; height: 40px; }
.topbar-controls .zm-action svg { width: 20px; height: 20px; }

/* ---- Transient confirmation toast (clipboard fallback) --------------- */
.zm-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%) translateY(8px);
	z-index: 9999;
	max-width: 86vw;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--kj-cream);
	background: var(--kj-brown-dark);
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.zm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Places autocomplete dropdown (render above the map) ------------- */
.pac-container { z-index: 10000; }

/* ---- Compass to Yerushalayim (Direction tab) ------------------------- */
.compass {
	margin: 6px 0 14px;
	text-align: center;
}
.compass-title {
	font-weight: 600;
	color: var(--kj-brown-dark);
	margin-bottom: 4px;
}
.compass-svg {
	width: 150px;
	height: 150px;
	max-width: 60%;
}
.compass-ring {
	fill: var(--kj-cream);
	stroke: var(--kj-tan-border);
	stroke-width: 2;
}
.compass-top { fill: var(--kj-brown-dark); }
.compass-n {
	font: 700 14px Georgia, serif;
	fill: var(--kj-brown);
}
.compass-arrow { fill: var(--geodesic); }
.compass-hub { fill: var(--kj-brown-dark); }
.compass-needle, .compass-north { transition: transform .12s ease-out; }
.compass-readout {
	font-weight: 700;
	color: var(--geodesic);
	margin-top: 2px;
}
.compass-enable {
	margin-top: 6px;
	padding: 6px 12px;
	font-size: 13px;
	color: var(--kj-cream);
	background: var(--kj-brown);
	border: none;
	border-radius: 8px;
	cursor: pointer;
}
.compass-enable:hover { background: var(--kj-brown-dark); }
.compass-hint {
	margin-top: 5px;
	font-size: 12px;
	color: var(--kj-text);
	opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
	.compass-needle, .compass-north { transition: none; }
}

/* ---- Print: show only the zmanim sheet; map on its own page ---------- */
#kj-print { display: none; }
@media print {
	body > *:not(#kj-print) { display: none !important; }
	#kj-print {
		display: block;
		font-family: Georgia, 'Times New Roman', serif;
		color: #000;
	}
	#kj-print h1 { font-size: 18px; margin: 0 0 2px; }
	#kj-print h2 { font-size: 16px; margin: 0 0 6px; }
	#kj-print .sub { font-size: 12px; color: #444; margin: 0 0 12px; }
	#kj-print table { border-collapse: collapse; width: 100%; font-size: 12px; }
	#kj-print td { padding: 4px 8px; border-bottom: 1px solid #ccc; vertical-align: top; }
	#kj-print td.t { text-align: right; white-space: nowrap; }
	#kj-print tr:nth-child(even) {
		background: #f2f2f2;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	#kj-print .foot { margin-top: 12px; font-size: 10px; color: #888; }
	#kj-print .kj-print-map { page-break-before: always; text-align: center; }
	#kj-print .kj-print-map img { max-width: 100%; height: auto; }
	[dir="rtl"] #kj-print td.t { text-align: left; }
}

/* ---- Search-bar overflow (hamburger) menu ---------------------------- */
.search-menu-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
.search-menu {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline-end: 0;
	z-index: 20;
	min-width: 168px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--kj-tan-border);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.search-menu[hidden] { display: none; }
.search-menu-item,
.search-menu-item:link,
.search-menu-item:visited {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	font-size: 15px;
	font-weight: 600;
	text-align: start;
	color: var(--kj-brown-dark);
	text-decoration: none;
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}
.search-menu-item:hover { background: var(--kj-beige); }
.search-menu-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
.search-menu-item:focus-visible {
	outline: 2px solid var(--kj-brown-dark);
	outline-offset: 1px;
}

/* ---- Search bar vs hamburger menu: responsive show/hide -------------- */
/* On mobile the flag/Excel live in the menu; on wide they sit in the bar
   and top controls, so hide the menu duplicates. */
@media (max-width: 699px) {
	.map-search-control > .wide-only { display: none; }
}
@media (min-width: 700px) {
	.search-menu .mobile-only { display: none; }
}
/* Let flag SVGs keep their aspect ratio inside menu items. */
.search-menu-item svg { height: auto; max-height: 22px; }
.search-menu-item img,
.search-menu-item .lang-flag { width: 22px; }

/* ---- Accessibility / fallback helpers -------------------------------- */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}
.noscript-msg {
	margin: 16px;
	padding: 14px 16px;
	font-size: 15px;
	color: var(--kj-text);
	background: var(--kj-beige);
	border: 1px solid var(--kj-tan-border);
	border-radius: 10px;
}
.map-load-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	padding: 24px;
	text-align: center;
	color: var(--kj-text);
	background: var(--kj-beige);
}
.map-load-error p { margin: 0; font-size: 16px; }
.map-load-error button {
	margin-top: 6px;
	padding: 9px 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--kj-cream);
	background: var(--kj-brown);
	border: none;
	border-radius: 8px;
	cursor: pointer;
}
.map-load-error button:hover { background: var(--kj-brown-dark); }

/* ---- Item #3: slide-out search + mobile menu controls ---------------- */
.search-field { display: flex; align-items: center; gap: 6px; }
.search-field .search-close { display: none; }
.search-close {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	font-size: 22px;
	line-height: 1;
	color: var(--kj-text);
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}
.search-close:hover { background: var(--kj-beige); }

.search-menu { max-height: min(80vh, 560px); overflow-y: auto; }
.search-menu-control { display: flex; align-items: center; gap: 6px; padding: 8px 14px; }
.search-menu-control input[type="date"],
.search-menu-control select {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 4px 8px;
	border: 1px solid var(--kj-tan-border);
	border-radius: 8px;
	background: #fff;
	color: var(--kj-text);
	font-size: 15px;
}
.search-menu-control .date-nav { height: 36px; flex: 0 0 auto; }
.search-menu-clabel { flex: 0 0 auto; font-size: 13px; color: var(--kj-brown-light); }
.search-menu-sep { height: 1px; background: var(--kj-tan-border); margin: 6px 10px; }

@media (max-width: 699px) {
	.zm-controls { display: none; }
	.search-field {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 8px 10px;
		background: var(--kj-cream);
		border-bottom: 1px solid var(--kj-tan-border);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
		transform: translateY(-115%);
		transition: transform 0.22s ease;
		z-index: 1200;
	}
	.map-search-control.search-open .search-field { transform: translateY(0); }
	.search-field input[type="text"] { flex: 1 1 auto; min-width: 0; }
	.search-field .search-close { display: inline-flex; }
}

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

/* ---- Item #3 follow-up: float hamburger at the map corner ------------ */
/* The menu lives inside .map-search-control, whose generic <button> rule
   (solid brown) otherwise bleeds onto the menu rows. Restore the menu look. */
.map-search-control .search-menu-item { background: transparent; color: var(--kj-brown-dark); }
.map-search-control .search-menu-item:hover { background: var(--kj-beige); }
.map-search-control .search-menu .date-nav { background: var(--kj-beige-2); color: var(--kj-brown-dark); }
.map-search-control .search-menu .date-nav:hover { background: var(--kj-beige); }

@media (max-width: 699px) {
	/* Reclaim the header strip: overlay the map and let gestures pass through. */
	#topbar {
		position: absolute;
		top: 0;
		inset-inline-start: 0;
		inset-inline-end: 0;
		padding: 0;
		background: transparent;
		border: none;
		box-shadow: none;
		pointer-events: none;
		z-index: 3;
	}
	/* Hamburger floats in the top corner: left for LTR, right for RTL. */
	.map-search-control {
		position: absolute;
		top: 8px;
		inset-inline-start: 8px;
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		pointer-events: auto;
	}
	.map-search-control .ham-btn {
		background: var(--kj-cream);
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	}
	/* Drop the menu from the hamburger's start edge so it stays on-screen. */
	.search-menu {
		inset-inline-start: 0;
		inset-inline-end: auto;
		width: 264px;
		max-width: calc(100vw - 24px);
	}
}

/* ---- Geolocation permission help modal ------------------------------- */
.perm-help {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	padding: 16px;
}
.perm-help-box {
	position: relative;
	box-sizing: border-box;
	width: min(92vw, 420px);
	max-height: 86vh;
	overflow-y: auto;
	background: var(--kj-cream);
	color: var(--kj-text);
	border: 1px solid var(--kj-tan-border);
	border-radius: 14px;
	padding: 22px 20px 18px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.perm-help-title { margin: 0 0 8px; font-size: 18px; color: var(--kj-brown-dark); }
.perm-help-intro { margin: 0 0 12px; }
.perm-help-steps {
	margin: 0 0 12px;
	padding: 12px;
	background: var(--kj-beige);
	border-radius: 10px;
	line-height: 1.55;
}
.perm-help-foot { margin: 0 0 16px; font-size: 14px; color: var(--kj-brown-light); }
.perm-help-ok {
	border: none;
	cursor: pointer;
	background: var(--kj-brown);
	color: var(--kj-cream);
	padding: 9px 18px;
	border-radius: 9px;
	font-size: 15px;
}
.perm-help-ok:hover { background: var(--kj-brown-dark); }
.perm-help[dir="rtl"] .perm-help-title,
.perm-help[dir="rtl"] .perm-help-intro,
.perm-help[dir="rtl"] .perm-help-steps,
.perm-help[dir="rtl"] .perm-help-foot { text-align: right; }