/* Page layout */
		html, body { height: 100%; margin: 0; overflow-x: hidden; }
		body { display: flex; flex-direction: column; }
		header, footer { flex: 0 0 auto; }
		#mapWrap { position: relative; flex: 1 1 auto; min-height: 320px; }
		#map { width: 100%; height: 100%; }

		/* Header */
		header { border-bottom: 1px solid #000; position: relative; z-index: 11000; }
		.top-bar { min-height: 40px; padding: 0 10px; display: flex; align-items: center; }
		.hamburger { height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; margin-left: -4px; }
		.hamburger a { display: inline-block; width: 30px; height: 30px; cursor: pointer; }
		.hamburger img { width: 30px; height: 30px; display: block; }

		.top-bar .top-bar-section { display: flex; justify-content: center; align-items: center; flex: 1; }
		.site-logo { display: inline-flex; align-items: center; height: 40px; }
		.site-logo img { display: block; width: 192px; height: auto; }

		/* Settings (right) */
		.settings { position: relative; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; }
		.settings a { display: inline-block; width: 30px; height: 30px; cursor: pointer; }
		.settings img { width: 30px; height: 30px; display: block; }

		/* Footer + legend */
		footer { border-top: 1px solid #000; }
		#footerGrid { padding: 0 10px; }
		.footer-cell {
			display: flex; align-items: center; justify-content: center;
			min-width: 0; box-sizing: border-box;
			height: 65px; /* each row exactly 65px tall */
			padding: 0; margin: 0;
		}

		/* Legend */
		#legend {
			text-align: center; padding: 0 !important; margin: 0; width: 100%;
			display: flex; align-items: center; justify-content: center;
		}
		#legend img {
			width: auto !important;
			max-width: 100% !important;
			height: auto !important;
			max-height: 48px !important;  /* ensures row never exceeds 65px */
			display: block; image-rendering: auto; margin: 0;
		}

		/* v108 overlay UI DROPDOWN (anchored to the gear) */
		#ui {
			position: absolute; top: calc(100% + 6px); right: 0; z-index: 10030;
			background: rgba(255,255,255,.98); padding: 10px 12px; border-radius: 10px;
			font: 12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;
			box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.12);
			min-width: 300px; max-width: 90vw; max-height: 70vh; overflow: auto;
			border: 1px solid rgba(0,0,0,.08);
			display: none; /* hidden until settings is clicked */
		}
		#ui.show { display: block; }

		.barbs-canvas, .shade-canvas { pointer-events: none; }

		#status {
			position: absolute; bottom: 8px; left: 8px; z-index: 1002;
			background: rgba(255,255,255,.92); padding: 6px 8px; border-radius: 6px;
			font: 12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial;
			box-shadow: 0 1px 4px rgba(0,0,0,.15);
		}

		.leaflet-div-icon.grat-label{
			width:auto!important;height:auto!important;margin:0!important;
			border:1px solid rgba(0,0,0,.45);
			background:rgba(255,255,255,0.85);
			border-radius:5px;
			padding:1px 4px;
			box-sizing:border-box;
			color:#000;
			font:12px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
			white-space:nowrap;
			box-shadow: 0 1px 2px rgba(0,0,0,.25);
			pointer-events:none;
		}
		.grat-top    { transform: translate(-50%,   0%); }
		.grat-bottom { transform: translate(-50%, -100%); }
		.grat-left   { transform: translate(   0%,  -50%); }
		.grat-right  { transform: translate(-100%, -50%); }

		/* Slide-over menu */
		#menuPanel {
			position: fixed; top: 0; left: 0; width: 280px; max-width: 86vw; height: 100%;
			background: #fff; box-shadow: 2px 0 20px rgba(0,0,0,.25);
			transform: translateX(-100%); transition: transform .25s ease; z-index: 10010;
			display: flex; flex-direction: column;
		}
		#menuPanel.open { transform: translateX(0); }
		#menuHeader { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #eee; }
		#menuHeader .title { font-weight: bold; margin: 0; font-size: 14px; }
		#menuClose { background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }
		#menuList { list-style: none; margin: 0; padding: 0; }
		#menuList li { border-bottom: 1px solid #f0f0f0; }
		#menuList li a { display: block; padding: 10px 12px; text-decoration: none; color: #000; }
		#menuList li a:hover { background: #f6f6f6; }
		#menuOverlay {
			position: fixed; top: 0; left: 0; right: 0; bottom: 0;
			background: rgba(0,0,0,.35); opacity: 0; pointer-events: none;
			transition: opacity .25s ease; z-index: 10000;
		}
		#menuOverlay.show { opacity: 1; pointer-events: auto; }

		/* Right-click spot panel */
		#pw-spot {
			position: absolute;
			z-index: 10040;
			background: rgba(255,255,255,.98);
			border: 1px solid rgba(0,0,0,0.12);
			box-shadow: 0 10px 24px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.12);
			border-radius: 10px;
			padding: 10px 12px 8px;
			font: 12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial;
			min-width: 210px; max-width: 86vw;
			padding-right: 40px !important; /* keep content clear of the close button */
		}
		#pw-spot .close { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; width: 24px; height: 24px; cursor: pointer; }
		#pw-spot dl {
			margin: 0;
			display: grid !important;
			grid-template-columns: auto 1fr !important; /* label then value */
			column-gap: 6px !important;
			row-gap: 4px !important;
		}
		#pw-spot dt, #pw-spot dd { margin: 0 !important; }
		#pw-spot .close img { width: 16px; height: 16px; display: block; }

		/* Spot marker (larger crosshair) */
		.pw-spot-marker.leaflet-div-icon {
			background: rgba(255,255,255,0.85);
			border: 1px solid rgba(0,0,0,0.25);
			border-radius: 50%;
			width: 22px; height: 22px;
			box-shadow: 0 0 0 1px #fff inset;
			position: relative;
		}
		.pw-spot-marker.leaflet-div-icon::before,
		.pw-spot-marker.leaflet-div-icon::after {
			content: ""; position: absolute; background: #e53935;
		}
		.pw-spot-marker.leaflet-div-icon::before {
			left: 50%; top: 3px; bottom: 3px; width: 2px; transform: translateX(-50%);
		}
		.pw-spot-marker.leaflet-div-icon::after {
			top: 50%; left: 3px; right: 3px; height: 2px; transform: translateY(-50%);
		}

		/* Loading overlay (small centered panel) */
		#loadingOverlay {
			position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
			z-index: 10050; background: transparent; pointer-events: none;
		}
		#loadingOverlay.hidden { display: none; }
		#loadingOverlay .loading-box {
			display: flex; flex-direction: column; align-items: center; gap: 10px;
			padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.98);
			border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 10px 24px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.12);
		}
		#loadingOverlay .loading-text {
			font: 13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;
			color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.35); white-space: nowrap;
		}

		/* ========= FOOTER ========= */
		/* Controls cluster */
		#ts-controls { width: 100%; display: flex; align-items: center; justify-content: flex-start; }
		#ts-controls .ts-row { height: 40px; display: flex; align-items: center; justify-content: flex-start; gap: 12px 16px; flex-wrap: nowrap; }
		.ts-icons { display: flex; align-items: center; gap: 10px; }
		.ts-btn { border: 0; background: transparent; padding: 0; margin: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
		.ts-btn img { width: 40px; height: 40px; display: block; }
		/* Native select, bordered, readable when disabled */
		#ts-select {
			appearance: auto; -webkit-appearance: auto; -moz-appearance: auto;
			height: 40px; min-height: 40px; line-height: normal;
			padding: 0 10px; font-size: 15px;
			width: 300px; min-width: 0; max-width: 100%;
			box-sizing: border-box;
			margin: 0; border: 1px solid #107BCE; border-radius: 6px; background: initial;
		
		display: block;
	position: relative;
	z-index: 1;
	background: transparent;
	background-color: rgba(255,255,255,0.85);
}

		#ts-select:disabled { color:#000; -webkit-text-fill-color:#000; opacity:1; }

		/* While animating, dim only the disabled buttons (Animate stays clickable) */
		#ts-controls.is-playing #ts-prev:disabled,
		#ts-controls.is-playing #ts-next:disabled { opacity: 0.55; }

