/* ============================================================================
   DETAIL GEDUNG — EDITORIAL (#/building/:slug)
   Markup disusun oleh js/render/building-editorial.js dari viewBuilding().
   Semua aturan dibatasi .bd; halaman lama (#/legacy-building/:slug) tidak terpengaruh.
   ========================================================================== */
.bd{--bd-w:1180px; background:var(--paper)}
.bd .wrap{max-width:calc(var(--bd-w) + 2 * clamp(16px,3vw,40px))}

/* ---------- galeri: satu foto penuh; foto tambahan dapat digeser ---------- */
.bd-gallery{position:relative; padding-top:clamp(18px,2.4vw,32px)}
.bd-gallery-track{display:flex; gap:12px; height:clamp(320px,36vw,460px); overflow-x:auto; overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:16px}
.bd-gallery-track::-webkit-scrollbar{display:none}
.bd-gallery-track:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.bd-photo{position:relative; flex:0 0 100%; overflow:hidden; border-radius:16px; background:var(--surface-2); scroll-snap-align:start}
.bd-photo.is-main{background:var(--navy)}
.bd-photo .property-photo{position:absolute; inset:0}
.bd-photo img{width:100%; height:100%; object-fit:cover}
.bd-photo .photo-label{left:14px; bottom:14px; padding:4px 10px; border:0; border-radius:999px;
  background:rgba(9,18,39,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; font-size:.66rem; font-weight:600}
.bd-gallery-controls{display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:10px; color:var(--muted); font-size:.78rem}
.bd-gallery-controls > div{display:flex; gap:6px}
.bd-gallery-controls button{width:36px; height:36px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); cursor:pointer}
.bd-gallery-controls button:hover{border-color:var(--accent); color:var(--accent-ink)}
.bd-gallery-controls button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- kerangka: kepala & isi di kiri, rail menempel di kanan ---------- */
.bd-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; grid-template-areas:"head rail" "body rail";
  column-gap:clamp(28px,4vw,56px); align-items:start; padding-block:28px 72px}
.bd-head{grid-area:head; padding-bottom:26px; border-bottom:1px solid var(--line)}
.bd-body{grid-area:body; min-width:0; container-type:inline-size}
.bd-rail{grid-area:rail; position:sticky; top:calc(var(--nav-h) + 20px); display:flex; flex-direction:column; gap:14px;
  /* layar pendek: kartu bisa digulir di tempat, tidak pernah terpotong di bawah layar */
  max-height:calc(100dvh - var(--nav-h) - 36px); overflow-y:auto; scrollbar-width:thin}   /* tanpa overscroll-behavior:contain: gulir di atas kartu tetap menggeser halaman (bug 19 Okt 2026) */

/* ---------- kepala ---------- */
.bd-crumbs{display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; font-size:.8rem; color:var(--muted)}
.bd-crumbs .crumbs{margin:0; font-size:.8rem; color:var(--muted)}
.bd-crumbs .crumbs a{color:var(--muted); text-decoration:none}
.bd-crumbs .crumbs a:hover{color:var(--ink); text-decoration:underline}
.bd-maplink{display:inline-flex; align-items:center; gap:5px; padding:0; border:0; background:none; cursor:pointer;
  font:600 .8rem var(--body); color:var(--accent-ink)}
.bd-maplink:hover{text-decoration:underline}
.bd-title{display:flex; align-items:flex-start; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-top:12px}
.bd-title h1{flex:1 1 320px}
.bd-actions{display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; padding-top:6px}
.bd-actions .save-btn{min-height:40px; padding:8px 14px; border-radius:12px; background:var(--surface); font-weight:700; font-size:.82rem}
.bd-actions .cmp-check{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ink-2); cursor:pointer}
.bd-listlink{font-size:.82rem; font-weight:600; color:var(--accent-ink); text-decoration:none}
.bd-listlink:hover{text-decoration:underline}
.bd-head h1{margin:0; font-family:var(--display); font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:800; letter-spacing:-.035em; line-height:1.1; color:var(--ink)}
.bd-head .bhero-meta{margin-top:14px; gap:10px}
.bd-head .grade{padding:5px 9px; border:0; border-radius:8px; background:var(--accent-soft); color:var(--accent-ink);
  font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:0; text-transform:none; line-height:1.2}
