/* FloodSafe Nepal · new monitoring pages only. No styles in the legacy map. */
:root{--navy:#17384d;--ink:#1e4054;--muted:#708696;--edge:#dfe7ea;--gold:#c89547;--blue:#277da1;--surface:#fff;--bg:#f6f7f7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 80% -160px,#e6f3f1 0,transparent 42%),var(--bg)}
a{color:var(--blue)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
header{background:rgba(255,255,255,.95);border-bottom:1px solid var(--edge);position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}
.top{min-height:70px;display:flex;align-items:center;gap:10px}
.brandmark{height:38px;width:38px;border-radius:12px;border:1px solid #d7e7ef;background:#f3fafc;display:grid;place-items:center;font-size:22px}
.brand{flex:1;min-width:0}
.brand strong{display:block;font-size:15px;line-height:1.2;color:#1a4056}
.brand small{font-size:10px;color:var(--muted);font-weight:750}
.back{background:#f2f6f7;border:1px solid var(--edge);border-radius:999px;color:#30596e;text-decoration:none;padding:9px 12px;font-size:11px;font-weight:850}
.nav{border-top:1px solid #edf0f2}
.tabs{display:flex;gap:5px;align-items:center;overflow-x:auto;padding:8px 0}
.tabs a{font-size:11px;padding:10px 14px;text-decoration:none;border-radius:10px;color:#5a7281;white-space:nowrap;font-weight:850;border:1px solid transparent}
.tabs a.active{background:#153d55;color:#fff;border-color:#153d55}
.tabs a:not(.active):hover{background:#eef4f7}
main{padding-top:24px!important;padding-bottom:70px!important}
.hero{padding:24px 26px;border-radius:22px;border:1px solid #d6e3e8;background:linear-gradient(112deg,#fff 2%,#f9fcfc 62%,#f1f8f7);box-shadow:0 8px 32px rgba(23,60,81,.05)}
.overline{font-size:10px;font-weight:950;color:#b07f39;letter-spacing:2px;text-transform:uppercase}
.hero h1{margin:8px 0 9px;color:var(--navy);letter-spacing:-.9px;font-size:clamp(25px,4.2vw,37px);line-height:1.14}
.hero p{margin:0;color:#607d8d;font-size:12.5px;max-width:750px;line-height:1.7}
.heroBtns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.mainBtn,.ghostBtn{border-radius:12px;min-height:41px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:10px 15px;font-size:12px;font-weight:900;cursor:pointer}
.mainBtn{background:#1b5270;border:1px solid #1b5270;color:#fff}
.mainBtn:hover{background:#28698b}
.ghostBtn{background:#fff;color:#2b647c;border:1px solid #ccdee6}
.status{display:inline-flex;align-items:center;gap:7px;border:1px solid #e3e6e6;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:850;color:#5c7584;background:#f2f5f6}
.status:before{content:"";height:7px;width:7px;background:#93a6b0;border-radius:50%}
.status.ok{background:#effaf4;color:#267955;border-color:#cfebdb}.status.ok:before{background:#23aa73}
.status.bad{background:#fff6ee;color:#9a6635;border-color:#f0ddc6}.status.bad:before{background:#d89047}
.panel{background:#fff;border:1px solid #e1e9ee;border-radius:20px;box-shadow:0 9px 28px rgba(45,92,114,.045);padding:20px;min-width:0}
.stack{display:grid;gap:14px;margin-top:15px}
.cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px}
.panelTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.kicker{color:#ba883b;text-transform:uppercase;letter-spacing:1.4px;font-weight:950;font-size:10px}
.panel h2{margin:4px 0 0;font-size:18px;letter-spacing:-.45px;color:#1a3e55}
.note{font-size:11.5px;color:#708696;line-height:1.65;margin:0 0 12px}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.metric{border:1px solid #dce8ed;background:#f6fafb;border-radius:15px;padding:14px;min-width:0}
.metric span{font-size:10px;color:#698797;display:block;font-weight:820}
.metric strong{font-size:clamp(22px,3.5vw,32px);display:block;color:#163e57;margin-top:7px;letter-spacing:-.8px;white-space:nowrap}
.metric small{font-size:9.5px;color:#78909e;display:block;margin-top:2px}
.dhmLinks,.quickLinks{display:grid;gap:8px}
.dhmLinks a,.quickLinks a{display:flex;align-items:center;justify-content:space-between;gap:9px;border:1px solid #dce8ed;background:#fbfdfd;border-radius:12px;padding:12px 13px;font-size:11px;text-decoration:none;font-weight:850;color:#2c6780}
.dhmLinks a:hover,.quickLinks a:hover{background:#f3f9fb}
.list{display:grid;gap:9px}
.event{border:1px solid #e3ebef;background:#fcfdfd;border-radius:13px;padding:12px 14px}
.eventTop{display:flex;align-items:center;gap:10px;justify-content:space-between}
.eventTop strong{font-size:13px;color:#254c64}
.event p{font-size:11px;color:#658196;margin:7px 0 5px;line-height:1.55}
.event small{font-size:10px;color:#7e96a4}
.event a{font-size:10.5px;font-weight:880;text-decoration:none}
.empty{border:1px dashed #cadce3;background:#fbfdfd;color:#708b9b;padding:15px;border-radius:13px;font-size:12px;line-height:1.6}
.callout{font-size:11.5px;color:#776035;border:1px solid #f0ddb8;background:#fffaf0;border-radius:13px;padding:13px 15px;line-height:1.65}
.callout.normal{color:#37657a;border-color:#d6e7ec;background:#f5fafb}
.controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.controls label{font-size:11px;font-weight:900;color:#64808e}
.controls select{padding:11px 12px;border:1px solid #ccdee5;border-radius:11px;background:#fff;color:#254b60;font-weight:850;font:inherit;font-size:12px;max-width:100%;min-width:160px}
.chart{height:190px;display:flex;align-items:stretch;justify-content:space-around;gap:5px;padding:20px 0 0;border-bottom:1px solid #dae7eb;overflow:hidden}
.barItem{min-width:0;flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:4px}
.barItem em{font-style:normal;font-size:9px;color:#607e90;font-weight:830}
.barItem b{font-size:10px;color:#3d748c}
.barItem i{max-width:42px;min-height:2px;width:60%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#60bdd3,#247aaf);display:block}
.barItem:nth-child(3n) i{background:linear-gradient(180deg,#e8c279,#d69a46)}
.sourceGrid{display:grid;gap:8px}
.sourceRow{display:flex;align-items:center;gap:9px;border:1px solid #e2eaed;padding:12px;border-radius:12px}
.sourceRow i{width:8px;height:8px;border-radius:50%;background:#abbcc3}
.sourceRow i.good{background:#26a879}
.sourceRow i.warn{background:#d69c45}
.sourceRow strong{display:block;font-size:11.5px}
.sourceRow small{font-size:10px;color:#748e9b;display:block;margin-top:4px}
.sourceRow a{margin-left:auto;font-size:10px;text-decoration:none;white-space:nowrap}
.divider{height:1px;background:#e7ecef;margin:14px 0}
.timestamp{font-size:10px;color:#80949f;font-weight:760}
footer{padding:12px 0 38px;color:#879ba6;font-size:10px}
footer a{color:#577e95}
.loading{opacity:.6}
@media(max-width:750px){
 .wrap{padding:0 13px}
 .hero{padding:20px 17px;border-radius:18px}
 .cols{grid-template-columns:1fr}
 .panel{padding:15px;border-radius:17px}
 .tabs a{font-size:10px;padding:10px 12px}
 .back{font-size:10px}
 .metrics{gap:6px}.metric{padding:10px}
 .metric strong{font-size:23px}
 .chart{height:160px}
}

/* Compact Nepal place picker — avoids giant native Android select sheets. */
.placeOpen{min-height:43px;border:1px solid #cbdfe6;background:#fff;color:#214e66;border-radius:12px;font-size:12px;font-weight:900;padding:10px 15px;cursor:pointer}
.placeModal[hidden]{display:none!important}
.placeModal{position:fixed;inset:0;z-index:10000;background:rgba(14,31,45,.52);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:15px}
.placeDialog{width:min(100%,540px);max-height:min(84vh,710px);display:flex;flex-direction:column;background:#fff;box-shadow:0 22px 60px rgba(14,39,61,.27);border:1px solid #d6e7eb;border-radius:22px;overflow:hidden}
.placeDialogHead{display:flex;gap:12px;align-items:start;justify-content:space-between;padding:20px 21px;border-bottom:1px solid #e4ecf0}
.placeDialogHead small{font-size:10px;font-weight:950;color:#b18a4f;letter-spacing:1.3px}
.placeDialogHead h2{margin:5px 0 0;color:#194157;font-size:20px;letter-spacing:-.5px}
.placeDialogHead button{width:38px;height:38px;flex:none;border:0;background:#f0f6f8;border-radius:12px;color:#31657b;font-size:18px;cursor:pointer}
.placeDialogMain{overflow:hidden;display:flex;flex-direction:column;padding:15px 19px;min-height:0}
#fsPlaceFilter{width:100%;border-radius:12px;border:1px solid #bcd4de;padding:13px;background:#f7fbfc;color:#183f55;font:inherit;font-size:13px;outline:0}
#fsPlaceFilter:focus{border-color:#368eaf;box-shadow:0 0 0 3px #dceef6}
.placeResults{display:grid;gap:4px;overflow-y:auto;max-height:440px;margin-top:12px}
.placeResult{padding:12px 14px;border:1px solid transparent;border-radius:12px;background:#fbfdfd;color:#214c64;font-size:12px;text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.placeResult:hover,.placeResult:focus-visible{background:#edf8fb;border-color:#bedde9}
.placeResult small{display:block;color:#8b9ca6;font-size:10px;margin:4px 0 0 19px}
.placeResult>span:last-child{font-size:20px;color:#87acba}
.placeSearchMore{display:flex;align-items:center;gap:9px;justify-content:space-between;flex-wrap:wrap;padding-top:9px;border-top:1px solid #e8eef1}
.placeSearchMore button{font-weight:900;border:1px solid #d1e5eb;color:#236d8e;border-radius:11px;background:#edf8fb;padding:10px 12px;cursor:pointer;font-size:11px}
.placeSearchMore button[hidden]{display:none}
.placeSearchMore small{font-size:10px;color:#8c9da8}
.placeNone{font-size:11px;color:#8295a2;padding:14px;line-height:1.55}
/* Searchable river station catalogue, distinct gauge readings and model estimates. */
.stationExplorer{grid-column:1/-1}
.stationExplorer .controls input,.stationExplorer .controls select{flex:1 1 150px;min-width:0;max-width:100%;border-radius:11px;border:1px solid #c9dce4;padding:11px 12px;background:#fbfdfe;color:#254e65;font-size:12px}
.stationExplorer .controls input{flex:2 1 200px}
.stationExplorer .stationMeta{font-size:11px;font-weight:800;color:#577989;background:#f3fafb;padding:9px 11px;border:1px solid #e0ebef;border-radius:10px;margin-bottom:12px}
.stationLayout{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:15px;align-items:start}
.stationList{display:grid;gap:6px;max-height:530px;overflow:auto;overscroll-behavior:contain;padding:2px}
.stationItem{width:100%;border:1px solid #e0eaed;border-radius:12px;padding:11px 12px;background:#fcfefe;display:flex;align-items:center;text-align:left;justify-content:space-between;gap:8px;cursor:pointer}
.stationItem:hover,.stationItem.selected{background:#eef8fa;border-color:#9acbd9}
.stationItem strong{font-size:11.5px;color:#214760;display:block}
.stationItem small{font-size:10px;color:#8198a4;margin-top:4px;display:block}
.stationTag{border-radius:99px;padding:5px 7px;background:#eff4f6;color:#708996;font-size:9px;font-weight:900;white-space:nowrap}
.stationTag.hasObs{background:#e9f8ee;color:#2a8061}
.stationMore{display:block;width:100%;margin-top:7px;background:#eef7f9;border:1px solid #d4e8ee;border-radius:11px;padding:11px 12px;color:#317392;font-size:11px;font-weight:900;cursor:pointer}
.stationMore[hidden]{display:none}
.stationDetail{min-height:315px;border:1px solid #d5e5eb;border-radius:17px;background:linear-gradient(180deg,#fbfefe,#f5f9fb);padding:17px}
.stationBlank{padding:75px 18px;text-align:center;font-size:12px;color:#8495a1;line-height:1.7}
.detailEyebrow{font-weight:950;letter-spacing:1.4px;font-size:9px;color:#b28b4a}
.stationDetail h3{margin:6px 0 3px;font-size:17px;color:#183e55;letter-spacing:-.4px}
.detailArea{color:#698998;font-size:11px;margin:0 0 14px}
.detailBlock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}
.detailBlock>div{border:1px solid #e0e9ec;background:#fff;border-radius:12px;padding:11px}
.detailBlock small{display:block;color:#77919e;font-size:10px;line-height:1.3}
.detailBlock strong{display:block;color:#254d63;font-size:15px;margin-top:6px;line-height:1.3}
.detailWarning{background:#fff7ea;border:1px solid #efd9b5;border-radius:11px;padding:11px;font-size:10.5px;line-height:1.6;color:#876a3c}
.detailModel{margin-top:14px;padding-top:13px;border-top:1px solid #dfe8ec}
.stChart{height:156px;display:flex;align-items:stretch;gap:5px;padding:12px 0 0;border-bottom:1px solid #c6dce5}
.stBar{flex:1;display:flex;align-items:center;justify-content:end;flex-direction:column;gap:4px}
.stBar small,.stBar span{font-size:9px;color:#648597;font-weight:850}
.stBar i{display:block;min-height:2px;max-width:35px;width:65%;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#5bc8d9,#207bad)}
.modelStats{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:#48738a}
.modelStats b{color:#155e84}
.modelCaution{border:1px solid #e8dbbb;background:#fff9ed;border-radius:10px;color:#7c6644;font-size:10px;line-height:1.65;padding:10px}
.sourceNote{font-size:10px;color:#8198a5;margin-top:12px;line-height:1.7}
.sourceNote a{font-weight:880}
@media(max-width:760px){.placeDialog{max-height:88vh}.placeDialogMain{padding:12px}.placeResults{max-height:60vh}
.stationLayout{grid-template-columns:1fr}.stationList{max-height:275px}.stationDetail{padding:12px}.stationExplorer .controls input{flex:1 1 100%}
}

/* Flood Outlook: small separate information panels, no alterations to original river map. */
.fwHero{background:linear-gradient(118deg,#fffaf2 0%,#fff 38%,#edf9fa 100%);border-color:#deeaec}
.fwSelect{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.fwSelect label{font-size:11px;font-weight:950;color:#4e7387}
.fwSelect select{min-height:43px;border:1px solid #c6dfe7;padding:10px;background:#fff;color:#244960;border-radius:11px}
.fwSelect button{min-height:42px}
.fwStatusLine{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:11px}
.fwOverview{border:1px solid #d6e5e9;background:linear-gradient(170deg,#fff 0%,#f9fcfc 100%)}
.fwLead{font-size:13px;line-height:1.7;color:#567589;margin:2px 0 17px;max-width:850px}
.fwKeyFacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fwKeyFacts .metric strong{font-size:clamp(23px,3.1vw,33px)}
.fwSignalDetail:empty{display:none}
.fwMessage{margin-top:13px;border:1px solid #e8d7b6;background:#fff9ed;color:#7f643b;padding:12px;border-radius:11px;font-size:11.5px;line-height:1.6}
.fwWatch{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:15px;padding:12px 13px;border:1px solid #d9e8ec;border-radius:14px;background:#f4fafb}
.fwWatch strong{display:block;font-size:12px;color:#2b5266}
.fwWatch small{display:block;font-size:10px;color:#738b96;margin-top:4px}
.fwWatch button{font-size:11px;cursor:pointer}
.fwWatch button.on{background:#214e69;color:#fff;border-color:#214e69}
#fwWatchNote{display:block;margin-top:11px}
.fwFlowChart{height:192px;display:flex;gap:7px;align-items:stretch;padding:18px 1px 0;border-bottom:1px solid #d5e4e9}
.fwChartCol{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:end;gap:4px}
.fwChartCol small{font-size:9px;color:#4e7285;font-weight:850}
.fwChartCol em{font-size:9px;color:#6a8b9a;font-style:normal;white-space:nowrap}
.fwChartBar{display:block;min-height:2px;width:67%;max-width:42px;border-radius:6px 6px 1px 1px;background:linear-gradient(180deg,#75b9c7,#267a98)}
.fwChartBar.rain{background:linear-gradient(180deg,#e2c585,#ba9052)}
.fwLegend{font-size:10px;font-weight:800;color:#7b939f;display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;margin-top:11px}
.fwSources{display:grid;gap:8px}
.fwSource{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fafdfe;border:1px solid #e0eaed;padding:12px;border-radius:13px}
.fwSource strong{font-size:12px;color:#214a60;display:block}
.fwSource small{font-size:10px;color:#758d9a;display:block;margin-top:4px}
.fwSource a{font-size:11px;font-weight:900;text-decoration:none;white-space:nowrap}
.fwCaution{font-size:11px;line-height:1.65;color:#755f37;background:#fff9ef;padding:11px 13px;border:1px solid #f0dfc4;border-radius:12px;margin:14px 0 0}
@media(max-width:650px){
 .fwKeyFacts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fwKeyFacts .metric:last-child{grid-column:1/-1}
 .fwSelect .placeOpen{flex:1}
 .fwSelect .mainBtn{flex:1}
 .fwFlowChart{height:158px}
 .fwChartCol small{font-size:8px}
}

/* Standalone Advanced Signals · Nepal weather source comparison */
.sigHero{background:linear-gradient(114deg,#fffaf2,#fff 45%,#eff7f8);border-color:#d9e6e8}
.sigMetricGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 19px}
.sigRange{display:grid;gap:10px}
.sigRangeRow{display:grid;grid-template-columns:46px minmax(0,1fr) 56px;gap:10px;align-items:center;font-size:11px}
.sigRangeRow strong{color:#3b6881}.sigRangeRow small{text-align:right;color:#52758a;font-weight:900}
.sigRangeTrack{position:relative;height:24px;border-radius:8px;background:repeating-linear-gradient(90deg,#f3f8f9 0,#f3f8f9 19.6%,#dfeaf0 20%);overflow:visible}
.sigRangeBand{position:absolute;height:12px;top:6px;border-radius:6px;background:#84b6c9}
.sigRangeTrack i{position:absolute;z-index:1;top:3px;width:3px;height:18px;background:#255b80;border-radius:3px}
.sigLegend{font-size:10px;color:#7d94a2;margin-top:14px;line-height:1.5}
.sigMetRow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sigMetRow>div{border:1px solid #dae7ed;border-radius:13px;background:#f7fafb;padding:14px}
.sigMetRow small{display:block;color:#6c899b;font-size:11px}
.sigMetRow strong{display:block;margin-top:9px;font-size:clamp(16px,3vw,24px);color:#214d67}
.sigFoot{font-size:11px;color:#738c99;line-height:1.65}
.sigLinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.sigLinks a{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid #dce7eb;background:#fbfdfd;border-radius:12px;padding:13px;text-decoration:none;color:#27516c}
.sigLinks a:hover{background:#eef8fb}
.sigLinks b{display:block;font-size:12px}
.sigLinks small{display:block;color:#748d9b;font-size:10px;margin-top:5px;line-height:1.4}
.sigLinks a>span:last-child{font-size:20px;color:#497f97}
@media(max-width:650px){.sigMetricGrid{gap:6px}.sigMetricGrid .metric{padding:10px}.sigMetricGrid .metric strong{font-size:22px}.sigMetRow{grid-template-columns:1fr}.sigLinks{grid-template-columns:1fr}}