/* --- Timestep progress fill behind the timestep dropdown --- */
#ts-select-wrap{
	position: relative;
	display: inline-block;
	width: 300px;
	max-width: 100%;
	overflow: hidden;
	border-radius: 6px;
}
#ts-progress{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	background: rgba(16,123,206,0.20);
	border-radius: 6px;
	pointer-events: none;
	z-index: 0;
}
#ts-select{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	background: transparent;

		display: block;
		}



#ts-controls .ts-row {
		transform: scale(0.92);
	}
}

		/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				gap: 10px;
				width: 100%;
			}
			#ts-select-wrap{
				width: clamp(150px, 45vw, 210px);
				max-width: none;
			}
			#ts-select-wrap #gridStep,
			#ts-select-wrap #ts-select{
				width: 100% !important;
				max-width: none !important;
				min-width: 0 !important;
				box-sizing: border-box;
			}
		}


/* ========= SETTINGS PANEL ICON TOOLBAR (NEW) ========= */
/* Icon toolbar at top of settings panel */
.ui-icon-toolbar {
	display: flex;
	gap: 8px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #ddd;
}

.icon-btn {
	background: #f8f8f8;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.icon-btn:hover {
	background: #e8e8e8;
	border-color: #999;
}

.icon-btn:active {
	background: #d8d8d8;
	transform: scale(0.95);
}