.bd-address{font-size:.88rem; color:var(--muted)}

/* ---------- kartu ketersediaan ---------- */
.bd-book{border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 16px 40px rgba(20,31,57,.08); overflow:hidden}
.bd-book-head{display:flex; gap:12px; align-items:flex-start; padding:18px 20px; border-bottom:1px solid var(--line)}
.bd-book-icon{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink)}
.bd-book-head .eyebrow{margin:0 0 2px; font-size:.66rem}
.bd-book-head h4{margin:0; font-size:1rem; line-height:1.35}
.bd .bd-book .bhero-figures{display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; margin:0; padding:18px 20px;
  background:none; border:0; border-bottom:1px solid var(--line); border-radius:0}
.bd .bd-book .bhero-figures .figure{background:none; padding:0; gap:4px}
.bd .bd-book .bhero-figures .figure .k{color:var(--muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em}
.bd .bd-book .bhero-figures .figure .v{color:var(--ink); font:700 1.02rem/1.35 var(--mono)}
.bd .bd-book .bhero-figures .figure .v small{display:block; margin-top:2px; font:500 .7rem var(--body); color:var(--muted)}
.bd .bd-book .bhero-figures .figure .v span{color:var(--ink-2)}
.bd-book-body{padding:18px 20px 20px}
.bd-book-body .rail-actions{margin:0; gap:10px}
.bd-book-body .rail-actions .btn{min-height:48px; border-radius:12px; font-weight:700}

/* ---------- isi ---------- */
.bd .subnav{position:sticky; top:var(--nav-h); z-index:30; margin-bottom:6px; background:var(--paper); border-bottom:1px solid var(--line)}
.bd .subnav .wrap{max-width:none; padding-inline:0; gap:20px}
.bd .subnav button{padding:14px 0; font-size:.86rem}
.bd .detail-section{padding-block:34px; margin:0; scroll-margin-top:calc(var(--nav-h) + 56px)}
.bd .detail-section + .detail-section{margin-top:0; border-top:1px solid var(--line)}
.bd .detail-section > .eyebrow{margin-bottom:6px; font-size:.68rem}
.bd .detail-section > h2{margin-bottom:4px; font-family:var(--display); font-size:1.35rem; font-weight:700; letter-spacing:-.02em}
.bd .detail-section .lede{font-size:.95rem; line-height:1.75; color:var(--ink-2); max-width:70ch}

/* baris spesifikasi: label kiri, nilai kanan, tanpa garis tebal */
.bd .spec-grid{gap:0 44px; margin-top:18px}
.bd .spec-row{padding:11px 0; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); font-size:.9rem}
.bd .spec-row dt{color:var(--ink-2)}
.bd .spec-row dd, .bd .spec-row dd.txt{font-weight:600; font-size:.9rem; color:var(--ink)}
.bd .spec-row .nodata{font-weight:500; color:var(--muted)}

/* kolom utama sempit: daftar spesifikasi satu kolom supaya nilai tidak patah-patah */
@container (max-width:700px){
  .bd .spec-grid{grid-template-columns:1fr}
}

/* fasilitas gedung (chip) → daftar bertanda centang */
.bd #specs .chip-accent{background:none; border:0; padding:4px 0; color:var(--ink-2); font-size:.86rem; font-weight:500}
.bd #specs .chip-accent::before{content:"✓"; display:inline-block; width:18px; color:var(--ok); font-weight:700}

/* pilihan ruang: kartu per ruang (bukan tabel yang harus digeser) —
   lantai & status | angka | tombol Hitung & Cek Unit Ini, semua terlihat */
.bd .tablewrap{display:none}
.bd .unit-cards{display:grid; gap:12px; margin-top:16px}
.bd .unit-card{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head actions" "facts facts";
  gap:14px 20px; align-items:center; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--surface);
  transition:border-color .15s, box-shadow .15s}
