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

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