:root{--ink:#163641;--panel:#12323b;--sea:#b2d8e4;--white:#f9fffe;--muted:#59767c}
*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}button,select{font:inherit}button{cursor:pointer}a{color:inherit}
.app{height:100dvh;min-height:380px;display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;gap:17px;align-items:center;flex:0 0 58px;height:58px;padding:0 24px;background:#102e37;color:#f0f9f7;border-bottom:1px solid #48696c}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:18px;font-weight:760;letter-spacing:-.05em}
.brand img{display:block}.bar-separator{height:20px;width:1px;background:#537079}.site-title{font-size:13px;font-weight:700;white-space:nowrap}
.topbar nav{margin-left:auto;font-size:12px;font-weight:650}.topbar nav a{text-decoration:none;color:#d6e9e9}.topbar nav a:hover{text-decoration:underline}
.map-wrapper{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--sea)}
#map{position:absolute;inset:0;background:#add5e0}
.leaflet-container{background:#add5e0;font-family:inherit;cursor:grab}.leaflet-dragging .leaflet-container,.leaflet-dragging #map{cursor:grabbing}
.leaflet-control-attribution{background:#eff6f4dc!important;font-size:9px!important;color:#4e6570!important}.leaflet-control-zoom{border:1px solid #9fbac0!important;box-shadow:0 3px 10px #12383d22!important;overflow:hidden;border-radius:8px!important}
.leaflet-control-zoom a{color:#173d46!important;background:#fff!important}
.toolbar{position:absolute;left:18px;top:18px;right:18px;z-index:820;display:flex;align-items:start;justify-content:space-between;gap:14px;pointer-events:none}
.toolbar>*{pointer-events:auto}.modes{display:flex;padding:4px;background:#f6f9f7f5;border:1px solid #d1e1dd;border-radius:12px;box-shadow:0 5px 20px #20444b27;gap:3px;backdrop-filter:blur(9px)}
.mode{border:0;border-radius:8px;background:transparent;color:#536c71;font-size:12px;font-weight:700;min-height:37px;padding:0 13px;white-space:nowrap}
.mode:hover{background:#e4f0ed}.mode.active{background:#155966;color:#fff;box-shadow:0 2px 7px #21414730}
.toolbar-secondary{display:flex;gap:8px;align-items:start}
.toolbar-secondary label{background:#fafdfdf4;border:1px solid #d4e4e0;border-radius:11px;padding:6px 10px 5px;display:flex;flex-direction:column;gap:3px;min-width:158px;box-shadow:0 5px 20px #20444b1b}
.field-label{font-size:9px;letter-spacing:.09em;font-weight:800;color:#6c8285;text-transform:uppercase}
#country-select{background:transparent;color:#1c454c;border:0;max-width:186px;min-width:132px;font-size:12px;font-weight:650;outline:none;cursor:pointer}
.world-reset,.info>summary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:1px solid #d4e4e0;border-radius:11px;background:#fafdfdf4;color:#1e4e55;padding:0 13px;box-shadow:0 5px 20px #20444b1b;font-size:12px;font-weight:700}
.world-reset:hover,.info>summary:hover{background:#eaf6f3}.info{position:relative}.info>summary{cursor:pointer;list-style:none}.info>summary::-webkit-details-marker{display:none}
.info-content{position:absolute;right:0;top:54px;width:min(415px,calc(100vw - 24px));max-height:min(64vh,600px);overflow:auto;background:#fcfefdf7;border:1px solid #d5e6e2;border-radius:13px;box-shadow:0 14px 45px #0d3e4360;padding:19px 20px;font-size:12px;line-height:1.6;color:#4c666c;z-index:5}
.info-content strong{color:#1b4147;font-size:14px}.info-content p{margin:9px 0}.info-content a{color:#176a7a}.references{display:flex;gap:8px;flex-wrap:wrap;padding-top:7px}.references a{padding:5px 7px;background:#e9f4f3;border-radius:5px;font-size:11px}
.legend{position:absolute;left:18px;bottom:25px;z-index:640;background:#fcfefdf0;border:1px solid #d3e1e0;border-radius:13px;box-shadow:0 6px 25px #12394433;backdrop-filter:blur(10px);padding:15px 16px 13px;width:285px;pointer-events:none}
.legend-heading{display:flex;justify-content:space-between;gap:9px;align-items:center;margin-bottom:10px}.legend-heading span:first-child{font-size:12px;font-weight:770;color:#1e4851}.legend-heading span:last-child{font-size:9px;color:#6b8589;white-space:nowrap}
.legend-ramp{height:12px;border-radius:5px;border:1px solid #4c77751f}
.legend-ramp.freshwater{background:linear-gradient(90deg,#e5edeb,#c0e1e7,#7bbecf,#3388ac,#135473)}
.legend-ramp.safe{background:linear-gradient(90deg,#c46d58,#eab66f,#dfdf9f,#84caba,#188e8f)}
.legend-ramp.desal{background:linear-gradient(90deg,#dfe7e6,#dfe7e6)}
.legend-ticks{display:flex;justify-content:space-between;font-size:9px;color:#4b686e;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}
.legend-description{font-size:10px;color:#5c7478;line-height:1.4;margin:10px 0 0}
.key-items{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:10px;margin-top:10px;border-top:1px solid #d7e5e3;font-size:10px;font-weight:660;color:#4b6971}
.key-items span{display:flex;align-items:center;gap:7px}
.key-items b{width:12px;height:12px;display:inline-block;flex:none}
.key-river{background:#2b94c5;border-radius:3px}.key-desal{background:#006d83;border:2px solid #fff;outline:1px solid #188b9f;border-radius:100%}
.map-status{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);z-index:700;padding:8px 13px;background:#173944dd;border:1px solid #5e8791;border-radius:7px;color:#f0fbfa;box-shadow:0 3px 15px #133e3e40;font-size:11px;white-space:nowrap;pointer-events:none}
.map-status[hidden]{display:none}
.cursor-popup{position:absolute;z-index:1100;min-width:244px;max-width:290px;padding:13px 15px 12px;border-radius:12px;background:#102f3cf6;color:#f3fcfd;box-shadow:0 10px 30px #062e4066;border:1px solid #6998a45e;pointer-events:none}
.cursor-popup[hidden]{display:none}
.pop-name{font-size:15px;font-weight:780;line-height:1.25;letter-spacing:-.02em}.pop-caption{font-size:10px;font-weight:700;color:#9acbd3;margin:3px 0 9px}
.pop-field{display:grid;grid-template-columns:minmax(110px,1fr) auto;gap:12px;align-items:center;padding:6px 0;border-top:1px solid #6ca0aa37}
.pop-field span:first-child{color:#c4dcdf;font-size:11px;line-height:1.35}.pop-field strong{font-variant-numeric:tabular-nums;text-align:right;font-size:12px;white-space:nowrap}
.pop-note{color:#b6d1d6;font-size:10px;line-height:1.45;margin-top:8px}
.pop-plant{color:#d1f3e9;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.pop-source{margin-top:10px;font-size:10px;color:#9adce4}
.pop-source a{color:#b7eaff;pointer-events:auto;text-decoration:underline;text-underline-offset:3px}
.map-credit{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:520;font-size:9px;color:#395d64;text-shadow:0 1px 2px #fafafa;font-weight:650}
.city-label{display:inline-block;color:#253f4b;font-size:11px;font-weight:700;text-shadow:0 1px 3px #fff,1px 0 3px #fff,-1px 0 3px #fff;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none}
.leaflet-waterNames-pane,.leaflet-waterRivers-pane,.leaflet-waterLakes-pane{pointer-events:none}
/* Only actual desalination circles receive pointer events. The SVG overlay's
   otherwise-transparent extent must not block country hover after a mode switch. */
.leaflet-waterFacilities-pane{pointer-events:none}
.leaflet-waterFacilities-pane svg{pointer-events:none}
.leaflet-waterFacilities-pane path.leaflet-interactive{pointer-events:auto;cursor:pointer}
button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #11a99a;outline-offset:2px}
@media(max-width:960px){.toolbar{display:block}.toolbar-secondary{margin-top:9px;justify-content:flex-start}.info-content{left:0;right:auto}.legend{width:252px}}
@media(max-width:640px){.topbar{height:51px;flex-basis:51px;padding:0 13px;gap:9px}.brand{font-size:16px}.bar-separator{height:17px}.site-title{font-size:11px}.topbar nav{font-size:11px}
.toolbar{top:9px;left:9px;right:9px}.modes{width:min(100%,390px)}.mode{font-size:11px;padding:0 8px;min-height:35px;flex:1}.toolbar-secondary{gap:5px}
.toolbar-secondary label{min-width:105px;padding:5px 7px}.world-reset,.info>summary{font-size:10px;min-height:42px;padding:0 9px}#country-select{min-width:105px;max-width:160px}
.legend{left:9px;bottom:25px;padding:10px 11px;width:215px}.legend-heading{display:block;margin-bottom:6px}.legend-heading span:last-child{display:block;margin-top:3px}
.key-items{gap:8px}.map-status{font-size:10px;bottom:140px;max-width:calc(100vw - 25px);white-space:normal;text-align:center}
.cursor-popup{max-width:min(285px,calc(100vw - 22px))}.map-credit{white-space:nowrap;font-size:8px}}