.icon-btn img {
	display: block;
	width: 24px;
	height: 24px;
}

#ui label {
	display: block;
	margin-bottom: 8px;
}

#ui label:last-child {
	margin-bottom: 0;
}
/* ========= END SETTINGS PANEL ICON TOOLBAR ========= */


		/* --- v298: mobile alignment + sizing for timestep controls --- */
		/* Desktop/large screens: keep controls left-aligned (existing behaviour) */

		/* When footer switches to 2 rows (mobile layout), center the controls */
		@media (max-width: 1023px) {
			#ts-controls{
				justify-content: center;
			}
			/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				justify-content: center;
			}
		}

		/* Phones: reduce side padding so controls don't get pushed off-screen */
		@media (max-width: 600px) {
			#ts-controls{
				padding-left: 8px;
				padding-right: 8px;
				box-sizing: border-box;
			}
		}

		/* Small phones (<420px): keep everything on one row, make combobox wider */
		@media (max-width: 420px) {
			#ts-controls{
				padding-left: 6px;
				padding-right: 6px;
			}
			/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				gap: 8px;
			}
			#ts-select-wrap{
				width: clamp(210px, 60vw, 260px);
				max-width: none;
			}
			#ts-select-wrap #gridStep,
			#ts-select-wrap #ts-select{
				width: 100% !important;
				max-width: none !important;
				min-width: 0 !important;
				box-sizing: border-box;
			}
		}

		/* Very small phones (<360px): slightly tighter spacing and buttons */
		@media (max-width: 360px) {
			/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				gap: 6px;
			}
			#ts-select-wrap{
				width: clamp(220px, 65vw, 270px);
			}
			.ts-btn{ width: 34px; height: 34px; }
			.ts-btn img{ width: 34px; height: 34px; }
		}


		/* --- v299: desktop symmetry + mobile proportional scaling --- */

		/* Desktop: make timestep control group visually match legend width */
		@media (min-width: 1024px) {
			#footerGrid { display: flex; align-items: stretch; height: 65px; }
			#footerGrid > .footer-cell { flex: 0 0 50%; max-width: 50%; }
			#footer-left  { justify-content: flex-end; padding-right: 12px; border-right: none; }
			#footer-right { justify-content: flex-start; padding-left: 12px; }
			#legend      { justify-content: flex-end; }   /* legend to right within left column */
			#ts-controls { justify-content: flex-start; } /* controls to left within right column */
			
			#ts-select-wrap{
				width: 340px;
				max-width: 340px;
			}
			/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				gap: 12px;
			}
		}

		/* Mobile <1024px: two rows (legend, then controls), both centered */
		@media (max-width: 1023px) {
			#footerGrid {
				display: grid; grid-template-columns: 1fr; grid-template-rows: 56px 50px;
				grid-template-areas: "legend" "right"; align-items: stretch; height: auto;
			}
			#footer-left  { grid-area: legend; justify-content: center; padding-right: 0; border-right: 0; height: 56px; min-height: 56px; }
			#footer-right { grid-area: right;  justify-content: center; padding-left: 0; border-top: 1px solid #ccc; height: 50px; min-height: 50px; }
			.footer-cell  { /* individual cells get their own heights above */ }
			.ts-btn, .ts-btn img { width: 36px; height: 36px; }
			#ts-controls .ts-row  { height: 36px; gap: 10px 14px; }
			#ts-select { height: 36px; min-height: 36px; width: 260px; min-width: 220px; 
		display: block;
		}
			
			/* Mobile footer mode: center the controls (override any earlier rules) */
			#ts-controls{
				justify-content: center !important;
			}
			/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				justify-content: center !important;
			}
			
			/* In 2-row footer mode, keep controls as wide as legend */
			#ts-select-wrap{
				width: clamp(300px, 92vw, 340px);
				max-width: none;
			}
		}

		/* Phones: keep proportions but scale down as viewport shrinks */
		@media (max-width: 420px) {
			#ts-controls{
				padding-left: 6px !important;
				padding-right: 6px !important;
				box-sizing: border-box;
			}
			/* Remove proportional scaling here (it was making the controls too narrow) */
			/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				transform: none !important;
			}

			/* Give the combobox more room while still fitting the viewport */
			#ts-select-wrap{
				width: clamp(280px, 94vw, 340px);
			}
			
			/* reduce timestep combobox font size on small screens (timestep select only) */
			#ts-select{
				font-size: 13px !important;
			}
		}

		@media (max-width: 390px) {
			/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				transform: scale(0.92);
			}
		}

		@media (max-width: 360px) {
			/* Now scale slightly + reduce font so full date/time is readable */
			/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				transform-origin: center center;
				transform: scale(0.92) !important;
			}
			#gridStep{
				font-size: 12px !important;
			}
			#ts-select-wrap{
				width: 260px;
				max-width: 260px;
			}
			
			#ts-select{
				font-size: 12px !important;
			}
		}

		@media (max-width: 330px) {
			/* Graticule label positioning: adjust top/bottom without affecting left/right */
		.leaflet-div-icon.grat-label.grat-top{
			margin-top:-4px!important;
		}
		.leaflet-div-icon.grat-label.grat-bottom{
			margin-top:10px!important;
		}
		.leaflet-div-icon.grat-label.grat-left,
		.leaflet-div-icon.grat-label.grat-right{
			margin-top:0!important;
		}
#ts-controls .ts-row{
				transform: scale(0.88) !important;
			}
			#gridStep{
				font-size: 11px !important;
			}
			
			#ts-select{
				font-size: 11px !important;
			}
		}


		/* --- Mobile width safety for timestep controls (no wrap, no scroll) --- */
		@media (max-width: 420px) {
			#ts-select-wrap {
				width: 240px;
				max-width: 240px;
			}
			#gridStep {
				width: 240px;
				max-width: 240px;
			}
			#ts-controls .ts-row {
				gap: 6px;
			}
		}

		@media (max-width: 360px) {
			#ts-select-wrap {
				width: 215px;
				max-width: 215px;
			}
			#gridStep {
				width: 215px;
				max-width: 215px;
			}
			#ts-controls .ts-row {
				transform: scale(0.92);
			}
		}


		/* Extra mobile edge breathing room for timestep controls */
		@media (max-width: 420px) {
			#ts-controls {
				padding-left: 6px;
				padding-right: 6px;
			}
		}

		@media (max-width: 360px) {
			#ts-controls {
				padding-left: 8px;
				padding-right: 8px;
			}
		}