.bd-map-app{min-height:650px}.bd-map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px}.bd-map-toolbar>div:first-child{display:flex;flex-direction:column;gap:4px}.bd-map-toolbar small{color:#777;font-size:11px;letter-spacing:0}.bd-map-tools{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}.bd-map-tools button{border:1px solid #555;background:#111;color:#bbb;padding:7px 9px;font:700 11px/1.1 Arial,"PingFang SC",sans-serif;cursor:pointer}.bd-map-tools button:hover,.bd-map-tools button:focus-visible,.bd-map-tools button.is-active{border-color:#ddd;background:#eee;color:#050505}.bd-map-tools button[aria-label]{font-size:17px;padding-inline:10px}.bd-map-app canvas{position:absolute;inset:49px 0 0;width:100%;height:calc(100% - 49px);touch-action:none;cursor:grab}.bd-map-app canvas:active{cursor:grabbing}.bd-map-legend{position:absolute;z-index:3;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;background:rgba(5,5,5,.86);border:1px solid #444;color:#aaa;font-size:11px}.bd-map-legend span{display:inline-flex;align-items:center;gap:5px}.bd-map-legend i{display:inline-block;width:10px;height:10px}.legend-low{background:#70bfdc}.legend-mid{background:#74c39b}.legend-high{background:#d66d45}.bd-map-legend small{color:#777}.bd-map-app .bd-map-message{z-index:4}.bd-map-message[hidden]{display:none}.bd-map-tooltip{position:absolute;z-index:5;min-width:185px;padding:11px 13px;border:1px solid #777;background:rgba(5,5,5,.94);box-shadow:0 8px 30px rgba(0,0,0,.35);font-size:12px;pointer-events:none}.bd-map-tooltip strong,.bd-map-tooltip span{display:block}.bd-map-tooltip strong{margin-bottom:6px;color:#fff;font:16px/1.15 Georgia,"Times New Roman",serif}.bd-map-tooltip span{color:#aaa;line-height:1.5}.bd-layer-list{display:flex;flex-direction:column;gap:9px}.bd-layer-list label{color:#aaa;font-size:12px;line-height:1.4}.bd-layer-list input{accent-color:var(--accent);margin:0 6px 0 0;vertical-align:-1px}.bd-layer-list .is-planned{color:#666}.bd-layer-list em{margin-left:3px;color:#777;font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.08em}@media(max-width:720px){.bd-map-app{min-height:500px}.bd-map-toolbar{padding:10px 12px}.bd-map-tools{justify-content:flex-start}.bd-map-app canvas{inset:86px 0 0;height:calc(100% - 86px)}.bd-map-legend{left:10px;right:10px;bottom:10px}.bd-map-legend small{width:100%}}
.bd-map-legend .legend-low{background:#70bfdc}.bd-map-legend .legend-mid{background:#74c39b}.bd-map-legend .legend-high{background:#a8b678}.bd-map-legend .legend-vhigh{background:#e0a352}.bd-map-legend .legend-vvhigh{background:#d66d45}
.bd-map-legend .vacancy-v0{background:#fff7bc}.bd-map-legend .vacancy-v1{background:#fee08b}.bd-map-legend .vacancy-v2{background:#fec44f}.bd-map-legend .vacancy-v3{background:#e6550d}.bd-map-legend .vacancy-v4{background:#800026}

/* Keep the map below its actual toolbar height, including on narrow phones. */
.bd-map-app{display:flex;flex-direction:column}
.bd-map-app .bd-map-toolbar{position:relative;left:auto;right:auto;top:auto;flex:none}
.bd-map-app canvas{position:relative;inset:auto;display:block;flex:none;width:100%;height:600px}
.bd-map-app .bd-map-tools button{min-height:40px;min-width:40px}
.bd-map-app .bd-map-tools button:disabled{opacity:.55;cursor:wait}
.bd-map-location-marker{position:absolute;z-index:5;width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:#3789e6;box-shadow:0 0 0 7px rgba(55,137,230,.25),0 2px 8px #000;transform:translate(-50%,-50%);pointer-events:none}
.bd-map-location-marker[hidden]{display:none}
@media(max-width:720px){
  .bd-map-app .bd-map-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .bd-map-app .bd-map-tools{justify-content:flex-start}
  .bd-map-app .bd-map-tools button{min-height:44px;min-width:44px}
  .bd-map-app canvas{inset:auto;height:clamp(380px,58vh,540px)}
}

/* Two synchronized canvases: buildings below, community quality above.
   Keep geographic x/y scale isotropic, but fit the desktop map stack into
   the visible viewport.  The previous 640–840px fixed range could push the
   map below one screen on shorter laptops and large browser zoom levels.
   The viewport height changes only presentation; it never stretches data. */
.bd-map-frame.bd-map-app{min-height:0}
.bd-map-canvas-stack{position:relative;flex:none;width:100%;height:clamp(520px,calc(100vh - 180px),760px);min-height:0;max-height:none;aspect-ratio:auto;overflow:hidden;background:#080808}
.bd-map-canvas-stack{isolation:isolate}
.bd-map-app #bd-vector-basemap{position:absolute;inset:0;z-index:0;display:none;overflow:hidden;pointer-events:none;background:#e7e7e7}
.bd-map-app #bd-vector-basemap .maplibregl-map,.bd-map-app #bd-vector-basemap .maplibregl-canvas{width:100%;height:100%}
.bd-map-app #bd-vector-basemap .maplibregl-control-container{display:none}
.bd-map-app #bd-vacancy-canvas{z-index:4;pointer-events:none;background:transparent}
.bd-map-app #bd-imagery-canvas{z-index:1;pointer-events:none;background:transparent}
.bd-layer-row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.bd-layer-row label{flex:1;min-width:0}
.bd-layer-row:has([data-resource-status]){flex-wrap:wrap}
[data-resource-status]{flex-basis:100%;font-size:11px;color:#e0a352}
[data-resource-status][hidden]{display:none}
.bd-layer-order{display:inline-flex;gap:3px;flex-shrink:0}
.bd-layer-order button{background:#171717;color:#ddd;border:1px solid #555;min-width:30px;min-height:30px;cursor:pointer;font-size:16px}
.bd-layer-order button:disabled{opacity:.3;cursor:default}
.bd-layer-order button:focus-visible{outline:2px solid #fff}
.bd-imagery-credit{font:10px/1.5 Arial,sans-serif;color:#bbb;background:#111;padding:5px 10px;position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bd-imagery-credit[hidden]{display:none}
.bd-imagery-credit a{color:#ddd}
.bd-imagery-credit [data-imagery-attribution]{color:#aaa}
.bd-map-legend{position:relative;left:auto;right:auto;bottom:auto;margin:10px 14px;z-index:auto;max-width:none}
@media(max-width:720px){.bd-layer-order button{min-width:40px;min-height:40px}.bd-map-app .bd-map-legend{left:auto;right:auto;bottom:auto}}
.bd-map-app .bd-map-canvas-stack canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.bd-map-app #bd-building-base-canvas{z-index:3;pointer-events:none;background:transparent}
.bd-map-app #bd-map-canvas{z-index:1;touch-action:none;cursor:grab}
.bd-map-app #bd-map-canvas:active{cursor:grabbing}
.bd-map-app #bd-community-canvas{z-index:2;pointer-events:none;background:transparent}
.bd-map-app #bd-street-canvas{z-index:4;pointer-events:none;background:transparent}
.bd-map-app #bd-function-change-canvas{pointer-events:none;background:transparent}
.bd-record-layout>.bd-map-frame{align-self:start}
[data-function-categories]{display:flex;gap:8px 14px;flex-wrap:wrap}
.bd-function-swatch{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:middle}
.bd-map-tooltip[data-owner="function-change"]{min-width:0;box-sizing:border-box;overflow-wrap:anywhere}
.bd-map-legend{max-width:calc(100% - 28px);align-items:flex-start}
.bd-map-legend>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bd-map-legend>div+div{padding-left:9px;border-left:1px solid #555}
.bd-map-legend b{color:#ddd;font-size:10px;letter-spacing:.04em}
.quality-q1{background:#eadcf2}.quality-q2{background:#d0b1dd}.quality-q3{background:#b170c1}.quality-q4{background:#853da3}.quality-q5{background:#5b2a86}.legend-base{background:transparent;border:1px solid #848484;box-sizing:border-box}
.street-q1{background:#d7ecf4}.street-q2{background:#9dcae2}.street-q3{background:#74add1}.street-q4{background:#fd8d3c}.street-q5{background:#bd0026}
[data-layer-legend][hidden]{display:none}
.bd-map-app .bd-map-legend{left:auto;right:auto;bottom:auto}
@media(max-width:720px){
  .bd-map-canvas-stack{height:clamp(400px,62vh,560px);min-height:0;max-height:none;aspect-ratio:auto}
  .bd-map-app .bd-map-canvas-stack canvas{height:100%}
  .bd-map-legend{display:block;max-height:145px;overflow:auto}
  .bd-map-legend>div{gap:6px}
  .bd-map-legend>div+div{margin-top:7px;padding-top:7px;padding-left:0;border-top:1px solid #555;border-left:0}
  .bd-map-legend b,.bd-map-legend small{width:100%}
}

/* Keep layer controls in the first, immediately visible block beside the map.
   The statistics remain below it; the sortable rows and state-driven legends
   keep their existing data hooks. */
.bd-record-sidebar .bd-layer-list{
  order:-1;
  position:sticky;
  top:82px;
  z-index:2;
  padding:15px 14px 14px;
  border:1px solid #4b4b4b;
  border-top:2px solid var(--accent);
  background:linear-gradient(145deg,rgba(24,24,24,.98),rgba(9,9,9,.98));
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.bd-record-sidebar .bd-layer-list>span{color:#ddd;font-size:11px;letter-spacing:.12em}
.bd-record-sidebar .bd-layer-list .bd-layer-row{padding:4px 0;border-top:1px solid rgba(90,90,90,.42)}
.bd-record-sidebar .bd-layer-list .bd-layer-row:first-of-type{margin-top:2px}
.bd-record-sidebar .bd-layer-list .is-planned{padding-top:4px}
@media(max-width:1050px){
  .bd-record-sidebar .bd-layer-list{grid-column:1/-1;position:relative;top:auto}
}
@media(max-width:720px){
  .bd-record-sidebar .bd-layer-list{padding:14px 12px;box-shadow:none}
  .bd-record-sidebar .bd-layer-list .bd-layer-row{padding:6px 0}
}

.bd-basemap-panel{display:flex;flex-direction:column;gap:9px;order:-2;padding:14px;border:1px solid #3f3f3f;background:rgba(14,14,14,.96)}
.bd-basemap-panel>span{color:#ddd;font-size:11px;letter-spacing:.12em}
.bd-basemap-toggle{display:flex;align-items:flex-start;gap:6px;color:#ddd!important;font-size:12px!important;line-height:1.35;cursor:pointer}
.bd-basemap-toggle input{accent-color:var(--accent);margin:2px 0 0;flex:0 0 auto}
.bd-basemap-options{display:flex;flex-direction:column;gap:7px}
.bd-basemap-options label{color:#aaa;font-size:12px;line-height:1.35;cursor:pointer}
.bd-basemap-options .bd-basemap-primary{color:#eee;font-weight:700}
.bd-basemap-options .bd-basemap-primary::after{content:'  DEFAULT / 默认';color:var(--accent);font-size:10px;letter-spacing:.08em}
.bd-basemap-options input{accent-color:var(--accent);margin:0 6px 0 0;vertical-align:-1px}
.bd-basemap-panel p{margin:0;color:#777;font-size:10px;line-height:1.45}
.bd-basemap-current{display:flex;flex-direction:column;gap:3px;padding:7px 8px;border-left:2px solid var(--accent);background:rgba(255,255,255,.04)}
.bd-basemap-current[hidden]{display:none}
.bd-basemap-current b{color:#ddd;font-size:11px;line-height:1.3}
.bd-basemap-current small{color:#999;font-size:10px;line-height:1.35}
/* CMAB shares geometry across ten attribute colour schemes. */
#bd-cmab-canvas,#bd-cmab-2013-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bd-layer-row[data-layer-row^="cmab"]{flex-wrap:wrap}
.bd-cmab-controls{flex-basis:100%;min-width:0;display:grid;gap:5px;margin-top:2px}
.bd-cmab-controls label{font-size:12px;color:#aaa}
.bd-cmab-controls select{width:100%;min-width:0;padding:8px;background:#191919;color:#eee;border:1px solid #555;font:inherit;font-size:13px}
.bd-cmab-controls select:disabled{opacity:.5}
.bd-map-legend [data-cmab-2013-categories],.bd-map-legend [data-cmab-categories],.bd-map-legend [data-function-categories]{display:flex;flex-wrap:wrap;gap:8px 14px;flex-basis:100%;min-width:0;max-width:100%}
.bd-map-legend [data-cmab-2013-categories]>span,.bd-map-legend [data-cmab-categories]>span,.bd-map-legend [data-function-categories]>span{white-space:nowrap;flex-shrink:0}
.bd-map-legend i{flex-shrink:0}
#bd-map-tooltip[data-owner^="cmab"]{min-width:0;width:310px;padding:12px;font-size:12px;line-height:1.45}
#bd-map-tooltip[data-owner^="cmab"] strong{font-size:19px;margin-bottom:5px}
#bd-map-tooltip[data-owner^="cmab"] small{display:block;margin-top:5px;color:#aaa;font-size:10px}
#bd-map-tooltip{overscroll-behavior:contain}

/* Mobile access to the existing controls: move, never duplicate their state. */
.bd-mobile-only{display:none!important}
.bd-mobile-controls{color:#eee;background:#0b0b0b;border:1px solid #666;padding:0;width:min(620px,100%);max-width:100%;max-height:88vh;max-height:88svh;margin:auto auto 0;overflow:hidden}
.bd-mobile-controls::backdrop{background:rgba(0,0,0,.58)}
.bd-mobile-controls[open]{display:flex;flex-direction:column}
.bd-mobile-controls-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid #555;flex:none}
.bd-mobile-controls-heading strong{font-size:14px}
.bd-mobile-controls-heading button{min-height:44px;padding:8px 12px;border:1px solid #888;background:#eee;color:#080808;font-weight:700;cursor:pointer}
.bd-mobile-controls-body{overflow-y:auto;overscroll-behavior:contain;padding:12px 12px max(16px,env(safe-area-inset-bottom));min-height:0}
.bd-mobile-controls .bd-basemap-panel{margin-bottom:14px}
.bd-mobile-controls .bd-layer-list{padding:12px;border:1px solid #555;border-top:2px solid var(--accent)}
.bd-mobile-controls .bd-layer-row{border-top:1px solid #333;padding:6px 0}
.bd-tooltip-close{float:right;margin:0 0 6px 8px;min-width:44px;min-height:44px;border:1px solid #777;background:#222;color:#fff;font-size:22px}
#bd-map-tooltip{z-index:30}
@media(max-width:1050px){
  .bd-mobile-only{display:inline-flex!important;align-items:center;justify-content:center}
  .bd-mobile-map-link{min-height:44px;border:1px solid #777;padding:10px 14px;margin:0 0 10px;font-size:13px;font-weight:700}
  #bd-map-view{scroll-margin-top:12px}
  .bd-map-app .bd-map-canvas-stack{height:clamp(140px,calc(100vh - var(--bd-mobile-overhead,300px)),640px);height:clamp(140px,calc(100svh - var(--bd-mobile-overhead,300px)),640px)}
  .bd-map-app .bd-map-tools button,.bd-layer-order button{min-width:44px;min-height:44px;touch-action:manipulation}
  .bd-layer-list label:has(input),.bd-basemap-panel label{display:flex;align-items:center;gap:7px;min-height:44px;cursor:pointer}
  .bd-layer-list input,.bd-basemap-panel input{width:18px;height:18px;flex:0 0 18px;margin:0}
  .bd-basemap-options .bd-basemap-primary::after{display:none}
  .bd-cmab-controls select{font-size:16px;min-height:44px}
  .bd-map-legend{display:block;height:112px;max-height:112px;overflow:auto;scrollbar-width:thin;touch-action:pan-y}
  .bd-map-legend:not(:has(>[data-layer-legend]:not([hidden]))){display:none}
  .bd-map-legend>div+div{margin-top:7px;padding-top:7px;padding-left:0;border-top:1px solid #555;border-left:0}
  .bd-map-legend b,.bd-map-legend small{width:100%}
  .bd-map-toolbar small{font-size:10px;line-height:14px;min-height:28px;max-height:28px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .bd-imagery-credit{font-size:9px;line-height:1.35;padding:4px 8px;gap:3px;height:80px;flex:none;align-content:flex-start;overflow:auto}
  .bd-imagery-credit a{display:inline-block;min-height:24px;padding:5px 0}
}
@media(max-width:720px){
  .bd-map-app .bd-map-toolbar{padding:8px;gap:6px}
  .bd-map-toolbar>div:first-child>span{font-size:9px;line-height:1.35;letter-spacing:.04em}
  .bd-map-app .bd-map-tools{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
  .bd-map-app .bd-map-tools button{grid-column:span 3;padding:6px 4px;font-size:11px}
  .bd-map-app .bd-map-tools [data-map-action="locate"],.bd-map-app .bd-map-tools [data-map-action="reset"],.bd-map-app .bd-map-tools [data-mobile-controls]{grid-column:span 4}
  .bd-map-app .bd-map-legend{margin:6px 8px;max-width:calc(100% - 16px);height:104px;max-height:104px;padding:6px 8px}
}
@media(max-width:1050px) and (orientation:landscape) and (max-height:540px){
  .bd-map-app .bd-map-toolbar{flex-direction:row;align-items:center;gap:8px;padding:6px 8px}
  .bd-map-toolbar>div:first-child{max-width:34%}
  .bd-map-toolbar>div:first-child>span{font-size:9px;line-height:1.2}
  .bd-map-app .bd-map-tools{display:flex;flex-wrap:nowrap}
  .bd-map-app .bd-map-tools button{padding:6px;font-size:11px}
  .bd-map-app .bd-map-legend{height:78px;max-height:78px;margin:4px 8px;padding:4px 8px}
  .bd-map-app .bd-imagery-credit{height:46px}
  .bd-mobile-controls{max-height:96svh}
}