/* 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-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-retina 
.leaflet-touch 
.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded 
.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 */



/* 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;}
/* IE 6-8 fallback colors */
.leaflet-oldie 
.leaflet-oldie 

.leaflet-oldie 
.leaflet-oldie 

.leaflet-oldie 
.leaflet-oldie 

.marker-cluster{background-clip: padding-box;
	border-radius: 20px;}
.marker-cluster div{width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;}
.marker-cluster span{line-height: 30px;}
/* ── Leaflet,themed ── */
.leaflet-container{background:transparent;font-family:var(--font);font-size:13px;outline:0}
.leaflet-container a{color:var(--accent)}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--surf);color:var(--ink);
  border-bottom-color:var(--line);width:29px;height:29px;line-height:29px}
.leaflet-bar{border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.leaflet-bar a:first-child{border-radius:7px 7px 0 0}
.leaflet-bar a:last-child{border-radius:0 0 7px 7px}
.leaflet-control-attribution{background:color-mix(in srgb,var(--surf) 88%,transparent)!important;
  color:var(--ink3)!important;font-size:10px!important;padding:2px 7px;border-radius:5px 0 0 0}
.leaflet-control-scale-line{background:color-mix(in srgb,var(--surf) 86%,transparent);
  border-color:var(--line2);color:var(--ink2);font-family:var(--mono);font-size:10px}
.leaflet-touch .leaflet-bar a{width:31px;height:31px;line-height:31px}
/* smooth layer transitions — no blink between analysis times */
.leaflet-layer{transition:opacity .38s ease}
.rv-rain .leaflet-tile{transition:opacity .25s ease}
.rv-sensor i,.rv-gauge i{transition:background .38s ease,border-color .38s ease,transform .15s ease}
.rv-clu b,.rv-clu::after{transition:background .38s ease}
.leaflet-fade-anim .leaflet-tile{will-change:opacity}
.shell[data-t="clean"] .leaflet-bottom.leaflet-left{bottom:74px}
.leaflet-control-attribution{margin:0!important}
/* markers */
.rv-sensor i{display:block;width:12px;height:12px;border-radius:50%;box-sizing:border-box;
  border:1.6px solid #FEAC26;transition:opacity .15s}
.rv-sensor.dim{opacity:.30}
.rv-sensor.sat i{border-color:#E03A2E;box-shadow:0 0 0 3px rgba(224,58,46,.22)}
.rv-sensor:hover i{transform:scale(1.25)}
.rv-gauge i{display:block;width:11px;height:11px;box-sizing:border-box;border:1.7px solid #4668B0}
.rv-ltg svg{width:10px;height:14px;display:block}
.rv-rdr svg{width:14px;height:14px;display:block;opacity:.8}
.rv-pane{transition:opacity .42s ease}
.rv-city{white-space:nowrap}
.rv-city i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--ink3);left:-2px;top:-2px}
.rv-city i{position:absolute;width:3.5px;height:3.5px;border-radius:50%;
  background:currentColor;opacity:.5;left:-1.75px;top:-1.75px}
.rv-city span{position:absolute;left:6px;top:-7px;font-family:var(--font);font-size:10.5px;
  font-weight:600;letter-spacing:.01em;pointer-events:none;white-space:nowrap}
.rv-city.r0 span,.rv-city.r1 span{font-size:12px;font-weight:700}
.rv-city.r2 span{font-size:11px}
.rv-city.r6 span,.rv-city.r7 span{font-size:9.5px;font-weight:500;opacity:.9}
.rv-clu{display:grid;place-items:center;cursor:pointer}
/* never set position here: Leaflet needs absolute on the icon */
.rv-clu b{position:absolute;inset:0;border-radius:50%;opacity:.32}
.rv-clu::after{content:"";position:absolute;inset:5px;border-radius:50%;
  background:var(--surf);opacity:.9;border:1.5px solid #FEAC26}
.rv-clu span{position:relative;z-index:2;font-family:var(--mono);font-size:11.5px;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums}
.marker-cluster{background:none}
.marker-cluster div{background:none}
/* tooltip */
.leaflet-tooltip.rv-tip{background:var(--surf);border:1px solid var(--line);border-radius:13px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);padding:13px 15px;min-width:206px;color:var(--ink);
  font-family:var(--font);white-space:normal}
.leaflet-tooltip.rv-tip:before{display:none}
/* ═══════════ shared shell ═══════════ */
:root{color-scheme:light; --amber:#FEAC26; --crit:#E03A2E; --good:#12A06A;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;}}
:root[data-theme="dark"]{color-scheme:dark;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;
  background:#0B0F14;color:#E8EFF7;font-family:"Figtree",Arial,sans-serif}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid #FEAC26;outline-offset:2px}
.mono{font-variant-numeric:tabular-nums}
.lg-d{display:none}
.lg-l{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg-d{display:block}
:root:not([data-theme="light"]) .lg-l{display:none}}
:root[data-theme="dark"] .lg-d{display:block}
:root[data-theme="dark"] .lg-l{display:none}
/* the futuristic shell follows the same light/dark switch as the others */
#stack{position:relative;height:100%;overflow:hidden}
#mapwrap{position:absolute;inset:0;z-index:0}
.shell{position:absolute;inset:0;display:none;flex-direction:column}
.shell.live{display:flex}
.maphole{position:relative;flex:1;min-height:0;min-width:0}
/* ═══════════ mockup switcher ═══════════ */
.switch{position:fixed;z-index:90;left:50%;transform:translateX(-50%);
  top:calc(64px + env(safe-area-inset-top,0px));
  display:flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(23,34,56,.94);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);box-shadow:0 10px 34px rgba(0,0,0,.45)}
.switch button{padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:rgba(232,239,247,.62);white-space:nowrap;letter-spacing:.01em}
.switch button[aria-pressed="true"]{background:#4668B0;color:#fff}
.switch .sep{width:1px;background:rgba(255,255,255,.16);margin:4px 3px}
.switch .mode{padding:7px 13px;color:rgba(232,239,247,.62);display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600}
.switch .mode svg{width:13px;height:13px;flex:none}
.switch .mode:hover{color:#fff}
/* ═══════════ tokens per theme ═══════════ */
.shell[data-t="clean"]{--bg:#F2F6FA;--surf:#FFFFFF;--surf2:#F7FAFC;--ink:#172238;--ink2:#5A6E82;--ink3:#93A3B4;
  --line:#E2E9F0;--line2:#CEDAE5;--accent:#4668B0;
  --sh:0 2px 4px rgba(16,32,52,.05),0 10px 30px rgba(16,32,52,.09);
  --shs:0 1px 2px rgba(16,32,52,.06),0 4px 12px rgba(16,32,52,.07);
  --r:14px;--font:"Figtree",Arial,sans-serif;--mono:"IBM Plex Mono",monospace;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shell[data-t="clean"]{--bg:#0B1120;--surf:#141D30;--surf2:#10182A;--ink:#E9F0F7;--ink2:#93A7BC;--ink3:#607689;
  --line:#22304A;--line2:#2E3F5E;--accent:#7B96D6;
  --sh:0 2px 4px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.5);
  --shs:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.4);}}
:root[data-theme="dark"] .shell[data-t="clean"]{--bg:#0B1120;--surf:#141D30;--surf2:#10182A;--ink:#E9F0F7;--ink2:#93A7BC;--ink3:#607689;
  --line:#22304A;--line2:#2E3F5E;--accent:#7B96D6;
  --sh:0 2px 4px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.5);
  --shs:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.4);}
.shell{background:var(--bg);color:var(--ink);font-family:var(--font)}
/* ═══════════ 1 · CLEAN ═══════════ */
.c-bar{position:absolute;top:0;left:0;right:0;z-index:16;display:flex;align-items:center;gap:10px;
  padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top,0px));pointer-events:none;
  flex-wrap:wrap;row-gap:8px}
.c-bar .gap{flex:1;min-width:12px}
.c-bar>*{pointer-events:auto}
.c-logo{display:flex;align-items:center;gap:11px;background:var(--surf);border-radius:var(--r);
  padding:9px 15px;box-shadow:var(--shs)}
.c-logo img{height:21px}
.c-logo .nm{font-weight:600;font-size:14px;white-space:nowrap}
.c-logo .nm b{color:var(--accent)}
.c-pill{background:var(--surf);border-radius:var(--r);padding:9px 14px;box-shadow:var(--shs);
  display:flex;gap:9px;align-items:center;white-space:nowrap;font-size:12px;color:var(--ink3)}
.c-pill b{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500}
.c-ib{width:40px;height:40px;border-radius:var(--r);background:var(--surf);box-shadow:var(--shs);
  display:grid;place-items:center;flex:none}
.c-ib svg{width:17px;height:17px;fill:none;stroke:var(--ink2);stroke-width:1.7;stroke-linecap:round}
.c-ib[aria-pressed="true"]{background:var(--accent)}
.c-ib[aria-pressed="true"] svg{stroke:#fff}
.c-tag{font-size:11.5px;color:var(--amber);font-weight:600;background:var(--surf);
  border-radius:var(--r);padding:9px 13px;box-shadow:var(--shs)}
/* two independent columns: the layer panel never meets the station card */
.c-col{position:absolute;z-index:14;top:calc(74px + env(safe-area-inset-top,0px));
  bottom:104px;display:flex;flex-direction:column;gap:12px;pointer-events:none;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 14px),transparent 100%)}
.c-col>*{pointer-events:auto;flex:none}
.c-left{left:18px;width:276px}
.c-right{right:18px;width:290px;align-items:stretch}
.c-panel{background:var(--surf);border-radius:18px;box-shadow:var(--sh);padding:16px 18px;
  display:flex;flex-direction:column;gap:16px}
.c-panel[hidden]{display:none}
.c-legend{background:var(--surf);border-radius:18px;box-shadow:var(--sh);padding:15px 17px}
.c-card{background:var(--surf);border-radius:18px;box-shadow:var(--sh);padding:18px 20px;
  display:flex;flex-direction:column;gap:16px}
.c-time{position:absolute;z-index:12;left:50%;transform:translateX(-50%);bottom:78px;
  background:var(--surf);border-radius:26px;box-shadow:var(--sh);display:flex;align-items:center;
  gap:13px;padding:8px 17px 8px 9px;width:min(460px,calc(100vw - 40px))}
.c-play{width:33px;height:33px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none}
.c-play svg{width:11px;height:11px;fill:#fff}
.c-time input{flex:1;height:3px;accent-color:var(--accent);min-width:50px}
.c-time{width:min(560px,calc(100vw - 40px));gap:11px}
.c-lead{font-family:var(--mono);font-size:10.5px;color:var(--amber);min-width:38px;text-align:right;flex:none}
@keyframes run{to{transform:translateX(-100%)}}
/* ═══════════ 3 · COMMAND CENTER ═══════════ */
/* Panels are cells in one grid,separated by hairlines rather than floated as
   cards: an operations wall,not a dashboard. Everything square,nothing casts
   a shadow{display:grid;height:100%;min-height:0;gap:1px;background:var(--line);
  grid-template-columns:302px minmax(0,1fr) 326px;
  grid-template-rows:46px minmax(0,1fr) 56px}
/* ═══════════ shared widgets ═══════════ */
.sec{display:flex;flex-direction:column;gap:8px}
.c-panel>.sec+.sec,.c-card>.sec+.sec{padding-top:14px;border-top:1px solid var(--line)}
.c-panel .segbtns{margin-top:2px}
.c-panel .lyr{padding:5px 0}
.sec>h3{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
/* the nowcast marker: lit only while the slider is past the analysis time */
.c-cast{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
  padding:2px 7px;border-radius:9px;white-space:nowrap;opacity:0;
  transition:opacity .22s;flex:none;pointer-events:none}
.c-cast.on{opacity:1}
/* while the map shows a forecast,the rain field is drawn a touch softer */
body.is-cast .rv-rain{opacity:.88}
.rv-rain{transition:opacity .3s ease}
.lyrw{display:flex;flex-direction:column;gap:0}
.lyr{display:flex;align-items:center;gap:10px;padding:6px 0;width:100%;text-align:left}
.lyr .pc{font-family:var(--mono);font-size:10px;color:var(--ink3);font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .15s}
.lyr.on .pc{opacity:1}
.lyrop{-webkit-appearance:none;appearance:none;width:100%;height:12px;background:none;
  margin:0 0 5px;cursor:pointer;display:block}
.lyrop::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent) 0 var(--f,100%),var(--line2) var(--f,100%) 100%)}
.lyrop::-moz-range-track{height:3px;border-radius:2px;background:var(--line2)}
.lyrop::-moz-range-progress{height:3px;border-radius:2px;background:var(--accent)}
.lyrop::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:var(--surf);border:2px solid var(--accent);margin-top:-4px;
  box-shadow:0 1px 3px rgba(0,0,0,.22)}
.lyrop::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--surf);
  border:2px solid var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.22)}
.lyrop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lyr .nm{flex:1;font-size:12.5px;color:var(--ink3)}
.lyr.on .nm{color:var(--ink);font-weight:500}
.lyr .sw{width:27px;height:15px;border-radius:8px;background:var(--line2);position:relative;flex:none;transition:.16s}
.lyr .sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--surf);transition:transform .16s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.lyr.on .sw{background:var(--accent)}
.lyr.on .sw::after{transform:translateX(12px)}
.segbtns{display:flex;gap:5px}
.segbtns button{flex:1;padding:7px 4px;border-radius:8px;background:var(--surf2);font-size:11.5px;
  color:var(--ink3);border:1px solid transparent;white-space:nowrap}
.segbtns button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);font-weight:600;
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ramp{display:flex;height:8px;border-radius:4px;overflow:hidden}
.ramp span{flex:1}
.rl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--ink3);margin-top:5px}
.mk{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2)}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:3px 0}
.kv .k{color:var(--ink3)}
.kv .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.note{font-size:11px;color:var(--ink3);line-height:1.5;margin:0}
.st{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px;
  border-radius:20px;white-space:nowrap}
