:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#213c34;background:#f8f9f5;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
button,input{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.layout{height:100dvh;min-height:400px;display:flex;overflow:hidden}
.sidebar{width:365px;max-width:100%;flex:none;display:flex;flex-direction:column;background:#fcfcf9;border-right:1px solid #dbe3dc;box-shadow:3px 0 30px #23452a0b;z-index:20}
.brand{padding:31px 28px 22px;display:flex;align-items:center;gap:12px}
.logo{display:grid;place-items:center;background:#286e58;color:#fff;font-size:22px;border-radius:14px;width:46px;height:46px}
.overline{font-size:10px;font-weight:800;letter-spacing:.2em;color:#71887d}
.brand h1{margin:0;font-size:33px;line-height:1.13;letter-spacing:-1.3px;font-weight:750}
.brand h1 span{color:#399b74}
.intro{padding:0 29px 24px}
.intro h2{font-size:27px;line-height:1.22;letter-spacing:-.6px;margin:6px 0 13px}
.intro p{font-size:13px;line-height:1.62;color:#7b8d83;margin:0}
.controls{padding:20px 28px 15px;overflow-y:auto;border-top:1px solid #e6eae3;flex:1}
.heading{display:flex;align-items:center;justify-content:space-between;color:#557367;font-size:10px;letter-spacing:.12em;font-weight:800;margin-bottom:16px}
.heading strong{color:#a6b7a9}
.heading-second{margin-top:26px;border-top:1px solid #e4ebe6;padding-top:25px}
.controls h3{font-size:18px;letter-spacing:-.4px;margin:0 0 20px}
.controls input[type=range]{width:100%;accent-color:#287b5d;cursor:pointer}
.ends{display:flex;justify-content:space-between;color:#91a49a;font-size:10px;margin:10px 0}
.description{font-size:12px;line-height:1.55;color:#73877b;min-height:34px}
.legend{display:grid;gap:10px;margin:17px 0 0}
.legend-row{font-size:11px;color:#667c70;display:flex;align-items:center;gap:10px}
.legend-line{height:4px;width:29px;border-radius:8px}
.layers{display:grid;gap:9px}
.layer{width:100%;border:1px solid #e5eae5;background:#fff;border-radius:12px;padding:12px 13px;display:flex;gap:11px;align-items:center;text-align:left;color:#354e41;font-size:12px;font-weight:600}
.layer[aria-pressed=true]{border-color:#b7d5c4;background:#f2f8f2}
.layer:hover{border-color:#8bbaa5}
.layer .symbol{font-size:18px;width:22px;text-align:center;color:#448a70}
.switch{margin-left:auto;position:relative;border-radius:14px;width:28px;height:16px;background:#cad4cc;transition:background .2s}
.switch:after{content:"";width:12px;height:12px;background:white;position:absolute;top:2px;left:2px;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0002}
.layer[aria-pressed=true] .switch{background:#358766}
.layer[aria-pressed=true] .switch:after{transform:translateX(12px)}
.note{font-size:10px;line-height:1.6;color:#93a096;margin-top:22px}
.side-foot{font-size:10px;padding:16px 28px;border-top:1px solid #edf0e9;color:#488867}
.side-foot span{float:right;color:#b3bfb6}
.map-area{position:relative;flex:1;min-width:0;background:#e9efeb}
#map{position:absolute;inset:0}
.toolbar{position:absolute;top:20px;left:25px;right:25px;display:flex;align-items:start;gap:12px;z-index:5;pointer-events:none}
.toolbar>*{pointer-events:auto}
.search{width:min(440px,100%);position:relative;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #dfebe2;box-shadow:0 5px 30px #183a2a20;border-radius:15px;padding:0 14px;color:#8aa494}
.search input{border:0;outline:0;background:transparent;min-width:0;flex:1;height:48px;color:#284c3a;font-size:13px}
.search input::-webkit-search-cancel-button{display:none}
.search button{background:none;border:0;color:#829b89}
.suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;padding:7px;border-radius:14px;box-shadow:0 8px 28px #163b2b30;max-height:330px;overflow:auto}
.suggestion{background:#fff;border:0;border-radius:9px;display:flex;flex-direction:column;gap:4px;align-items:start;width:100%;padding:10px 11px;color:#325044;text-align:left}
.suggestion:hover{background:#eff7f1}
.suggestion small{font-size:10px;color:#96a79b}
.reset{margin-left:auto;border:1px solid #e1e9e0;border-radius:13px;background:#fff;color:#4d6b5a;box-shadow:0 5px 30px #183a2a17;height:48px;padding:0 16px;font-size:12px;font-weight:700;white-space:nowrap}
.map-tag{position:absolute;bottom:58px;left:27px;background:#fffeddf2;border:1px solid #e0e6d1;border-radius:7px;padding:9px 12px;font-size:10px;letter-spacing:.09em;font-weight:800;color:#577e60}
.map-tag b{font-size:9px;margin-left:10px;color:#85a48e}
.bottom{position:absolute;bottom:14px;left:28px;right:28px;display:flex;gap:12px;justify-content:space-between;color:#48675a;text-shadow:0 1px #fffc;font-size:11px;pointer-events:none}
.details{position:absolute;bottom:112px;left:27px;width:min(330px,calc(100% - 54px));padding:24px;background:#fff;border-radius:16px;border:1px solid #e0e9df;box-shadow:0 12px 40px #172d2440}
.details small{color:#3c966d;font-weight:800;letter-spacing:.07em;text-transform:uppercase;font-size:10px}
.details h2{margin:8px 0;font-size:22px;line-height:1.2}
.details p{line-height:1.5;color:#72897b;font-size:12px;margin-bottom:0}
.details-close{position:absolute;right:13px;top:12px;border:0;background:transparent;color:#93a99a}
.error{position:absolute;top:87px;left:27px;right:27px;padding:14px 18px;background:#fff0eb;border:1px solid #eab3a2;color:#a8492e;border-radius:12px;font-size:13px;box-shadow:0 8px 30px #0002}
.close-mobile,.open-mobile{display:none}
.maplibregl-ctrl-attrib{font-size:10px!important}
@media(max-width:850px){
.sidebar{position:absolute;left:0;top:0;bottom:0;transform:translateX(-103%);transition:transform .25s;box-shadow:0 0 50px #0003}
.sidebar.open{transform:translateX(0)}
.close-mobile,.open-mobile{display:block;border:0;background:#eff5ef;border-radius:10px;color:#2d5946;padding:9px 12px}
.close-mobile{margin-left:auto}
.toolbar{top:13px;left:12px;right:12px;gap:8px}
.toolbar .open-mobile{height:48px}
.reset{padding:0 12px}
.reset span{display:none}
.map-tag{bottom:48px;left:12px}
.bottom{left:12px;right:12px;bottom:8px;font-size:10px}
.bottom #zoomHint{max-width:55%}
.details{bottom:94px;left:12px}
}
@media(max-width:410px){
.brand{padding:23px 19px}
.intro{padding:0 19px 22px}
.controls{padding:20px 19px}
.sidebar{width:calc(100vw - 36px)}
.search{padding:0 9px}
.search input{font-size:12px}
}

/* Road-label control and curated quick navigation */
.labels-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;margin:18px 0 0;border:1px solid #d4e5d8;background:#fff;border-radius:12px;color:#355e49;font-size:12px;font-weight:600;text-align:left}
.labels-toggle:hover,.labels-toggle:focus-visible{border-color:#5d9a74}
.labels-indicator{width:30px;height:17px;border-radius:999px;background:#b8c5b9;position:relative;flex:none}
.labels-indicator:after{content:"";position:absolute;top:3px;left:3px;width:11px;height:11px;background:#fff;border-radius:50%;transition:transform .15s}
.labels-toggle[aria-pressed=true] .labels-indicator{background:#358766}
.labels-toggle[aria-pressed=true] .labels-indicator:after{transform:translateX(13px)}
.quick-nav{margin:23px 0 0;padding-top:19px;border-top:1px solid #e4ebe6}
.quick-nav h3{font-size:13px;margin:0 0 12px;color:#496858;letter-spacing:0}
.quick-links{display:flex;flex-wrap:wrap;gap:7px}
.quick-link{padding:8px 10px;background:#f3f8f3;border:1px solid #d8e6d9;border-radius:999px;color:#3f7158;font-size:11px;font-weight:600}
.quick-link:hover,.quick-link:focus-visible{background:#e5f2e7;border-color:#7db093}

/* Road study layer: separate from generic road-class hierarchy. */
.quick-explain,.quick-note{font-size:11px;line-height:1.55;color:#718a7a;margin:0 0 12px}
.quick-note{font-size:10px;margin:12px 0 0;color:#849a8e}
.quick-link[aria-pressed="true"]{background:#236f50;border-color:#236f50;color:#fff;box-shadow:0 2px 10px #236f5028}
.quick-link[aria-pressed="true"]:hover,.quick-link[aria-pressed="true"]:focus-visible{background:#175e42;border-color:#175e42}
.quick-link:focus-visible{outline:2px solid #308560;outline-offset:2px}

/* Right-side independent thematic layer controls */
.layer-panel{width:320px;max-width:36vw;flex:none;background:#fcfefb;border-left:1px solid #dce9dc;display:flex;flex-direction:column;z-index:22;box-shadow:-4px 0 24px #12391a0b}
.layer-panel-head{padding:25px 18px 17px;display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid #e5eee5}
.layer-panel-head h2{font-size:23px;letter-spacing:-.5px;margin:9px 0;color:#24553d}
.layer-panel-head p{color:#7a927f;font-size:11px;line-height:1.6;margin:0}
.layer-controls{min-height:0;flex:1;overflow:auto;padding:14px;display:grid;gap:9px;align-content:start}
.detail-layer{border:1px solid #e0e9e0;background:#fff;border-radius:13px;padding:12px 13px}
.detail-layer.off{opacity:.65;background:#f7faf7}
.detail-layer-head{display:flex;align-items:center;gap:9px}
.layer-icon{display:grid;place-items:center;width:30px;height:30px;background:#eaf5ed;color:#3e8a5f;border-radius:8px;font-size:17px;flex:none}
.detail-layer-caption{flex:1;min-width:0}
.detail-layer-caption h3{font-size:12px;font-weight:750;color:#2c543d;margin:0 0 2px}
.detail-value{font-size:10px;color:#9aab9e}
.layer-toggle{width:30px;height:18px;background:#bdc9bd;border:0;border-radius:18px;flex:none;position:relative}
.layer-toggle:before{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;background:#fff;border-radius:50%;transition:transform .15s}
.layer-toggle[aria-pressed=true]{background:#328764}
.layer-toggle[aria-pressed=true]:before{transform:translateX(12px)}
.detail-slider{display:block;accent-color:#348867;width:100%;margin:14px 0 6px;cursor:pointer}
.detail-ends{display:flex;justify-content:space-between;color:#91a697;font-size:9px}
.detail-description{font-size:11px;color:#45735a;font-weight:650;margin:8px 0 0}
.layer-panel-bottom{padding:13px 16px 18px;border-top:1px solid #e3ede5}
.layer-panel-bottom .labels-toggle{margin:0}
.layer-panel-bottom p{font-size:10px;line-height:1.5;color:#869b8d;margin:10px 0 0}
.close-layers,.open-layers{display:none}
.sidebar{width:305px}
.brand,.intro{padding-left:22px;padding-right:22px}
.controls{padding-left:22px;padding-right:22px}
.side-foot{padding-left:22px;padding-right:22px}
.quick-nav{margin:0;padding:0;border-top:0}
.maplibregl-ctrl-top-right{top:64px}
@media(max-width:1180px){
 .sidebar{position:absolute;left:0;top:0;bottom:0;transform:translateX(-103%);transition:transform .25s;box-shadow:0 0 40px #0003}
 .sidebar.open{transform:translateX(0)}
 .close-mobile,.open-mobile{display:block;border:0;background:#eff5ef;border-radius:10px;color:#2d5946;padding:9px 12px}
 .close-mobile{margin-left:auto}
}
@media(max-width:850px){
 .layer-panel{position:absolute;top:0;right:0;bottom:0;width:min(345px,calc(100vw - 25px));max-width:none;transform:translateX(105%);transition:transform .25s;z-index:32;box-shadow:0 0 40px #153b2236}
 .layer-panel.open{transform:translateX(0)}
 .close-layers{display:block;border:0;padding:10px 12px;border-radius:10px;color:#235a3d;background:#e8f2e9}
 .open-layers{display:flex;align-items:center;gap:5px;border:1px solid #e0eade;border-radius:12px;height:48px;background:#fff;box-shadow:0 3px 12px #0002;padding:0 12px;color:#336e4d;font-size:12px;font-weight:700}
 .open-layers span{display:none}
 .toolbar{right:12px}
}
@media(max-width:400px){.toolbar{gap:5px}.open-layers{padding:0 9px}.toolbar .open-mobile{padding:9px}.search{padding:0 7px}}