.bd .unit-card:hover{border-color:var(--line-strong); box-shadow:0 10px 26px rgba(20,31,57,.07)}
/* baris atas: lantai + status | tombol */
.bd .unit-card-head{grid-area:head; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; min-width:0; padding:0; border:0}
.bd .unit-card-head h3{margin:1px 0 0; font-family:var(--display); font-size:1.08rem; font-weight:800; letter-spacing:-.02em}
.bd .unit-card-head .chip{white-space:nowrap}
.bd .unit-label{display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.bd .unit-card-actions{grid-area:actions; display:flex; gap:8px; margin:0}
.bd .unit-card-actions .btn{min-height:40px; padding:9px 16px; border-radius:10px; white-space:nowrap}
/* baris bawah: enam angka, tiga kolom */
.bd .unit-card dl{grid-area:facts; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 20px; margin:0;
  padding-top:14px; border-top:1px solid var(--line)}
.bd .unit-card dl > div{display:block; min-width:0; padding:0; border:0; font-size:.8rem}
.bd .unit-card dt{font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.bd .unit-card dd{margin:4px 0 0; max-width:none; text-align:left; font-weight:700; font-size:.86rem; line-height:1.4; color:var(--ink); font-variant-numeric:tabular-nums}
.bd .unit-card dd .nodata, .bd .unit-card dd .muted{font-weight:500; color:var(--muted)}
.bd .unit-card-sub{display:block; margin-top:2px; font-weight:500; font-size:.72rem; color:var(--muted)}
.bd .unit-card .unit-card-total dd{color:var(--accent-ink); font-family:var(--mono)}
/* kolom utama sempit: tombol turun ke bawah, angka dua kolom */
@container (max-width:600px){
  .bd .unit-card{grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "facts" "actions"}
  .bd .unit-card dl{grid-template-columns:1fr 1fr}
  .bd .unit-card-actions{display:grid; grid-template-columns:1fr 1fr}
  .bd .unit-card-actions .btn{width:100%; padding-inline:10px}
}

/* tabel ruang: lebih ringan */
.bd .tablewrap{margin-top:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.bd table.data th{background:var(--surface-2)}
.bd table.data .btn{border-radius:10px}

/* kartu fasilitas → kolom daftar tanpa kotak */
.bd .amen-grid{gap:22px 36px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:18px}
.bd .amen-card{padding:0; border:0; border-radius:0; background:none}
.bd .amen-card h4{font-size:.92rem; margin-bottom:6px}
.bd .amen-item{flex-direction:column; align-items:flex-start; gap:1px; border-bottom:0; padding:6px 0; font-size:.86rem}
.bd .amen-item .ds{white-space:normal; font-size:.76rem}

/* kalkulator & peta */
.bd .calc-grid{margin-top:18px}
.bd #location .panel{border-radius:16px}
.bd .empty{border-radius:14px}
.building-location-caption{display:grid; gap:5px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.building-location-caption p{margin:0}
.building-location-address{display:flex; align-items:flex-start; gap:8px; color:var(--ink-2); font-size:.84rem; line-height:1.55}
.building-location-address .ico{flex:none; margin-top:2px; color:var(--accent-ink)}
.building-location-address span{overflow-wrap:anywhere}
.building-location-accuracy{padding-left:24px; color:var(--muted); font-size:.74rem; line-height:1.5}

/* gedung lain: kartu gaya Jelajahi, dua kolom di kolom utama */
.bd #similar .explore-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); margin-top:18px}

/* ---------- responsif ---------- */
@media(max-width:1019px){
  .bd-grid{grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "rail" "body"; padding-top:22px}
  .bd-head{border-bottom:0; padding-bottom:18px}
  .bd-rail{position:static; margin-bottom:10px; max-height:none; overflow:visible}
}
@media(max-width:760px){
  .bd-gallery-track{height:auto; aspect-ratio:16/10}
  .bd .detail-section{padding-block:28px}
}
@media(max-width:420px){
  .bd .bd-book .bhero-figures{grid-template-columns:1fr}
}

/* ---------- diorama 3D lokasi (js/render/diorama.js) ---------- */
.bd .dio{margin-top:14px}
/* baris navigasi di atas panggung — tidak menutupi diorama */
.dio-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.dio-hint{margin:0; font-size:.78rem; color:var(--muted)}
.dio-nav{display:flex; align-items:center; gap:6px}
.dio-nav button{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.dio-nav button:hover{border-color:var(--accent); color:var(--accent-ink)}
.dio-nav button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.dio-nav button.is-cw svg{transform:scaleX(-1)}
.dio-compass{position:relative; width:36px; height:36px; margin-right:4px; border-radius:50%; border:1px solid var(--line); background:var(--surface); transition:transform .2s}
.dio-compass i{position:absolute; left:50%; top:6px; width:0; height:0; transform:translateX(-50%);
  border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:11px solid var(--accent)}
.dio-compass span{position:absolute; left:0; right:0; bottom:4px; text-align:center; font:700 .56rem var(--mono); color:var(--muted)}
/* panggung 4:3 (ponsel 6:5); ubin persegi hampir memenuhi */
.dio-stage{position:relative; aspect-ratio:4 / 3; max-height:640px; width:100%; border-radius:18px; overflow:hidden;
  /* langit lembut: biru muda di atas → hangat di bawah; mengikuti tema lewat token warna */
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 5%, var(--surface)) 45%, color-mix(in srgb, #C9A46A 7%, var(--paper)) 100%);
  border:1px solid var(--line); touch-action:pan-y; user-select:none; -webkit-user-select:none}
.dio-canvas{position:absolute; inset:0; display:block}
.dio-overlay{position:absolute; inset:0; pointer-events:none}
.dio-label, .dio-tip{position:absolute; left:0; top:0; white-space:nowrap; border-radius:10px; box-shadow:0 8px 22px rgba(20,31,57,.16)}
.dio-label{display:flex; flex-direction:column; gap:1px; padding:7px 11px; background:var(--navy); color:var(--on-navy); font-size:.72rem}
.dio-label b{font:700 .8rem var(--display); letter-spacing:-.01em}
.dio-label span{color:var(--on-navy-muted); font-size:.66rem}
.dio-tip{display:flex; flex-direction:column; gap:2px; padding:7px 10px; background:var(--surface); color:var(--ink); border:1px solid var(--line); font-size:.7rem; z-index:2}
.dio-tip b{font-size:.78rem}
.dio-tip span{color:var(--muted)}
.dio-legend{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:12px}
.dio-legend .layer-toggle{font-size:.76rem}
.dio-legend-note{display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:.74rem; color:var(--muted)}
.dio-ring-key{width:22px; height:0; border-top:1.5px dashed var(--accent)}
.dio-credit{margin:8px 0 0; font-size:.66rem; color:var(--muted); text-align:right}
.dio-credit a{color:inherit}
.bd #amenities .amen-item.dio-linked{cursor:pointer; border-radius:6px}
.bd #amenities .amen-item.dio-linked:hover .nm{color:var(--accent-ink)}
@media(hover:none){ .dio-hint{visibility:hidden} }
@media(max-width:760px){
  .dio-stage{aspect-ratio:6 / 5}
  .dio-legend-note{margin-left:0; width:100%}
}

/* kafe & restoran sekitar (js/render/building-editorial.js → fillNearby) */
/* fakta singkat di kepala: MRT terdekat + kafe & restoran sekitar */
.bd-facts{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; font-size:.88rem; color:var(--ink-2)}
.bd-fact{display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.bd-fact[hidden]{display:none}
.bd-fact b{color:var(--ink); font-weight:700}
.bd-fact-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0}
.bd-fact-dot.is-mrt{background:#3C74E8}
.bd-fact button{border:0; background:none; padding:0; font:inherit; font-weight:600; color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.bd #nearby .amen-card h4 small{font-weight:500; color:var(--muted); font-size:.76rem; margin-left:4px}
.bd #nearby .hint{margin-top:12px}
.bd #nearby .amen-grid{margin-top:14px}
.bd-nearby-more{display:none}
@media(max-width:760px){
  .bd #nearby:not(.is-expanded) .amen-card .amen-item:nth-of-type(n+4){display:none}
  .bd #nearby:not(.is-expanded) .amen-card h4 small{display:none}
  .bd-nearby-more{display:block; width:100%; margin-top:14px; padding:12px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface,#fff); font:inherit; font-weight:600; font-size:.9rem; color:var(--accent-ink); cursor:pointer}
}

/* audit 19 Okt 2026: "Lokasi & sekitar" satu bagian (peta + sub-bagian tanpa garis pemisah) */
.bd .detail-section.bd-sub{border-top:0; padding-top:6px}
.bd .detail-section.bd-sub > h3{margin:0 0 4px; font-family:var(--display); font-size:1.08rem; font-weight:700; letter-spacing:-.015em}
/* kalkulator biaya tertutup sampai dibuka */
.bd-calc-toggle{margin-top:14px; padding:11px 18px; border:1px solid var(--line); border-radius:8px; background:var(--surface,#fff); font:inherit; font-weight:600; font-size:.9rem; color:var(--accent-ink); cursor:pointer}
.bd-calc-body{margin-top:18px}
/* gedung lain: kartu ringkas (tanpa tombol simpan/bandingkan/cek) + tautan semua gedung di kawasan */
.bd #similar .bcard-foot,.bd #similar .card-status,.bd #similar .save-btn,.bd #similar .cmp-check{display:none}
.bd-similar-all{margin-top:16px; font-size:.9rem}
.bd-similar-all a{font-weight:600; color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px}
/* layar dengan bilah aksi bawah: tombol di kartu kanan tidak diulang; kartu tanpa angka disembunyikan */
@media(max-width:1019px){
  .bd-book-body{display:none}
  .bd-rail.is-compact{display:none}
}

/* ---------- peta sekitar gedung (js/render/nearby-map.js): tampilan utama; diorama = pilihan "3D" ---------- */
.bd #location.view-2d .dio{display:none}
.bd #location.view-3d .nmap{display:none}
.nmap-switch{display:inline-flex; margin-top:12px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.nmap-switch button{border:0; background:none; padding:7px 16px; border-radius:7px; font:inherit; font-size:.84rem; font-weight:600; color:var(--muted); cursor:pointer}
.nmap-switch button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
.nmap{margin-top:14px}
.nmap-chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; scrollbar-width:none}
.nmap-chips::-webkit-scrollbar{display:none}
.nmap-chips button{flex:none; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font:inherit; font-size:.82rem; color:var(--ink-2); cursor:pointer; white-space:nowrap}
.nmap-chips button span{color:var(--muted); font-weight:600}
.nmap-chips button i{width:8px; height:8px; border-radius:50%}
.nmap-chips button[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:var(--surface)}
.nmap-chips button[aria-pressed="true"] span{color:inherit; opacity:.75}
.nmap-stage{--m-ground:#F1EEE8; --m-green:#CFE3BF; --m-water:#BCDCEF; --m-road:#FFFFFF; --m-case:#DDD6CB; --m-bld:#E4E0D8; --m-bld-line:#D3CDC2;
  --m-rail:#8A93A6; --m-text:#5A6477; --m-halo:rgba(255,255,255,.95); --m-ring:#3B63D9; --m-target:#6E90F2; --m-target-line:#2747B0;
  position:relative; height:clamp(320px, 52vh, 460px); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--m-ground); touch-action:pan-y}
/* sentuhan vertikal selalu menggulir halaman, juga saat peta diperbesar (bug 19 Okt 2026); geser peta: arah samping + tombol */
.nmap-stage.is-zoomed .nmap-svg{cursor:grab}
.nmap-stage.is-dragging .nmap-svg{cursor:grabbing}
.nmap-svg{display:block; width:100%; height:100%; user-select:none; -webkit-user-select:none}
.nmap-ground{fill:var(--m-ground)}
.nmap-green{fill:var(--m-green)}
.nmap-water{fill:var(--m-water)}
.nmap-river{fill:none; stroke:var(--m-water); stroke-linecap:round; stroke-linejoin:round}
.nmap-road-case{fill:none; stroke:var(--m-case); stroke-linecap:round; stroke-linejoin:round}
.nmap-road{fill:none; stroke:var(--m-road); stroke-linecap:round; stroke-linejoin:round}
.nmap-rail{fill:none; stroke:var(--m-rail); stroke-width:3; stroke-dasharray:10 6}
.nmap-bld{fill:var(--m-bld); stroke:var(--m-bld-line); stroke-width:.8}
.nmap-target{fill:var(--m-target); stroke:var(--m-target-line); stroke-width:2.5}
.nmap-roadname,.nmap-ringlabel{font-family:var(--body); font-size:calc(11px * var(--k, 1)); font-weight:600; fill:var(--m-text); stroke:var(--m-halo); stroke-width:calc(3px * var(--k, 1)); paint-order:stroke; text-anchor:middle; dominant-baseline:central; pointer-events:none}
.nmap-ringlabel{fill:var(--m-ring); font-weight:700}
.nmap-ring{fill:none; stroke:var(--m-ring); stroke-opacity:.5; stroke-width:1.5; stroke-dasharray:6 6; vector-effect:non-scaling-stroke}
.nmap-pin{cursor:pointer; outline:none}
.nmap-pin circle{stroke:#fff; stroke-width:2.5}
.nmap-pin.is-on circle{stroke-width:3}
.nmap-pin.is-group circle{fill:var(--navy)}
.nmap-pin.is-group.is-on circle{fill:var(--accent)}
.nmap-pin.is-group text{font-family:var(--body); font-size:12px; font-weight:700; fill:#fff; text-anchor:middle; dominant-baseline:central}
.nmap-pin:focus-visible circle{stroke:var(--accent); stroke-width:3}
.nmap-pinname,.nmap-tname{font-family:var(--body); font-size:12px; font-weight:700; fill:var(--ink); stroke:var(--m-halo); stroke-width:3.5px; paint-order:stroke; text-anchor:middle; dominant-baseline:central; pointer-events:none}
.nmap-tname{font-size:11px; font-weight:600}
.nmap-transit rect{stroke:#fff; stroke-width:2}
.nmap-tx{font-family:var(--body); font-size:9.5px; font-weight:800; fill:#fff; text-anchor:middle; dominant-baseline:central}
.nmap-me-dot{fill:var(--m-target-line); stroke:#fff; stroke-width:3}
.nmap-me-tag{fill:var(--navy)}
.nmap-me-name{font-family:var(--body); font-size:12px; font-weight:700; fill:#fff; text-anchor:middle; dominant-baseline:central}
.nmap-ctrl{position:absolute; top:12px; right:12px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 6px 18px rgba(20,31,57,.10); overflow:hidden}
.nmap-ctrl button{display:grid; place-items:center; width:38px; height:38px; border:0; background:none; font:600 1.05rem/1 var(--body); color:var(--ink); cursor:pointer}
.nmap-ctrl button+button{border-top:1px solid var(--line)}
.nmap-ctrl button:hover{background:var(--accent-soft)}
.nmap-attr{position:absolute; right:8px; bottom:6px; margin:0; padding:2px 6px; border-radius:6px; background:var(--surface); opacity:.9; font-size:.66rem; color:var(--muted)}
.nmap-pop{position:absolute; z-index:3; top:12px; left:12px; width:min(260px, calc(100% - 76px)); padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 12px 30px rgba(20,31,57,.14)}
.nmap-pop h4{margin:2px 22px 4px 0; font-size:.95rem; line-height:1.3}
.nmap-pop p{margin:0; font-size:.8rem; color:var(--ink-2)}
.nmap-pop .nmap-pop-cat{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.74rem}
.nmap-pop-cat i{width:8px; height:8px; border-radius:50%; flex:none}
.nmap-pop-d b{color:var(--ink)}
.nmap-pop-x{position:absolute; top:6px; right:8px; width:26px; height:26px; border:0; background:none; font-size:1.15rem; line-height:1; color:var(--muted); cursor:pointer}
.bd #nearby .amen-item.is-linked{cursor:pointer; border-radius:6px}
.bd #nearby .amen-item.is-linked:hover .nm,.bd #nearby .amen-item.is-linked:focus-visible .nm{color:var(--accent-ink)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nmap-stage{--m-ground:#1B2232; --m-green:#1E3527; --m-water:#15304A; --m-road:#303C55; --m-case:#161D2D; --m-bld:#252E42; --m-bld-line:#1A2133; --m-text:#AFBBD3; --m-halo:rgba(20,26,40,.92); --m-ring:#8FA9F5; --m-target:#5B7FE6; --m-target-line:#A9C2FA}
}
:root[data-theme="dark"] .nmap-stage{--m-ground:#1B2232; --m-green:#1E3527; --m-water:#15304A; --m-road:#303C55; --m-case:#161D2D; --m-bld:#252E42; --m-bld-line:#1A2133; --m-text:#AFBBD3; --m-halo:rgba(20,26,40,.92); --m-ring:#8FA9F5; --m-target:#5B7FE6; --m-target-line:#A9C2FA}
@media(max-width:760px){
  .nmap-stage{height:340px; border-radius:12px}
}

/* peta + daftar dalam satu komponen (nearby-map.js) */
.nmap.is-split .nmap-body{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(230px,1fr); height:clamp(380px, 58vh, 500px); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface)}
.nmap.is-split .nmap-stage{height:auto; border:0; border-radius:0}
.nmap-side{display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--line)}
.nmap-side-head{margin:0; padding:12px 14px 10px; font-size:.78rem; font-weight:600; color:var(--muted); border-bottom:1px solid var(--line)}
.nmap-list{list-style:none; margin:0; padding:6px; overflow-y:auto; flex:1; min-height:0}   /* ujung daftar → halaman ikut bergulir */
.nmap-li{display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 8px; border-radius:10px; cursor:pointer; outline:none}
.nmap-li > i{width:10px; height:10px; border-radius:50%}
.nmap-li-main{min-width:0}
.nmap-li-main b{display:block; font-size:.86rem; font-weight:600; color:var(--ink); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nmap-li-main small{display:block; margin-top:1px; font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nmap-li-d{text-align:right; font-size:.78rem; font-weight:600; color:var(--ink); white-space:nowrap}
.nmap-li-d small{display:block; font-weight:400; color:var(--muted)}
.nmap-li:hover,.nmap-li:focus-visible{background:var(--accent-soft)}
.nmap-li.is-on{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
@media(max-width:760px){
  .nmap.is-split .nmap-body{grid-template-columns:minmax(0,1fr); grid-template-rows:360px 320px; height:auto; border-radius:12px}
  .nmap-side{border-left:0; border-top:1px solid var(--line)}
}

/* rute jalan kaki gedung → tujuan (nearby-map.js) */
.nmap-route-case{fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.9}
.nmap-route-line{fill:none; stroke:var(--m-ring); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.nmap-route-line.is-straight{stroke-dasharray:2 9}
.nmap-me-btn{cursor:pointer; outline:none}
.nmap-me-btn:focus-visible .nmap-me-dot{stroke:var(--accent)}
.nmap-pop .nmap-pop-note{margin-top:4px; font-size:.72rem; color:var(--muted)}

/* 3D (diorama) di kotak yang sama dengan peta; chip & daftar tetap tampil dan mengendalikan keduanya */
.bd #location.view-3d .nmap.is-split{display:block}
.nmap.is-split .nmap-body > .nmap-stage,.nmap.is-split .nmap-body > .nmap-3d{grid-column:1; grid-row:1; min-height:0}
.nmap.is-split.is-3d .nmap-stage{visibility:hidden; pointer-events:none}
.nmap-3d.dio{margin:0; display:flex; flex-direction:column; min-height:0; background:var(--surface); z-index:1}
.nmap-3d[hidden]{display:none !important}
.nmap-3d .dio-bar{padding:8px 12px 4px}
.nmap-3d .dio-stage{flex:1; aspect-ratio:auto; max-height:none; border-radius:0; min-height:0}
.nmap-3d .dio-legend{margin:6px 12px 0}
.nmap-3d .dio-credit{margin:4px 12px 8px}