/* ChaseDesk Elevation · immersive map, October 2026 */
:root{color-scheme:light;--ink:#16362f;--accent:#70cfad;--glass:rgba(13,43,48,.89);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#d4e5e7;color:#fff;font-family:inherit;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #8eddb8;outline-offset:3px}
button:disabled{opacity:.35;cursor:not-allowed}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.map-shell{position:relative;width:100%;height:100vh;height:100dvh;min-height:300px;overflow:hidden;isolation:isolate;background:#bad5d9}
#elevationMap{position:absolute;inset:0;z-index:0;width:100%;height:100%;background:#d2e3e5;cursor:crosshair}
.leaflet-container{font:inherit;background:#d2e3e5;cursor:grab}
.leaflet-dragging .leaflet-container{cursor:grabbing}
.leaflet-control-attribution{font:500 10px/1.25 system-ui,sans-serif!important;max-width:calc(100vw - 30px);background:rgba(12,44,46,.78)!important;color:#e4f2eb!important;padding:4px 9px!important;border-radius:7px 0 0 0;backdrop-filter:blur(10px)}
.leaflet-control-attribution a{color:#c0f1dc!important}
.leaflet-control-container .leaflet-bottom.leaflet-right{right:1px;bottom:0}
.elevation-place-labels{pointer-events:none!important;filter:contrast(1.08)}
/* UI floats over the map but does not steal drag events in the empty space. */
.top-left{position:absolute;z-index:700;top:14px;left:15px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;pointer-events:none}
.top-left>*{pointer-events:auto}
.brand-chip{display:inline-flex;align-items:center;gap:9px;min-height:43px;padding:5px 13px 5px 6px;border:1px solid rgba(233,255,247,.22);border-radius:9px;background:var(--glass);color:#fff;text-decoration:none;box-shadow:0 2px 12px #122c322e;backdrop-filter:blur(16px)}
.brand-chip:hover{background:rgba(7,35,39,.96)}
.brand-symbol{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#8de4cc,#4ca7b4);color:#0c3638;font-weight:900;font-size:18px}
.brand-name{font-size:16px;letter-spacing:-.055em;font-weight:780}
.map-layer-chip{display:inline-flex;align-items:center;gap:9px;min-height:35px;padding:7px 11px;color:#fff;background:rgba(8,56,57,.85);border:1px solid rgba(229,255,246,.16);border-radius:8px;font-size:12px;font-weight:760;box-shadow:0 2px 10px #102e3a29;backdrop-filter:blur(12px)}
.map-layer-chip svg{color:#a7f3d0}
.map-layer-chip small{font-size:10px;color:#a7cbbb;margin-left:12px;font-weight:600}
.place-wrap{position:relative}
.place-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-width:114px;min-height:32px;padding:7px 11px;color:#e9f5ee;background:rgba(8,56,57,.82);border:1px solid rgba(232,255,242,.14);border-radius:8px;font-size:11px;font-weight:700;backdrop-filter:blur(12px)}
.place-toggle:hover,.place-toggle[aria-expanded="true"]{background:rgba(12,66,66,.96)}
.place-toggle span{font-size:15px;line-height:1}
.place-panel{position:absolute;left:0;top:calc(100% + 7px);width:247px;padding:9px;display:grid;gap:3px;border-radius:11px;border:1px solid rgba(226,252,239,.2);background:rgba(11,44,49,.97);box-shadow:0 18px 44px #0319224a;backdrop-filter:blur(20px)}
.panel-label{display:block;color:#9abfb1;font-size:9px;font-weight:830;letter-spacing:.15em;padding:8px 9px 6px}
.place-panel button{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:40px;background:none;border:0;border-radius:6px;color:#f6fff7;text-align:left;padding:8px 10px;font-size:12px;font-weight:720}
.place-panel button:hover{background:rgba(118,199,166,.16)}
.place-panel button span{color:#b2cec3;font-size:10px;font-weight:510}
/* The geometry overlay never captures clicks, drag or elevation hover. */
.elevation-geo-overlay,.elevation-geo-overlay *{pointer-events:none!important}
.elevation-geo-overlay .maplibregl-canvas{background:transparent!important}
.elevation-geo-overlay .maplibregl-control-container{display:none!important}
/* Buttons show only when a layer is available. Independent active states. */
.right-rail .rail-button[aria-pressed="false"]{color:#aac9bd;opacity:.74}
.right-rail .rail-button[aria-pressed="true"]{color:#a5f0cf;opacity:1}
.right-rail{position:absolute;right:14px;top:14px;z-index:700;display:grid;gap:6px}
.rail-button{display:grid;place-items:center;width:39px;height:39px;padding:0;border:1px solid rgba(238,255,247,.25);border-radius:50%;background:var(--glass);color:#fff;box-shadow:0 2px 12px #11334330;backdrop-filter:blur(14px)}
.rail-button:hover{background:rgba(13,74,70,.96)}
.rail-button.active{color:#a5f0cf}
.rail-button.zoom-mark{font:500 25px/1 ui-sans-serif,system-ui,sans-serif;padding-bottom:2px}
.rail-divider{height:1px;margin:5px 9px;background:rgba(239,255,249,.5)}
/* Sampled settlement heights sit just beneath MapLibre's place-name text.
   The overlay is pointer-transparent: towns, chips and cities cannot be clicked. */
.settlement-elevations{position:absolute;inset:0;z-index:520;pointer-events:none;overflow:hidden;transition:opacity .12s linear}
.settlement-height{position:absolute;display:inline-flex;align-items:center;justify-content:center;transform:translateX(-50%);min-width:35px;max-width:86px;white-space:nowrap;padding:2px 6px;border:1px solid rgba(255,255,255,.55);border-radius:14px;background:#458d71;color:white;text-align:center;font:780 10px/1.18 ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:-.02em;text-shadow:0 1px 1px rgba(0,0,0,.16);box-shadow:0 1px 5px rgba(17,54,42,.24);opacity:.97}
.rail-button.units-button{font:800 13px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em}
.rail-button.units-button:hover{background:rgba(13,74,70,.96)}
@media(max-width:640px){.settlement-height{font-size:9px;padding:2px 4px}}
/* Cartographic detail menu: controls are small, optional and never obscure the map until opened. */
.map-details-panel{position:absolute;z-index:710;top:137px;right:63px;width:236px;max-width:calc(100vw - 90px);padding:12px;background:rgba(9,45,47,.96);border:1px solid rgba(207,244,229,.28);border-radius:12px;color:#f3fff8;box-shadow:0 13px 33px rgba(7,28,34,.32);backdrop-filter:blur(16px)}
.details-header{display:grid;gap:2px;margin-bottom:7px;padding:1px 3px 8px;border-bottom:1px solid rgba(211,245,231,.17)}
.details-header strong{font-size:13px;font-weight:780}.details-header span{font-size:10px;color:#add0bc}
.details-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 4px;border-radius:7px;cursor:pointer}
.details-row:hover{background:rgba(155,211,187,.09)}
.details-row>span{display:grid;gap:2px}.details-row strong{font-size:12px;font-weight:730;color:#f6fff9}.details-row small{font-size:10px;color:#a9c4b8;font-weight:500}
.details-row input{appearance:none;-webkit-appearance:none;position:relative;width:34px;height:20px;flex:0 0 34px;margin:0;cursor:pointer;border-radius:14px;border:1px solid rgba(222,252,240,.2);background:#56716a;transition:background .12s}
.details-row input:checked{background:#5bbb90}.details-row input:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .12s}
.details-row input:checked:after{transform:translateX(14px)}
.details-row input:focus-visible{outline:2px solid #a3f6cf;outline-offset:3px}
.details-foot{font-size:10px;line-height:1.5;color:#a9c7b7;margin:9px 2px 0;padding-top:8px;border-top:1px solid rgba(211,245,231,.17)}
.below-sea-note{display:flex;align-items:center;gap:7px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(232,255,249,.18);font-size:9px;font-weight:600;color:#e0f3e9}
.below-sea-swatch{width:11px;height:11px;border-radius:3px;flex:0 0 11px;background:rgb(153,139,88);border:1px solid rgba(250,255,241,.7)}
.hover-tag{position:absolute;z-index:730;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;background:rgba(5,42,49,.93);color:#fff;border:1px solid rgba(244,255,253,.18);box-shadow:0 3px 15px #01232e55;white-space:nowrap;pointer-events:none;transform:translate(13px,14px);font-size:12px;backdrop-filter:blur(8px)}
.hover-tag strong{font-size:13px;letter-spacing:-.02em;font-weight:820}
.hover-tag-caption{color:#a9d0c0;font-size:10px}
.map-bottom-left{position:absolute;left:14px;bottom:25px;z-index:610;pointer-events:none}
.legend{width:262px;max-width:calc(100vw - 130px);padding:9px 12px 8px;border-radius:9px;background:rgba(7,39,46,.78);border:1px solid rgba(232,255,249,.16);box-shadow:0 3px 15px #0c343633;backdrop-filter:blur(15px)}
.legend-heading{display:flex;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:.10em;color:#f7fffa}
.legend-heading span{font-weight:580;letter-spacing:0;color:#b4d3c8}
.gradient-bar{height:9px;margin:8px 0 5px;border-radius:3px;position:relative;background:linear-gradient(90deg,#143154 0%,#236289 24%,#79b7bd 45%,#377861 47%,#78aa65 56%,#cfba79 69%,#a48071 82%,#f3f1e8 100%)}
.zero-line{position:absolute;top:-2px;bottom:-2px;left:46%;width:2px;background:#fff;box-shadow:0 0 0 1px #193b43}
.scale-labels{display:flex;justify-content:space-between;gap:6px;color:#f0fbf7;font:650 9px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace}
.readout{position:absolute;z-index:620;bottom:26px;right:15px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;max-width:290px;min-height:32px;padding:8px 11px;border-radius:8px;background:rgba(7,39,46,.78);border:1px solid rgba(232,255,249,.16);color:#fff;font-size:11px;pointer-events:none;box-shadow:0 3px 15px #0c343633;backdrop-filter:blur(12px)}
.readout output{font-size:12px;font-weight:790}
.readout .coords{display:block;flex-basis:100%;color:#b6d3c9;font:500 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}
.map-error{position:absolute;z-index:1000;top:50%;left:50%;transform:translate(-50%,-50%);max-width:min(400px,calc(100vw - 32px));padding:20px 22px;border-radius:12px;color:#fff;background:#0b353b;box-shadow:0 24px 52px #001d244d;text-align:center;font-size:13px}
.map-error button{border:0;background:none;color:#a3ebcd;font-weight:800;text-decoration:underline}
/* A partial outage is a small map-edge notice, never a central obstruction. */
.map-error.partial{top:auto;left:50%;bottom:105px;transform:translateX(-50%);max-width:360px;padding:10px 14px;font-size:11px;box-shadow:0 5px 18px rgba(0,31,36,.24);border:1px solid rgba(220,247,238,.3)}

.loading-overlay{position:absolute;inset:0;z-index:1050;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;background:rgba(199,226,230,.97);color:#224e49;transition:opacity .32s,visibility .32s}
.loading-overlay.is-hidden{visibility:hidden;opacity:0;pointer-events:none}
.loading-overlay strong{font-size:15px}.loading-overlay span{font-size:12px;color:#5d7b75}
.loading-orbit{width:36px;height:36px;margin-bottom:7px;border:3px solid #9fc9bc;border-top-color:#207961;border-radius:50%;animation:spin .85s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.about-dialog{position:fixed;top:0;right:0;bottom:0;left:auto;margin:0;width:min(475px,100vw);height:100vh;height:100dvh;max-height:none;overflow:auto;overscroll-behavior:contain;padding:0;border:0;border-radius:13px 0 0 13px;background:#f9fcf9;color:#243d33;box-shadow:-15px 0 60px #001d2440}
.about-dialog::backdrop{background:rgba(5,29,32,.48);backdrop-filter:blur(2px)}
.about-head{position:sticky;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:27px 28px 20px;border-bottom:1px solid #e2ebe4;background:#f9fcf9;z-index:1}
.about-eyebrow{font-size:10px;color:#619179;font-weight:830;letter-spacing:.12em}
.about-head h2{font-size:22px;line-height:1.15;margin:8px 0 0;letter-spacing:-.04em}
.close-about{display:grid;place-items:center;width:33px;height:33px;flex:0 0 33px;border:1px solid #d9e6dd;background:#fff;border-radius:9px;color:#476758;font-size:24px}
.close-about:hover{background:#eef6ef}
.about-content{padding:19px 28px 50px}
.about-content p{font-size:13px;line-height:1.7;color:#526c5d;margin:0 0 15px}
.about-content p strong{color:#254535}
.about-content .accuracy-warning{padding:12px 14px;border-radius:7px;border:1px solid #d3e4d8;background:#ecf5ee}
.about-content a{color:#1e6850;text-underline-offset:3px}
.credits{margin:25px 0;border-top:1px solid #dce9de;border-bottom:1px solid #dce9de}
.credits summary{padding:16px 0;cursor:pointer;font-size:12px;font-weight:760;color:#355842}
.credits-body{padding:6px 0 14px}
.credits-body ul{padding-left:18px;color:#58705f;font-size:11px;line-height:1.75}
.credits-body li{margin-bottom:8px}
.about-links{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid #e2ebe4;padding-top:18px;font-size:12px}
@media(max-width:640px){
.top-left{top:9px;left:9px;gap:6px}.brand-chip{min-height:36px;padding:4px 10px 4px 4px;gap:6px}.brand-symbol{width:26px;height:26px;font-size:16px}.brand-name{font-size:14px}.map-layer-chip{min-height:31px;padding:6px 9px;font-size:11px}.place-toggle{min-height:30px;font-size:11px}
.right-rail{top:9px;right:9px;gap:6px}.rail-button{width:36px;height:36px}.rail-button.zoom-mark{font-size:23px}
.legend{width:214px;max-width:calc(100vw - 115px);padding:7px 9px}.legend-heading{font-size:8px}.gradient-bar{margin:7px 0 4px;height:7px}.scale-labels{font-size:8px}
.map-bottom-left{left:8px;bottom:34px}.readout{right:8px;bottom:91px;max-width:200px;padding:6px 9px;font-size:10px}.readout output{font-size:11px}.readout .coords{font-size:9px}
.leaflet-control-attribution{font-size:8px!important}
.about-dialog{width:min(100%,440px);border-radius:0}.about-head{padding:24px 20px 18px}.about-content{padding:18px 20px 45px}.hover-tag-caption{display:none}
}
@media(max-width:390px){.legend{width:185px}.scale-labels{font-size:7px}.readout{bottom:97px}}
@media(prefers-reduced-motion:reduce){.loading-orbit{animation:none}.loading-overlay{transition:none}}

@media(max-width:640px){.map-details-panel{top:116px;right:52px;width:219px;padding:10px}.details-row{padding:7px 3px}.below-sea-note{font-size:8px}}