.st i{width:6px;height:6px;border-radius:50%}
.st.ok{background:rgba(18,160,106,.13);color:var(--good)}
.st.ok i{background:var(--good)}
.st.sat{background:rgba(254,172,38,.16);color:#A86E00}
.st.sat i{background:var(--amber)}
:root[data-theme="dark"] .st.sat{color:var(--amber)}
.st.off{background:rgba(140,155,172,.16);color:var(--ink3)}
.st.off i{background:var(--ink3)}
.big{display:flex;align-items:baseline;gap:7px}
.big .n{font-family:var(--mono);font-size:29px;font-weight:500;letter-spacing:-.03em;line-height:1}
.big .u{font-size:12px;color:var(--ink3)}
.hint{font-size:12.5px;color:var(--ink3);line-height:1.55}
.hint b{display:block;color:var(--ink2);font-weight:600;margin-bottom:4px}
/* region markers */
.rv-wil{white-space:nowrap;pointer-events:auto;cursor:pointer}
.rv-wil i{position:absolute;border-radius:50%;opacity:.9}
.rv-wil span{position:absolute;pointer-events:none;font-family:var(--font);font-weight:500}
.rv-wil.w2 i{width:5px;height:5px;left:-2.5px;top:-2.5px}
.rv-wil.w2 span{left:7px;top:-8px;font-size:11px}
.rv-wil.w3 i{width:4px;height:4px;left:-2px;top:-2px;opacity:.75}
.rv-wil.w3 span{left:6px;top:-7px;font-size:10px;opacity:.9}
.rv-wil.w4 i{width:3px;height:3px;left:-1.5px;top:-1.5px;opacity:.6}
.rv-wil.w4 span{left:5px;top:-7px;font-size:9.5px;opacity:.82}
.rv-wil:hover i{transform:scale(1.6)}
.feed{margin:0;padding:10px 11px;background:var(--surf2);border:1px solid var(--line);
  border-radius:9px;font-family:var(--mono);font-size:10px;line-height:1.45;color:var(--ink2);
  max-height:214px;overflow:auto;white-space:pre}
/* tooltip */
.tip{position:absolute;z-index:40;min-width:212px;pointer-events:none;padding:13px 15px;
  background:var(--surf);border:1px solid var(--line);border-radius:13px;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.tip .th,.leaflet-tooltip.rv-tip .th{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.tip .tn,.leaflet-tooltip.rv-tip .tn{font-weight:600;font-size:13px}
.tip .ti{font-family:var(--mono);font-size:10px;color:var(--ink3)}
.tip .tv,.leaflet-tooltip.rv-tip .tv{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.tip .tc,.leaflet-tooltip.rv-tip .tc{font-size:11px;color:var(--ink3);margin-bottom:8px}
.tip .tr,.leaflet-tooltip.rv-tip .tr{display:flex;justify-content:space-between;gap:12px;font-size:11px;padding:2px 0}
.tip .tr span,.leaflet-tooltip.rv-tip .tr span{color:var(--ink3)}
.tip .tr b,.leaflet-tooltip.rv-tip .tr b{font-family:var(--mono);font-weight:500;text-align:right}
.leaflet-tooltip.rv-tip .ti{font-family:var(--mono);font-size:10px;color:var(--ink3)}
.leaflet-tooltip.rv-tip{max-width:264px}
.switch{transition:opacity .18s}
/* ── 12-hour replay ── */
.rp-card{margin-bottom:18px}
.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 12px}
.rp-bar{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.rp-clock{font-size:12.5px;color:var(--ink2);min-width:46px}
#rp-scrub{flex:1;accent-color:var(--accent)}
.rp-sp{max-width:150px;flex:none}
.rp-legrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:2px}
.rp-ramp{display:grid;grid-template-columns:repeat(6,1fr);gap:0 0;align-items:center;
  max-width:300px;flex:1;min-width:210px}
.rp-ramp span{height:9px}
.rp-ramp span:first-child{border-radius:3px 0 0 3px}
.rp-ramp span:nth-child(6){border-radius:0 3px 3px 0}
.rp-ramp i{grid-row:2;font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--ink3);
  margin-top:3px}
.rp-leg{margin:0}
.rp-strip-wrap{margin:4px 0 12px}
.rp-strip{width:100%;height:74px;display:block}
@media (max-width:820px){.rp-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:860px){.c-col{top:calc(108px + env(safe-area-inset-top,0px));bottom:112px}
.c-left{left:12px;right:12px;width:auto}
.c-right{left:12px;right:12px;width:auto;top:auto;bottom:112px;max-height:46%}
.c-right .c-legend{display:none}
.c-logo .nm{display:none}
.s-nav{display:none}
.s-drawer{width:250px}
.s-kpis{grid-template-columns:repeat(2,1fr)}}
/* ═══════════ OpsCon · app output layer ═══════════ */
.ops-tok{--bg:#F2F6FA;--surf:#FFFFFF;--surf2:#F7FAFC;--ink:#172238;--ink2:#5A6E82;--ink3:#93A3B4;
  --line:#E2E9F0;--line2:#CEDAE5;--accent:#4668B0;--amber:#FEAC26;--crit:#E03A2E;--good:#12A06A;
  --sh:0 2px 4px rgba(16,32,52,.05),0 10px 30px rgba(16,32,52,.09);
  --shs:0 1px 2px rgba(16,32,52,.06),0 4px 12px rgba(16,32,52,.07);
  --r:14px;--font:"Figtree",Arial,sans-serif;--mono:"IBM Plex Mono",monospace;
  color:var(--ink);font-family:var(--font)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ops-tok{--bg:#0B1120;--surf:#141D30;--surf2:#10182A;--ink:#E9F0F7;--ink2:#93A7BC;--ink3:#607689;
  --line:#22304A;--line2:#2E3F5E;--accent:#7B96D6;
  --sh:0 2px 4px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.5);
  --shs:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.4);}}
:root[data-theme="dark"] .ops-tok{--bg:#0B1120;--surf:#141D30;--surf2:#10182A;--ink:#E9F0F7;--ink2:#93A7BC;--ink3:#607689;
  --line:#22304A;--line2:#2E3F5E;--accent:#7B96D6;
  --sh:0 2px 4px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.5);
  --shs:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.4);}
/* module switcher (re-used pill,now the app nav) */
.switch{top:calc(14px + env(safe-area-inset-top,0px))}
.switch button[data-mod]{display:flex;align-items:center;gap:7px}
.switch button[data-mod] svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.switch button[aria-pressed="true"]{background:#4668B0;color:#fff}
@media (max-width:1300px){.switch{top:calc(66px + env(safe-area-inset-top,0px))}}
.shell[data-t="clean"] .c-tag{display:none}
@media (max-width:720px){.switch button[data-mod] span{display:none}
.switch .mode{font-size:0;gap:0}}
.c-bar{padding-right:18px}
/* full-page module views */
.ops-view{position:absolute;inset:0;z-index:60;background:var(--bg);display:none;overflow-y:auto;
  padding:0 26px 60px}
.ops-view.open{display:block}
.ops-head{display:flex;align-items:flex-start;gap:16px;padding-top:74px;margin-bottom:18px;flex-wrap:wrap}
@media (max-width:1300px){.ops-head{padding-top:124px}}
.ops-brand{position:absolute;top:14px;left:18px;display:flex;align-items:center;gap:11px;background:var(--surf);
  border-radius:var(--r);padding:9px 15px;box-shadow:var(--shs);font-weight:600;font-size:14px;white-space:nowrap}
.ops-brand b{color:var(--accent)}
.ops-brand i{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#172238 0,#4668B0 100%);display:block}
.ops-head h2{margin:0;font-size:23px;font-weight:700;letter-spacing:-.02em}
.ops-head .sub{margin:3px 0 0;font-size:13px;color:var(--ink3);max-width:720px}
.ops-head .gap{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;font-size:12.5px;
  font-weight:600;border:1px solid var(--line2);background:var(--surf);color:var(--ink2);white-space:nowrap;cursor:pointer}
.btn:hover{color:var(--ink);border-color:var(--ink3)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{filter:brightness(1.08);color:#fff}
.btn.sm{padding:5px 10px;font-size:11.5px;border-radius:7px}
.btn.ghost{border-color:transparent;background:none}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;line-height:1.35;letter-spacing:.04em;
  color:var(--ink3);border:1px solid var(--line2);border-radius:20px;padding:2px 8px;white-space:nowrap;
  max-width:100%;box-sizing:border-box;vertical-align:middle}
.chip.acc{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.chip.am{color:#B87800;border-color:color-mix(in srgb,var(--amber) 55%,transparent)}
:root[data-theme="dark"] .chip.am{color:var(--amber)}
.chip.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.chip.cr{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.tabs{display:flex;gap:4px;background:var(--surf2);border:1px solid var(--line);border-radius:11px;padding:4px}
.tabs button{padding:7px 16px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink3)}
.tabs button[aria-selected="true"]{background:var(--surf);color:var(--ink);box-shadow:var(--shs)}
.tabs button em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-left:5px}
.tog{width:34px;height:19px;border-radius:10px;background:var(--line2);position:relative;flex:none;transition:.16s;cursor:pointer}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;
  transition:transform .16s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tog[aria-checked="true"]{background:var(--good)}
.tog[aria-checked="true"]::after{transform:translateX(15px)}
.flash{animation:flash 1.6s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}
  40%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent)}100%{box-shadow:var(--sh)}}
/* ── Console ── */
.cn-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;grid-auto-flow:dense}
.wg{background:var(--surf);border-radius:16px;box-shadow:var(--sh);display:flex;flex-direction:column;min-width:0;
  grid-column:span 4;position:relative}
.wg.s3{grid-column:span 3}
.wg.s6{grid-column:span 6}
.wg.s8{grid-column:span 8}
.wg.s12{grid-column:span 12}
@media (max-width:1100px){.wg,.wg.s3{grid-column:span 6}
.wg.s8,.wg.s12{grid-column:span 12}}
@media (max-width:720px){.wg,.wg.s3,.wg.s6{grid-column:span 12}
.ops-view{padding:0 14px 60px}}
.wg-h{display:flex;align-items:center;gap:8px;padding:13px 16px 0}
.wg-h h4{margin:0;font-size:13px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-h .x{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink3);opacity:0;transition:.15s}
.wg:hover .wg-h .x{opacity:1}
.wg-h .x:hover{background:var(--surf2);color:var(--crit)}
.wg-b{padding:12px 16px 16px;flex:1;min-height:0}
.kpi4{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.kpi4{grid-template-columns:repeat(2,1fr)}}
.kp{background:var(--surf2);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.kp .l{font-size:11px;color:var(--ink3);font-weight:500}
.kp .n{font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:-.03em;margin-top:2px}
.kp .d{font-size:11px;color:var(--ink3)}
.kp .d.up{color:var(--crit)}
.kp .d.ok{color:var(--good)}
.cn-svg{width:100%;height:auto;display:block;overflow:visible}
.cn-svg text{font-family:var(--mono);font-size:11px;fill:var(--ink3)}
.cn-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--ink2);margin-bottom:8px}
.cn-leg span{display:flex;align-items:center;gap:6px}
.cn-leg i{width:10px;height:3px;border-radius:2px;display:block}
.cn-tab{width:100%;border-collapse:collapse;font-size:12px}
.cn-tab th{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
  text-align:right;padding:6px 6px;border-bottom:1px solid var(--line2)}
.cn-tab th:first-child,.cn-tab td:first-child{text-align:left}
.cn-tab td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:right}
.cn-tab td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cn-tab tr:last-child td{border-bottom:none}
.cn-warn{display:grid;grid-template-columns:4px 1fr auto;gap:0 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.cn-warn:last-child{border-bottom:none}
.cn-warn i{border-radius:3px;background:var(--crit)}
.cn-warn.watch i{background:var(--amber)}
.cn-warn .a{font-weight:650;font-size:13px}
.cn-warn .t{font-size:11.5px;color:var(--ink2)}
.cn-warn .id{font-family:var(--mono);font-size:10px;color:var(--ink3)}
.cn-map{width:100%;aspect-ratio:2.35/1;display:block;border-radius:10px;background:var(--surf2)}
.cn-add{border:1.5px dashed var(--line2);background:none;box-shadow:none;min-height:150px;display:grid;place-items:center;
  color:var(--ink3);font-weight:600;font-size:13px;cursor:pointer;grid-column:span 4}
.cn-add:hover{border-color:var(--accent);color:var(--accent)}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.lib button{text-align:left;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surf2)}
.lib button:hover{border-color:var(--accent)}
.lib b{display:block;font-size:13px;margin-bottom:3px}
.lib .ld{display:block;font-size:11.5px;line-height:1.45;color:var(--ink3)}
/* ── Model ── */
.md-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.md-bar .srch{flex:1;min-width:180px;max-width:320px;padding:8px 12px;border-radius:9px;border:1px solid var(--line2);
  background:var(--surf);color:var(--ink);font:inherit;font-size:12.5px}
.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.dc{background:var(--surf);border-radius:16px;box-shadow:var(--sh);padding:16px 17px;display:flex;flex-direction:column;gap:11px;position:relative}
.dc-h{display:flex;gap:11px;align-items:flex-start}
.dc-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.dc-ic svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dc-h .t{flex:1;min-width:0}
.dc-h b{display:block;font-size:14px;line-height:1.25}
.dc-h small{font-size:11.5px;color:var(--ink3)}
.dc-meta{display:flex;flex-wrap:wrap;gap:5px}
.dc-th{display:flex;height:7px;border-radius:4px;overflow:hidden;gap:2px}
.dc-th span{flex:1}
.dc-thl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--ink3);margin-top:4px}
.dc-f{display:flex;gap:7px;align-items:center;border-top:1px solid var(--line);padding-top:11px;margin-top:auto}
.dc-f .gap{flex:1}
.dc-spark{width:100%;height:34px;display:block}
.dc.add{border:1.5px dashed var(--line2);background:none;box-shadow:none;display:grid;place-items:center;
  min-height:220px;color:var(--ink3);font-weight:600;cursor:pointer;text-align:center}
.dc.add:hover{border-color:var(--accent);color:var(--accent)}
.dc .model-cta{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  font-size:12px;color:var(--ink2);cursor:pointer;text-align:left}
.dc .model-cta b{color:var(--accent)}
.dc .model-cta:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.ly-sw{width:100%;height:46px;border-radius:9px;border:1px solid var(--line);position:relative;overflow:hidden}
/* drawer + modal */
.ops-scrim{position:fixed;inset:0;z-index:120;background:rgba(6,12,20,.42);display:none;backdrop-filter:blur(2px)}
.ops-scrim.open{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);z-index:121;background:var(--surf);
  box-shadow:-20px 0 50px rgba(0,0,0,.25);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column}
