:root{font-family:Inter,Arial,sans-serif;color:#f3f7f6;background:#244652;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:transparent;min-height:42px;border-radius:8px;padding:9px 14px;font-size:14px}button:hover{background:#ffffff19}button:focus-visible,select:focus-visible{outline:2px solid #7ce1ff;outline-offset:3px}button.active{background:#cce7db;color:#0c2731;font-weight:650}button:disabled{opacity:.45;cursor:default}#viewer{position:relative;width:100%;height:100dvh;min-height:420px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:22px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.title{text-shadow:0 2px 12px #031622}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:600;color:#c9e0dc}h1{font-size:24px;font-weight:500;margin:7px 0 0;letter-spacing:-.5px}h1 span{color:#87a4ad}.round{background:#102b39e8;border:1px solid #ffffff27;border-radius:50%;height:40px;width:40px;min-height:40px;padding:6px;font-family:Georgia,serif;font-size:20px;pointer-events:auto}.panel{background:#102936eb;border:1px solid #e7fbff29;box-shadow:0 7px 28px #05202d28;backdrop-filter:blur(12px);border-radius:12px}.layers{position:absolute;top:24px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:5px;white-space:nowrap}.tools{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;padding:4px;gap:3px}.tools button{width:42px;padding:4px;font-size:22px}.tools #north{font-size:15px;font-weight:bold}#legend{position:absolute;left:26px;bottom:126px;width:284px;padding:15px 16px;max-height:50vh;overflow:auto;font-size:14px}.legendHeading{display:flex;justify-content:space-between;align-items:center;gap:10px}.legendHeading strong{font-size:15px}.legendHeading span{font-size:12px;color:#b6cbc9}#legend p{line-height:1.45;font-size:13px;margin:8px 0 0;color:#c3d6d7}.ramp{height:7px;border-radius:4px;margin-top:12px}.range{display:flex;justify-content:space-between;margin-top:5px;font-size:12px;color:#d7e6e6}.check{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px}.check input{accent-color:#63d9fd;width:16px;height:16px;margin:0}.check i{width:18px;height:3px;margin-left:auto}.cyan{background:#5cddff}.amber{background:#ffbf4f}.density{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-top:14px;gap:8px}select{border:1px solid #71909b77;background:#1d3b48;border-radius:6px;padding:7px;font-size:13px}#legend .smallNote{font-size:12px;color:#a8c2c9;line-height:1.45;margin-top:12px}#sample{border-top:1px solid #ffffff24;margin-top:12px;padding-top:10px;color:#cce7db}.height{position:absolute;right:24px;bottom:130px;font-size:13px;padding:9px 10px}.height label{display:flex;align-items:center;gap:8px}footer{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;display:flex;flex-direction:column;align-items:center;gap:13px;width:max-content;max-width:calc(100% - 40px)}.views{display:flex;gap:3px;padding:5px;white-space:nowrap}.gesture{font-size:12px;color:#d3e4e8;text-shadow:0 1px 4px #061e27}.credit{position:absolute;right:20px;bottom:8px;font-size:10px;color:#bed0d3}#labels{position:absolute;inset:0;pointer-events:none}#labels span{position:absolute;left:0;top:0;font-size:12px;font-weight:600;letter-spacing:.13em;color:white;text-shadow:0 1px 4px #06131f,0 1px 12px #06131f;border-left:2px solid #d8eee3;padding:5px 9px;white-space:nowrap}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:12px;padding:18px 22px;background:#102936ef;font-size:15px;z-index:5;max-width:85%;line-height:1.5}dialog{border:1px solid #7a9ca655;background:#102b39;color:#edf6f4;border-radius:16px;width:min(650px,calc(100% - 28px));max-height:88dvh;overflow:auto;padding:24px;line-height:1.65;font-size:15px}dialog::backdrop{background:#031b2dbb;backdrop-filter:blur(5px)}.dialogHead{display:flex;align-items:center;justify-content:space-between}.dialogHead h2{font-size:23px;margin:0}.dialogHead button{font-size:27px}dialog a{color:#8cd8ee}dialog .licence{font-size:12px;color:#a9c2ca}body.film header,body.film nav,body.film .tools,body.film footer,body.film .height,body.film #legend,body.film .credit{display:none}
@media(max-width:1100px){header{top:18px;left:18px;right:18px}.layers{top:96px}.tools{right:16px}#legend{left:18px;width:260px}h1{font-size:23px}.height{right:16px}}
@media(max-width:600px){header{top:17px;left:16px;right:16px}.eyebrow{font-size:10px}h1{font-size:22px}.layers{top:88px;width:calc(100% - 28px);justify-content:space-between;padding:4px}.layers button{padding:9px 8px;font-size:13px;flex:1}.tools{right:14px;top:38%;padding:3px}.tools button{min-height:38px;width:35px;font-size:20px}#legend{left:14px;bottom:154px;width:calc(100% - 98px);max-width:280px;max-height:33vh;padding:11px 12px}.legendHeading strong{font-size:14px}#legend p{font-size:12px}.legendHeading span{font-size:11px}.height{left:14px;right:auto;bottom:99px;padding:6px 9px}.height label{font-size:12px}.height select{font-size:12px;padding:6px}.views{width:100%;justify-content:space-between;gap:1px;padding:4px}.views button{padding:8px 7px;font-size:12px;min-height:40px}footer{width:calc(100% - 28px);max-width:none;bottom:35px;gap:0}.gesture{display:none}.credit{bottom:12px;right:14px;font-size:9px}#labels span{font-size:10px}.check,.density{font-size:12px}.check{margin-top:10px}#legend .smallNote{font-size:11px}.density{margin-top:9px}.density select{font-size:12px;padding:5px}}
@media(max-height:560px) and (min-width:601px){#legend{bottom:90px;max-height:44vh}.height{bottom:100px}footer{bottom:15px}.gesture{display:none}.layers{top:20px;left:auto;right:84px;transform:none}.title .eyebrow{display:none}h1{font-size:18px}}

#foldLegend{min-height:26px;width:26px;padding:0;font-size:19px;margin-right:-5px}#legend.collapsed>:not(.legendHeading){display:none!important}

#heatControls{margin-top:12px}#heatControls[hidden]{display:none}#heatControls label{display:flex;justify-content:space-between;font-size:13px}#heatControls input{width:100%;accent-color:#df9d5e;margin:12px 0 0}.height{display:flex;flex-direction:column;gap:8px}.height small{font-size:11px;color:#b6cfce}.height .buildingCheck{justify-content:flex-start;gap:8px}.buildingCheck input{accent-color:#cce7db;width:15px;height:15px;margin:0}.views{max-width:100%;overflow-x:auto}.views button{flex-shrink:0}
@media(max-width:600px){#legend{bottom:198px}.views{justify-content:flex-start}.height{gap:6px}.height small{font-size:10px}.views button{padding-left:10px;padding-right:10px}}

@media(max-width:600px){#legend{bottom:228px}.height{gap:5px}.height small{max-width:205px;font-size:9px}.height .buildingCheck{min-height:19px}}
/* Detailed map controls */
#streetLabels{position:absolute;inset:0;pointer-events:none;overflow:hidden}#streetLabels span{position:absolute;left:0;top:0;display:none;white-space:nowrap;max-width:250px;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:white;font-weight:500;text-shadow:0 1px 3px #001722,1px 0 3px #001722,-1px 0 3px #001722,0 -1px 3px #001722}#streetLabels .placeLabel{font-weight:650;font-size:14px;border-radius:5px;background:#102b39ce;padding:5px 8px;box-shadow:0 1px 10px #0002}.mapStatus{position:absolute;top:91px;left:26px;display:flex;flex-direction:column;gap:4px;pointer-events:none;text-shadow:0 1px 5px #041e29;font-size:12px;color:#e1eeeb}.mapStatus span:first-child{font-weight:650}.mapStatus span:last-child{color:#f1d7a9}.height{width:231px;padding:12px;gap:10px;bottom:126px}.height label{justify-content:space-between;font-size:14px}.height select{max-width:144px;font-size:13px}.height .buildingCheck{justify-content:flex-start}.height small{font-size:12px;line-height:1.5}.moreViews{display:flex;align-items:center;padding:0 3px}.moreViews select{height:40px;max-width:125px;border:0;background:#ffffff09;font-size:13px}.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}.credit{font-size:11px}#sample strong{display:block;font-size:14px}#sample small{display:block;margin-top:7px;font-size:12px;color:#b4caca}.views button{font-size:14px}.layers button{font-size:14px}
@media(max-width:1100px){.mapStatus{top:155px;left:18px}.height{right:16px}}
@media(max-width:600px){.mapStatus{top:142px;left:16px;font-size:12px}.height{left:auto;right:14px;bottom:106px;width:200px;padding:10px;gap:7px}.height label{font-size:13px}.height select{font-size:12px;max-width:127px}.height small{font-size:11px}.height .buildingCheck{min-height:24px}#legend{bottom:366px;max-width:290px;max-height:30vh}.legendHeading strong{font-size:14px}.legendHeading span{font-size:12px}#legend p{font-size:13px}.views button{font-size:13px}.credit{font-size:10px;left:14px;right:14px;text-align:center}.moreViews select{font-size:13px;max-width:110px}.layers button{font-size:14px}}
@media(max-height:650px) and (min-width:601px){.height{bottom:90px;gap:5px;padding:9px}.mapStatus{top:70px}#legend{bottom:90px}}
.earthDownload{font-size:13px;color:#a9e8f4;text-decoration:none;border-top:1px solid #ffffff20;padding-top:9px}.earthDownload:hover{text-decoration:underline}@media(max-width:600px){#legend{bottom:400px}.earthDownload{font-size:12px}}
.height{display:block}.height summary{font-size:14px;font-weight:600;cursor:pointer;padding:1px 0;min-height:25px}.displayBody{display:flex;flex-direction:column;gap:10px;padding-top:10px}@media(max-width:600px){#legend{bottom:176px}.height{bottom:105px}.displayBody{gap:7px}.height summary{font-size:13px;min-height:20px}}
.height{max-height:calc(100dvh - 230px);overflow:auto}
#sample{position:relative;padding-right:12px}
#sample .closeSample{position:absolute;right:-7px;top:4px;width:28px;min-height:28px;padding:0;font-size:21px}
#sample strong{padding-right:16px}
#heightModeNote{color:#f1d7a9}
@media(max-width:600px){
 #legend{bottom:160px;left:14px;width:calc(100% - 28px);max-width:none;max-height:43dvh}
 .height{max-height:calc(100dvh - 270px)}
 #viewer.options-open #legend{display:none}
}
/* V8: only two edge toolbars remain visible over the map. */
.layers{top:0;left:0;right:0;transform:none;width:100%;border-radius:0;justify-content:center;gap:4px;padding:calc(5px + env(safe-area-inset-top)) 12px 5px;box-shadow:none;overflow-x:auto;z-index:3}
.layers button{flex:0 0 auto;font-size:14px;min-height:40px;padding:8px 14px}
#settingsButton,#aboutButton{width:40px;padding:5px;font-size:20px}
footer{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;gap:0;z-index:3}
.views{width:100%;max-width:none;border-radius:0;justify-content:center;gap:3px;padding:5px 12px calc(23px + env(safe-area-inset-bottom));position:relative;box-shadow:none;overflow-x:auto}
.views button{font-size:14px}
.gesture{display:none}
.tools{position:static;transform:none;flex-direction:row;gap:1px;flex-shrink:0;border:0;box-shadow:none;background:transparent;backdrop-filter:none;padding:0;margin-left:5px}
.tools button{width:35px;min-height:40px;font-size:21px}
.credit{position:absolute;left:8px;right:8px;bottom:calc(5px + env(safe-area-inset-bottom));text-align:center;font-size:10px;white-space:nowrap}
#settings{width:min(480px,calc(100% - 28px));padding:18px;max-height:85dvh}
#settings .mapStatus{position:static;text-shadow:none;font-size:13px;gap:5px;margin:12px 0 18px}
#settings #legend,#settings .height{position:static;left:auto;right:auto;bottom:auto;width:auto;max-width:none;max-height:none;overflow:visible;box-shadow:none;backdrop-filter:none;background:none;border:0;border-radius:0;padding:0}
#settings #legend{margin-bottom:20px}
#settings .height{border-top:1px solid #ffffff25;padding-top:15px}
#settings .height small{font-size:12px;max-width:none}
#settings .height label,#settings .height summary{font-size:14px}
#settings #legend p{font-size:14px}
#settings .legendHeading{flex-wrap:wrap}
#settings #foldLegend{display:none}
#settings .displayBody{gap:12px}
@media(max-width:1200px){.views{justify-content:flex-start}.layers{justify-content:center}}
@media(max-width:600px){
 .layers{gap:1px;padding-left:6px;padding-right:6px;justify-content:flex-start}
 .layers button{font-size:13px;padding:8px 9px}
 #settingsButton,#aboutButton{width:29px;padding:4px;font-size:19px}
 .views{padding-left:6px;padding-right:6px;gap:2px}
 .views button{font-size:13px;padding:8px 10px}
 #settings{font-size:14px}
}

/* Earth handoff is opened on request, leaving the map clear. */
.earthActions{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.actionLink{display:block;background:#cce7db;color:#102936;padding:12px 16px;border-radius:9px;text-decoration:none;font-size:15px;font-weight:650;text-align:center}
.actionLink.secondary{background:#ffffff0d;color:#b8e7f1;border:1px solid #ffffff35}
.actionLink:hover{filter:brightness(1.08)}
.actionLink:focus-visible{outline:2px solid #7ce1ff;outline-offset:3px}
#earth ol{padding-left:24px}#earth li{margin:12px 0}#earth .smallNote{font-size:13px;color:#b7cdd2}

/* V11: analysis stays in dialogs; the map keeps its two clear edge toolbars. */
#heatControls label{gap:12px;align-items:center;margin-top:12px}#heatControls select{max-width:245px;width:65%;font-size:14px}#heatControls input[type=checkbox]{width:17px;margin:0;flex:0 0 auto}#heatControls .check{justify-content:flex-start}#heatControls .check span{flex:1}
#comparison{width:min(720px,calc(100% - 28px));font-size:16px}#comparison .smallNote{font-size:13px;color:#b7cdd2}.compareSelectors,.compareActions{display:flex;gap:14px;margin:18px 0}.compareSelectors label{flex:1;font-size:14px}.compareSelectors select{display:block;width:100%;font-size:15px;margin-top:6px}.compareScroll{overflow:auto}#comparison table{width:100%;border-collapse:collapse;font-size:15px}#comparison caption{text-align:left;font-size:14px;color:#bbd4d6;margin:8px 0}#comparison th,#comparison td{padding:10px 7px;text-align:right;white-space:nowrap}#comparison th:first-child,#comparison td:first-child{text-align:left}#comparison th{font-size:14px;border-bottom:1px solid #ffffff30}#comparison .coverageRow td{font-size:12px;color:#a6c2c9;padding:0 7px 10px;border-bottom:1px solid #ffffff16;white-space:normal}.compareActions button{background:#cce7db;color:#102936;font-size:14px;flex:1}
@media(max-width:600px){#heatControls select{max-width:200px}#comparison{padding:18px}#comparison th,#comparison td{padding-left:4px;padding-right:4px;font-size:13px}.compareSelectors,.compareActions{gap:8px}}

/* V12: on-demand water analysis; the map retains only its two edge toolbars. */
[hidden]{display:none!important}
#waterDialog{width:min(760px,calc(100% - 24px));font-size:16px;max-height:90dvh;padding:22px}
#waterDialog .waterLead{color:#c2d9df;margin-top:12px}
#waterDialog .waterSection{border-top:1px solid #ffffff28;margin-top:22px;padding-top:15px}
#waterDialog summary{cursor:pointer;font-size:17px;font-weight:650;line-height:1.5;padding:5px 0}
#waterDialog .waterActions{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}
#waterDialog button:not(#closeWater){background:#cce7db;color:#102936;border-radius:8px;font-size:14px}
#waterDialog .waterInputs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:15px 0}
#waterDialog label{display:block;font-size:14px}
#waterDialog select,#waterDialog input[type=number]{display:block;width:100%;margin-top:6px;min-height:44px;font-size:16px;border:1px solid #71909b77;background:#1d3b48;color:#fff;border-radius:6px;padding:8px;font-family:inherit}
#waterDialog .waterMetrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
#waterDialog .waterMetrics>div{background:#ffffff08;border:1px solid #ffffff20;padding:14px;border-radius:9px}
#waterDialog .waterMetrics span{display:block;font-size:14px;color:#c2d9df}
#waterDialog .waterMetrics strong{display:block;font-size:25px;font-weight:600;line-height:1.3;margin-top:6px;overflow-wrap:anywhere}
#waterDialog .smallNote{font-size:14px;color:#b9d0d7;line-height:1.6}
#waterDialog .waterRetention{border-left:2px solid #83bda7;padding-left:14px;margin-top:18px}
#waterDialog .waterRetention summary{font-size:15px}
#waterDialog .waterRetention label{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
#waterDialog input[type=range]{width:100%;accent-color:#acd8c2;margin-top:12px}
#waterDialog #traceResult svg{display:block;width:100%;height:auto;margin-top:18px}
#waterDialog .waterDownload{margin:8px 0}
#cancelWaterPick{background:#fff4ad;color:#163845}
@media(max-width:600px){#waterDialog{padding:18px}#waterDialog .dialogHead h2{font-size:22px}#waterDialog .waterInputs{grid-template-columns:1fr;gap:10px}#waterDialog .waterMetrics strong{font-size:21px}.layers{scroll-padding:10px}}

/* STREAM stays against the upper edge. No permanent centre panel. */
.streamBar{position:absolute;top:calc(51px + env(safe-area-inset-top));left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:0;padding:6px 12px;overflow-x:auto;white-space:nowrap;background:#102936ed;box-shadow:none}
.streamBar select{font-size:13px;max-width:265px;height:38px}.streamBar button{font-size:13px;padding:6px 10px;flex-shrink:0}.streamLegend{width:160px;flex:0 0 160px;font-size:10px;line-height:1.2}.streamLegend>span{display:block;margin-bottom:4px;color:#d2e6e9}.streamRamp{height:7px;background:linear-gradient(90deg,#87e6e8 0%,#21b3db 25%,#1a6ec9 50%,#2e3896 75%,#692982 100%);border-radius:3px}.streamTicks{display:flex;justify-content:space-between;font-size:11px;margin-top:3px;color:#d9edf0}.streamFullLegend{margin:20px 0}.streamFullLegend .streamRamp{height:10px}#streamDialog .streamOption{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:20px 0 8px}#streamOpacity{width:100%;accent-color:#55cce4}#streamCatchment{accent-color:#fff2ac}#streamDialog p{font-size:14px;line-height:1.65}#streamStatus{color:#a6e5ec;font-weight:650}
@media(max-width:760px){.streamBar{justify-content:flex-start;gap:8px;padding:5px 7px}.streamBar select{font-size:12px;max-width:220px}.streamLegend{flex-basis:136px}.credit{font-size:8px}.streamBar label{flex-shrink:0}}
body.film .streamBar{display:none}