:root{--ink:#142d43;--muted:#71859a;--line:#e3eaf0;--teal:#0d9e9a;--navy:#10283f;--bg:#f5f8fa;--surface:#fff;--shadow:0 16px 45px rgba(22,48,70,.06)}
*{box-sizing:border-box}html{font-family:'IBM Plex Sans Thai',system-ui,sans-serif;color:var(--ink);background:var(--bg)}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #43bdb7;outline-offset:3px}a{color:#087e82}.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:12px;z-index:9999}.skip:focus{left:12px}.shell{min-height:100dvh}.topbar{height:74px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,3.8vw,64px);box-shadow:0 8px 28px #142f4415}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;background:#1b4960;border:1px solid #397184;border-radius:12px;color:#58d0c8;display:grid;place-items:center}.brand-mark svg{width:28px}.brand strong{display:block;font-size:19px;line-height:1.1}.brand small{font:700 9px Manrope,sans-serif;letter-spacing:2px;color:#8caabb}.top-actions{display:flex;align-items:center;gap:18px}.live-chip{display:flex;align-items:center;gap:9px;color:#b6d1d9;font-size:13px}.live-chip i,.eyebrow span,.pulse{width:8px;height:8px;border-radius:50%;background:#55cfb5;box-shadow:0 0 0 4px #55cfb523}.icon-button{width:38px;height:38px;border:1px solid #476273;background:#28465a;color:#fff;border-radius:10px;display:grid;place-items:center}.icon-button svg,.small-primary svg,.small-plain svg,.area-icon svg,.layer-icon svg,.map-tool svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.main{max-width:1780px;margin:auto;padding:30px clamp(18px,3.8vw,64px) 18px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;color:#128c8b;display:flex;align-items:center;gap:10px}.eyebrow span{width:6px;height:6px}h1,h2,p{margin-top:0}h1{font-size:clamp(27px,3vw,42px);line-height:1.22;letter-spacing:-.035em;margin:6px 0 8px;font-weight:700}h1 em{font-style:normal;color:#128f8f}.intro p{color:#647d91;font-size:14px;margin-bottom:0}.intro-meta{text-align:right;min-width:150px}.clock-label,.date{color:#8498aa;font-size:12px}.clock{font:800 28px Manrope,sans-serif;letter-spacing:-1.2px}.workspace{display:grid;grid-template-columns:300px minmax(360px,1fr) 320px;gap:16px;min-height:660px;height:min(760px,calc(100dvh - 255px))}.sidebar,.insights,.map-panel{border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.sidebar{padding:23px;display:flex;flex-direction:column;overflow-y:auto}.sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.section-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#7c91a2}.sidebar h2,.insights h2{font-size:20px;margin:4px 0 0;line-height:1.3}.area-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;color:#158c8b;background:#e9f7f6}.location-card{background:#f3f8f8;border:1px solid #e0efef;border-radius:13px;padding:16px}.mini-label{font-size:11px;color:#77929a}.location-card strong{display:block;font-size:16px;margin:2px 0}.location-card>span:nth-of-type(2){font-size:12px;color:#79909b}.location-actions{display:flex;gap:8px;margin-top:15px}.small-primary,.small-plain{min-height:41px;padding:0 11px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap}.small-primary{background:#0e9392;border:1px solid #0e9392;color:#fff}.small-plain{background:white;border:1px solid #d7e8e8;color:#287b80}.small-primary svg,.small-plain svg{width:16px;height:16px}.location-message{font-size:11px;line-height:1.45;color:#769099;margin:11px 0 0}.layers-heading{display:flex;justify-content:space-between;align-items:center;margin:25px 0 6px}.hint{font-size:11px;color:#9baab4}.layer-row{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid #eef2f4;cursor:pointer}.layer-icon{width:36px;height:36px;flex:none;border-radius:9px;display:grid;place-items:center}.layer-icon.blue{background:#e8f7f6;color:#0f9d9a}.layer-icon.amber{background:#fff4e9;color:#e89642}.layer-icon.violet{background:#f2edfb;color:#8661bf}.layer-text{flex:1;min-width:0}.layer-text strong{display:block;font-size:13px}.layer-text small{font-size:11px;color:#899aaa;display:block;line-height:1.4}.layer-row input{position:absolute;opacity:0;width:1px;height:1px}.switch{width:34px;height:20px;border-radius:20px;background:#cbd6dc;position:relative;flex:none;transition:background .2s}.switch:after{content:"";position:absolute;width:14px;height:14px;top:3px;left:3px;background:white;border-radius:50%;transition:transform .2s}.layer-row input:checked+.switch{background:#17a5a0}.layer-row input:checked+.switch:after{transform:translateX(14px)}.layer-row input:focus-visible+.switch{outline:3px solid #48bab4;outline-offset:3px}.source-box{display:flex;gap:11px;padding:14px;background:#f0f7f8;border:1px solid #deebed;border-radius:12px;margin-top:24px}.source-dot{width:8px;height:8px;border-radius:50%;background:#23aaa0;flex:none;margin-top:5px}.source-box strong{font-size:12px}.source-box p{font-size:11px;line-height:1.55;color:#76909b;margin:3px 0 0}.sidebar-foot{font-size:11px;line-height:1.65;color:#9aa9b4;margin:auto 0 0;padding-top:22px}.map-panel{position:relative;background:#e9f0ee}.map-panel #map{width:100%;height:100%;z-index:1}.map-top{position:absolute;left:16px;right:16px;top:16px;z-index:500;display:flex;justify-content:space-between;pointer-events:none}.map-badge,.map-tool{background:#fff;box-shadow:0 4px 20px #18364623;border:1px solid #e8eef0;border-radius:10px}.map-badge{display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:12px;font-weight:700}.pulse{width:7px;height:7px}.map-tool{pointer-events:auto;color:var(--ink);width:42px;height:42px;display:grid;place-items:center}.map-legend{position:absolute;z-index:500;bottom:22px;left:16px;background:#fff;border:1px solid #e4eaed;border-radius:9px;padding:10px 13px;display:flex;gap:14px;flex-wrap:wrap;box-shadow:0 4px 20px #1836461a;font-size:11px;font-weight:600}.map-legend span{display:flex;align-items:center;gap:6px}.legend-dot{width:9px;height:9px;border-radius:50%}.legend-dot.teal{background:#17aaa4}.legend-dot.navy{background:#1f4662}.legend-dot.purple{background:#8568bc}.map-fallback{position:absolute;inset:0;z-index:600;background:#ecf2f3;display:grid;place-content:center;text-align:center;padding:30px}.map-fallback[hidden]{display:none}.map-fallback button{margin-top:12px;border:0;background:var(--teal);color:#fff;border-radius:8px;padding:10px}.leaflet-container{font-family:'IBM Plex Sans Thai',sans-serif!important}.leaflet-control-attribution{font-size:9px!important}.leaflet-popup-content-wrapper{border-radius:12px!important}.leaflet-popup-content{min-width:195px;line-height:1.6}.leaflet-popup-content strong{font-size:14px}.leaflet-popup-content small{color:#718697}.map-pin{border:3px solid white;border-radius:50%;box-shadow:0 2px 9px #183e4e66;background:#18a8a4}.map-pin.home{background:#173a56}.map-pin.you{background:#8965b9}.insights{display:flex;flex-direction:column}.insights-head{padding:23px 22px 18px}.insights-head p{font-size:12px;color:#8799a7;margin:7px 0 0}.tablist{display:flex;gap:4px;padding:4px;margin:0 15px;background:#f1f5f6;border-radius:10px}.tab{border:0;background:none;color:#748a9a;border-radius:7px;flex:1;padding:9px 4px;font-size:12px;font-weight:700}.tab.active{background:#fff;color:#0d7f80;box-shadow:0 2px 8px #12304712}.tab-content{padding:16px 17px;overflow-y:auto;flex:1}.content-heading{display:flex;justify-content:space-between;align-items:center;margin:1px 4px 12px}.content-heading strong{font-size:12px}.content-heading span{font-size:11px;color:#8c9ead}.station-card,.info-card{border:1px solid #e7edf0;border-radius:12px;padding:13px;margin-bottom:9px;background:white}.station-card{display:block;width:100%;text-align:left;transition:border .2s,transform .2s}.station-card:hover,.station-card:focus-visible{border-color:#38aaa5;transform:translateY(-1px)}.station-card .row{display:flex;justify-content:space-between;gap:10px;align-items:center}.station-card strong{font-size:12px;line-height:1.4}.station-card .distance{font:700 11px Manrope,sans-serif;color:#0f8d8a;white-space:nowrap}.station-card .meta{color:#8fa1ad;font-size:11px;margin:5px 0 9px}.station-card .value{font:800 21px Manrope,sans-serif;color:#17354a}.station-card .value small{font:500 11px 'IBM Plex Sans Thai',sans-serif;color:#8799a7}.station-card .time{color:#8b9da8;font-size:11px;margin-top:5px}.empty{border:1px dashed #cbdce1;border-radius:12px;padding:22px 18px;text-align:center;background:#f9fbfc;color:#6f8594}.empty svg{width:30px;height:30px;stroke:#78a5a9;fill:none;stroke-width:1.6}.empty strong{display:block;color:#385268;margin:7px 0;font-size:13px}.empty p{font-size:12px;line-height:1.6;margin:0 0 10px}.info-card strong{display:block;font-size:13px}.info-card p{font-size:11px;line-height:1.65;color:#72899a;margin:5px 0 12px}.link-button{display:inline-flex;align-items:center;min-height:36px;padding:6px 11px;border-radius:8px;background:#e8f5f4;color:#087e7e;text-decoration:none;font-size:11px;font-weight:700}.link-button:hover{background:#d7efed}.subtle{font-size:11px;color:#91a1aa;line-height:1.6}.insights-footer{border-top:1px solid #edf1f3;display:flex;justify-content:space-between;gap:10px;padding:14px 19px;color:#92a2ae;font-size:10px}.footer{display:flex;justify-content:space-between;gap:20px;color:#9aabb5;font-size:11px;padding:18px 4px 0}.footer strong{color:#456173;margin-right:12px}.footer a{color:#688594;text-decoration:none}.footer a:hover{text-decoration:underline}
@media(max-width:1190px){.workspace{grid-template-columns:270px minmax(300px,1fr);height:auto;min-height:0}.map-panel{min-height:610px}.insights{grid-column:1/-1;min-height:310px}.tab-content{display:block;max-height:360px}.sidebar{min-height:610px}}
@media(max-width:720px){.topbar{height:64px;padding:0 18px}.live-chip{display:none}.main{padding:22px 13px}.intro{align-items:flex-start}.intro-meta{min-width:auto}.intro-meta .clock-label,.intro-meta .date{display:none}.clock{font-size:18px;white-space:nowrap;margin-top:24px}h1{font-size:27px}.intro p{font-size:12px;line-height:1.5}.workspace{display:flex;flex-direction:column;gap:11px}.map-panel{order:1;height:52dvh;min-height:370px;border-radius:14px}.sidebar{order:2;min-height:0;padding:18px;border-radius:14px}.insights{order:3;min-height:310px;border-radius:14px}.sidebar-head{margin-bottom:12px}.layers-heading{margin-top:17px}.sidebar-foot{padding-top:16px}.source-box{margin-top:17px}.footer{flex-direction:column;gap:5px}.map-legend{bottom:17px;gap:8px;padding:9px;font-size:10px}.map-badge{font-size:11px;padding:9px}.insights-head{padding:17px 18px 12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
.legend-dot.camera{background:#8165ba;border-radius:3px}.camera-pin{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;background:#785ab1;color:white;border:2px solid white;box-shadow:0 3px 11px #1f315366}.camera-pin svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.camera-pin{width:32px;height:32px}.camera-pin.directory{background:#324c62;border-radius:50%}.camera-popup{line-height:1.5}.camera-popup strong{display:block;font-size:16px}.camera-popup>small{display:block;color:#61788a;margin:2px 0 9px}.camera-preview{aspect-ratio:4/3;width:100%;background:#e6edf0;border-radius:8px;display:grid;place-items:center;overflow:hidden}.camera-preview img{width:100%;height:100%;object-fit:contain}.camera-preview .camera-error{font-size:12px;color:#5f7485;padding:15px;text-align:center}.camera-popup a{display:inline-block;margin-top:10px;font-size:13px;font-weight:700}.camera-popup>.camera-preview+small{margin-top:6px}.camera-open{border:0;cursor:pointer}.leaflet-popup-content{min-width:260px;margin:14px}.leaflet-popup-content-wrapper{max-width:min(360px,calc(100vw - 30px))}
.cache-warning{border-radius:9px;background:#fff2d9;color:#714c1b;padding:10px 12px;margin-bottom:12px;font-size:12px;line-height:1.5}
.map-panel.showing-popup .map-explore,.map-panel.showing-popup .map-top{opacity:0;pointer-events:none}.map-explore,.map-top{transition:opacity .18s}.leaflet-popup-close-button{min-width:32px;min-height:32px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.layer-action{width:100%;background:none;border:0;border-bottom:1px solid #eef2f4;text-align:left;color:inherit;font:inherit}.action-arrow{font-size:20px;color:#a66a24}
.map-explore{position:absolute;z-index:501;left:16px;top:16px;width:min(410px,calc(100% - 92px));pointer-events:none}.map-explore>*{pointer-events:auto}.map-search{height:48px;display:flex;background:#fff;box-shadow:0 5px 22px #10283f2c;border:1px solid #dbe6e9;border-radius:13px;overflow:hidden}.map-search input{border:0;outline:0;min-width:0;flex:1;padding:0 15px;font-size:15px;color:var(--ink);background:transparent}.map-search input:focus-visible{outline:2px solid #43bdb7;outline-offset:-2px}.map-search button{border:0;background:#146d83;color:white;padding:0 15px;font-weight:700}.quick-filters{display:flex;gap:7px;margin-top:8px;overflow:auto;scrollbar-width:none}.quick-filters button{border:1px solid #d7e5ea;border-radius:20px;background:#fff;box-shadow:0 3px 12px #10283f20;padding:7px 12px;color:#254359;font-size:12px;font-weight:700;white-space:nowrap}.quick-filters button.selected{background:#146d83;color:white;border-color:#146d83}.search-message{margin-top:7px;padding:8px 11px;border-radius:8px;background:white;box-shadow:0 2px 10px #10283f1a;font-size:12px;color:#26465b}.map-top{top:115px}.map-badge{max-width:75%}.map-locate{position:absolute;right:16px;bottom:84px;z-index:501;min-height:44px;padding:0 13px;border:1px solid #dce8ea;border-radius:22px;color:#16445a;background:white;box-shadow:0 4px 18px #10283f30;font-weight:700}.mobile-nav{display:none}
@media(max-width:720px){.topbar{height:56px}.brand-mark{width:34px;height:34px}.brand strong{font-size:17px}.brand small{font-size:8px}.main{padding:0 0 82px}.intro,.footer{display:none}.workspace{gap:0}.map-panel{height:calc(100dvh - 130px);min-height:420px;max-height:none;border:0;border-radius:0}.map-explore{left:12px;top:12px;width:calc(100% - 76px)}.map-search{height:46px}.map-search button{padding:0 12px}.quick-filters{width:calc(100vw - 24px);padding:1px 0 5px}.map-top{top:112px;left:12px;right:12px}.map-badge{font-size:11px;max-width:calc(100% - 52px);line-height:1.3}.map-tool{width:42px;height:42px}.map-locate{right:12px;bottom:44px}.map-legend{display:none}.sidebar,.insights{border-radius:0;box-shadow:none;border-left:0;border-right:0;min-height:0}.sidebar{padding:18px}.insights{min-height:350px}.tab-content{max-height:none}.mobile-nav{display:flex;position:fixed;z-index:1500;bottom:0;left:0;right:0;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid #dbe5e9;box-shadow:0 -5px 22px #10283f18}.mobile-nav button{flex:1;min-width:0;border:0;background:transparent;color:#657e8e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:22px;line-height:1}.mobile-nav button span{font-size:10px;font-weight:700;line-height:1.5}.mobile-nav button.active{color:#0b797b}.map-panel,.insights,.sidebar{scroll-margin-top:56px}}
.map-style-label{display:block;margin:22px 0 7px;font-size:11px;font-weight:700;color:#607b89}.map-style-select{width:100%;min-height:40px;border:1px solid #d7e8e8;border-radius:9px;padding:7px 10px;background:#fff;color:#17354a;font-size:12px}.map-style-select:focus-visible{outline:3px solid #43bdb7}.maplibregl-map{font-family:'IBM Plex Sans Thai',sans-serif}

/* ---- Bank risk, flood and traffic layers ---- */
.layer-icon.red{background:#fdecee;color:#d6334a}
.layer-icon.sky{background:#e8f0fd;color:#2f6fe0}
.layer-icon.green{background:#e9f7ec;color:#2f9b4a}
.layer-row.sub-row{padding-left:14px}
.layer-row.sub-row .layer-icon{width:28px;height:28px}
.layer-row.is-disabled{cursor:not-allowed;opacity:.62}
.layer-row input:disabled+.switch{background:#e1e7eb}
.legend-dot.overflow{background:#d6334a;box-shadow:0 0 0 3px #d6334a33}
.legend-dot.high{background:#f08c2b}
.legend-dot.low{background:#4f8fd6}
.legend-dot.gray{background:#9aa9b4}
.legend-dot.road{background:#e28a17;border-radius:3px}
.map-legend{max-width:calc(100% - 140px)}

.overflow-pin{position:relative;width:22px;height:22px;cursor:pointer}
.overflow-ring{position:absolute;inset:0;border-radius:50%;border:3px solid #d6334a;animation:overflow-pulse 1.6s ease-out infinite}
.overflow-label{display:none;position:absolute;left:24px;top:1px;white-space:nowrap;background:#d6334a;color:#fff;font:700 11px Manrope,sans-serif;padding:2px 6px;border-radius:6px;box-shadow:0 2px 6px #0003}
.show-labels .overflow-label{display:block}
@keyframes overflow-pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}

.road-flood-pin{width:24px;height:24px;border-radius:7px;background:#e28a17;color:#fff;border:2px solid #fff;box-shadow:0 2px 8px #0004;display:grid;place-items:center;font:800 15px/1 Manrope,sans-serif}

.risk-badge{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;color:#fff;background:#9aa9b4}
.risk-badge.risk-overflow{background:#d6334a}
.risk-badge.risk-high{background:#f08c2b}
.risk-badge.risk-normal,.risk-badge.risk-belowBank{background:#0d9e9a}
.risk-badge.risk-low{background:#4f8fd6}
.risk-badge.risk-stale{background:#b7c2ca;color:#34495a}
.risk-card{border-left-width:4px}
.risk-edge-overflow{border-left-color:#d6334a}
.risk-edge-high{border-left-color:#f08c2b}
.risk-card .row+.row{margin-top:6px}
.risk-text-overflow{color:#d6334a}
.risk-text-high{color:#d9761b}

.nearby-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.nearby-summary div{border:1px solid #e7edf0;border-radius:12px;padding:10px 8px;text-align:center;background:#fff}
.nearby-summary strong{display:block;font:800 22px Manrope,sans-serif;color:#17354a}
.nearby-summary span{font-size:11px;color:#71859a}
.legend-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:11px;color:#51687a;margin:0 0 10px}
.swatch{display:inline-block;width:18px;height:6px;border-radius:3px;margin-right:-4px}
.tab{padding:9px 2px;font-size:11.5px}
.info-card .link-button{border:0;cursor:pointer}

@media(prefers-reduced-motion:reduce){.overflow-ring{animation:none;opacity:.8}}
@media(max-width:720px){.map-legend{display:none}}

/* ---- Header status, "near you" banner and summary strip ---- */
.updated-at{font-size:12px;color:#b6d1d9;white-space:nowrap}
.updated-at b{font:700 13px Manrope,sans-serif;color:#fff}
.alert-banner{display:block;width:100%;border:0;text-align:left;padding:11px clamp(18px,3.8vw,64px);font:600 15px/1.4 'IBM Plex Sans Thai',sans-serif;color:#fff;background:#a3122f;cursor:pointer}
.alert-banner[hidden]{display:none}
.alert-banner.level-high{background:#b85a0b}
.alert-banner small{opacity:.8;margin-left:6px;font-size:12px}
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-bottom:1px solid var(--line)}
.kpi{border:0;border-right:1px solid var(--line);background:none;padding:10px 6px;text-align:center;color:inherit}
.kpi:last-child{border-right:0}
.kpi strong{display:block;font:800 24px/1.15 Manrope,sans-serif;color:var(--ink)}
.kpi span{font-size:11px;color:var(--muted)}
.kpi.is-alert strong{color:#d6334a}
.filter-button,.sheet-close{display:none}

/* ---- Camera grid, pins and viewer ---- */
.cam-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.cam-card{position:relative;display:block;border:0;padding:0;border-radius:12px;overflow:hidden;background:#0f1d2b;aspect-ratio:16/10;cursor:pointer;color:#fff;text-align:left}
.cam-thumb{position:absolute;inset:0;display:grid;place-items:center}
.cam-thumb img{width:100%;height:100%;object-fit:cover}
.cam-video{font-size:30px;color:#ffffffb3}
.cam-badge{position:absolute;left:8px;top:8px;background:#000a;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700}
.cam-badge.is-live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#35d07f;margin-right:5px;vertical-align:1px}
.cam-badge.is-offline{background:#7a2334}
.cam-play{position:absolute;right:8px;top:6px;font-size:13px;background:#000a;border-radius:999px;padding:2px 8px}
.cam-caption{position:absolute;left:0;right:0;bottom:0;padding:20px 9px 7px;background:linear-gradient(transparent,#000d)}
.cam-caption strong,.cam-caption small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-caption strong{font-size:12px}
.cam-caption small{font-size:10px;opacity:.8}
.cam-card:focus-visible{outline:3px solid #43bdb7;outline-offset:2px}
.more-button{width:100%;justify-content:center;border:0;cursor:pointer;margin:-4px 0 14px}
.layer-icon.navy{background:#e7eef7;color:#1d5fa8}
.traffic-cam-pin{width:24px;height:24px;border-radius:7px;background:#1d5fa8;color:#fff;border:2px solid #fff;display:grid;place-items:center;box-shadow:0 2px 8px #0004}
.traffic-cam-pin svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.camera-popup .link-button{border:0;cursor:pointer;margin-top:8px}
.camera-popup-image{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#e6edf0;border-radius:8px;margin:8px 0 4px}
.camera-popup-status{display:block;color:#61788a;font-size:11px}

.camera-viewer{border:0;border-radius:16px;padding:0;width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:#0f1d2b;color:#fff;overflow:auto}
.camera-viewer::backdrop{background:#0b1622d9}
.viewer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px}
.viewer-head strong{font-size:16px}
.viewer-head small{display:block;color:#a9bccb;font-size:12px;margin-top:2px}
.viewer-close{flex:none;border:0;background:#ffffff26;color:#fff;border-radius:10px;width:38px;height:38px;font-size:16px}
.viewer-body{background:#000;aspect-ratio:16/9;display:grid;place-items:center}
.viewer-media{width:100%;height:100%;object-fit:contain;background:#000}
.viewer-message{padding:20px;text-align:center;color:#d5e1ea}
.viewer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;flex-wrap:wrap;font-size:12px}
.viewer-foot a{color:#8fd3ff}
.viewer-foot .link-button{border:0;cursor:pointer}

.nav-icon{position:relative;display:inline-block}
.nav-badge{position:absolute;top:-6px;right:-14px;min-width:18px;height:18px;border-radius:9px;background:#d6334a;color:#fff;font:700 11px/18px Manrope,sans-serif;padding:0 5px;font-style:normal}
.nav-badge[hidden]{display:none}

/* ---- Mobile app shell: map fills the screen; each bottom tab opens a full page ---- */
@media(max-width:720px){
  .shell{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  .topbar,.alert-banner,.kpi-strip{flex:none}
  .alert-banner{padding:10px 14px;font-size:14px}
  .kpi{padding:7px 3px}
  .kpi strong{font-size:20px}
  .kpi span{font-size:10px}
  /* width:100% because the desktop margin:auto would otherwise shrink .main to 0 inside this column flexbox */
  .main{flex:1;min-height:0;width:100%;margin:0;display:flex;flex-direction:column;padding:0 0 calc(64px + env(safe-area-inset-bottom))}
  .workspace{flex:1;min-height:0;display:flex;flex-direction:column;height:auto}
  .map-panel{flex:1;height:auto;min-height:0}
  body[data-view="panel"] .map-panel{display:none}
  body:not([data-view="panel"]) .insights{display:none}
  body[data-view="panel"] .insights{display:flex;flex:1;min-height:0;order:1;border:0}
  .insights-head,.insights .tablist{display:none}
  .tab-content{flex:1;overflow-y:auto;max-height:none;padding:14px 12px 20px}
  .insights-footer{display:none}
  .sidebar{display:none}
  .sidebar.is-open{display:flex;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));max-height:72dvh;z-index:1450;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px #10283f40;overflow-y:auto}
  .sheet-close{display:block;align-self:flex-end;border:0;background:#eef3f5;color:#254359;border-radius:9px;padding:6px 12px;font-weight:700;margin:-6px -4px 6px}
  .filter-button{display:inline-flex;align-items:center;margin-top:8px;border:1px solid #d7e5ea;border-radius:20px;background:#fff;box-shadow:0 3px 12px #10283f20;padding:7px 13px;color:#146d83;font-size:12px;font-weight:800}
  /* Search + filter on one row; the bottom menu replaces the quick-filter chips. */
  .map-explore{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;width:calc(100% - 24px);right:12px}
  .map-explore .search-message{grid-column:1/-1;margin-top:0}
  .map-explore .quick-filters{display:none}
  .filter-button{margin-top:0;height:46px;border-radius:13px}
  .map-top{top:68px}
  .map-locate{bottom:104px}
  .mobile-nav .nav-icon{font-size:22px}
}

/* ---- Water gates and reservoirs ---- */
.legend-dot.gate{background:#1d5fa8;border-radius:3px}
.legend-dot.dam{background:#0d9e9a;border-radius:3px;width:14px}
.gate-pin{width:22px;height:22px;border-radius:6px;background:#10283f;color:#fff;border:2px solid #fff;display:grid;place-items:center;font:800 12px/1 Manrope,sans-serif;box-shadow:0 2px 8px #0004}
.dam-pin{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:20px;padding:0 7px;border-radius:999px;background:var(--dam-color);color:#fff;border:2px solid #fff;font:800 11px/1 Manrope,sans-serif;white-space:nowrap;box-shadow:0 2px 8px #0004}
.dam-pin span{font-size:8px;opacity:.85}
.dam-pin.is-large{height:24px;font-size:12px;padding:0 9px}
.dam-badge{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;color:#fff;background:var(--dam-color,#9aa9b4)}
.dam-card{border-left:4px solid var(--dam-color)}
.dam-card .dam-badge{background:var(--dam-color)}
.dam-bar{display:block;height:6px;border-radius:3px;background:#e7edf0;margin:6px 0 8px;overflow:hidden}
.dam-bar i{display:block;height:100%;background:var(--dam-color)}
.dam-flow{font-size:11px;color:#5d7486;text-align:right}
.dam-flow b{color:#17354a}
.dam-flow small{display:block;font-size:10px;color:#8799a7}
.gate-card .row+.row{margin-top:6px}
.gate-card .meta{font-size:12px;color:#51687a;margin:6px 0 0;gap:10px}
.gate-card .meta b{color:#17354a;font-family:Manrope,sans-serif}
.gate-value{text-align:right;line-height:1}
.gate-value small{display:block;font-size:10px;color:#8799a7;margin-top:2px}
.gate-diff{font:800 20px Manrope,sans-serif;color:#17354a}
.gate-diff.is-up{color:#c2410c}
.gate-diff.is-down{color:#1d5fa8}
.gate-card .time{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
@media(max-width:720px){.mobile-nav button span:last-child{font-size:9.5px}}