.drawer.open{transform:none}
.dr-h{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.dr-h h3{margin:0;font-size:17px;font-weight:700}
.dr-h p{margin:2px 0 0;font-size:12px;color:var(--ink3)}
.dr-b{flex:1;overflow-y:auto;padding:16px 22px 24px;display:flex;flex-direction:column;gap:20px}
.dr-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.fs h5{margin:0 0 9px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  display:flex;justify-content:space-between;align-items:center}
.th-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.th-tab td,.th-tab th{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left}
.th-tab th{font-size:10px;color:var(--ink3);letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.th-tab input{width:78px;padding:5px 7px;border-radius:7px;border:1px solid var(--line2);background:var(--surf2);
  color:var(--ink);font-family:var(--mono);font-size:12px}
.th-tab input.chg{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.th-tab .dflt{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.sw-c{width:12px;height:12px;border-radius:4px;display:inline-block;vertical-align:-1px;margin-right:7px}
.src{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px}
.src .p{font-family:var(--mono);font-size:10px;color:var(--ink3);width:18px}
.src .t{flex:1;min-width:0}
.src b{font-size:12.5px;display:block}
.src small{font-size:11px;color:var(--ink3);
  font-family:var(--mono);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld{display:grid;grid-template-columns:130px 1fr;gap:8px 12px;align-items:center;font-size:12.5px}
.fld label{color:var(--ink3)}
.fld select,.fld input[type=text],.fld input[type=number],.fld input[type=password],.fld input[type=email],.fld input[type=search]{padding:7px 9px;border-radius:8px;border:1px solid var(--line2);
  background:var(--surf2);color:var(--ink);font:inherit;font-size:12.5px;width:100%}
.modal{position:fixed;z-index:122;inset:4vh 4vw;background:var(--bg);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);
  display:none;flex-direction:column;overflow:hidden}
.modal.open{display:flex}
.mo-h{display:flex;align-items:center;gap:14px;padding:16px 22px;background:var(--surf);border-bottom:1px solid var(--line)}
.mo-h h3{margin:0;font-size:17px}
.mo-h p{margin:1px 0 0;font-size:12px;color:var(--ink3)}
.mo-b{flex:1;min-height:0;display:grid;grid-template-columns:360px minmax(0,1fr);overflow:hidden}
@media (max-width:900px){.mo-b{grid-template-columns:1fr;overflow-y:auto}
.modal{inset:0;border-radius:0}}
.mo-l{background:var(--surf);border-right:1px solid var(--line);overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:18px}
.mo-r{overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.card{background:var(--surf);border-radius:14px;box-shadow:var(--sh);padding:15px 17px}
.card h4{margin:0 0 10px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.dom-pick{display:flex;flex-direction:column;gap:6px}
.dom-pick button{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--surf2);font-size:12.5px}
.dom-pick button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.dom-pick b{display:block}
.dom-pick small{color:var(--ink3);font-family:var(--mono);font-size:10.5px}
.pipe{display:flex;flex-direction:column;gap:0}
.pp{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.pp:last-child{border-bottom:none}
.pp .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center}
.pp.run .dot{border-color:var(--accent);border-top-color:transparent;animation:spin .8s linear infinite}
.pp.done .dot{background:var(--good);border-color:var(--good)}
.pp.done .dot::after{content:"";width:6px;height:3px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.pp code{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.pp small{display:block;color:var(--ink3);font-size:11px}
.pp .tm{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.log{font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--ink2);background:var(--surf2);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;height:130px;overflow-y:auto;white-space:pre-wrap;margin:0}
.wrf-cv{width:100%;display:block;border-radius:10px;background:var(--surf2);aspect-ratio:16/8.4}
.wrf-ctl{display:flex;align-items:center;gap:10px;margin-top:10px}
.wrf-ctl input{flex:1;accent-color:var(--accent)}
.wrf-empty{display:grid;place-items:center;text-align:center;min-height:320px;color:var(--ink3);font-size:13px;line-height:1.6}
/* ── Reports ── */
.rp-lay{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:16px;align-items:start}
@media (max-width:1100px){.rp-lay{grid-template-columns:1fr}}
.rt{background:var(--surf);border-radius:16px;box-shadow:var(--sh);padding:15px 17px;margin-bottom:12px;cursor:pointer;
  border:1.5px solid transparent;display:flex;flex-direction:column;gap:10px}
.rt.sel{border-color:var(--accent)}
.rt-h{display:flex;gap:12px;align-items:flex-start}
.rt-h .t{flex:1;min-width:0}
.rt-h b{font-size:14px;display:block}
.rt-h small{font-size:12px;color:var(--ink3)}
.rt-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}
.rt-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rt-trig{font-family:var(--mono);font-size:11px;color:var(--ink2);background:var(--surf2);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px}
.rt-trig b{color:var(--accent);font-weight:600}
.rt-f{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rt.off{opacity:.62}
.rcp{display:flex;flex-wrap:wrap;gap:6px;padding:7px;border:1px solid var(--line2);border-radius:10px;background:var(--surf2)}
.rcp span{display:inline-flex;align-items:center;gap:6px;background:var(--surf);border:1px solid var(--line);
  border-radius:20px;padding:3px 5px 3px 10px;font-size:12px}
.rcp span button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--ink3);font-size:13px;line-height:1}
.rcp span button:hover{background:var(--crit);color:#fff}
.rcp input{flex:1;min-width:150px;border:none;background:none;color:var(--ink);font:inherit;font-size:12.5px;padding:4px}
.rcp input:focus{outline:none}
.cond{display:grid;grid-template-columns:1fr 70px 90px 70px;gap:6px;align-items:center;margin-bottom:6px}
.cond select,.cond input{padding:6px 8px;border-radius:7px;border:1px solid var(--line2);background:var(--surf2);color:var(--ink);font:inherit;font-size:12px;width:100%}
.chan{display:flex;gap:6px;flex-wrap:wrap}
.chan button{padding:6px 12px;border-radius:8px;border:1px solid var(--line2);font-size:12px;color:var(--ink3);background:var(--surf2)}
.chan button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.doc{background:#fff;color:#14202C;border-radius:12px;border:1px solid var(--line);padding:22px 24px;font-size:13px;line-height:1.55}
.doc h1{font-size:18px;margin:6px 0 2px;letter-spacing:-.01em}
.doc .meta{font-size:11px;color:#6A7C8E;font-family:var(--mono)}
.doc .band{height:5px;border-radius:3px;margin:-4px 0 12px}
.doc table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
.doc td,.doc th{padding:5px 6px;border-bottom:1px solid #E3E9EF;text-align:left}
.doc th{font-size:10px;color:#6A7C8E;text-transform:uppercase;letter-spacing:.06em}
.doc img{width:100%;border-radius:8px;display:block;margin:8px 0;background:#EEF3F7}
.doc .foot{font-size:10.5px;color:#8A9AAA;border-top:1px solid #E3E9EF;margin-top:12px;padding-top:8px}
.hist{width:100%;border-collapse:collapse;font-size:12px}
.hist td,.hist th{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left}
.hist th{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.07em}
.hist td.m{font-family:var(--mono);font-size:11px;color:var(--ink2)}
/* ── Atlas: agent layers ── */
.ag-panel{background:var(--surf);border-radius:18px;box-shadow:var(--sh);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.ag-panel[hidden]{display:none}
.ag-panel h3{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  display:flex;align-items:center;gap:7px}
.ag-panel h3 i{width:14px;height:14px;border-radius:5px;background:linear-gradient(135deg,#172238 0,#4668B0 100%)}
.ag-row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.ag-row .nm{flex:1;min-width:0}
.ag-row small{display:block;font-size:10.5px;color:var(--ink3);font-family:var(--mono)}
.ag-row .sw{width:10px;height:10px;border-radius:3px;flex:none}
.ag-row button.rm{color:var(--ink3);font-size:15px;width:22px;height:22px;border-radius:6px}
.ag-row button.rm:hover{background:var(--surf2);color:var(--crit)}
.rv-thr{border:1.5px solid #E03A2E;background:rgba(224,58,46,.18)}
.msg{max-width:92%;font-size:13px;line-height:1.5;padding:9px 12px;border-radius:14px}
.msg.u{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.msg.a{align-self:flex-start;background:var(--surf2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.a .md{font-size:10px;font-family:var(--mono);color:var(--ink3);letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:3px}
.msg.a ul{margin:5px 0 0;padding-left:17px}
.msg.a li{margin:2px 0}
.msg.typing{color:var(--ink3);font-style:italic}
.act{align-self:stretch;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:14px;overflow:hidden;
  background:var(--surf)}
.act-h{display:flex;align-items:center;gap:8px;padding:9px 12px;background:color-mix(in srgb,var(--accent) 9%,transparent);
  font-size:12px;font-weight:700;color:var(--accent)}
.act-h svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act-b{padding:9px 12px;display:flex;flex-direction:column;gap:3px}
.act-b .kv{font-size:12px}
.act-f{display:flex;gap:6px;padding:0 12px 11px}
.act.done{border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.act.done .act-h{background:color-mix(in srgb,var(--good) 10%,transparent);color:var(--good)}
.toast{position:fixed;z-index:200;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;transition:.25s;
  background:#172238;color:#fff;padding:10px 16px;border-radius:11px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none;
  display:flex;gap:9px;align-items:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast i{width:8px;height:8px;border-radius:50%;background:#12A06A}
/* multi-console */
.cn-sw{display:flex;gap:10px;overflow-x:auto;margin:0 0 16px;padding:2px 2px 6px;scrollbar-width:thin}
.cn-c{flex:none;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:6px 10px;width:255px;padding:10px 12px;border-radius:14px;background:var(--surf);
  box-shadow:var(--shs);border:1.5px solid transparent;text-align:left}
.cn-c:hover{border-color:var(--line2)}
.cn-c[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.cn-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.cn-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cn-t{flex:1;min-width:0}
.cn-t b{display:block;font-size:12.5px;line-height:1.25}
.cn-t small{display:block;font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-c .chip{grid-column:2;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cn-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-new{width:200px;box-shadow:none;border:1.5px dashed var(--line2);background:none}
.kpiN{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cn-area{width:100%;display:block;border-radius:10px;background:var(--surf2);margin-bottom:8px}
.mbar{display:inline-block;width:70px;height:6px;border-radius:3px;background:var(--line);vertical-align:middle;overflow:hidden}
.mbar i{display:block;height:100%;border-radius:3px}
.stk{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;padding:5px 0;font-size:12px}
.stk .l{color:var(--ink2)}
.stk .l em{font-style:normal;font-family:var(--mono);color:var(--ink3);font-size:10.5px}
.stk .s{display:flex;height:18px;border-radius:5px;overflow:hidden;gap:2px}
.stk .s i{display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:10px;color:#fff;font-weight:600}
.sop-r{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.sop-r:last-child{border-bottom:none}
.sop-r i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2)}
.sop-r.done i{background:var(--good);border-color:var(--good)}
.sop-r.prog i{border-color:var(--amber);border-right-color:transparent}
.sop-r.done span{color:var(--ink3);text-decoration:line-through}
.sop-r em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink3)}
.lg-r{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.45}
.lg-r:last-child{border-bottom:none}
.lg-r .m{font-family:var(--mono);font-size:11px;color:var(--ink3);flex:none;margin-left:auto}
.lg-r>span:not(.chip):not(.m){flex:1}
.lg-r>.m:first-child{margin-left:0}
.invg{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-bottom:8px}
.inv{aspect-ratio:1;border-radius:5px;display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;color:var(--ink);font-weight:600}
.inv.der{outline:2px solid var(--amber);outline-offset:-2px}
.inv.off{color:var(--ink3);text-decoration:line-through}
.lim{display:grid;grid-template-columns:1fr auto 74px;gap:4px 10px;align-items:center;font-size:12px;padding:5px 0}
.lim b{font-family:var(--mono);font-weight:600}
.lim em{grid-column:1/-1;font-style:normal;font-size:10.5px;color:var(--ink3);margin-top:-3px}
.lim .mbar{width:74px}
.crng{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:8px}
.crn{border-radius:8px;padding:5px 4px;text-align:center;border:1px solid var(--line);background:var(--surf2)}
.crn b{display:block;font-family:var(--mono);font-size:10px}
.crn span{font-size:10px;color:var(--ink3)}
.crn.work{border-color:color-mix(in srgb,var(--good) 50%,transparent);background:color-mix(in srgb,var(--good) 10%,var(--surf))}
.crn.mnt{border-color:color-mix(in srgb,var(--amber) 60%,transparent)}
.crn.hold{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 10%,var(--surf))}
/* OpsCon style2 */
.c-logo img.oc-logo,.ops-brand img.oc-logo{height:24px;width:auto}.oc-mod{font-weight:600;font-size:14px;color:var(--ink2);padding-left:11px;border-left:1px solid var(--line2);line-height:20px}.ops-brand{gap:11px}
/* ══ Additions to OpsCon's clean theme — only what OpsCon has no class for ══ */

/* PAGASA band states on the .st pill (OpsCon had ok / sat / off) */
.st.am{background:rgba(254,172,38,.16);color:#A86E00}
.st.am i{background:var(--amber)}
.st.cr{background:rgba(224,58,46,.12);color:var(--crit)}
.st.cr i{background:var(--crit)}
:root[data-theme="dark"] .st.am{color:var(--amber)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st.am{color:var(--amber)}}

/* "Not built yet" — amber, dashed, never mistaken for a status */
.chip.hl{color:#9A6200;border:1px dashed color-mix(in srgb,var(--amber) 70%,transparent);background:color-mix(in srgb,var(--amber) 9%,transparent);font-weight:600}
:root[data-theme="dark"] .chip.hl{color:var(--amber)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.hl{color:var(--amber)}}
.card h4 .chip.hl,.fs h5 .chip.hl{margin-left:auto;text-transform:none;letter-spacing:0}

/* brand: the municipality, not OpsCon */
.ews-mark{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#172238 0,#4668B0 100%)}
.ews-mark svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ews-nm{font-weight:700;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.ews-nm b{color:var(--accent);font-weight:700}
.c-logo{display:flex;align-items:center;gap:9px}
.c-logo .nm.oc-mod{display:block}

/* the bar */
.c-pill .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--ink3)}
.c-pill .dot.fresh{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}
.c-pill .dot.stale{background:var(--amber)}
.c-pill .dot.dark{background:var(--crit)}
a.c-pill{text-decoration:none;color:var(--ink)}
a.c-pill span{color:var(--accent)}
#mapnote{position:absolute;left:50%;top:68px;transform:translateX(-50%);z-index:900;max-width:min(560px,calc(100vw - 32px));
  background:var(--surf);color:var(--ink2);border:1px solid var(--line2);border-radius:10px;padding:7px 12px;font-size:12px;box-shadow:var(--shs);pointer-events:none}

/* map marks */
.bl-lab{background:none;border:0;box-shadow:none;font:600 11px/1.1 var(--font);color:var(--ink);white-space:nowrap;
  text-shadow:0 0 3px var(--surf),0 0 3px var(--surf),0 0 3px var(--surf)}
.bl-lab::before{display:none}
.inc-ic{background:none;border:0}
.inc-ic svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.inc-ic.shut{opacity:.55}

/* tooltip */
.tip-h{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;font-size:13px;margin-bottom:4px}
.tip-why{font-size:11.5px;color:var(--ink2);margin:2px 0 6px}
.tip-inc{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink2)}
.tip-t{margin-top:6px;font-size:10.5px;color:var(--ink3);font-family:var(--mono)}

/* the right-hand list of barangays */
.blist{display:flex;flex-direction:column;max-height:34vh;overflow:auto;margin:0 -6px}
.brow{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px;text-align:left;width:100%}
.brow:hover{background:var(--surf2)}
.bdot{width:9px;height:9px;border-radius:50%;flex:none}
.bn{flex:1;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv{font-family:var(--mono);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.bu{font-size:10.5px;color:var(--ink3);width:30px}
.rdot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.c-card{position:relative}
.c-card .x{position:absolute;right:10px;top:10px}

/* console */
.tscroll{overflow-x:auto;margin:0 -2px}
.tscroll .cn-tab{min-width:760px}
.cn-tab tr.click{cursor:pointer}
.cn-tab tr.click:hover td{background:var(--surf2)}
.ig{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.itype{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.cn-warn .itype{width:30px;height:30px;justify-content:center;border-radius:50%;background:var(--surf2)}

/* model */
.dc-desc{margin:0;font-size:12px;line-height:1.5;color:var(--ink2)}

/* reports */
.chk{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink2);margin-top:8px}
.chan button em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-left:4px}
.segbtns button[disabled]{opacity:.4;cursor:not-allowed}
.smsprev{margin-top:14px;padding:14px;border-radius:12px;background:var(--surf2)}
.smsprev .bubble{max-width:340px;background:#12A06A;color:#fff;padding:10px 13px;border-radius:16px 16px 16px 4px;font-size:13px;line-height:1.45}
.smsmeta{margin-top:8px;font-size:11px;color:var(--ink3)}

/* settings */
#v-settings .set-body{display:flex;flex-direction:column;gap:18px;max-width:1180px}
.set-sec h3{margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.set-form{max-width:640px}
.gname{flex:1;border:1px solid transparent;background:none;font:inherit;font-size:12px;color:var(--ink2);padding:4px 6px;border-radius:6px}
.gname:hover,.gname:focus{border-color:var(--line2);background:var(--surf)}

/* phone */
@media (max-width:640px){
  .ews-nm{display:none}
  #mapnote{top:118px}
  .fld{grid-template-columns:1fr}
}

body:has(.ops-view.open) #mapnote{display:none}
.pagasa-link{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none;margin-top:4px}
@media (max-width:1180px){ .c-bar [data-k="state"]{display:none} }
.c-legend>.sec+.sec{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

.c-time [data-k="clock"]{white-space:nowrap}
@media (max-width:860px){
  .c-time [data-k="tmin"],.c-time [data-k="tmax"]{display:none}
  .c-right{max-height:38%}
}
.cn-donut text{fill:var(--ink3);font-family:var(--mono);font-size:10.5px}

.dc-ic .ig{stroke:var(--ink);fill:none}
@media (max-width:860px){ .c-right{bottom:134px} }
.ews-seal{width:26px;height:26px;border-radius:50%;object-fit:contain;flex:none}
.pt-lab span{display:block;transform:translate(-50%,22px);text-align:center}

/* tropical cyclone */
.tc-ic{background:none;border:0}
.tc-ic svg .h,.tc-sw .h{fill:#7A4FD6;stroke:#fff;stroke-width:2.5}
.tc-ic svg .s,.tc-sw .s{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.tc-ic svg .e,.tc-sw .e{fill:#fff}
.tc-ic svg{filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));animation:tcspin 6s linear infinite}
.tc-ic.ahead{opacity:.9}
.tc-ic.ahead svg .h{fill:none;stroke:#7A4FD6;stroke-width:3;stroke-dasharray:4 3}
.tc-ic.ahead svg .s{stroke:#7A4FD6}.tc-ic.ahead svg .e{fill:#7A4FD6}
@keyframes tcspin{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){.tc-ic svg{animation:none}}
.tc-lab{background:none;border:0;white-space:nowrap}
.tc-lab span{display:inline-block;transform:translate(8px,-22px);font:600 11px var(--mono);color:#fff;background:rgba(122,79,214,.9);padding:2px 6px;border-radius:5px}
.tc-lab.now span{transform:translate(20px,-8px);font:700 12px var(--font);background:#7A4FD6}

/* quick zoom */
/* My area and Philippines: two icons stacked above the zoom buttons */
.c-ib.qz svg{width:18px;height:18px}
.c-ib.qz svg circle{fill:var(--ink2);stroke:none}
.c-ib.qz svg.ph-flag{width:22px;height:15px;stroke:none;border-radius:2px;box-shadow:0 0 0 1px rgba(16,32,52,.18)}
.c-ib.qz svg.ph-flag circle{fill:#FCD116}
.c-ib.qz:hover{background:var(--surf2)}

/* readings too old to show */
#stalebar{position:absolute;left:50%;top:72px;transform:translateX(-50%);z-index:1300;max-width:min(640px,calc(100vw - 32px));
  background:color-mix(in srgb,var(--crit) 12%,var(--surf));color:var(--ink);border:1px solid color-mix(in srgb,var(--crit) 45%,transparent);
  border-radius:10px;padding:8px 14px;font-size:12.5px;line-height:1.45;box-shadow:var(--shs)}
#stalebar b{color:var(--crit)}
body:has(.ops-view.open) #stalebar{display:none}
@media (max-width:860px){#stalebar{top:118px}}

/* satellite band picker */
.sat-b{margin:4px 0 6px}
.sat-b button{font-size:11px}

/* ── Console: sidebar of workspaces, edit mode ─────────────────── */
.sb-lay{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start;margin-top:8px}
.sb{position:sticky;top:80px;background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shs)}
.sb-g{margin-bottom:10px}.sb-t{display:flex;align-items:center;gap:8px;font:700 11px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:8px 8px 6px}.sb-t svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.sb-i{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;font:600 13.5px var(--font);color:var(--ink2);text-align:left}.sb-i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.sb-i:hover{background:var(--surf2)}.sb-i.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.sb-i span{flex:1}
.bd{font:700 11px var(--mono);font-style:normal;padding:2px 7px;border-radius:999px;color:#fff}.bd.r{background:var(--crit)}.bd.o{background:#E08A00}.bd.p{background:#7A4FD6}
.sb-foot{border-top:1px solid var(--line);margin-top:6px;padding:10px 8px 2px}.sb-foot .h5{font:700 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.sb-main .ops-head{margin-top:0}
.cn-grid.editing .wg.edit{outline:2px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:3px;cursor:grab}
.wg.edit .dd-bar{display:flex;align-items:center;gap:6px;margin:-4px -4px 10px;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.dd-h{font:700 16px var(--mono);color:var(--accent);letter-spacing:-2px;cursor:grab}.dd-n{font:600 12px var(--font);color:var(--accent)}
.dd-s{font:700 11px var(--mono);width:28px;height:24px;border-radius:6px;border:1px solid var(--line2);background:var(--surf);color:var(--ink2)}.dd-s.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.dd-x{width:26px;height:24px;border-radius:6px;border:1px solid var(--line2);background:var(--surf);color:var(--crit);font-size:16px;line-height:1}
.wg.dragging{opacity:.4}.wg.over{outline-color:var(--accent)!important;outline-style:solid!important}.wg.edit .wg-b{pointer-events:none}
.sb-t{position:relative}.sb-t>svg{color:var(--cc)}
.sb-add{margin-left:auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--ink3);border:1px solid transparent}
.sb-add:hover{border-color:var(--line2);color:var(--accent);background:var(--surf2)}
.sb-add svg{width:14px!important;height:14px!important}
.sb-crumb{margin:0 0 2px;font:700 11px var(--font);letter-spacing:.1em;text-transform:uppercase}
.sb-empty{padding:26px;text-align:left;margin-bottom:14px}.sb-empty h4{margin:0 0 6px;font-size:16px}.sb-empty .btn{margin-top:12px}
.ws-ics{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.ws-ics button{height:36px;border-radius:9px;border:1px solid var(--line2);background:var(--surf);display:grid;place-items:center;color:var(--ink2)}
.ws-ics button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.ws-ics button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
@media (max-width:900px){.sb-lay{grid-template-columns:1fr}.sb{position:static}}
.sb-foot .chip.hl{white-space:normal;display:inline-block;margin-top:6px;line-height:1.3}

/* LGU picker — one site, several cities and municipalities */
.c-bar select.lgu-pick{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;font:inherit;color:inherit;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px;background-repeat:no-repeat}
.c-bar select.lgu-pick{border:0;height:auto;max-width:200px;font-size:13px;font-weight:600}

/* Queay Platform credit (Settings) */
.q-credit{display:flex;align-items:center;gap:9px;margin:26px 0 8px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink3)}
.q-credit svg{width:18px;height:18px;flex:none}
.q-credit b{color:var(--ink2);font-weight:600}
:root[data-theme="dark"] .q-credit svg path{fill:#E9EEF8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .q-credit svg path{fill:#E9EEF8}}

/* ── Atlas: layer opacity dial (hover a switched-on layer) ── */
.c-panel .lyrw{position:relative}
.opw{position:absolute;top:3px;right:36px}
.opb{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:var(--ink3);opacity:0;transition:opacity .15s,background .15s}
.opb svg{width:14px;height:14px}
.lyrw:hover .opb,.opw.open .opb,.opb:focus-visible{opacity:1}
.opb:hover,.opw.open .opb{background:var(--surf2);color:var(--accent)}
@media (hover:none){.opb{opacity:.7}}
.oppop{display:none;position:absolute;right:-6px;top:26px;z-index:5;width:190px;padding:10px 12px;border-radius:12px;
  background:var(--surf);box-shadow:var(--sh);align-items:center;gap:8px;font-size:11px;color:var(--ink2)}
.oppop b{font-family:var(--mono);font-weight:500;font-size:10.5px;min-width:32px;text-align:right;color:var(--ink)}
.oppop .lyrop{flex:1}
.opw:hover .oppop,.opw.open .oppop,.opw:focus-within .oppop{display:flex}
.c-panel h3 .h-note{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink3);margin-left:4px}

/* ── Atlas: satellite loop ── */
.sat-fr{transition:opacity var(--satfade,.6s) ease-in-out;will-change:opacity}
/* Leaflet's own per-tile fade would flash each tile in; the layer fades as a whole instead. */
.sat-fr .leaflet-tile{transition:none!important}
.satbar{position:absolute;z-index:12;left:50%;transform:translateX(-50%);bottom:132px;display:flex;align-items:center;gap:10px;
  background:var(--surf);border-radius:22px;box-shadow:var(--sh);padding:6px 14px 6px 6px;width:min(460px,calc(100vw - 40px));font-size:12px}
.satbar .c-play{width:28px;height:28px}
.satbar .c-play[disabled]{opacity:.4}
.satbar .sb-t{white-space:nowrap;color:var(--ink2)}
.satbar .sb-t b{color:var(--ink);font-weight:600}
.satbar input{flex:1;min-width:40px;height:3px;accent-color:var(--accent)}
.satbar .sb-c{font-size:11px;white-space:nowrap;color:var(--ink)}
.satbar .sb-c em{font-style:normal;color:var(--good);font-size:10px;margin-left:3px}
@media (max-width:860px){.satbar{bottom:150px}.satbar .sb-t{display:none}}

/* ── Atlas: folding legend ── */
.c-legend.shut{padding:6px}
.leg-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.c-legend:not(.shut) .leg-h{margin:-4px -4px 10px}
.leg-tog{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;font-size:12px;font-weight:600;color:var(--ink)}
.leg-tog:hover{background:var(--surf2)}
.leg-tog svg{width:14px;height:14px;fill:none;stroke:var(--ink2);stroke-width:1.6;stroke-linecap:round}
.leg-tog svg rect{fill:var(--ink3);stroke:none}
.leg-tog .chev{width:11px;height:11px;transition:transform .15s}
.leg-tog[aria-expanded="true"] .chev{transform:rotate(180deg)}
.leg-al{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.leg-al input{accent-color:var(--accent)}
.c-right .c-legend.shut{align-self:flex-end}

/* ── Atlas: storms, in plain words ── */
.storm-row{padding:10px 0;border-bottom:1px solid var(--line)}
.storm-row:last-of-type{border-bottom:0}
.sr-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.sr-m{height:6px;border-radius:4px;background:var(--line);margin:8px 0 6px;overflow:hidden}
.sr-m span{display:block;height:100%;border-radius:4px;background:#7A4FD6}
.sr-t{font-size:12px;color:var(--ink)}
.sr-t b{font-family:var(--mono);font-weight:600}
.sr-s{font-size:11px;color:var(--ink3);margin-top:3px}
.rv-tip .tip-sel{font-weight:600}
.leg-b>.sec+.sec{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.satbar .sb-t,.satbar .sb-t b{text-transform:none;letter-spacing:0;font-size:12px}

/* Timeline titles: "Weather" on the forecast player, like "Himawari-9" on the satellite one. */
.c-time{width:min(640px,calc(100vw - 40px))}
.c-time .ct-t,.satbar .sb-t{font-size:12px;white-space:nowrap;color:var(--ink2);text-transform:none;letter-spacing:0}
.c-time .ct-t b{color:var(--ink);font-weight:600}
.satbar{width:min(640px,calc(100vw - 40px))}

/* The time must never be pushed out of the bar: the slider gives way first,
   then the "now / +3 d" end labels. */
.c-time{width:min(700px,calc(100vw - 40px))}
.c-time>*{flex:none;white-space:nowrap}
.c-time input[data-frame]{flex:1 1 auto;min-width:60px}
.c-time [data-k="clock"]{font-variant-numeric:tabular-nums}
@media (max-width:760px){.c-time [data-k="tmin"],.c-time [data-k="tmax"]{display:none}}
@media (max-width:520px){.c-time .ct-t,.c-time [data-cast]{display:none}}

.sr-top{display:flex;gap:12px;align-items:center}
.sr-ring{flex:none}
.sr-body{flex:1;min-width:0}
.sr-body .sr-t{margin-top:4px}
.storm-row>.sr-s{padding-left:68px}
.st.am{background:rgba(242,176,30,.18);color:#9A6A00}

/* ── Console widgets, round two ── */
table.ibf{width:100%;border-collapse:separate;border-spacing:4px;font-size:12px}
table.ibf th{font-weight:600;color:var(--ink3);font-size:11px;text-align:center;padding:2px}
table.ibf tr th:first-child{text-align:right;padding-right:6px}
table.ibf td{border-radius:8px;height:58px;vertical-align:top;padding:6px 8px;color:#172238}
table.ibf td b{display:block;font:700 18px var(--mono)}
table.ibf td small{display:block;font-size:10.5px;line-height:1.25;opacity:.8}
.ew4{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.ew4 b{display:block;font-size:13px;color:var(--ink)}
.ew4 small{font-size:11.5px;color:var(--ink3)}
.ew4-n{width:26px;height:26px;border-radius:50%;color:#fff;display:grid;place-items:center;font:700 12px var(--mono);flex:none}
.sr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px}
.sr-sec h5{margin:0 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.ll-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ll{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid;border-left-width:4px;background:var(--surf2)}
.ll i{width:9px;height:9px;border-radius:50%;flex:none}
.ll b{font-size:12.5px;flex:1;color:var(--ink)}
.ll small{font-size:11px;color:var(--ink3)}
.log214>div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.log214 .mono{font-size:11px;color:var(--ink3)}
.lib button[hidden]{display:none}

/* ── Facebook posts ── */
.chip.fbk{background:#E7F0FE;color:#1668D8;border-color:transparent}
.fbpage{display:flex;align-items:center;gap:10px}
.fbpage b{display:block;font-size:13.5px;color:var(--ink)}
.fbpage small{font-size:11.5px;color:var(--ink3)}
.fb-av{width:38px;height:38px;border-radius:50%;background:#1877F2;color:#fff;display:grid;place-items:center;font:800 20px var(--font);overflow:hidden;flex:none}
.fb-av img{width:100%;height:100%;object-fit:cover;background:#fff}
.fbpost{margin-top:14px;background:#fff;color:#050505;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.15),0 6px 20px rgba(0,0,0,.08);overflow:hidden;max-width:520px}
.fbp-h{display:flex;align-items:center;gap:10px;padding:12px 14px}
.fbp-h b{display:block;font-size:14px}
.fbp-h small{font-size:12px;color:#65676B}
.fbp-cap{padding:0 14px 10px;font-size:13.5px;line-height:1.4;max-height:200px;overflow:auto}
.fbp-img{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#F0F2F5}
.fbp-bar{display:flex;justify-content:space-around;padding:8px 6px;border-top:1px solid #E4E6EB;color:#65676B;font-size:13px;font-weight:600}
.fbp-bar span{display:flex;align-items:center;gap:6px}
.fbp-bar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.fbgal-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fbgal-i{display:flex;flex-direction:column;gap:6px;text-align:left;font-size:11.5px;font-weight:600;color:var(--ink2)}
.fbgal-i canvas{width:100%;height:auto;aspect-ratio:1/1;border-radius:8px;box-shadow:var(--shs)}
.fbgal-i:hover canvas{outline:2px solid var(--accent)}
@media (max-width:860px){.fbgal-g{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Side drawers: pulled out from under the information box, like a desk drawer ──
   The tab column rides the front edge; the box is as tall as the card. */
.sdock{position:absolute;z-index:13;pointer-events:none;width:0}
.sdock[hidden]{display:none}
.sd-mv{position:absolute;right:0;top:0;width:0;transform:translateX(0);transition:transform .55s cubic-bezier(.22,.8,.24,1)}
.sdock.out .sd-mv{transform:translateX(calc(-1 * var(--dw)))}
.sd-tabs{position:absolute;right:0;top:14px;display:flex;flex-direction:column;gap:8px;z-index:2}
.sd-tab{pointer-events:auto;position:relative;width:46px;height:52px;border-radius:14px 0 0 14px;
  background:var(--surf);box-shadow:-4px 4px 14px rgba(16,32,52,.12);display:grid;place-items:center;transition:background .15s}
.sd-tab svg{width:26px;height:26px}
.sd-tab:hover{background:var(--surf2)}
.sd-tab.on{background:var(--surf2);box-shadow:-4px 4px 14px rgba(16,32,52,.12),inset 3px 0 0 var(--accent)}
.sd-n{position:absolute;bottom:3px;right:3px;min-width:22px;padding:1px 4px;border-radius:8px;color:#fff;font:700 9.5px var(--mono);text-align:center}
.sd-pin{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surf)}
.inc-sw{fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.inc-sw .h{fill:rgba(224,58,46,.14);stroke:#E03A2E}
.sd-pan{pointer-events:none;position:absolute;left:0;top:0;overflow:auto;box-sizing:border-box;
  background:var(--surf);border-radius:18px 0 0 18px;box-shadow:var(--sh);padding:14px 22px 16px 18px;
  opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.sd-pan.open{pointer-events:auto;opacity:1;visibility:visible;transition:opacity .2s}
.sd-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.sd-h b{display:flex;align-items:center;gap:7px;flex:1;font-size:13.5px;color:var(--ink)}
.sd-h b svg{width:20px;height:20px}
.sd-h .x{position:static;width:26px;height:26px;border-radius:8px;font-size:18px;color:var(--ink3)}
.sd-h .x:hover{background:var(--surf2);color:var(--ink)}
.sd-b .sec{border-top:0;padding-top:0}
/* the information box fills its column and stops above the timeline */
@media (min-width:861px){
  .c-right{bottom:140px;overflow:hidden;-webkit-mask-image:none;mask-image:none}
  .c-right .c-card{flex:1 1 auto;min-height:0;overflow-y:auto}
}
/* ── Legend drawer on the layer menu: pulled out to the right from under it ── */
.ldock{position:absolute;z-index:13;pointer-events:none;width:0}
.ldock[hidden]{display:none}
.ld-mv{position:absolute;left:0;top:0;width:0;transition:transform .55s cubic-bezier(.22,.8,.24,1)}
.ldock.out .ld-mv{transform:translateX(var(--lw))}
.ld-tab{pointer-events:auto;position:absolute;left:0;top:14px;width:46px;height:52px;border-radius:0 14px 14px 0;z-index:2;
  background:var(--surf);box-shadow:4px 4px 14px rgba(16,32,52,.12);display:grid;place-items:center;transition:background .15s}
.ldock.bare:not(.out) .ld-tab{border-radius:14px}
.ld-tab:hover{background:var(--surf2)}
.ld-tab[aria-expanded="true"]{background:var(--surf2);box-shadow:4px 4px 14px rgba(16,32,52,.12),inset -3px 0 0 var(--accent)}
.ld-tab svg{width:24px;height:24px}
.lg-sw{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.lg-sw rect{stroke:none}.lg-sw .a{fill:#12A06A}.lg-sw .b{fill:#FEAC26}.lg-sw .c{fill:#E03A2E}
.ld-pan{pointer-events:none;position:absolute;right:0;top:0;overflow:auto;box-sizing:border-box;
  background:var(--surf);border-radius:0 18px 18px 0;box-shadow:var(--sh);padding:14px 18px 16px 22px;
  opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.ld-pan.open{pointer-events:auto;opacity:1;visibility:visible;transition:opacity .2s}
.ldock.bare .ld-pan{border-radius:18px}
.ld-b>.sec+.sec{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ld-b .sec{border-top:0}
@media (max-width:860px){.sdock,.ldock{display:none}}
@media (prefers-reduced-motion:reduce){.sd-mv,.ld-mv,.sd-pan,.ld-pan{transition:none}}
/* Incident summary */
.is h4{margin:14px 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.is-head{padding:10px 12px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.4;border-left:4px solid}
.is-head.cr{background:rgba(224,58,46,.08);border-color:#E03A2E;color:var(--ink)}
.is-head.am{background:rgba(242,176,30,.12);border-color:#F2B01E;color:var(--ink)}
.is-head.ok{background:rgba(18,160,106,.09);border-color:#12A06A;color:var(--ink)}
.is-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.is-stats div{background:var(--surf2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column}
.is-stats b{font:700 20px var(--mono);color:var(--ink);line-height:1.1}
.is-stats span{font-size:11px;color:var(--ink3)}
.is-what{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.is-what li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.is-what b{color:var(--ink)}
.is-g{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--surf);border:1px solid var(--line2);display:grid;place-items:center}
.is-g.ring{box-shadow:0 0 0 2.5px var(--rc)}
.is-g svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-ppl,.is-wx,.is-rep{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.is-wx{padding:8px 10px;border-radius:10px;background:rgba(254,172,38,.12)}
.is-wx.ok{background:var(--surf2)}
.is-rep{padding:8px 10px;border-radius:10px;background:var(--surf2)}
.is-list{display:flex;flex-direction:column;gap:6px}
.is-row{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surf);width:100%}
.is-row:hover{background:var(--surf2)}
.is-t{flex:1;display:flex;flex-direction:column;min-width:0;font-size:12.5px;color:var(--ink)}
.is-t small{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){.sdock{display:none}}
@media (prefers-reduced-motion:reduce){.sd-pan,.sd-pan.open{transition:none}}

/* ── Wind layer ── */
.wind-cv{position:absolute;left:0;top:0;pointer-events:none}
.wi-i{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;border-radius:50%;border:1px solid var(--line2);
  font:italic 700 10.5px Georgia,serif;color:var(--ink2);vertical-align:1px;text-transform:none;letter-spacing:0}
.wi-i:hover,.wi-i[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.wi-facts{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--surf2)}
.wi-facts .kv{font-size:11.5px}
.windbar.stack{bottom:186px}
.windbar .wb-key{display:flex;align-items:center;gap:3px;padding-left:8px;border-left:1px solid var(--line);white-space:nowrap}
.windbar .wb-key i{display:block;width:16px;height:8px;border-radius:2px}
.windbar .wb-key small{font:10px var(--mono);color:var(--ink3);margin-right:3px}
.windbar .wb-key small.u{margin-left:2px;color:var(--ink2)}
.windbar{width:min(760px,calc(100vw - 40px))}
.ramp.wramp{height:12px}
@media (max-width:860px){.windbar .wb-key small{display:none}.windbar.stack{bottom:204px}}
/* the players above the timeline push the right column up */
@media (min-width:861px){
  #sh-clean[data-bars="1"] .c-right{bottom:192px}
  #sh-clean[data-bars="2"] .c-right{bottom:246px}
}
.windbar{width:min(700px,calc(100vw - 40px))}
.windbar .wb-msg{flex:1;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 0}
.windbar .wb-msg.bad{color:var(--crit)}
.windbar em.st-old{color:var(--amber)}
/* playback speed on every player */
.spd{flex:none;min-width:30px;height:24px;padding:0 6px;border-radius:12px;border:1px solid var(--line2);background:var(--surf2);
  font:700 11px var(--mono);color:var(--ink2);cursor:pointer}
.spd:hover{border-color:var(--accent);color:var(--accent)}
.switch.row2{top:calc(66px + env(safe-area-inset-top,0px))}
body.nav-row2 #mapnote,body.nav-row2 #stalebar{top:122px}
/* the reader's default basemap: a small dot, double-click another to move it */
.segbtns button[data-base]{position:relative}
.segbtns button[data-base].is-def::after{content:"";position:absolute;top:5px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.windbar[hidden],.satbar[hidden]{display:none!important}

/* ── Console pack · Port Operations ── */
.pk-pt{background:none;border:0}
.pk-pin{width:40px;height:40px;border-radius:50%;background:var(--surf);border:4px solid var(--c);box-shadow:0 4px 14px rgba(16,32,52,.35);display:grid;place-items:center}
.pk-pin svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pk-st{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font:700 11.5px var(--font);color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);white-space:nowrap}
.pk-st i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.pk-t{width:100%;border-collapse:collapse;font-size:12.5px}
.pk-t th{text-align:left;font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:6px 8px;border-bottom:1px solid var(--line)}
.pk-t td{padding:7px 8px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
.pk-t td.muted,.pk-t .muted{color:var(--ink3)}
.pk-sum{display:flex;gap:10px;margin-bottom:12px}
.pk-sum div{flex:1;border-radius:12px;padding:10px 14px;background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.pk-sum b{display:block;font:700 26px var(--mono);color:var(--c)}
.pk-sum span{font-size:12px;color:var(--ink2)}
.pk-win .r{display:flex;align-items:center;gap:10px;margin:5px 0}
.pk-win .r .n{flex:0 0 130px;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-win .r svg{flex:1}
.pk-win .ax .t{flex:1;display:flex;justify-content:space-between;font:10.5px var(--mono);color:var(--ink3)}
.pk-dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.pk-dir div{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:11.5px}
.pk-dir small{color:var(--ink3)}
.pk-ol{margin:0;padding-left:20px;font-size:13px;line-height:1.7;color:var(--ink)}
.tip-port{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}

/* ── chips never spill out of their box ───────────────────────────────
   A chip is one line when it fits and wraps inside its own pill when it
   does not, so a long standard ("PIANC WG 121 · berthing limits") stays
   inside the card and its text sits centred in the outline. Rows of chips
   wrap as a group with an even gap instead of relying on spaces. */
.chip{white-space:normal;overflow-wrap:break-word;text-align:left}
.lib-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-width:0}
.lib button{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.lib-chips .chip{font-size:10px;color:var(--ink3)}
.lib-chips .chip.acc{color:var(--accent)}
.lib-chips .chip.ok{color:var(--good)}
.wg-h{min-width:0}
.wg-h h4{min-width:0}
.wg-h .chip{flex:0 1 auto;min-width:0}
.dc-meta{display:flex;flex-wrap:wrap;gap:5px;min-width:0}

/* ── foldable, reorderable categories (Atlas layers, Console sidebar) ── */
.fk-h{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.fk-cv{width:18px;height:18px;flex:none;display:grid;place-items:center;margin-left:-4px;border-radius:5px;color:var(--ink3);transition:transform .18s}
.fk-cv svg{width:13px!important;height:13px!important;fill:none}
.fk-cv:hover{background:var(--surf2);color:var(--ink)}
.fk-off .fk-cv{transform:rotate(-90deg)}
.fk-grip{margin-left:auto;width:18px;height:18px;flex:none;display:grid;place-items:center;color:var(--ink3);opacity:0;cursor:grab;border-radius:5px;transition:opacity .15s}
.fk-grip svg{width:13px!important;height:13px!important;fill:currentColor;stroke:none!important}
.fk-h:hover .fk-grip,.fk-grip:focus{opacity:.8}
.fk-grip:active{cursor:grabbing}
.sb-t.fk-h .sb-add{margin-left:auto}
.sb-t.fk-h .sb-add+.fk-grip{margin-left:0}
.fk-drag{opacity:.45}
.fk-over-a{box-shadow:inset 0 2px 0 var(--accent)}
.fk-over-b{box-shadow:inset 0 -2px 0 var(--accent)}
.fk-off{padding-bottom:4px}
.fk-b[hidden]{display:none!important}
@media (hover:none){.fk-grip{opacity:.6}}

/* ── storms per location ─────────────────────────────────────────── */
.sr-for{margin:0 0 8px;font-size:12.5px;color:var(--ink2)}
.sr-for .lk{border:0;background:none;color:var(--accent);font-weight:600;cursor:pointer;padding:0 2px;font-size:12px}
.sr-per{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.sr-per h4{margin:0 0 6px;font:700 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.sr-pl{display:grid;grid-template-columns:minmax(0,1fr) 64px 38px;grid-template-rows:auto auto;align-items:center;gap:0 8px;width:100%;padding:6px 6px;border-radius:8px;text-align:left}
.sr-pl:hover{background:var(--surf2)}
.sr-pl .nm{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sr-pl .bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.sr-pl .bar i{display:block;height:100%;border-radius:3px}
.sr-pl b{font:700 12px var(--mono);text-align:right}
.sr-pl small{grid-column:1/-1;font:10.5px var(--mono);color:var(--ink3);line-height:1.3}
/* A red port is filled red with a white anchor: at a glance, across a whole
   country of pins, the ones that need action are solid. */
.pk-pin.red{background:var(--c);border-color:#fff;box-shadow:0 0 0 2px var(--c),0 4px 14px rgba(224,58,46,.45)}
.pk-pin.red svg{stroke:#fff}
.sr-t .sr-at{font-weight:650;color:var(--ink)}

/* ── label / value rows line up ───────────────────────────────────────
   The label keeps to one line and the value takes the rest, right-aligned,
   so a long value ("18 kn from NW · Beaufort 5") wraps under itself instead
   of pushing its label onto two lines. */
.kv{align-items:baseline}
.kv .k{flex:0 0 auto;white-space:nowrap}
.kv .v{flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:break-word}
/* Console sidebar category headings: one line, icon full size, controls aligned. */
.sb-t{letter-spacing:.06em;min-width:0}
.sb-t>svg{flex:none}
.sb-t>span{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.25}
.sb-t .fk-grip{position:absolute;left:-12px;top:50%;transform:translateY(-50%);margin:0}
.sb-t.fk-h .sb-add{margin-left:0}
.dr-b .fld input[type=search]{width:100%;box-sizing:border-box}
/* Header rows: a status chip sits on the same centre line as the buttons
   beside it, and a switch lines up with its own "Active" label. */
.ops-head>.chip{align-self:flex-start!important;margin-top:9px}
.rt-h>.tog{align-self:center}

/* ── every location as a table ─────────────────────────────────────── */
.all-btn{margin:2px 0 10px;width:100%;justify-content:center}
.all-btn.on{border-color:var(--accent);color:var(--accent)}
.alltab{position:absolute;left:310px;right:20px;bottom:132px;z-index:1200;max-height:min(52vh,560px);display:flex;flex-direction:column;
  background:var(--surf);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(16,32,52,.22);overflow:hidden}
.alltab[hidden]{display:none!important}
.at-h{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.at-h>div{display:flex;align-items:baseline;gap:10px;min-width:0}
.at-h b{font-size:14px}
.at-h .mono{font-size:11.5px;color:var(--ink3)}
.at-hint{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.at-h .x{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:18px;color:var(--ink3)}
.at-h .x:hover{background:var(--surf2);color:var(--ink)}
.at-w{overflow:auto;flex:1}
.at{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
.at th{position:sticky;top:0;z-index:1;background:var(--surf);text-align:right;font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;vertical-align:bottom}
.at th small{display:block;text-transform:none;letter-spacing:0;font:10px var(--mono);color:var(--ink3);opacity:.8}
.at th.on,.at th:hover{color:var(--ink)}
.at td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:middle}
.at td small{font-size:10.5px;color:var(--ink3)}
.at td small.why{display:block;font-family:var(--font);white-space:normal;max-width:180px;margin-left:auto;line-height:1.3;margin-top:2px}
.at .nm{position:sticky;left:0;z-index:2;background:var(--surf);text-align:left;font-family:var(--font);font-weight:600;color:var(--ink);min-width:170px}
.at th.nm{z-index:3}
.at td:nth-child(2){text-align:left}
.at tbody tr{cursor:pointer}
.at tbody tr:hover td{background:var(--surf2)}
.at tr.sel td{background:color-mix(in srgb,var(--ink) 12%,var(--surf))}
.at .av{display:inline-block;min-width:34px;padding:2px 7px;border-radius:6px;text-align:center;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
@media (max-width:1300px){.alltab{left:16px;right:16px}}
@media (max-width:860px){.alltab{bottom:150px;max-height:48vh}}

/* The table fits its box: no sideways scrolling. Headings wrap, figures stay
   on one line, and the secondary line under a figure (direction, storm id)
   sits beneath it instead of beside it. */
.at-w{overflow-x:hidden;overflow-y:auto}
.at{table-layout:auto;font-size:12px}
.at th{white-space:normal;padding:8px 6px;line-height:1.25;font-size:10px;letter-spacing:.04em;min-width:0}
.at td{padding:7px 6px}
.at .nm{position:static;min-width:0;white-space:normal;line-height:1.3}
.at td .sub{display:block;font-size:10px;color:var(--ink3);margin-top:2px;white-space:nowrap}
.at .av{min-width:0;padding:2px 6px}
.at .pk-st{white-space:nowrap}
@media (max-width:1300px){.alltab{left:16px;right:16px}}
@media (max-width:1100px){.at th:nth-child(n+11),.at td:nth-child(n+11){display:none}}
/* Breathing room at both sides, and a shaded location column: a soft band of
   colour with the location's warning colour as a thin edge, plus light
   striping so a row is easy to follow across the table. */
.at-w{padding:0 16px 10px}
.at-h{padding-left:20px;padding-right:16px}
.at tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surf2) 55%,var(--surf))}
.at td.nm{background:color-mix(in srgb,var(--ink) 4%,var(--surf2));box-shadow:inset 3px 0 0 var(--bc,var(--line2));padding-left:12px;border-radius:0}
.at tbody tr:nth-child(even) td.nm{background:color-mix(in srgb,var(--ink) 7%,var(--surf2))}
.at th.nm{padding-left:12px}
.at tbody tr:first-child td.nm{border-top-left-radius:8px}
.at tbody tr:last-child td.nm{border-bottom-left-radius:8px}
.at tbody tr:hover td,.at tbody tr:hover td.nm{background:color-mix(in srgb,var(--ink) 9%,var(--surf))}

/* Maximised table: the whole map area between the top bar and the
   timeline, so the player stays in reach. */
.alltab.max{top:84px;left:20px;right:20px;bottom:132px;max-height:none}
.xmax{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;flex:none;border:1px solid var(--line2);background:var(--surf);color:var(--ink2);box-shadow:0 1px 3px rgba(16,32,52,.12);margin-left:4px}
.xmax svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xmax:hover,.xmax[aria-pressed="true"]{background:var(--surf2);color:var(--ink);border-color:var(--ink3)}

/* ── every close button is a circle with an X in it ────────────────────
   One look everywhere — the information box, the drawers, the table, the
   legend, every side panel, widget remove — so a reader can always see
   where "close" is. Small remove buttons inside chips get the same shape at
   a smaller size. */
.x,.dr-h [data-close],.dd-x,[data-legx],[data-sdx],[data-allx],[data-desel]{
  width:28px!important;height:28px!important;border-radius:50%!important;display:inline-grid!important;place-items:center;flex:none;padding:0!important;
  border:1px solid var(--line2)!important;background:var(--surf)!important;color:var(--ink2)!important;
  font:400 19px/1 var(--font)!important;box-shadow:0 1px 3px rgba(16,32,52,.12)}
.x:hover,.dr-h [data-close]:hover,.dd-x:hover,[data-legx]:hover,[data-sdx]:hover,[data-allx]:hover,[data-desel]:hover{
  background:var(--ink)!important;color:var(--surf)!important;border-color:var(--ink)!important}
.c-card .x,.c-card [data-desel]{top:12px;right:12px}
.wg-h .x{opacity:.55}
.wg:hover .wg-h .x{opacity:1}
.rcp button{width:16px;height:16px;border-radius:50%;display:inline-grid;place-items:center;padding:0;margin-left:5px;border:1px solid var(--line2);background:var(--surf);font-size:12px;line-height:1;color:var(--ink2)}
.rcp button:hover{background:var(--ink);color:var(--surf);border-color:var(--ink)}

/* Lists that take you to the map. */
.storm-row.go{cursor:pointer;border-radius:10px;transition:background .15s}
.storm-row.go:hover{background:var(--surf2)}
.kv.kv-go{display:flex;width:100%;border:0;background:none;cursor:pointer;border-radius:6px;padding:4px 6px;margin:0 -6px;font:inherit;color:inherit;text-align:left}
.kv.kv-go:hover{background:var(--surf2)}
.lnk{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;font:inherit}
.lnk b{color:var(--ink)}
.lnk:hover{text-decoration:underline}
.go-pulse{animation:goPulse 2.4s ease-out}
@keyframes goPulse{0%{filter:drop-shadow(0 0 0 rgba(224,58,46,.9))}25%{filter:drop-shadow(0 0 10px rgba(224,58,46,.9))}60%{filter:drop-shadow(0 0 4px rgba(224,58,46,.5))}100%{filter:none}}
/* The every-location table belongs to the Atlas: it stays out of the other views. */
body[data-mod]:not([data-mod="atlas"]) .alltab{display:none!important}

/* ── site-specific widgets ─────────────────────────────────────────── */
.wg-sites{display:inline-flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;max-width:46%;padding:3px 9px;border-radius:999px;
  border:1px dashed var(--line2);background:none;color:var(--ink3);font:600 11px var(--font);cursor:pointer;white-space:nowrap}
.wg-sites span{overflow:hidden;text-overflow:ellipsis}
.wg-sites svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.wg-sites:hover{border-style:solid;color:var(--ink);border-color:var(--ink3)}
.wg-sites.on{border-style:solid;border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.st-list{margin-top:10px;display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto}
.st-g h5{margin:10px 0 4px;font:700 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.st-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13.5px}
.st-row:hover{background:var(--surf2)}
.st-row input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.st-row span{flex:1;min-width:0}
.st-row small{color:var(--ink3);font-size:11.5px}
.st-row[hidden]{display:none}
/* Console sidebar: starts below the brand pill instead of running under it,
   and scrolls inside itself when the menus are longer than the screen. */
.sb{margin-top:64px;top:80px;max-height:calc(100vh - 96px);overflow:auto;overscroll-behavior:contain}
@media (max-width:1300px){.sb{margin-top:114px;max-height:calc(100vh - 140px)}}
@media (max-width:900px){.sb{max-height:none}}
.sb-i[draggable="true"]{cursor:pointer}
.sb-i.mv-drag{opacity:.4}
.sb-i.mv-a{box-shadow:inset 0 2px 0 var(--accent)}
.sb-i.mv-b{box-shadow:inset 0 -2px 0 var(--accent)}

/* ── 1.3: fixed, shaded headers ──
   The layer menu scrolls inside itself under its Basemap style section, which
   stays put; the side drawers (Storms out at sea, Incident summary) and the
   Legend keep their title bar while their body scrolls. All three fixed areas
   share one shade so the reader sees what stays and what moves. */
.c-left{overflow:hidden;-webkit-mask-image:none;mask-image:none}
.c-left>#pan-clean{flex:0 1 auto;min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:none;scrollbar-width:thin;gap:16px}
#pan-clean>.sec-base{position:sticky;top:-16px;z-index:3;margin:-16px -18px 0;padding:14px 18px 12px;
  background:var(--surf2);border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 6px 10px -8px rgba(16,32,52,.18)}
#pan-clean>.sec-base+.sec{border-top:0;padding-top:0}
#pan-clean>.sec-base .fk-grip{display:none}
.sd-pan>.sd-h,.ld-pan>.sd-h{position:sticky;top:-14px;z-index:3;margin:-14px -22px 10px -18px;padding:12px 22px 10px 18px;
  background:var(--surf2);border-bottom:1px solid var(--line);box-shadow:0 6px 10px -8px rgba(16,32,52,.18)}
.sd-pan>.sd-h{border-radius:18px 0 0 0}
.ld-pan>.sd-h{margin:-14px -18px 10px -22px;padding:12px 18px 10px 22px;border-radius:0 18px 0 0}
.ldock.bare .ld-pan>.sd-h{border-radius:18px 18px 0 0}

/* ── 1.3: sign-in (sites published with "Sign-in required") ── */
html.si-gated #stack{display:none}
html.si-open{overflow:hidden}
.si{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;padding:24px 16px;overflow:auto;
  background:radial-gradient(1200px 600px at 10% -10%,color-mix(in srgb,var(--sp) 22%,transparent),transparent 60%),
             radial-gradient(900px 500px at 110% 110%,color-mix(in srgb,var(--sa) 18%,transparent),transparent 60%),var(--bg);
  font-family:Figtree,system-ui,sans-serif;color:var(--ink)}
.si[hidden]{display:none}
html:not(.si-gated) .si{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px)}
.si-card{width:min(920px,100%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--surf);
  border-radius:24px;box-shadow:0 24px 60px -20px rgba(16,32,52,.35),0 2px 6px rgba(16,32,52,.08);overflow:hidden}
.si-brand{position:relative;overflow:hidden;padding:40px 36px;color:#fff;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(150deg,var(--sd) 0,color-mix(in srgb,var(--sd) 55%,var(--sp)) 55%,var(--sp) 100%)}
.si-brand::after{content:"";position:absolute;inset:auto -60px -80px auto;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--sa) 45%,transparent),transparent 70%);pointer-events:none}
.si-logo{width:96px;height:96px;border-radius:22px;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.si-logo img{width:80px;height:80px;max-width:none;object-fit:contain}
.si-logo .ews-mark{width:56px;height:56px;border-radius:16px}
.si-brand h1{margin:8px 0 0;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.si-brand h1 b{color:var(--sa);font-weight:700}
.si-org{margin:0;font-size:14px;font-weight:600;opacity:.9;text-transform:uppercase;letter-spacing:.06em}
.si-desc{margin:4px 0 0;font-size:15px;line-height:1.55;opacity:.92;max-width:38ch}
.si-claim{margin-top:auto;padding-top:18px;font-size:12px;line-height:1.5;opacity:.75;border-top:1px solid rgba(255,255,255,.18)}
.si-main{padding:40px 36px 28px;display:flex;flex-direction:column;gap:6px;position:relative}
.si-main h2{margin:0 0 14px;font-size:20px;font-weight:700}
.si-main form{display:flex;flex-direction:column;gap:12px}
.si-main form[hidden]{display:none}
.si-main label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
.si-main input[type=text],.si-main input[type=password]{font:inherit;font-size:15px;font-weight:500;color:var(--ink);background:var(--surf2);
  border:1px solid var(--line2,var(--line));border-radius:12px;padding:12px 14px;outline:none;width:100%;box-sizing:border-box}
.si-main input:focus{border-color:var(--sp);box-shadow:0 0 0 3px color-mix(in srgb,var(--sp) 22%,transparent)}
.si-pw{position:relative;display:block}
.si-pw input{padding-right:64px}
.si-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:600 12px Figtree,sans-serif;color:var(--ink2);background:none;border:0;padding:6px 8px;border-radius:8px;cursor:pointer}
.si-eye:hover{background:var(--surf)}
.si-main .si-rem{flex-direction:row;align-items:center;gap:8px;font-weight:500}
.si-rem input{width:16px;height:16px;accent-color:var(--sp)}
.si-btn{font:700 15px Figtree,sans-serif;color:#fff;background:var(--sp);border:0;border-radius:12px;padding:13px 16px;cursor:pointer;margin-top:4px}
.si-btn:hover{filter:brightness(1.06)}
.si-btn:disabled{opacity:.6;cursor:progress}
.si-ghost{font:600 14px Figtree,sans-serif;color:var(--ink2);background:none;border:1px solid var(--line);border-radius:12px;padding:11px 16px;cursor:pointer}
.si-row{display:flex;gap:8px}.si-row>*{flex:1}
.si-msg{min-height:20px;margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--ink2)}
.si-msg.err{color:var(--crit)}
.si-msg.warn{color:color-mix(in srgb,var(--amber) 70%,var(--ink))}
.si-help{margin:6px 0 0;font-size:12.5px;color:var(--ink3);line-height:1.5}
.si-foot{margin-top:auto;padding-top:22px;font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:8px}
.si-foot svg{width:14px;height:14px}
.si-theme{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surf);color:var(--ink2);cursor:pointer;display:grid;place-items:center}
.si-theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media (max-width:760px){
  .si{place-items:start center;padding:16px}
  .si-card{grid-template-columns:1fr;border-radius:20px}
  .si-brand{padding:26px 22px 22px;gap:10px}
  .si-logo{width:68px;height:68px;border-radius:16px}.si-logo img{width:56px;height:56px}
  .si-brand h1{font-size:23px}
  .si-claim{display:none}
  .si-main{padding:24px 22px 20px}
}
/* the signed-in user, in the module bar */
.switch .si-chip{width:34px;height:34px;border-radius:50%;padding:0;margin:0 2px;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.switch .si-chip i{font:700 12px Figtree,sans-serif;font-style:normal;color:#fff;letter-spacing:.02em}
.switch .si-chip:hover{background:rgba(255,255,255,.22)}
.si-menu{position:fixed;z-index:3000;min-width:240px;background:var(--surf);color:var(--ink);
  border-radius:14px;box-shadow:0 16px 40px -12px rgba(16,32,52,.35);padding:8px;display:flex;flex-direction:column;font-family:Figtree,sans-serif}
.si-menu[hidden]{display:none}
.si-who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column;gap:2px}
.si-who b{font-size:14px}.si-who span{font-size:12px;color:var(--ink3)}
.si-menu button{text-align:left;font:500 13.5px Figtree,sans-serif;color:var(--ink);background:none;border:0;border-radius:9px;padding:9px 10px;cursor:pointer}
.si-menu button:hover{background:var(--surf2)}
/* Settings › Site users, live */
.set-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.su-live td{vertical-align:middle}.su-live tr.off td{opacity:.55}
.su-live select{font:inherit;font-size:12.5px;padding:4px 6px;border-radius:8px;border:1px solid var(--line);background:var(--surf);color:var(--ink)}
.su-acts{white-space:nowrap;text-align:right}.su-acts .btn{margin-left:4px}
.btn.danger{color:var(--crit)}
/* No rubber-band on the panels (1.3.1). On a Mac trackpad or a phone, an
   elastic overscroll dragged the whole content — fixed header included —
   down or up, opening a blank strip above the header or under the last row.
   The panels stop dead at either end instead, and the page behind them does
   not take over the scroll. */
#pan-clean,.sd-pan,.ld-pan,.c-right .c-card,.c-col{overscroll-behavior:none}

/* ── 1.3.2: every panel holds still ──
   Nothing in the app rubber-bands: on a Mac trackpad or a phone, an elastic
   overscroll dragged content — fixed headers included — past the panel's
   edge and opened a blank strip. The app fills the screen, so there is no
   page behind it to bounce either. */
html,body,#stack,.ops-view,.c-col,.c-card,#pan-clean,.sd-pan,.ld-pan,.alltab,.at-w,.sb,.drawer{overscroll-behavior:none}
/* The information box: its summary (in warning / all clear, or the chosen
   location's name, band and reading, with the close button) stays at the top
   while the list and the details scroll under it. */
@media (min-width:0px){
  .c-right .c-card>.sec-top{position:sticky;top:-18px;z-index:3;margin:-18px -20px 0;padding:16px 20px 12px;
    background:var(--surf2);border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 6px 10px -8px rgba(16,32,52,.18)}
  .c-right .c-card>.sec-top+.sec{border-top:0;padding-top:0}
}
/* Every location: the title bar and the column heads stay; the heads take
   the same shade as the other fixed areas. */
.alltab .at-h{background:var(--surf2);flex:none}
.at thead th{background:var(--surf2);box-shadow:inset 0 -1px 0 var(--line)}
/* Console: a fixed "Consoles" title over the workspace menu. */
.sb-hd{position:sticky;top:-12px;z-index:3;margin:-12px -12px 8px;padding:12px 20px 10px;
  font:700 12px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:var(--surf2);border-bottom:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 6px 10px -8px rgba(16,32,52,.18)}
/* The location column's own heading is a th.nm, which `.at .nm{position:static}`
   above had un-stuck: it scrolled away while the other headings stayed. */
.at thead th.nm{position:sticky;top:0;z-index:3}

/* ======================================================================
   1.4 — PHONES (860 px and under).
   The module switcher becomes an app tab bar at the bottom of the screen,
   where a thumb reaches it; the top keeps only the site's own bar. Every
   floating piece of the Atlas is re-measured against those two bars, the
   layers menu and the information box take turns instead of stacking on
   top of each other, and tab rows swipe sideways instead of wrapping.
   ====================================================================== */
@media (max-width:860px){
  :root{--tabbar:calc(62px + env(safe-area-inset-bottom,0px))}
  /* the tab bar */
  .switch{top:auto!important;bottom:0;left:0;right:0;transform:none;border-radius:18px 18px 0 0;border-width:1px 0 0;
    justify-content:space-around;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 24px rgba(0,0,0,.28)}
  .switch .sep{display:none}
  .switch button[data-mod]{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;padding:6px 2px;border-radius:12px;font-size:0}
  .switch button[data-mod] svg{width:20px;height:20px}
  .switch button[data-mod] span{display:none!important}
  .switch button[data-mod]::after{content:attr(data-short);font-size:10px;font-weight:600;letter-spacing:.01em;line-height:1}
  .switch .mode{flex:none;width:44px;justify-content:center;padding:6px 0}
  .switch .mode svg{width:18px;height:18px}
  .switch .si-chip{flex:none;align-self:center;width:32px;height:32px}
  /* the Atlas, between the top bar and the tab bar */
  .c-time{bottom:calc(var(--tabbar) + 8px);width:calc(100vw - 24px)}
  .c-col{top:calc(64px + env(safe-area-inset-top,0px));bottom:calc(var(--tabbar) + 62px)}
  .c-right{bottom:calc(var(--tabbar) + 62px)!important;max-height:40%}
  #stalebar,#mapnote{top:calc(62px + env(safe-area-inset-top,0px))!important}
  .satbar{bottom:calc(var(--tabbar) + 60px)}
  .windbar.stack{bottom:calc(var(--tabbar) + 112px)}
  .alltab{left:8px!important;right:8px!important;top:calc(64px + env(safe-area-inset-top,0px));bottom:calc(var(--tabbar) + 62px);max-height:none}
  .at th:nth-child(n+6),.at td:nth-child(n+6){display:none}
  .at-hint{display:none}
  /* layers menu and information box take turns */
  .shell:has(#pan-clean:not([hidden])) .c-right{display:none}
  .leaflet-control-zoom,.leaflet-control-scale{display:none}
  .leaflet-bottom{bottom:var(--tabbar)}
  /* full-page modules: room for the top brand and the bottom tab bar */
  .ops-head{padding-top:66px!important}
  .ops-view{padding-bottom:calc(var(--tabbar) + 24px)!important}
  .ops-head h2{font-size:21px}
  .md-bar{flex-wrap:nowrap;overflow:visible}
  .md-bar .tabs,#v-settings .tabs,#v-reports .tabs,#v-model .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .md-bar .tabs::-webkit-scrollbar{display:none}
  .md-bar .tabs button{flex:none;white-space:nowrap}
  .md-bar{flex-direction:column;align-items:stretch}
  .md-bar .srch{max-width:none}
  .ops-scrim{bottom:0}
  .drawer{bottom:0;width:100vw;border-radius:0}
  .toast{bottom:calc(var(--tabbar) + 12px)!important}
  .si-menu{max-width:calc(100vw - 16px)}
  /* the sign-in screen sits clear of the tab bar it replaces */
  .si{padding-bottom:24px}
}
/* Console menu title is a button now (it folds the menu on phones). */
.sb-hd{display:flex;align-items:center;gap:8px;width:calc(100% + 24px);text-align:left;cursor:default}
.sb-cur,.sb-chev{display:none}
@media (max-width:860px){
  .c-right{top:auto!important}
  /* the stale-readings notice: its headline only, one line */
  #stalebar{font-size:0;padding:6px 12px;white-space:nowrap}
  #stalebar b{font-size:12px}
  .shell:has(#stalebar:not([hidden])) .c-col{top:calc(100px + env(safe-area-inset-top,0px))}
  .shell:has(#stalebar:not([hidden])) .alltab{top:calc(100px + env(safe-area-inset-top,0px))}
  /* Console: the workspace menu folds into its title */
  .sb-hd{cursor:pointer;position:static;margin:-12px -12px 0;border-radius:16px;border-bottom:0;box-shadow:none}
  .sb.open .sb-hd{border-radius:16px 16px 0 0;border-bottom:1px solid var(--line);margin-bottom:8px}
  .sb-cur{display:block;flex:1;min-width:0;text-align:right;font:600 12.5px var(--font);letter-spacing:0;text-transform:none;color:var(--ink2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sb-chev{display:block;width:8px;height:8px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);margin:-4px 2px 0 4px;transition:transform .15s}
  .sb.open .sb-chev{transform:rotate(-135deg);margin-top:4px}
  .sb:not(.open)>:not(.sb-hd){display:none}
  .sb:not(.open){padding-bottom:12px}
  .sb-lay{gap:14px}
}
@media (max-width:860px){
  .c-bar .c-pill:not(.lgu-pick){display:none}
  .shell:has(#stalebar:not([hidden])) #mapnote{top:calc(100px + env(safe-area-inset-top,0px))!important}
  .c-bar .lgu-pick{max-width:130px}
}

/* ── 1.4.1: nothing spills out of its card ──────────────────────────── */
/* Long words, codes, e-mail addresses and URLs break instead of pushing a
   card wider than the screen; flex and grid children may shrink. */
.ops-view,.drawer,.c-card,.c-panel,.sd-pan,.ld-pan,.si-card{overflow-wrap:break-word}
.ops-view .card,.ops-view .dc,.ops-view .wg,.ops-view .kv,.ops-view .fld>*,.wg-b,.dc-h .t,.kv .v,.kv .k{min-width:0}
.kv{gap:12px}.kv .v{text-align:right;overflow-wrap:break-word}
@media (max-width:600px){
  /* tables become cards (labels from stackTables in kernel.js) */
  .ops-view table.tstk,.drawer table.tstk,.ops-view table.tstk tbody,.drawer table.tstk tbody{display:block;width:100%;min-width:0!important}
  .ops-view table.tstk tr.tstk-h,.drawer table.tstk tr.tstk-h,.ops-view table.tstk thead,.drawer table.tstk thead{display:none}
  .ops-view table.tstk tr,.drawer table.tstk tr{display:block;border:1px solid var(--line);border-radius:12px;padding:4px 12px;margin:0 0 10px;background:var(--surf)}
  .ops-view table.tstk td,.drawer table.tstk td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0!important;
    border:0!important;border-bottom:1px solid var(--line)!important;text-align:right!important;white-space:normal!important;min-width:0}
  .ops-view table.tstk td:last-child,.drawer table.tstk td:last-child{border-bottom:0!important}
  .ops-view table.tstk td::before,.drawer table.tstk td::before{content:attr(data-label);flex:none;max-width:42%;text-align:left;
    font:700 10px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
  .ops-view table.tstk td:not([data-label])::before,.ops-view table.tstk td[data-label=""]::before{display:none}
  .ops-view table.tstk td:not([data-label]),.ops-view table.tstk td[data-label=""]{justify-content:flex-start}
  .tscroll{overflow:visible;margin:0}
  .tscroll .cn-tab{min-width:0}
  .su-acts{text-align:left!important;white-space:normal!important;flex-wrap:wrap;justify-content:flex-end!important}
  .su-acts .btn{margin:2px 0 2px 4px}
}
@media (max-width:860px){
  .shell:has(.alltab:not([hidden])) #mapnote{display:none}
  .at{table-layout:fixed;width:100%}
  .at th,.at td{overflow-wrap:anywhere}
  .at th:nth-child(n+5),.at td:nth-child(n+5){display:none}
  .at th.nm,.at td.nm{width:38%}
}

/* 1.4.1 — nothing overlaps on a phone.
   The information box scrolls inside itself (as on desktop), so it can never
   run past its own sheet into the timeline or the tab bar, and its summary
   stays pinned at the top of the sheet. The Every location table takes the
   sheet's place while it is open. */
@media (max-width:860px){
  .c-right{overflow:hidden;-webkit-mask-image:none;mask-image:none;display:flex;flex-direction:column}
  .c-right .c-card{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 16px}
  .c-right .c-card>.sec-top{top:-16px;margin:-16px -16px 0;padding:14px 16px 10px}
  .shell:has(.alltab:not([hidden])) .c-right{display:none}
  .at td .st{white-space:normal;line-height:1.2;text-align:left}
}
/* 1.4.1 — the Every location table never lies on top of the side panels.
   Wide screens: it sits between them (between the layers menu, when open,
   and the information box). Narrower screens, or maximised: it takes the
   whole map and the panels step aside until it is closed. */
@media (min-width:1101px){
  .alltab:not(.max){right:calc(18px + 290px + 14px)}
  .shell:has(#pan-clean:not([hidden])) .alltab:not(.max){left:calc(18px + 276px + 14px)}
  .shell:has(#pan-clean[hidden]) .alltab:not(.max){left:18px}
}
@media (max-width:1100px){
  .shell:has(.alltab:not([hidden])) .c-col{display:none}
}
.shell:has(.alltab.max:not([hidden])) .c-col{display:none}
/* 1.4.1 — tablets and small laptops (861–1300 px). The module switcher sits
   on a second row here, so the columns, the docks and the stale-readings
   notice start below it, the notice keeps to the gap between the columns,
   and the columns stop above the timeline. */
@media (min-width:861px) and (max-width:1300px){
  .c-col{top:calc(122px + env(safe-area-inset-top,0px))}
  .c-left{bottom:132px}
  .c-right{bottom:140px}
  #stalebar,#mapnote{top:calc(122px + env(safe-area-inset-top,0px));max-width:min(640px,calc(100vw - 660px))}
  .alltab.max{top:122px}
}
@media (max-width:1100px){
  .shell:has(.alltab:not([hidden])) .sdock,.shell:has(.alltab:not([hidden])) .ldock{display:none}
}
@media (min-width:861px) and (max-width:1300px){
  /* the notice is one line here too, and the columns make room for it */
  #stalebar{font-size:0;padding:6px 12px;white-space:nowrap;max-width:min(640px,calc(100vw - 40px))}
  #stalebar b{font-size:12px}
  .shell:has(#stalebar:not([hidden])) .c-col{top:calc(162px + env(safe-area-inset-top,0px))}
}
/* The table shows as many columns as its own width holds — it is narrower
   between the panels than across the map — and never scrolls sideways. */
.alltab{container-type:inline-size}
@container (max-width:1000px){.at th:nth-child(n+11),.at td:nth-child(n+11){display:none}}
@container (max-width:820px){.at th:nth-child(n+9),.at td:nth-child(n+9){display:none}}
@container (max-width:640px){.at th:nth-child(n+7),.at td:nth-child(n+7){display:none}}
@container (max-width:460px){.at th:nth-child(n+6),.at td:nth-child(n+6){display:none}}
/* The same when a crowded top bar pushes the switcher to a second row on a
   wide screen (fitSwitch sets body.nav-row2). */
@media (min-width:861px){
  body.nav-row2 .c-col{top:calc(122px + env(safe-area-inset-top,0px))}
  body.nav-row2 .c-left{bottom:132px}
  body.nav-row2 #stalebar{font-size:0;padding:6px 12px;white-space:nowrap}
  body.nav-row2 #stalebar b{font-size:12px}
  body.nav-row2 .shell:has(#stalebar:not([hidden])) .c-col{top:calc(162px + env(safe-area-inset-top,0px))}
  body.nav-row2 .alltab.max{top:122px}
}
/* 1.4.1 — tablets in the tab-bar layout (721–860 px): day/night is an icon
   there too, so its word does not run into the user's initials. */
@media (max-width:860px){ .switch .mode{font-size:0;gap:0} }
/* Both notices at once (old readings, and no street map on this network):
   the second goes under the first instead of on top of it. */
@media (min-width:861px){ body.nav-row2 .shell:has(#stalebar:not([hidden])) #mapnote,
  .shell:has(#stalebar:not([hidden])) #mapnote{top:calc(164px + env(safe-area-inset-top,0px))} }
@media (min-width:1301px){ body:not(.nav-row2) .shell:has(#stalebar:not([hidden])) #mapnote{top:136px} }
/* The street-map notice keeps to the gap between the columns too. */
@media (min-width:861px){ #mapnote{max-width:min(560px,calc(100vw - 740px))} }
@media (min-width:861px) and (max-width:1000px){ #mapnote{font-size:11.5px;padding:6px 10px} }
@media (max-width:860px){ .shell:has(#pan-clean:not([hidden])) #mapnote{display:none} }
/* 1.4.1 — the Facebook gallery card keeps the same gap as every card. */
.card.fbgal{margin-bottom:14px}

/* ── 1.5: Rain · RainVision ── */
.rain-fr{transition:opacity .6s ease-in-out;will-change:opacity}
.rainbar{width:min(720px,calc(100vw - 40px))}
.rainbar input[type=range]{background:linear-gradient(90deg,transparent 0 var(--nc,100%),color-mix(in srgb,#7A4FD6 35%,transparent) var(--nc,100%) 100%);border-radius:3px}
.rainbar .sb-c em{color:var(--good)}
.rainbar .sb-c em.nc{color:#7A4FD6}
:root[data-theme="dark"] .rainbar .sb-c em.nc{color:#B79CF0}
.rainbar.is-nc{box-shadow:var(--sh),inset 0 0 0 1.5px color-mix(in srgb,#7A4FD6 55%,transparent)}
.rb-key{display:flex;align-items:center;gap:2px;padding-left:8px;border-left:1px solid var(--line);flex:none}
.rb-key i{display:block;width:9px;height:9px;border-radius:2px}
.rb-key small{font:10px var(--mono);color:var(--ink3);margin-left:4px}
.rain-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;font:11.5px var(--mono);color:var(--ink2)}
.rain-key .mk{display:flex;align-items:center;gap:7px;white-space:nowrap}
.rain-key i{display:block;width:14px;height:10px;border-radius:2px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.rainbar[hidden]{display:none!important}
/* the players stack up from the timeline: satellite, rain, wind */
.satbar.lvl0{bottom:132px}.satbar.lvl1{bottom:186px}.satbar.lvl2{bottom:240px}
@media (min-width:861px){
  #sh-clean[data-bars="3"] .c-right{bottom:300px}
  /* where the players are wider than the gap between the columns */
}
@media (min-width:861px) and (max-width:1300px){
  #sh-clean[data-bars="1"] .c-left{bottom:192px}
  #sh-clean[data-bars="2"] .c-left{bottom:246px}
  #sh-clean[data-bars="3"] .c-left{bottom:300px}
}
@media (max-width:860px){
  .satbar.lvl0{bottom:calc(var(--tabbar) + 60px)}
  .satbar.lvl1{bottom:calc(var(--tabbar) + 112px)}
  .satbar.lvl2{bottom:calc(var(--tabbar) + 164px)}
  #sh-clean[data-bars="1"] .c-right{bottom:calc(var(--tabbar) + 114px)!important}
  #sh-clean[data-bars="2"] .c-right{bottom:calc(var(--tabbar) + 166px)!important}
  #sh-clean[data-bars="3"] .c-right{bottom:calc(var(--tabbar) + 218px)!important}
  #sh-clean[data-bars="1"] .c-col.c-left{bottom:calc(var(--tabbar) + 114px)}
  #sh-clean[data-bars="2"] .c-col.c-left{bottom:calc(var(--tabbar) + 166px)}
  #sh-clean[data-bars="3"] .c-col.c-left{bottom:calc(var(--tabbar) + 218px)}
  .rainbar .sb-t,.rb-key small{display:none}
  .rainbar{gap:7px}
}
.rb-key{border:0;border-left:1px solid var(--line);background:none;border-radius:0;cursor:pointer;padding:4px 0 4px 8px}
.rb-key:hover i{transform:scaleY(1.25)}
.rb-short{display:none}
.rb-pop{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:var(--surf);border-radius:16px;box-shadow:var(--sh);padding:12px 14px;
  max-height:min(56vh,420px);overflow-y:auto;overscroll-behavior:none}
.rb-pop .sec h3{margin:0 0 8px}
@media (max-width:860px){
  .rainbar .spd:not([data-rainnc]){display:none}
  .rainbar .sb-c em:not(.rb-short){display:none}
  .rainbar .rb-short{display:inline}
  .rainbar .sb-c{font-size:10.5px}
  .rainbar{padding-right:10px}
}
/* the Every location table stops above whichever players are out */
#sh-clean[data-bars="1"] .alltab{bottom:186px}
#sh-clean[data-bars="2"] .alltab{bottom:240px}
#sh-clean[data-bars="3"] .alltab{bottom:294px}
@media (max-width:860px){
  #sh-clean[data-bars="1"] .alltab{bottom:calc(var(--tabbar) + 114px)}
  #sh-clean[data-bars="2"] .alltab{bottom:calc(var(--tabbar) + 166px)}
  #sh-clean[data-bars="3"] .alltab{bottom:calc(var(--tabbar) + 218px)}
}
.rainbar.keyopen{z-index:40}

/* the Nowcast button on the rain player */
.rainbar .rb-nc{min-width:0;padding:0 10px;font:600 11px var(--font,inherit);letter-spacing:.01em}
.rainbar .rb-nc[aria-pressed="true"]{background:#7A4FD6;border-color:#7A4FD6;color:#fff}
@media (max-width:860px){ .rb-key i:nth-child(even){display:none} .rainbar .rb-nc{padding:0 8px} }

/* ── 1.6: Air quality ── */
.aq-key{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink2)}
.aq-key .mk,.aq-mini .mk{display:flex;align-items:center;gap:7px}
.aq-key i,.aq-mini i,.aq-line i{display:block;width:12px;height:12px;border-radius:3px;flex:none}
.aq-r{font:10.5px var(--mono);color:var(--ink3);margin-left:auto;white-space:nowrap}
.aq-sym{display:flex;flex-direction:column;gap:5px;margin-top:10px;font-size:11.5px;color:var(--ink2)}
.aq-sym span{display:flex;align-items:center;gap:7px}
.aq-note{display:flex;flex-direction:column;gap:6px}
.aq-line{display:block;line-height:1.45}
.aq-line i{display:inline-block!important;vertical-align:-2px;margin-right:6px}
.aq-line.aq-al{color:var(--crit);font-weight:600}
.aq-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 10px;margin-top:4px;font-size:10.5px}
.aq-mini .aq-r{display:none}
.segbtns.aq-ix{margin-top:4px}
.segbtns.aq-ix button{font-size:10.5px;padding:3px 8px}
.aq-tt{background:var(--surf)!important;color:var(--ink)!important;border:0!important;border-radius:12px!important;box-shadow:var(--sh)!important;padding:10px 12px!important;min-width:220px;max-width:280px;white-space:normal!important}
.aq-tt::before{display:none}
.aq-tip b{font-size:13px}
.aq-tip .kv{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:2px 0}
.aq-tip .kv .k{color:var(--ink3)}.aq-tip .kv .v{text-align:right;font-family:var(--mono);font-size:11px}
.aq-tip .note{margin:6px 0 0;font-size:10.5px;line-height:1.4;color:var(--ink3)}
.aq-big{display:flex;align-items:center;gap:7px;margin:6px 0;font-weight:700;font-size:12.5px}
.aq-big i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.aq-f{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:6px;margin-left:4px}
.aq-f.live{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.aq-f.recent{background:color-mix(in srgb,var(--amber) 22%,transparent);color:#9A6A00}
.aq-f.stale,.aq-f.offline{background:var(--surf2);color:var(--ink3)}
/* a switched-on layer's status chip keeps clear of its opacity dial */
.lyrw.on>.lyr .pc{margin-right:26px}

/* 1.6.1 — keys live only in the legend. On phones the legend is a sheet
   opened from the Legend button in the top bar. */
.c-bar .leg-ib{display:none}
.aq-mini{display:none!important}
@media (max-width:860px){
  .c-bar .leg-ib{display:grid}
  .c-bar .leg-ib[aria-pressed="true"]{background:var(--accent)}
  .c-bar .leg-ib[aria-pressed="true"] .lg-sw{stroke:#fff}
  .leg-sheet{position:absolute;z-index:1250;left:8px;right:8px;top:calc(64px + env(safe-area-inset-top,0px));bottom:calc(var(--tabbar) + 62px);
    background:var(--surf);border-radius:18px;box-shadow:var(--sh);padding:14px 16px 16px;overflow-y:auto;overscroll-behavior:none}
  .leg-sheet[hidden]{display:none}
  .leg-sheet>.sd-h{position:sticky;top:-14px;z-index:3;margin:-14px -16px 10px;padding:12px 16px 10px;background:var(--surf2);
    border-bottom:1px solid var(--line);border-radius:18px 18px 0 0}
  .leg-sheet .ld-b>.sec+.sec{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .shell:has(#legsheet:not([hidden])) .c-right{display:none}
  .shell:has(#stalebar:not([hidden])) .leg-sheet{top:calc(100px + env(safe-area-inset-top,0px))}
  #sh-clean[data-bars="1"] .leg-sheet{bottom:calc(var(--tabbar) + 114px)}
  #sh-clean[data-bars="2"] .leg-sheet{bottom:calc(var(--tabbar) + 166px)}
  #sh-clean[data-bars="3"] .leg-sheet{bottom:calc(var(--tabbar) + 218px)}
}

/* ── 1.6.2: the Air quality drawer (under the storm tab) ── */
.aq-sw{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aq-sw .p{fill:#12A06A;stroke:none}
.aq-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  background:color-mix(in srgb,var(--c) 14%,var(--surf));border-left:5px solid var(--c)}
.aq-head .aq-dot{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
.aq-head div{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.aq-head small{font-size:11px;color:var(--ink3)}
.aq-head b{font-size:16px;line-height:1.2;color:var(--ink)}
.aq-v{font-size:22px;font-weight:700;color:var(--ink);display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.aq-v small{font:10px var(--font);color:var(--ink3);margin-top:3px;white-space:nowrap}
.aq-sub{margin:6px 0 0;font-size:11.5px;color:var(--ink3);line-height:1.45}
.aq-adv{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink2);padding:8px 10px;border-radius:10px;background:var(--surf2)}
.aq-spark{display:block;width:100%;height:64px;border-radius:8px;background:var(--surf2)}
.aq-spark-x{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--ink3);margin-top:3px}
.aq-list{display:flex;flex-direction:column;gap:6px}
.aq-row{box-sizing:border-box;display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surf);cursor:pointer}
.aq-row:hover{background:var(--surf2)}
.aq-row>i{width:11px;height:11px;border-radius:50%;flex:none}
.aq-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12.5px;color:var(--ink)}
.aq-t small{font-size:10.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aq-n{font-size:13px;font-weight:600;color:var(--ink)}
.aq-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;background:var(--surf2)}
.aq-bar span{display:block;min-width:4px}
.aq-alerts{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.aq-al{font-size:11.5px;line-height:1.4;padding:6px 9px;border-radius:9px;background:color-mix(in srgb,var(--crit) 9%,var(--surf));color:var(--ink2)}
.aq-al b{color:var(--crit)}
.c-card .aq-head{margin-top:2px}
#sd-pan-air .sd-b>.sec+.sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#sd-pan-air .sd-b h3{margin:0 0 8px}
.c-card .sec .aq-head+.aq-sub{margin-bottom:2px}

/* ── 1.6.3: air quality per barangay, clustered by source ─────────────── */
.aq-tabs{margin-bottom:12px}
.aq-tabs button{font-size:11.5px;padding:6px 6px;white-space:normal;line-height:1.25}
.aq-cl{display:flex;flex-direction:column;gap:9px}
.aq-g{border:1px solid var(--line);border-left:4px solid var(--c);border-radius:12px;background:var(--surf);overflow:hidden}
.aq-gh{display:flex;align-items:center;gap:9px;padding:8px 10px;box-sizing:border-box}
.aq-gh[data-aqgo]{cursor:pointer}.aq-gh[data-aqgo]:hover{background:var(--surf2)}
.aq-gh>i{width:11px;height:11px;border-radius:50%;flex:none;background:var(--c)}
.aq-gh .aq-t b{font-size:12.5px;font-weight:600;line-height:1.25}
.aq-gh .aq-t small{white-space:normal}
.aq-bs{display:flex;flex-wrap:wrap;gap:5px;padding:0 10px 9px}
.aq-b{font-size:11px;line-height:1.2;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surf2);color:var(--ink2);cursor:pointer;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.aq-b:hover{border-color:var(--c);color:var(--ink)}
.aq-row,.aq-gh{min-width:0}
.aq-f{white-space:nowrap;flex:none}
.aq-n{flex:none}
/* The table view and the side drawers share the same strip of map: while the
   table is open the drawer tabs step aside (they come back when it closes). */
#sh-clean:has(.alltab:not([hidden])) .sdock{display:none}
.at .st{overflow-wrap:normal;word-break:normal}
@media (max-width:860px){.at .st{font-size:10px;padding-left:6px;padding-right:6px}}

/* ── 1.7: Settings › Barangay pages ───────────────────────────────────── */
.bp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.bp-bar input[type=search]{flex:1 1 220px;min-width:0;max-width:340px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surf2);color:var(--ink);font:inherit}
.bp-tab td{vertical-align:middle}
.bp-tab tr.off td:not(:nth-child(2)):not(:last-child){opacity:.6}
.bp-tab small{font-size:11px}
.bp-url{max-width:320px;overflow-wrap:anywhere}
.bp-tg{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:12px;white-space:nowrap}
.bp-tg input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;margin:0;transition:background .15s}
.bp-tg input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.bp-tg input:checked{background:var(--good,#12A06A)}
.bp-tg input:checked::after{left:19px}
.bp-tg input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bp-ed td{background:var(--surf2)}
@media (max-width:600px){
  .ops-view .bp-tab tr.bp-ed{padding:10px 12px}
  .ops-view .bp-tab tr.bp-ed td{display:block!important;padding:4px 0!important;border:0!important;text-align:left!important}
  .ops-view .bp-tab tr.bp-ed td::before{display:none}
  .bp-tab tr.bp-ed .fld{display:flex;flex-direction:column;gap:4px}
  .bp-tab tr.bp-ed .fld label{margin-top:6px;text-align:left;align-self:flex-start}
  .bp-tab tr.bp-ed .fld input{width:100%}
  .bp-bar input[type=search]{max-width:none;flex-basis:100%}
}

/* Site brand — written by the Queay Platform from the EWS branding settings. */
:root{--brand:#E60000;--brand-accent:#178A00;--brand-dark:#172238}
.shell[data-t="clean"],.ops-tok{--accent:#E60000}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shell[data-t="clean"],:root:not([data-theme="light"]) .ops-tok{--accent:#EF5959}}
:root[data-theme="dark"] .shell[data-t="clean"],:root[data-theme="dark"] .ops-tok{--accent:#EF5959}
.switch{background:rgba(23,34,56,.94)}
.switch button[aria-pressed="true"],.c-play,.btn.pri{background:#E60000}
.ews-mark,.ops-brand i{background:linear-gradient(135deg,#172238 0,#E60000 100%)}
.ews-nm b{color:#E60000}
.sc-k,.kp .l b{color:#178A00}