/* ALAT PETA (alat.js): bilah ikon di bawah kotak cari, popup titik dan
   lokasi, label hasil ukur, dan penanda lokasi pengguna. Warna memakai token
   komponen peta (--jp-*, peta.css), sehingga tema gelap ikut berlaku.
   Dimuat sesudah peta.css. */

.jp{--jp-alat-gambar:#c2410c;--jp-alat-lokasi:#1a73e8;--jp-alat-galat:#b42318}
:root[data-theme="dark"] .jp,.dark .jp,:root .jp.jp-tema-gelap{--jp-alat-galat:#fda29b}
:root .jp.jp-tema-terang{--jp-alat-galat:#b42318}

/* Ikon garis sebaris; lingkaran berkelas jp-ikon-isi diisi penuh. */
.jp .jp-ikon{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.jp .jp-ikon .jp-ikon-isi{fill:currentColor;stroke:none}

/* Bilah alat: satu baris ikon berteks pendek, selebar kolom panel kanan. */
.jp-alat{flex:none;padding:4px}
.jp-alat.jp-alat-aktif{border-color:var(--jp-aksen)}
.jp-alat-baris{display:flex;align-items:stretch;gap:2px}
/* Lebar dasar mengikuti teks, sehingga "Urungkan" tidak terpotong di kolom sempit. */
.jp-alat-tombol{flex:1 1 auto;min-width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:4px 2px;border:0;border-radius:9px;background:none;color:var(--jp-teks);font:inherit;font-size:11px;
  font-weight:600;line-height:1.1;cursor:pointer}
.jp-alat-tombol .jp-ikon{flex:none;width:20px;height:20px}
.jp-alat-teks{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jp-alat-tombol:hover:not(:disabled){background:var(--jp-kartu-2);color:var(--jp-judul)}
.jp-alat-tombol[aria-pressed="true"],.jp-alat-tombol[aria-pressed="true"]:hover:not(:disabled){background:var(--jp-aksen);color:#fff}
.jp-alat-tombol:disabled{opacity:.4;cursor:default}
.jp-alat-tombol:focus-visible{outline:2px solid var(--jp-aksen);outline-offset:1px}
.jp-alat-tombol[aria-busy="true"] .jp-ikon{animation:jp-alat-putar 1.2s linear infinite}
@keyframes jp-alat-putar{to{transform:rotate(360deg)}}
.jp-alat-sekat{flex:none;width:1px;margin:8px 2px;background:var(--jp-garis)}
/* Baris kabar tetap ada di pohon aksesibilitas walau kosong (role status). */
.jp-alat-kabar{margin:0;padding:4px 8px 3px;font-size:12.5px;line-height:1.35;color:var(--jp-teks)}
.jp-alat-kabar:empty{padding:0}
.jp-alat-kabar.jp-alat-galat{color:var(--jp-alat-galat);font-weight:600}

/* Popup titik pilihan dan lokasi Anda. */
.jp-alat-popup{display:flex;flex-direction:column;gap:6px}
.jp-alat-popup-kepala{display:flex;align-items:flex-start;gap:8px;margin-right:22px}
.jp-alat-popup-kepala > .jp-ikon{flex:none;width:22px;height:22px;margin-top:2px;color:var(--jp-alat-gambar)}
.jp-alat-popup-kepala .jp-redup{display:block;font-size:12px}
.jp-alat-koordinat{display:block;color:var(--jp-judul);font-size:14px;font-variant-numeric:tabular-nums}
.jp-alat-aksi{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.jp-alat-aksi .jp-tombol-kecil{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.jp-alat-aksi .jp-ikon{flex:none;width:16px;height:16px}
.jp .jp-alat-arah,.jp .jp-popup a.jp-alat-arah{background:var(--jp-aksen);border-color:var(--jp-aksen);color:#fff;text-decoration:none}
.jp .jp-alat-arah:hover{filter:brightness(1.1)}
.jp-alat-sekitar{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--jp-garis)}
.jp-alat-sekitar .jp-sumber,.jp-alat-sekitar .jp-keadaan{margin:2px 0 0}
.jp-alat-desa{display:flex;align-items:center;gap:8px}
.jp-alat-desa .jp-ikon{flex:none;width:18px;height:18px;color:var(--jp-redup)}
.jp-alat-desa .jp-tombol-kecil{flex:none}
.jp-alat-nama{flex:1;min-width:0;overflow-wrap:anywhere}
.jp-alat-subjudul{font-size:12px;font-weight:700;color:var(--jp-redup)}
.jp-alat-daftar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.jp-alat-butir{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:3px 6px;border:0;border-radius:8px;
  background:none;color:var(--jp-teks);font:inherit;text-align:left}
button.jp-alat-butir{cursor:pointer}
button.jp-alat-butir:hover{background:var(--jp-kartu-2)}
button.jp-alat-butir:focus-visible{outline:2px solid var(--jp-aksen);outline-offset:1px}
.jp-alat-butir .jp-ikon{flex:none;width:18px;height:18px;color:var(--jp-aksen)}
.jp-alat-jarak{flex:none;font-variant-numeric:tabular-nums;font-weight:600;color:var(--jp-judul)}

/* Penanda di peta: titik biru lokasi Anda, pin titik pilihan, dan label hasil ukur. */
.jp-alat-lokasi{width:24px;height:24px;display:grid;place-items:center;cursor:pointer}
.jp-alat-lokasi::before{content:"";grid-area:1/1;width:24px;height:24px;border-radius:50%;background:var(--jp-alat-lokasi);opacity:.25;
  animation:jp-alat-denyut 2s ease-out infinite}
.jp-alat-lokasi-titik{grid-area:1/1;width:16px;height:16px;border-radius:50%;background:var(--jp-alat-lokasi);border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 4px rgba(0,0,0,.35)}
@keyframes jp-alat-denyut{from{transform:scale(.6);opacity:.45}to{transform:scale(1.6);opacity:0}}
.jp .jp-alat-pin{cursor:grab}
.jp-alat-label{pointer-events:none;display:flex;flex-direction:column;align-items:center;padding:3px 8px;border-radius:8px;
  background:var(--jp-kartu);color:var(--jp-judul);border:1.5px solid var(--jp-alat-gambar);box-shadow:var(--jp-bayang);
  font-size:12.5px;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
.jp-alat-label strong{font-size:13px}
.jp-alat-label span{color:var(--jp-redup);font-size:11.5px}
@media (prefers-reduced-motion: reduce){
  .jp-alat-lokasi::before{animation:none}
  .jp-alat-tombol[aria-busy="true"] .jp-ikon{animation:none;opacity:.5}
}

/* Kolom kanan sempit memuat kotak cari, bilah alat, dan kepala legenda;
   tinggi bilah dicatat utama.js (--jp-tinggi-alat). Target sentuh 44 px. */
@container jp (max-width: 679px){
  .jp-kanan:has(> .jp-alat){min-height:calc(104px + var(--jp-tinggi-alat, 54px))}
  .jp-alat-butir,.jp-alat-aksi .jp-tombol-kecil,.jp-alat-desa .jp-tombol-kecil{min-height:44px}
  .jp-alat-popup-kepala{margin-right:32px}
}
/* Peta sempit: bilah di bawah peta, di atas kendali perbesaran dan atribusi (utama.js memindahkannya).
   103 px = jarak 6 px, perbesaran 91 px (dua tombol 44 px, peta.css), dan jarak 6 px. Pemindah
   GeoLibre duduk 6 px di atas bilah (peta.css .jg-portal .jg-alat), jadi keduanya tidak bertindih.
   Baris kabar melayang di atas bilah agar tinggi bilah tetap; selama kabar tampil, pemindah disembunyikan. */
.jp > .jp-alat.jp-alat-bawah{position:absolute;z-index:31;left:50%;transform:translateX(-50%);
  bottom:calc(var(--jp-tinggi-atribusi, 18px) + 103px);width:min(340px,calc(100% - 20px));pointer-events:auto}
.jp-alat-bawah .jp-alat-kabar{position:absolute;left:0;right:0;bottom:100%;margin-bottom:6px;border-radius:10px;
  background:var(--jp-kartu);box-shadow:var(--jp-bayang)}
.jp-alat-bawah .jp-alat-kabar:empty{display:none}

/* Lokasi pengguna dan gambar alat tidak ikut dicetak. */
/* Gambar alat, termasuk popup titik dan lokasi Anda, tidak ikut tercetak. */
.jp-alat-tersembunyi .jp-alat-penanda,.jp-alat-tersembunyi .maplibregl-popup:has(.jp-alat-popup){display:none !important}
@media print{
  .jp .jp-alat,.jp .jp-alat-penanda,.jp .maplibregl-popup:has(.jp-alat-popup){display:none !important}
}