/* ================================================================
   Peta Cuaca — layout ala BMKG Signature (fullscreen map +
   panel mengambang), gaya visual Atmospheric Brutalism (neubrutalist):
   border ink 3px, hard-shadow 6px tanpa blur, sudut siku 0px.
   ================================================================ */
/* Palet: NEON PASTEL (NewPalet/DESIGN.md).
   Cyber Purple #bc13fe sebagai titik fokus, Soft Lavender #e6e6fa untuk
   permukaan sekunder, Mint Green #aaff00 untuk keadaan aktif. Garis dan teks
   HITAM MURNI, sesuai panduannya: "Every color is contained by a pure black
   stroke" dan "All text should be rendered in pure black".
   Yang diganti HANYA warnanya. Ketebalan garis, bayangan, dan huruf tetap. */
:root {
  /* Palet Deep Sea Telemetry (biru laut, aksen cyan biolume). Warna saja,
     bentuk, huruf, border, dan bayangan tidak diubah. */
  --ink: #050a14;
  --paper: #eef4fb;
  --surface: #f6faff;
  --surface-low: #e8eef5;
  --surface-high: #dde3ea;
  --surface-highest: #c9d2dc;
  --white: #ffffff;
  --primary: #00696e;
  --on-primary: #ffffff;
  --lime: #00f5ff;
  --on-lime: #002021;
  --variant: #3a494a;

  --bw: 3px;
  --shadow: 6px 6px 0 0 var(--ink);
  --shadow-sm: 4px 4px 0 0 var(--ink);

  --font-display: "Archivo Black", sans-serif;
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  font-family: var(--font-ui); font-weight: 500;
  color: var(--ink); background: #0a1018; overflow: hidden;
}
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  line-height: 1; vertical-align: middle;
}
.mono { font-family: var(--font-mono); }
.label-caps {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--variant);
}

/* ===================== MAP STAGE ===================== */
#stage { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; background: #0a1018; }
.leaflet-container { background: #0a1018; font-family: var(--font-ui); }
.velocity-overlay { pointer-events: none; }

/* Overlay wrapper */
#ui {
  position: absolute; inset: 0; padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none; z-index: 500;
}
.ui-top { display: flex; justify-content: space-between; align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 12px; }
.col.items-end { align-items: flex-end; }

/* Panel dasar neubrutalist */
.panel {
  background: var(--surface); border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow); pointer-events: auto;
}

/* ---- Buka-tutup panel kiri (Parameter + Model) ---- */
/* Tab kecil di tepi KIRI kontainer Parameter, sejajar tengahnya, panah biru.
   Lebarnya PAS sebesar tonjolannya dan berdiri sendiri, tidak mengandalkan panel
   untuk menutupi sisanya. Itu penting: dulu tab dibuat lebar lalu separuhnya
   disembunyikan di balik panel, akibatnya begitu panel digeser keluar, separuh
   yang tadinya tersembunyi ikut nongol dan tabnya terlihat melar. */
.layer-bar { position: relative; }
.panel-toggle {
  position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 46px; padding: 0; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: var(--bw) solid var(--ink);
  color: var(--primary); pointer-events: auto;
}
.panel-toggle:hover { background: var(--primary); color: var(--on-primary); }
.panel-toggle .material-symbols-outlined { font-size: 17px; line-height: 1; margin-left: -3px; }

/* Menyembunyikan = MENGGESER keluar bingkai ke kiri, bukan display:none.
   Alasannya penting: transform TIDAK mengubah tata letak, jadi tinggi .layer-bar
   tetap dan tab di sebelahnya tak ikut bergeser sedikit pun. Kalau pakai
   display:none, kontainernya mengempis dan tombolnya melompat naik ke bawah brand. */
.layers, .level-bar, .selects { transition: transform .28s ease; }
.col.panels-hidden .layers,
.col.panels-hidden .level-bar,
.col.panels-hidden .selects {
  transform: translateX(calc(-100% - 40px));   /* 40px = lewat padding #ui + ruang bayangan */
  pointer-events: none;
}

/* ---- Brand: bungakertas ---- */
.brand { display: flex; align-items: center; gap: 11px; padding: 9px 16px 9px 11px; }
.brand-logo { flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--font-display); font-size: 20px; letter-spacing: -.01em; }
.brand-text span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--variant); margin-top: 5px; }

/* ---- Kartu link ke app saudara ---- */
.phenom-link { display: flex; align-items: center; gap: 11px; padding: 9px 13px; width: max-content; max-width: 264px;
  text-decoration: none; color: var(--ink); cursor: pointer; transition: transform .1s, box-shadow .1s, background .1s; }
.phenom-link:hover { background: var(--lime); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 0 var(--ink); }
.phenom-link .pl-ico { flex: none; color: var(--primary); font-size: 26px; }
.phenom-link:hover .pl-ico { color: var(--on-lime); }
.pl-txt { display: flex; flex-direction: column; line-height: 1.1; }
.pl-txt strong { font-family: var(--font-display); font-size: 14px; letter-spacing: -.01em; }
.pl-txt span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .03em; color: var(--variant); margin-top: 4px; }
.phenom-link:hover .pl-txt span { color: var(--on-lime); }
.pl-go { flex: none; font-size: 18px; color: var(--variant); }
.phenom-link:hover .pl-go { color: var(--on-lime); }

/* ---- Layer selector ---- */
.layers { display: flex; flex-direction: column; width: 224px; }
.layer-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; background: var(--surface); color: var(--ink);
  border: none; border-bottom: var(--bw) solid var(--ink);
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  text-transform: uppercase; text-align: left; cursor: pointer; transition: background .12s;
}
.layer-btn:last-child { border-bottom: none; }
.layer-btn .material-symbols-outlined { color: var(--primary); font-size: 21px; }
.layer-btn:hover:not(.active):not(.disabled) { background: var(--surface-high); }
.layer-btn.active { background: var(--lime); color: var(--on-lime); }
.layer-btn.active .material-symbols-outlined { color: var(--on-lime); }
.layer-btn.disabled { opacity: .45; cursor: not-allowed; }
/* Panah geser variabel — hanya tampil di HP (lihat media query) */
.layer-nav { display: none; }

/* ---- Pemilih LEVEL versi HP (desktop pakai dropdown di .selects) ---- */
.level-bar { display: none; }   /* desktop: sembunyi; HP: ditampilkan di media query */
.levels { display: none; flex-direction: column; width: max-content; min-width: 150px; }
.level-btn {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 11px 16px; background: var(--surface); color: var(--ink);
  border: none; border-bottom: var(--bw) solid var(--ink);
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .02em; text-align: left;
  white-space: nowrap; cursor: pointer; pointer-events: auto; transition: background .12s;
}
.level-btn:last-child { border-bottom: none; }
.level-btn:hover:not(.active) { background: var(--surface-high); }
.level-btn.active { background: var(--lime); color: var(--on-lime); }

/* ---- Model / level / init ---- */
.selects { width: 224px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.field .label-caps { margin-bottom: 4px; }
.select-wrap { position: relative; }
.select-wrap select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: var(--surface-low); color: var(--ink);
  border: var(--bw) solid var(--ink); padding: 7px 26px 7px 9px;
  font-family: var(--font-mono); font-size: 12px; cursor: pointer; outline: none;
}
.select-wrap select:focus { background: var(--lime); }
.select-wrap select:disabled { opacity: .6; cursor: not-allowed; }
.select-wrap .material-symbols-outlined {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 18px;
}

/* ---- Lang toggle / zoom / search (kanan atas) ---- */
.lang { display: flex; border: var(--bw) solid var(--ink); box-shadow: var(--shadow); background: var(--surface); pointer-events: auto; }
.lang button {
  padding: 8px 14px; border: none; background: var(--surface);
  font-family: var(--font-ui); font-weight: 700; font-size: 14px; cursor: pointer;
}
.lang button:first-child { border-right: var(--bw) solid var(--ink); }
.lang button.active { background: var(--lime); color: var(--on-lime); }
.lang button:disabled { opacity: .5; cursor: not-allowed; }

.zoom { display: flex; flex-direction: column; border: var(--bw) solid var(--ink); box-shadow: var(--shadow); background: var(--surface); pointer-events: auto; }
.zoom button {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border: none; background: var(--surface); cursor: pointer; transition: background .12s;
}
.zoom button:first-child { border-bottom: var(--bw) solid var(--ink); }
.zoom button:hover { background: var(--surface-high); }

.icon-btn {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border: var(--bw) solid var(--ink); background: var(--surface);
  box-shadow: var(--shadow); cursor: pointer; pointer-events: auto; transition: all .1s ease;
}
.icon-btn:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 3px 3px 0 0 var(--ink); }
.icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn.active { background: var(--lime); }
.icon-btn.active .material-symbols-outlined { color: var(--on-lime); }

/* ---- Kepala dropdown "Parameter" (kiri) & kontrol (kanan) — HP saja ---- */
.param-toggle, .ctrl-toggle { display: none; }   /* desktop: disembunyikan */

/* Tooltip label 1-kata saat hover tombol kontrol kanan (desktop, ada mouse) */
@media (hover: hover) and (min-width: 641px) {
  .col.items-end [data-tip] { position: relative; }
  .col.items-end [data-tip]::after {
    content: attr(data-tip);
    position: absolute; right: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: var(--ink); color: var(--surface);
    font-family: var(--font-ui); font-weight: 700; font-size: 11px;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
    padding: 5px 9px; border: 2px solid var(--ink); box-shadow: var(--shadow-sm);
    opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
    z-index: 60;
  }
  .col.items-end [data-tip]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

  /* Tombol parameter: keterangan muncul di KANAN (panelnya di tepi kiri layar).
     Dipakai untuk memanjangkan singkatan seperti CAPE dan CIN. */
  .layer-btn[data-tip] { position: relative; }
  .layer-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: var(--ink); color: var(--surface);
    font-family: var(--font-ui); font-weight: 700; font-size: 11px;
    letter-spacing: .02em; white-space: nowrap; text-transform: none;   /* kalimat, bukan teriakan */
    padding: 5px 9px; border: 2px solid var(--ink); box-shadow: var(--shadow-sm);
    opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
    z-index: 60;
  }
  .layer-btn[data-tip]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ---- Ikon kondisi cuaca per kota (declutter zoom) ---- */
.city-cond { cursor: pointer; background: none; border: none; }
.cc-ico {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; box-sizing: border-box;
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.cc-ico .material-symbols-outlined { font-size: 19px; line-height: 1; }
.cc-ico.cc-cap { width: 34px; height: 34px; border-width: 3px; box-shadow: 3px 3px 0 0 var(--ink); }
.cc-ico.cc-cap .material-symbols-outlined { font-size: 22px; }
.cc-sunny  .material-symbols-outlined { color: #f5a91e; }
.cc-pcloud .material-symbols-outlined { color: #6b7686; }
.cc-cloud  .material-symbols-outlined { color: #566072; }
.cc-rain   .material-symbols-outlined { color: #2360c8; }
.cc-heavy  .material-symbols-outlined { color: #e8590c; }
.cc-storm  .material-symbols-outlined { color: #c81d5a; }

/* Nama kota + nilai parameter aktif, menggantung di bawah ikon. Halo hitam tebal
   supaya tetap terbaca di atas heatmap yang warnanya bisa apa saja. */
.city-cond { overflow: visible; }
.cc-lbl {
  position: absolute; top: 33px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  white-space: nowrap; pointer-events: none; text-align: center;
}
.cc-lbl b {
  font-family: "Space Grotesk", system-ui, sans-serif; font-size: 11px; font-weight: 700;
  line-height: 1.1; color: #fff; letter-spacing: .2px;
  text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000;
}
.cc-lbl i {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 700;
  font-style: normal; line-height: 1.1; color: #fff;
  text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000;
}
.cc-cap + .cc-lbl { top: 37px; }   /* ibukota provinsi ikonnya lebih besar */
/* Nama negara & laut yang kita gambar sendiri (pengganti ubin label CARTO). */
.geo-lbl { pointer-events: none; background: none; border: none; }
.geo-lbl span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; }
.geo-neg span {
  font-family: "Space Grotesk", system-ui, sans-serif; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 255, 255, .68);
  text-shadow: 0 0 4px #000, 0 1px 2px #000;
}
.geo-laut span {
  font-family: "Space Grotesk", system-ui, sans-serif; font-size: 11px; font-style: italic;
  letter-spacing: .5px; color: rgba(255, 255, 255, .5);
  text-shadow: 0 0 4px #000, 0 1px 2px #000;
}
/* Peta bertema terang (mis. Hujan): teks dibalik jadi gelap berhalo putih. */
.lbl-light .geo-neg span { color: rgba(28, 27, 27, .62); text-shadow: 0 0 4px #fff, 0 1px 2px #fff; }
.lbl-light .geo-laut span { color: rgba(28, 27, 27, .48); text-shadow: 0 0 4px #fff, 0 1px 2px #fff; }

/* Tanpa ikon kondisi, label naik ke titik kotanya sendiri dan jadi bisa diklik. */
.city-cond.no-ico .cc-lbl { top: 6px; pointer-events: auto; cursor: pointer; }

/* ===================== BOTTOM: slider (kiri) + legenda (kanan) ===================== */
.ui-bottom { display: flex; flex-direction: row; align-items: stretch; gap: 14px; }

/* kolom kanan: legenda ikon kondisi (atas, saat toggle) + legend bar (bawah) */
/* Legend bar tetap di tempat (align-self flex-end). Legenda KONDISI MENGAMBANG
   di atasnya via position:absolute → TIDAK menambah tinggi alur, jadi bar warna
   tak terdorong turun/keluar layar saat toggle aktif. */
.legend-col { position: relative; align-self: flex-end; }
/* Keterangan kondisi = popover yang muncul ke KIRI tombol Kondisi (pola sama
   dengan kotak pencarian). Dibungkus .city-wrap (position relative). */
.city-wrap { position: relative; pointer-events: auto; }
.cond-legend { position: absolute; top: 0; right: 52px; display: none; z-index: 600;
  border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow);
  pointer-events: auto; white-space: nowrap; }
.cond-legend.show { display: block; }
.cl-head { background: var(--ink); color: var(--surface); font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 4px 8px; }
.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 7px 9px; }
.cl-item { display: flex; align-items: center; gap: 6px; }
.cl-lbl { font-size: 11px; font-weight: 600; white-space: nowrap; }
.cc-ico.cc-mini { width: 20px; height: 20px; border-width: 1.5px; box-shadow: 1.5px 1.5px 0 0 var(--ink); }
.cc-ico.cc-mini .material-symbols-outlined { font-size: 13px; }

/* timeline / slider — bawah kiri; flex:1 → panjangnya otomatis dibatasi legenda di kanan */
.timeline { flex: 1; min-width: 0; padding: 8px 14px; display: flex; align-items: center; gap: 14px; position: relative; }
.tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tl-cur { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 11px; }
.tl-cur .mono { font-weight: 700; }

/* label tanggal/jam di bawah slider */
.tl-ticks { position: relative; height: 18px; }
.tl-tick { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tl-tick.edge-start { transform: translateX(0); align-items: flex-start; }
.tl-tick.edge-end { transform: translateX(-100%); align-items: flex-end; }
.tl-tick-mark { width: 2px; height: 6px; background: var(--variant); }
.tl-tick.day .tl-tick-mark { height: 10px; background: var(--ink); }
.tl-tick-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--variant); margin-top: 2px; white-space: nowrap; }
.tl-tick.day .tl-tick-lbl { color: var(--ink); font-weight: 700; }
.tl-btns { display: flex; gap: 10px; }
.tl-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: var(--bw) solid var(--ink); background: var(--surface);
  box-shadow: 3px 3px 0 0 var(--ink); cursor: pointer; transition: all .1s ease;
}
.tl-btn .material-symbols-outlined { font-size: 20px; }
.tl-btn:hover:not(:disabled) { background: var(--lime); }
.tl-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.tl-btn:disabled { opacity: .45; cursor: not-allowed; }
.tl-track { flex: 1; }

/* Range input neubrutalist (kecil) */
#time-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: transparent; cursor: pointer; }
#time-slider::-webkit-slider-runnable-track { height: 6px; background: var(--surface-highest); border: 2px solid var(--ink); }
#time-slider::-moz-range-track { height: 6px; background: var(--surface-highest); border: 2px solid var(--ink); }
#time-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7px;
  background: var(--lime); border: 2px solid var(--ink); border-radius: 0;
}
#time-slider::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--lime); border: 2px solid var(--ink); border-radius: 0;
}

/* Legenda horizontal (bottom-right) */
.legend-panel { display: flex; align-items: stretch; border: var(--bw) solid var(--ink); box-shadow: var(--shadow); background: var(--surface); pointer-events: auto; }
.legend-head {
  display: flex; align-items: center; padding: 0 14px;
  background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; border-right: var(--bw) solid var(--ink);
}
.legend { display: flex; }
.legend-cell {
  width: 42px; min-height: 36px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  border-right: 1px solid rgba(28,27,27,.2);
}
.legend-cell:last-child { border-right: none; }
.legend-cell.dark { color: var(--surface); }
/* Sel legenda 0% tutupan awan. Kotak-kotak catur = konvensi umum untuk
   "transparan", jadi terbaca sebagai tak ada awan, bukan sebagai warna putih. */
.legend-cell.kotak-catur {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #c2c7cf 25%, transparent 25%, transparent 75%, #c2c7cf 75%),
    linear-gradient(45deg, #c2c7cf 25%, transparent 25%, transparent 75%, #c2c7cf 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
/* Legenda berlabel KATA (mis. Potensi Badai): sel melebar ikut isi, tak terpotong.
   Lebih spesifik dari override lebar-tetap di media query, jadi berlaku juga di HP. */
.legend-words .legend-cell { width: auto; min-width: 44px; padding: 0 11px; white-space: nowrap; }

/* Loading */
#loading {
  display: none;   /* default sembunyi — hanya tampil untuk pesan error */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2000; background: var(--surface); color: var(--ink);
  border: var(--bw) solid var(--ink); box-shadow: var(--shadow);
  padding: 20px 28px; font-family: var(--font-mono); font-size: 14px; max-width: 420px;
}

/* ===================== SKELETON LOADING (abu standar) ===================== */
#skeleton {
  position: absolute; inset: 0; z-index: 1500; background: #eef1f4;
  padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
  transition: opacity .45s ease; pointer-events: all;
}
#skeleton.hide { opacity: 0; pointer-events: none; }
.sk-top, .sk-bottom { display: flex; justify-content: space-between; align-items: flex-start; }
.sk-bottom { align-items: flex-end; }
.sk-col { display: flex; flex-direction: column; gap: 12px; }
.sk-right { align-items: flex-end; }

/* kartu abu (wadah) — meniru panel neubrutalist tanpa isi */
.sk-panel {
  display: flex; flex-direction: column; gap: 9px; width: 210px;
  padding: 12px; border-radius: 10px; background: #e2e6ea;
}
.sk-brand { flex-direction: row; align-items: center; gap: 11px; }
.sk-lines { display: flex; flex-direction: column; gap: 7px; flex: 1; }

/* bar shimmer — elemen "tulang" abu */
.sk-bar {
  position: relative; overflow: hidden; border-radius: 6px; background: #d2d8de;
}
.sk-bar::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: sk-shimmer 1.3s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }

.sk-logo { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.sk-line-lg { height: 12px; width: 72%; }
.sk-line-sm { height: 9px; width: 46%; }
.sk-layers .sk-bar { height: 26px; }
.sk-selects .sk-bar { height: 21px; }
.sk-mini { width: 46px; height: 46px; border-radius: 9px; }
.sk-slider { width: min(46vw, 520px); height: 70px; border-radius: 10px; }
.sk-legend { width: 210px; height: 74px; border-radius: 10px; }

.sk-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; pointer-events: none;
}
.sk-mark { animation: sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.09); opacity: 1; } }
.sk-load-text { color: #97a0aa; font-size: 12px; letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) {
  .sk-bar::after, .sk-mark { animation: none; }
}
.leaflet-control-attribution { font-family: var(--font-mono); font-size: 9px; }

/* ===================== POINT DETAIL ===================== */
#point-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--surface); border-left: var(--bw) solid var(--ink);
  display: flex; flex-direction: column; z-index: 1100;
  transform: translateX(101%); transition: transform .25s ease; pointer-events: auto;
}
#point-panel.open { transform: translateX(0); }
.pt-head { padding: 16px 18px; border-bottom: var(--bw) solid var(--ink); }
.pt-head-top { display: flex; justify-content: space-between; align-items: center; }
.pt-close {
  width: 34px; height: 34px; border: var(--bw) solid var(--ink); background: var(--surface);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pt-close:hover { background: var(--surface-high); }
.pt-coords { font-size: 20px; font-weight: 700; margin-top: 12px; letter-spacing: -.01em; }
.pt-coords.pt-addr { font-size: 16px; letter-spacing: 0; line-height: 1.25; }
.pt-body { flex: 1; overflow-y: auto; padding: 16px 18px; }

/* Scrollbar neubrutalist (panel titik, tabel, hasil cari): thumb blok kotak
   hitam dengan celah, track terang, siku, hover biru. */
.pt-body, .pt-table-wrap, .search-results, .about-card {
  scrollbar-width: auto; scrollbar-color: var(--ink) var(--surface-high);
}
.pt-body::-webkit-scrollbar,
.pt-table-wrap::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.about-card::-webkit-scrollbar { width: 14px; height: 14px; }
.pt-body::-webkit-scrollbar-track,
.pt-table-wrap::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track,
.about-card::-webkit-scrollbar-track { background: var(--surface-high); border-left: 2px solid var(--ink); }
.pt-body::-webkit-scrollbar-thumb,
.pt-table-wrap::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb,
.about-card::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--surface-high); }
.pt-body::-webkit-scrollbar-thumb:hover,
.pt-table-wrap::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover,
.about-card::-webkit-scrollbar-thumb:hover { background: var(--primary); }
.pt-loading { font-family: var(--font-mono); font-size: 13px; color: var(--variant); padding: 20px 0; }

/* Skeleton per-kontainer panel titik (meniru layout renderPoint). */
.pt-skel { display: flex; flex-direction: column; gap: 16px; }
.pt-skel .sk-bar { background: #e3e7ec; }
.pt-skel-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pt-skel-lines .sk-bar { height: 11px; }
.pt-skel-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-skel-chips .sk-bar { height: 26px; width: 108px; border-radius: 999px; }
.pt-skel-sec { align-self: flex-start; width: 44%; height: 10px; }
.pt-skel-cards { display: flex; gap: 8px; }
.pt-skel-cards .sk-bar { flex: 1; height: 92px; border-radius: 10px; }
.pt-skel-chart { height: 152px; border-radius: 10px; }
.pt-skel-rows { display: flex; flex-direction: column; gap: 6px; }
.pt-skel-rows .sk-bar { height: 16px; }
.pt-sec {
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; margin: 4px 0 10px; display: flex; justify-content: space-between;
}
.pt-sec span { color: var(--primary); font-family: var(--font-mono); }

/* ---- Kartu Skew-T (profil vertikal, lanjutan) ---- */
.pt-skewt-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 12px 0 0; padding: 10px 12px; cursor: pointer;
  border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm); background: var(--surface);
  color: var(--ink); font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; transition: background .12s;
}
.pt-skewt-head:hover:not(.open) { background: var(--surface-high); }
.pt-skewt-head .skt-lead { font-size: 19px; color: var(--primary); }
.pt-skewt-head .skt-label { flex: 1; text-align: left; }
/* Caret ikut arah aksi: tertutup = panah ATAS (klik → jump ke atas),
   terbuka = panah BAWAH (klik → tutup/turun). */
.pt-skewt-head .skt-caret { font-size: 20px; color: var(--primary); transition: transform .15s ease; transform: rotate(180deg); }
.pt-skewt-head.open { background: var(--lime); color: var(--on-lime); box-shadow: none; transform: translate(2px, 2px); }
.pt-skewt-head.open .skt-lead, .pt-skewt-head.open .skt-caret { color: var(--on-lime); }
.pt-skewt-head.open .skt-caret { transform: rotate(0deg); }
.pt-skewt-wrap { display: none; }
.pt-skewt-wrap.open { display: block; margin-top: 8px; }
.skt-note, .skt-load {
  font-size: 10px; color: var(--variant); font-family: var(--font-mono);
  line-height: 1.4; margin: 0 0 6px;
}
/* Skeleton loading kartu Skew-T (meniru bentuk plot + indeks) */
.skt-skel { gap: 8px; }
.skt-sk-note { height: 12px; width: 82%; }
.skt-sk-plot { height: 360px; border-radius: 0; border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); }
.skt-sk-exp { height: 30px; width: 128px; }
.skt-sk-idx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.skt-sk-idx .sk-bar { height: 40px; border-radius: 0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); }
.pt-skewt-wrap svg { border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); background: #fff; display: block; }
.skt-idx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.skt-cell {
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); background: var(--surface);
  padding: 5px 7px; display: flex; flex-direction: column; gap: 1px;
}
.skt-k { font-size: 9px; letter-spacing: .04em; color: var(--variant); font-family: var(--font-mono); }
.skt-v { font-size: 13px; font-weight: 700; font-family: var(--font-mono); }
.skt-legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
  margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--ink);
}
.skt-lg { display: flex; align-items: center; gap: 6px; font-size: 10px; font-family: var(--font-mono); color: var(--ink); }
.skt-lg svg { flex: none; }
.skt-exp-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.skt-export {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: var(--bw) solid var(--ink); background: var(--primary); color: #fff;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.skt-export:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--ink); }
.skt-export .material-symbols-outlined { font-size: 17px; }

/* Ringkasan bahasa manusia + saran aktivitas + kartu 3 hari (awam) */
.pt-summary { font-size: 13.5px; line-height: 1.55; padding: 11px 13px; margin-bottom: 11px;
  border: 2px solid var(--ink); background: var(--surface-low); }
.pt-summary b { font-weight: 700; }
.pt-summary .feels { color: #e8590c; font-weight: 700; white-space: nowrap; }
.pt-advice { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.adv-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  padding: 4px 8px; border: 2px solid var(--ink); background: var(--surface); box-shadow: 2px 2px 0 0 var(--ink); }
.adv-chip .material-symbols-outlined { font-size: 15px; }
.fc-cards { display: flex; gap: 8px; margin-bottom: 18px; }
.fc-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px; border: 2px solid var(--ink); background: var(--surface); }
.fc-day { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.15; }
.fc-day span { display: block; font-size: 9px; font-weight: 500; color: var(--variant); }
.fc-temp { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.fc-temp .ft-ico { font-size: 15px; color: #e8590c; margin-right: -1px; }
.fc-temp .t-max { color: #e8590c; }
.fc-temp .t-min { color: #2360c8; }
.fc-temp .t-min::before { content: "/"; color: var(--variant); font-weight: 500; margin: 0 1px; }
.fc-rain { font-size: 10px; color: #2360c8; font-weight: 700; }
.pt-meteo { display: block; margin-bottom: 4px; }
.chart-legend { display: flex; gap: 18px; justify-content: center; margin: 0 0 18px;
  font-size: 11px; font-weight: 600; color: var(--ink); }
.chl-key { display: inline-flex; align-items: center; gap: 5px; }
.chl-key i { font-style: italic; }
.pt-ax { font-family: var(--font-mono); font-size: 9px; fill: #444; }
.pt-table-wrap { max-height: 300px; overflow-y: auto; border: var(--bw) solid var(--ink); }
.pt-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.pt-table th {
  position: sticky; top: 0; background: var(--ink); color: var(--surface);
  padding: 6px 4px; text-align: left; font-weight: 500;
}
.pt-table td { padding: 4px; border-bottom: 1px solid rgba(28,27,27,.12); white-space: nowrap; }
.pt-table tbody tr:hover { background: var(--surface-high); }
.pt-foot { padding: 14px 18px; border-top: var(--bw) solid var(--ink); }
.pt-export {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: var(--bw) solid var(--ink); background: var(--primary); color: #fff;
  font-family: var(--font-ui); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm);
}
.pt-export:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--ink); }

/* Marker titik (belah ketupat) */
.pm-diamond {
  display: block; width: 13px; height: 13px; background: var(--primary);
  border: 2px solid #fff; transform: rotate(45deg); box-shadow: 0 0 0 1.5px var(--ink);
}
/* Badge freshness di timeline + toast "Link disalin". */
/* Badge "Last update" — mengambang di atas kontainer slider, rata kanan.
   Merah neubrutalist (border ink + hard-shadow), ikon tanda seru. Absolute →
   tak menambah tinggi panel timeline. */
.fresh-badge {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 10px 5px 8px; background: #e8342c; color: #fff;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .02em;
  pointer-events: auto;
}
.fresh-ico { font-size: 15px; line-height: 1; }
/* Akurasi model. Warna & bentuk mengikuti badge arsip, bedanya rata KIRI
   supaya sejajar dengan tepi kiri slider, bukan tepi kanan. */
.acc-badge { left: 0; right: auto; cursor: help; }
.acc-badge[hidden] { display: none; }
.acc-badge.acc-soon { opacity: .82; }
.fresh-chev { display: none; font-size: 15px; line-height: 1; }   /* kontrol tutup, HP saja */
.toast {
  position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
  background: var(--ink); color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  padding: 10px 16px; border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 2000;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Siklon: ikon berputar di pusat pusaran + banner catatan indikasi. */
.cyc-mark { display: grid; place-items: center; }
.cyc-spin { display: grid; place-items: center; animation: cyc-rot 3s linear infinite;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff); }
.cyc-spin .material-symbols-outlined { font-size: 32px; font-variation-settings: "FILL" 1, "wght" 600; }
@keyframes cyc-rot { to { transform: rotate(360deg); } }
/* Wadah dua banner (siklon + ITCZ): kolom flex mengambang tengah-atas. Karena
   in-flow, saat satu banner memuai (dropdown), yang lain terdorong turun. Gap
   cukup lebar agar tab dropdown (menjuntai ke bawah) tetap terlihat. */
.notes {
  position: absolute; top: 20px; right: 132px; left: auto; transform: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 20px;
  z-index: 1200; width: max-content; max-width: 460px; pointer-events: none;
}
.cyc-note {
  position: relative;
  display: none; flex-direction: column; max-width: 92vw; width: max-content;
  border: 2px solid var(--ink); box-shadow: var(--shadow-sm); background: var(--surface);
  pointer-events: auto;
}
.cyc-note.show { display: flex; }
.cyc-note-top {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  background: #e8342c; color: #fff;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; line-height: 1.2;
}
.cyc-note-top .material-symbols-outlined { font-size: 16px; flex: none; }
/* Tab putih menonjol di bawah-tengah kontainer. z-index -1 → muncul DARI DALAM
   banner (bagian atasnya ketutup kontainer), jadi batas putihnya mulus/tak terlihat. */
.cyc-tab {
  position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); z-index: -1;
  width: 38px; height: 17px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--ink); border-top: none;
  cursor: pointer; padding: 0;
}
.cyc-caret { position: relative; top: 2px; font-size: 18px; line-height: 1; color: #d61f1f; transition: transform .15s ease; }
.cyc-note.open .cyc-caret { transform: rotate(180deg); }
/* panel putih detail: swatch warna + nama + threshold tiap tingkat */
.cyc-detail { display: none; flex-direction: column; gap: 7px; padding: 9px 10px;
  background: var(--surface); color: var(--ink); }
.cyc-note.open .cyc-detail { display: flex; }
.cyc-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 10px; white-space: nowrap; }
.cyc-ic { font-size: 18px; flex: none; line-height: 1; font-variation-settings: "FILL" 1, "wght" 600; }
.cyc-row b { font-weight: 700; }
.cyc-th { color: var(--variant); margin-left: auto; padding-left: 14px; }
@media (prefers-reduced-motion: reduce) { .cyc-spin { animation: none; } }

/* ITCZ: banner magenta (kontras, dibedakan dari siklon merah); posisi diatur .notes. */
.itcz-note .cyc-note-top { background: #c1116e; }
.itcz-note .cyc-caret { color: #c1116e; }
.itcz-lead { font-family: var(--font-ui); font-size: 10px; line-height: 1.4;
  max-width: 240px; color: var(--ink); }
.itcz-sw { width: 18px; height: 12px; flex: none; border: 1px solid var(--ink); }
.itcz-sw-line { height: 0; border: none; border-top: 3px dashed #ff2ea6; }
.itcz-sw-band { background: rgba(255,46,166,.28); }

/* Panel FENOMENA: popover ke kiri tombol Fenomena; daftar fenomena + status dot
   (hijau neon = sedang terjadi, merah = belum). Baris tak-aktif diredupkan.
   Arus monsun digambar leaflet-velocity. */
.phenom-wrap { position: relative; pointer-events: auto; }
.phenom-panel {
  position: absolute; top: 0; right: 52px; display: none; z-index: 600;
  width: max-content; max-width: 300px;
  border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow);
}
.phenom-panel.show { display: block; }
.ph-head { background: var(--ink); color: var(--surface); font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 5px 10px; }
.ph-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px;
  border-top: 1px solid rgba(28,27,27,.12); }
.ph-row:first-of-type { border-top: none; }
.ph-row.ph-off { opacity: .5; }               /* belum terjadi → redup */
.ph-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; margin-top: 2px;
  border: 1.5px solid var(--ink); }
.ph-dot.on { background: #39ff14; box-shadow: 0 0 6px 1px #39ff14; }   /* hijau neon = aktif */
.ph-dot.off { background: #ff2d2d; box-shadow: 0 0 5px 1px #ff2d2d; }  /* merah menyala = belum */
.ph-txt { display: flex; flex-direction: column; gap: 1px; }
.ph-txt b { font-family: var(--font-ui); font-size: 11px; font-weight: 700; }
.ph-txt span { font-family: var(--font-ui); font-size: 10px; color: var(--variant); max-width: 234px; }

/* Penanda pusat tekanan Tinggi (H, biru) / Rendah (L, merah) di layer Tekanan.
   Halo putih agar terbaca di atas heatmap warna. Huruf serif gaya peta cuaca. */
.hl-wrap { background: none; border: none; }
.hl-mark {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 24px;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff;
}
.hl-mark b { font-family: var(--font-mono); font-size: 10px; font-weight: 700; margin-top: 1px; }
.hl-h { color: #1f4fd6; }
.hl-l { color: #e03131; }

/* Baris potensi badai (CAPE) di panel titik: chip kategori + catatan angka. */
.pt-storm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pt-storm-note { font-family: var(--font-ui); font-size: 10px; color: var(--variant); }

/* Layar penuh / immersive: sisakan HANYA brand Atmosight + tombol fullscreen.
   Class di #stage (induk #ui & overlay sibling spt #cyc-note/#toast). */
#stage.immersive #ui .col > *:not(.brand):not(.brand-row):not(#fs-btn),
#stage.immersive .ui-bottom,
#stage.immersive .notes,
#stage.immersive #toast,
#stage.immersive #point-panel,
#stage.immersive #pt-reopen { display: none !important; }
/* HP: tombol fullscreen normalnya tersembunyi dalam dropdown; di immersive
   paksa tampil agar bisa keluar layar penuh. */
#stage.immersive #fs-btn { display: flex !important; }

/* Tombol info kecil di brand → buka kartu Tentang */
.brand-info { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink);
  cursor: pointer; pointer-events: auto; margin-left: 2px; }
.brand-info { text-decoration: none; }   /* dia <a> sekarang, bukan <button> */
.brand-info:hover { background: var(--lime); }
.brand-info .material-symbols-outlined { font-size: 17px; color: var(--primary); }
.brand-info:hover .material-symbols-outlined { color: var(--on-lime); }

/* ---- Pindah antar-app (Atmosight <-> Fenomena): panah di brand buka kontainer saudara ---- */
/* position:relative jadi jangkar kartu saudara yang MENGAMBANG di sebelahnya.
   Kartu itu TIDAK boleh ikut mengalir, kalau ikut, membukanya menambah tinggi
   brand-row dan panel Parameter di bawahnya terdorong turun. */
.brand-row { position: relative; display: flex; align-items: flex-start; gap: 10px; }
.nav-arrow { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink);
  cursor: pointer; pointer-events: auto; margin-left: 2px; }
.nav-arrow:hover { background: var(--lime); }
.nav-arrow .material-symbols-outlined { font-size: 18px; color: var(--primary); transition: transform .25s ease; }
.nav-arrow:hover .material-symbols-outlined { color: var(--on-lime); }
.brand-row.nav-open .nav-arrow .material-symbols-outlined { transform: rotate(180deg); }
/* Kartu app saudara: tersembunyi -> geser muncul ke KANAN saat panah ditekan.
   Saat tutup border transparan & lebar 0 supaya tak ada sisa.
   max-height WAJIB ikut 0. Tanpa itu kartu yang tertutup tetap memakan tinggi
   (54px per kartu), brand-row jadi 108px bukan 62px, dan panel Parameter di
   bawahnya ikut terdorong turun 46px. */
/* Dua kartu saudara bertumpuk ke bawah, bukan berjajar, supaya tak
   mendorong lebar brand-row di layar sempit. */
/* Jarak antar kartu baru muncul saat panelnya terbuka. Kalau gap dipasang
   permanen, dua kartu selebar 0 tetap menyisakan celah di brand-row. */
.sibling-links { position: absolute; top: 0; left: 100%; margin-left: 10px;
  display: flex; flex-direction: column; gap: 0; z-index: 700; }
.brand-row.nav-open .sibling-links { gap: 8px; }
.sibling-link { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink);
  border: var(--bw) solid transparent; background: var(--surface); box-shadow: none;
  max-width: 0; max-height: 0; padding: 0; opacity: 0; overflow: hidden; white-space: nowrap; pointer-events: none;
  transition: max-width .3s ease, max-height .3s ease, opacity .25s ease, padding .3s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease; }
.brand-row.nav-open .sibling-link { max-width: 300px; max-height: 120px; opacity: 1; padding: 9px 13px; pointer-events: auto;
  border-color: var(--ink); box-shadow: var(--shadow); }
.sibling-link:hover { background: var(--lime); transform: translate(2px, -2px); box-shadow: -6px 6px 0 0 var(--ink); }
.sibling-link .pl-ico { flex: none; color: var(--primary); font-size: 26px; }
.sibling-link:hover .pl-ico { color: var(--on-lime); }
.sibling-link .pl-txt { display: flex; flex-direction: column; line-height: 1.1; }
.sibling-link .pl-txt strong { font-family: var(--font-display); font-size: 14px; letter-spacing: -.01em; }
.sibling-link .pl-txt span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .03em; color: var(--variant); margin-top: 4px; }
.sibling-link:hover .pl-txt span { color: var(--on-lime); }
.sibling-link .pl-go { flex: none; font-size: 18px; color: var(--variant); }
.sibling-link:hover .pl-go { color: var(--on-lime); }

/* Kartu Tentang (modal) */
.about-overlay { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(28, 27, 27, .5); pointer-events: auto; }
.about-overlay.show { display: flex; }
.about-card { position: relative; display: flex; width: 100%; max-width: 600px;
  background: var(--surface); border: var(--bw) solid var(--ink); box-shadow: var(--shadow); }
.about-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; background: var(--surface);
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); cursor: pointer; }
.about-close .material-symbols-outlined { font-size: 18px; }
.about-photo { flex: 0 0 42%; background: var(--lime); border-right: var(--bw) solid var(--ink);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.about-photo img { width: 100%; height: auto; display: block; }
.about-body { flex: 1; min-width: 0; padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.about-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; background: var(--lime); color: var(--on-lime); border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink); padding: 3px 8px; }
.about-name { font-family: var(--font-display); font-size: 26px; letter-spacing: -.01em; line-height: 1; }
.about-intro { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--ink); }
.about-quote { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink);
  background: var(--lime); border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); padding: 9px 11px; margin-top: 2px; }
@media (max-width: 560px) {
  .about-card { flex-direction: column; max-width: 320px; max-height: 88vh; overflow-y: auto; }
  .about-photo { flex: none; border-right: none; border-bottom: var(--bw) solid var(--ink); }
  .about-body { padding: 16px; }
  .about-name { font-size: 22px; }
}

/* ===== Kartu Tim Envirocircle ===== */
/* Satu-satunya kartu Tentang. Framing personal sudah dibuang, yang tampil tim. */
#about-card-team { display: flex; }
.about-card--team { flex-direction: column; max-width: 588px; padding: 22px 38px 26px; gap: 18px; }
.tm-head { display: flex; flex-direction: column; gap: 10px; }

/* Komposisi 'Pemateri' (referensipose): tengah besar & tegak menonjol, dua
   samping lebih kecil & miring menyelip di belakang. Tiap foto punya backing
   lime solid (bayangan keras khas neubrutalist). */
.tm-row { display: flex; align-items: flex-end; justify-content: center; gap: 0;
  padding-top: 28px; }
.tm { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; margin: 0; }
.tm-photo { border: var(--bw) solid var(--ink); background: var(--paper);
  overflow: hidden; aspect-ratio: 4 / 5; }
.tm-photo img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.03); }
.tm-name { font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: .01em; text-align: center; color: var(--ink); background: var(--lime);
  border: var(--bw) solid var(--ink); border-top: none; padding: 6px 4px; line-height: 1.15;
  min-height: 2.7em; display: flex; align-items: center; justify-content: center; }

/* samping: kecil, miring, menyelip ke belakang tengah */
.tm--side { flex: 0.9 1 0; z-index: 1; }
.tm--side .tm-photo { box-shadow: 5px 5px 0 0 var(--lime); }
.tm--left  { transform: rotate(-6deg); transform-origin: bottom center; margin-right: -14px; }
.tm--right { transform: rotate(6deg);  transform-origin: bottom center; margin-left: -14px; }

/* tengah: paling besar, tegak, terangkat, di depan, backing lebih tebal */
.tm--lead { flex: 1.3 1 0; z-index: 3; transform: translateY(-16px); }
.tm--lead .tm-photo { box-shadow: 8px 8px 0 0 var(--lime); }
.tm--lead .tm-name { font-size: 11px; }

@media (max-width: 560px) {
  .about-card--team { max-width: 360px; max-height: 90vh; overflow-y: auto; padding: 16px 26px 22px; gap: 14px; }
  .tm-row { padding-top: 22px; }
  .tm-name { font-size: 8.5px; padding: 5px 2px; min-height: 3em; }
  .tm--lead .tm-name { font-size: 9.5px; }
  .tm--left  { transform: rotate(-5deg); margin-right: -10px; }
  .tm--right { transform: rotate(5deg);  margin-left: -10px; }
  .tm--lead { transform: translateY(-11px); }
  .tm--side .tm-photo { box-shadow: 4px 4px 0 0 var(--lime); }
  .tm--lead .tm-photo { box-shadow: 6px 6px 0 0 var(--lime); }
}

/* Penanda "kamu di sini" (geolokasi) — badge bulat neubrutalist. */
.pm-me {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: var(--primary); color: #fff;
  border: 2.5px solid var(--ink); border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.pm-me .material-symbols-outlined { font-size: 20px; line-height: 1; }

/* Point panel: hide/reopen */
.pt-head-btns { display: flex; gap: 8px; }
#point-panel.hidden { transform: translateX(101%); }
#pt-reopen {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 30px; height: 56px; border: var(--bw) solid var(--ink); border-right: none;
  background: var(--primary); color: #fff; cursor: pointer; z-index: 1100;
  display: none; align-items: center; justify-content: center;
}
#pt-reopen.show { display: flex; }

/* ===================== SEARCH KOTA/KABUPATEN ===================== */
.search-wrap { position: relative; pointer-events: auto; }
.search-box {
  position: absolute; top: 0; right: 52px; width: 262px;
  border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow);
  display: none;
}
.search-box.open { display: block; }
.search-box input {
  width: 100%; border: none; border-bottom: var(--bw) solid var(--ink);
  padding: 12px 14px; font-family: var(--font-ui); font-size: 14px; outline: none;
  background: var(--surface); color: var(--ink);
}
.search-results { max-height: 320px; overflow-y: auto; }
.search-item {
  padding: 9px 14px; font-size: 13px; cursor: pointer; border-bottom: 1px solid rgba(28,27,27,.12);
}
.search-item:hover { background: var(--lime); }
.search-empty { padding: 12px 14px; font-size: 13px; color: var(--variant); }

/* =====================================================================
   RESPONSIF — tablet & smartphone (overlay mengambang di atas peta)
   ===================================================================== */

/* ---- TABLET (≤1024px): kecilkan panel, legenda bisa di-scroll ---- */
@media (max-width: 1024px) {
  #ui { padding: 14px; }
  /* padding #ui menyusut jadi 14px, tab ikut dikecilkan biar tak terpotong tepi layar */
  .panel-toggle { left: -13px; width: 13px; }
  .panel-toggle .material-symbols-outlined { font-size: 15px; margin-left: -4px; }
  .layers, .selects { width: 200px; }
  .layer-btn { padding: 10px 14px; font-size: 14px; }
  .brand-text strong { font-size: 18px; }
  .legend-col { max-width: 58vw; }
  .legend-panel { min-width: 0; }
  .legend { overflow-x: auto; min-width: 0; }
  .legend-cell { width: 36px; }
}

/* ---- SMARTPHONE (≤640px): layout vertikal ---- */
@media (max-width: 640px) {
  /* Di HP tak cukup ruang di kanan brand. Kartu saudara pindah ke BAWAH,
     tetap mengambang jadi panel Parameter tak ikut terdorong. */
  .sibling-links { left: 0; top: 100%; margin-left: 0; margin-top: 8px; }
  #ui { padding: 10px; }
  .ui-top { gap: 8px; align-items: flex-start; }
  /* kolom: anak-anaknya rapat ke kiri (jangan meregang mengikuti banner siklon) */
  .col { align-items: flex-start; }

  /* brand ringkas (tagline disembunyikan) */
  .brand { padding: 7px 10px; gap: 8px; }
  .brand-logo { width: 30px; height: 30px; }
  .brand-text strong { font-size: 15px; }
  .brand-text span { display: none; }

  /* sembunyikan elemen dekoratif + zoom (pinch/dobel-tap jalan di peta) */
  .selects, .lang, .zoom { display: none; }

  /* ===== Kontrol kanan → dropdown VERTIKAL, awalnya ciut jadi 1 tombol ===== */
  .col.items-end { flex-direction: column; gap: 8px; align-items: flex-end; }
  #ctrl-toggle {
    display: flex; align-items: center; justify-content: center; gap: 1px;
    height: 40px; padding: 0 8px;
    border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm);
    cursor: pointer; pointer-events: auto;
  }
  #ctrl-toggle .material-symbols-outlined { font-size: 20px; }
  .ctrl-caret { transition: transform .15s ease; }
  .col.items-end.ctrl-open .ctrl-caret { transform: rotate(180deg); }
  .icon-btn { width: 40px; height: 40px; box-shadow: var(--shadow-sm); }
  /* ciut: sembunyikan tombol kontrol; tampil saat .ctrl-open */
  .col.items-end > .icon-btn,
  .col.items-end > .search-wrap,
  .col.items-end > .city-wrap,
  .col.items-end > .phenom-wrap { display: none; }
  .col.items-end.ctrl-open > .icon-btn { display: flex; }
  .col.items-end.ctrl-open > .search-wrap,
  .col.items-end.ctrl-open > .city-wrap,
  .col.items-end.ctrl-open > .phenom-wrap { display: block; }
  .phenom-panel { right: 46px; }

  /* ===== Notif siklon + ITCZ → mengalir tepat di bawah brand (bukan mengambang) ===== */
  .notes {
    position: static; top: auto; left: auto; transform: none;
    align-items: flex-start; gap: 6px; max-width: calc(100vw - 96px);
    margin: 2px 0 6px;
  }
  .cyc-note {
    align-self: flex-start; width: max-content; max-width: calc(100vw - 96px);
  }
  .cyc-note-top { white-space: normal; }   /* boleh membungkus kalau sempit */

  /* ===== Variabel → dropdown "Parameter" VERTIKAL, ikon saja (kiri) ===== */
  .panel-toggle { display: none; }

  .layer-bar {
    position: static; left: auto; right: auto; top: auto;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    border: none; box-shadow: none; background: none;
  }
  .param-toggle {
    display: flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 12px 0 10px;
    border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm);
    font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .02em;
    text-transform: uppercase; color: var(--ink); cursor: pointer; pointer-events: auto;
  }
  .param-ico { font-size: 19px; color: var(--primary); }
  .param-caret { font-size: 20px; transition: transform .15s ease; }
  .layer-bar.param-open .param-caret { transform: rotate(180deg); }
  .layer-nav { display: none; }   /* buang panah carousel lama */
  .layers {
    display: none; position: static; flex-direction: column; width: auto;
    overflow: visible; box-shadow: var(--shadow-sm);
  }
  .layer-bar.param-open .layers { display: flex; }
  .layer-btn {
    flex: 0 0 auto; justify-content: center; width: 48px; gap: 0;
    padding: 10px; border-right: none; border-bottom: var(--bw) solid var(--ink);
  }
  .layer-btn:last-child { border-bottom: none; }
  .layer-btn .material-symbols-outlined { font-size: 22px; }
  .lb-txt { display: none; }   /* HP: ikon saja */

  /* ===== Pemilih LEVEL: di bawah Parameter, buka-tutup sama (caret) ===== */
  .level-bar {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    border: none; box-shadow: none; background: none;
  }
  .level-bar.level-open .param-caret { transform: rotate(180deg); }
  .levels { box-shadow: var(--shadow-sm); }
  .level-bar.level-open .levels { display: flex; }

  /* bawah: legenda (atas, bisa scroll) + slider full-width (bawah) */
  .ui-bottom { flex-direction: column; align-items: stretch; gap: 8px; }
  /* legend-col jadi kolom: [badge] [tabel kondisi] [legenda warna], rata kanan */
  .legend-col {
    order: 1; align-self: stretch; max-width: none;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  }
  .timeline { order: 2; padding: 8px 10px; }
  /* legenda warna: selebar isinya (rata kanan), tak melar penuh. Kalau isinya
     panjang (mis. KNOTS) dibatasi 100% lalu bisa di-scroll. */
  .legend-panel { min-width: 0; align-self: flex-end; max-width: 100%; }
  .legend { overflow-x: auto; min-width: 0; }
  .legend-cell { width: 34px; min-height: 30px; font-size: 12px; }

  /* Tabel kondisi cuaca → 1 BARIS ringkas (ikon + label kecil), boleh scroll.
     In-flow di legend-col, jadi badge di atasnya otomatis ikut naik. */
  /* Keterangan kondisi = popover ke kiri tombol (dalam dropdown kontrol). */
  .cond-legend { right: 46px; }
  .cc-ico.cc-mini { width: 15px; height: 15px; border-width: 1px; box-shadow: 1px 1px 0 0 var(--ink); }
  .cc-ico.cc-mini .material-symbols-outlined { font-size: 10px; }

  /* Badge "Last update" di HP: DI ATAS legenda (in-flow di legend-col). Awalnya
     cukup ikon "!" (hemat ruang). Tap → tampil teks + panah; tap lagi → ciut. */
  .fresh-badge { position: static; align-self: flex-end; cursor: pointer; gap: 0; padding: 6px 7px; }
  .fresh-badge #fresh-text { display: none; }
  .fresh-badge.open { gap: 6px; padding: 5px 6px 5px 8px; }
  .fresh-badge.open #fresh-text { display: inline; }
  .fresh-badge.open .fresh-chev { display: inline; }
  .acc-badge { position: static; align-self: flex-start; padding: 5px 8px; }

  /* panel detail titik = full-screen */
  #point-panel { width: 100vw; max-width: 100vw; border-left: none; }
  #pt-reopen { top: auto; bottom: 128px; transform: none; }

  /* kotak pencarian = full-width di bawah bar atas */
  .search-box { position: fixed; top: 112px; left: 10px; right: 10px; width: auto; }
}

/* ---- Pos hujan (model WRF) ----
   Kotak siku dengan garis ink tebal & hard-shadow, konsisten neubrutalist.
   Warnanya lime supaya beda tegas dari ikon kondisi kota yang putih/abu. */
.pos-mark {
  display: grid; place-items: center; width: 18px; height: 18px;
  background: var(--lime); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink);
}
.pos-mark .material-symbols-outlined {
  font-size: 12px; line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 700;
}
.leaflet-tooltip.pos-tip {
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink);
  border-radius: 0; font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  padding: 6px 8px;
}
.leaflet-tooltip.pos-tip::before { display: none; }

/* ---- Gerbang sandi model WRF (neubrutalist, senada kartu Tentang) ---- */
.pw-card {
  position: relative; width: 100%; max-width: 360px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: var(--surface); border: var(--bw) solid var(--ink); box-shadow: var(--shadow);
}
.pw-title { font-family: var(--font-display); font-size: 20px; margin: 2px 0 0; }
.pw-note { font-family: var(--font-ui); font-size: 13px; color: var(--variant); margin: 0; }
.pw-input {
  width: 100%; padding: 10px 12px; font-family: var(--font-mono); font-size: 14px;
  color: var(--ink); background: var(--surface-high);
  border: 2px solid var(--ink); border-radius: 0; outline: none;
}
.pw-input:focus { box-shadow: 3px 3px 0 0 var(--ink); }
.pw-err { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #e8342c; }
.pw-err[hidden] { display: none; }
.pw-act { display: flex; gap: 8px; align-self: stretch; justify-content: flex-end; margin-top: 4px; }
.pw-btn {
  padding: 8px 14px; font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); cursor: pointer;
}
.pw-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--ink); }
.pw-btn-primary { background: var(--lime); color: var(--on-lime); }

/* ==================================================================
   TATA LETAK HP (<=640px)
   Semua kontrol pindah ke satu bilah bawah yang tersembunyi di luar
   bingkai. Peta jadi bersih: cuma chip nama parameter di atas, legenda
   tegak di kiri, dan tumpukan keterangan di kiri bawah.
   Di desktop SELURUH blok ini tidak berlaku.
   ================================================================== */

/* Default: semua elemen HP disembunyikan, supaya desktop tak tersentuh. */
.lowbar, .lowbar-handle, .par-chip, .ket-stack { display: none; }

@media (max-width: 640px) {

  /* ---- gagang penarik, satu-satunya kontrol yang terlihat saat ciut ---- */
  .lowbar-handle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
    z-index: 1400; width: 76px; height: 30px; padding: 0;
    background: var(--surface); color: var(--ink);
    border: var(--bw) solid var(--ink); border-bottom: none;
    box-shadow: 0 -3px 0 0 var(--ink); cursor: pointer;
  }
  .lowbar-handle .material-symbols-outlined { font-size: 22px; }
  .lowbar-handle.open { opacity: 0; pointer-events: none; }

  /* ---- bilah bawah ---- */
  .lowbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1390;
    max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* Saat terbuka, bilah MENGISI tepat ruang sisa di bawah peta 4:3. Kalau
       cuma dipatok di bawah, isinya yang pendek menyisakan celah hitam. */
    padding: 10px 12px 16px;
    background: var(--surface); border-top: var(--bw) solid var(--ink);
    /* Ciut = digeser penuh ke bawah luar bingkai. Muncul dengan naik + memudar. */
    transform: translateY(100%); opacity: 0; pointer-events: none;
    transition: transform .26s ease, opacity .2s ease;
  }
  .lowbar.open {
    transform: translateY(0); opacity: 1; pointer-events: auto;
    /* Tinggi DIPATOK, bukan diregangkan top+bottom, sama alasannya dengan
       legenda: peregangan tak berlaku dan menyisakan celah hitam di atas. */
    top: 75vw; bottom: auto; height: calc(100dvh - 75vw); max-height: none;
  }
  .lowbar-grip {
    width: 44px; height: 4px; margin: 0 auto 10px;
    background: var(--ink); opacity: .35;
  }

  .lb-sec + .lb-sec { margin-top: 14px; }
  .lb-head {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .12em; color: var(--variant); margin-bottom: 4px;
  }
  /* Garis pemisah tipis di bawah judul seksi, meniru contoh user. */
  .lb-rule { height: 2px; background: var(--ink); opacity: .18; margin-bottom: 8px; }
  /* TIGA per baris, sisanya turun ke bawah. Parameter ada 9 jadi pas 3 baris,
     dan Penanda maupun Fenomena yang isinya 3 jadi satu baris penuh. */
  /* minmax(0,1fr), BUKAN 1fr. Kolom 1fr punya min-width:auto sehingga tak mau
     menyusut di bawah lebar teksnya, dan label panjang seperti "Daya tampung
     PM2,5" membuat seluruh grid meluber keluar layar. */
  .lb-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lb-btn {
    display: flex; align-items: center; justify-content: flex-start; gap: 5px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 7px 8px; font-family: var(--font-ui); font-size: 11px; font-weight: 700;
    color: var(--ink); background: var(--surface-high);
    border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); cursor: pointer;
  }
  .lb-btn .material-symbols-outlined { font-size: 15px; flex: 0 0 auto; }
  .lb-btn.active { background: var(--lime); color: var(--on-lime); }
  .lb-btn.disabled { opacity: .38; pointer-events: none; box-shadow: none; }
  .lb-btn:active { transform: translate(2px, 2px); box-shadow: none; }

  /* ---- peta didorong & dijadikan 4:3 landscape saat bilah naik ---- */
  #stage.lowbar-open #map {
    height: 75vw;               /* lebar : tinggi = 4 : 3 */
    transition: height .26s ease;
  }
  /* Bilah terbuka: legenda mengecil dan tingginya menyesuaikan peta 4:3. */
  #stage.lowbar-open .legend-panel {
    top: 104px; bottom: auto; height: calc(75vw - 112px); max-height: none;
  }
  #stage.lowbar-open .acc-badge { bottom: auto; top: calc(75vw - 30px); }
  /* Chip parameter & tumpukan keterangan juga menempel ke area peta. */
  #stage.lowbar-open .ket-stack { bottom: auto; top: calc(75vw - 92px); }
  /* Slider disembunyikan selama bilah terbuka. Tak ada ruang, dan kalau
     dibiarkan ia tembus menimpa tombol. Muncul lagi begitu bilah ditutup.
     Yang disembunyikan HANYA .timeline, bukan .ui-bottom, karena legenda
     ternyata anak .ui-bottom juga dan ikut hilang kalau induknya dimatikan. */
  #stage.lowbar-open .timeline { opacity: 0; pointer-events: none; }
  .timeline { transition: opacity .2s ease; }
  #stage #map { transition: height .26s ease; }

  /* ---- kontrol lama disembunyikan, sudah diwakili bilah bawah ---- */
  .layer-bar, .level-bar, .panel.selects,
  #ctrl-toggle, .lang, .zoom, .city-wrap, #cyclone-toggle, #itcz-toggle,
  .phenom-wrap, #share-btn, #fs-btn, .search-wrap,
  /* Kontainer khas dua app lain: Daya Dukung (Emisi) dan Indeks Iklim
     (Fenomena). Isinya sudah pindah jadi seksi di bilah bawah. */
  .panel.daya-dukung, .index-bar, .index-menu, #zones-btn,
  #model-toggle, #depth-toggle { display: none !important; }
  /* Lokasi TETAP di panel kanan, permintaan user. */
  #geo-btn { display: flex !important; }

  /* ---- chip parameter: TEPAT DI ATAS legenda tegak, bukan tengah layar ---- */
  .par-chip {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; left: 8px; top: 68px; transform: none;
    z-index: 1200; padding: 6px 10px; white-space: nowrap; max-width: 60vw;
    overflow: hidden; text-overflow: ellipsis;
    background: var(--surface); color: var(--ink);
    border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink);
    font-family: var(--font-display); font-size: 12px;
  }
  .par-chip[hidden] { display: none; }
  .par-chip .material-symbols-outlined { font-size: 16px; }

  /* ---- legenda TEGAK di kiri, TINGGI ----
     Layar HP itu potret, jadi ruang tegaknya banyak. Legenda direntang dari
     bawah chip parameter sampai tepat di atas badge akurasi, dan tiap selnya
     MELAR mengisi sisa ruang, bukan dipatok tinggi tetap. Kalau dipatok, di
     layar tinggi ia jadi bantat menggantung di tengah. */
  .legend-panel {
    /* Tinggi DIPATOK, bukan diregangkan lewat top + bottom. Peregangan itu
       tak berlaku di sini karena panel ini flex-container yang tingginya
       terlanjur ditentukan isinya, hasilnya jadi bantat menggantung.
       dvh dipakai supaya ikut menyusut saat bilah alamat HP muncul. */
    position: fixed; left: 8px; top: 108px; bottom: auto;
    /* 108 di atas untuk chip, 156 di bawah untuk badge akurasi + slider. */
    height: calc(100dvh - 264px);
    z-index: 1150; width: auto; max-width: 72px;
    display: flex; flex-direction: column-reverse;   /* sel pertama = paling bawah */
    overflow: hidden; padding: 0;
  }
  .legend-panel .legend {
    display: flex; flex-direction: column-reverse;
    flex: 1 1 auto; min-height: 0; overflow: hidden;
  }
  .legend-panel .legend-cell {
    width: 100%; min-width: 44px; min-height: 18px; height: auto;
    flex: 1 1 0;                 /* melar rata mengisi tinggi yang tersedia */
    border-right: none; border-bottom: 1px solid rgba(28,27,27,.2);
    font-size: 11px;
    /* Label kata seperti "Sangat Tidak Sehat" harus MEMBUNGKUS, bukan
       terpotong. Dengan lebar sel yang sempit ia jatuh sendiri jadi tiga
       baris, dan "Tidak Sehat" jadi dua baris. Rata tengah supaya rapi. */
    white-space: normal; text-align: center; line-height: 1.15;
    padding: 2px 3px; overflow-wrap: normal; word-break: keep-all; hyphens: none;
  }
  /* Legenda berlabel KATA (ISPU) sedikit lebih lebar, supaya "Berbahaya"
     muat utuh satu baris. Pemenggalan barisnya sendiri sudah diatur <br>
     di LEGENDS.ispu, bukan mengandalkan pembungkusan otomatis. */
  .legend-panel .legend-words .legend-cell { font-size: 10px; letter-spacing: -.01em; }
  .legend-panel .legend-cell:last-child { border-bottom: none; }
  .legend-head {
    order: 99;                    /* dengan column-reverse, ini jatuh ke BAWAH */
    flex: 0 0 auto;
    padding: 5px 6px; text-align: center; font-size: 9px;
    border-right: none; border-top: var(--bw) solid var(--ink);
  }

  /* ---- badge akurasi: DI ATAS slider, bukan menempel di dalamnya ---- */
  /* Slider setinggi ~70px, jadi 120 dari bawah menaruh badge tepat DI ATASNYA
     dengan sedikit jarak, bukan menempel di dalamnya seperti di desktop. */
  .acc-badge {
    position: fixed; left: 8px; right: auto; bottom: 120px; top: auto;
    z-index: 1160;
  }

  /* ---- tumpukan keterangan, kiri bawah, bisa diciutkan ke samping ---- */
  .ket-stack {
    display: flex; align-items: flex-end;
    position: fixed; left: 0; bottom: 42px; z-index: 1250;
    max-width: 78vw;
    transition: transform .24s ease;
  }
  .ket-stack[hidden] { display: none; }
  .ket-stack.ciut { transform: translateX(calc(-100% + 26px)); }
  .ket-body {
    max-height: 40vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px; background: var(--surface);
    border: var(--bw) solid var(--ink); border-left: none;
    box-shadow: 3px 3px 0 0 var(--ink);
  }
  .ket-toggle {
    flex: 0 0 auto; width: 26px; height: 46px; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--lime); color: var(--on-lime);
    border: var(--bw) solid var(--ink); border-left: none;
    box-shadow: 3px 3px 0 0 var(--ink);
  }
  .ket-toggle .material-symbols-outlined { font-size: 20px; transition: transform .2s ease; }
  .ket-stack.ciut .ket-toggle .material-symbols-outlined { transform: rotate(180deg); }
  .ket-item { font-family: var(--font-ui); font-size: 11px; line-height: 1.35; }
  .ket-item b { font-family: var(--font-display); font-size: 11px; }
  .ket-judul {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
    color: var(--variant); margin-bottom: 2px;
  }

  /* Slider tetap di bawah tapi diberi ruang untuk gagang bilah. */
  .ui-bottom { padding-bottom: 34px; }
  /* Legenda lama di baris bawah tak dipakai lagi, sudah pindah ke kiri tegak. */
  .legend-col { display: block; }
}

@media (max-width: 640px) {
  /* Elemen keterangan yang DIPINDAH ke tumpukan kiri bawah: posisi absolut
     bawaannya dimatikan supaya ikut mengalir di dalam tumpukan. */
  .di-ket {
    position: static !important; inset: auto !important;
    transform: none !important; margin: 0 !important;
    max-width: 100% !important; width: auto !important;
    box-shadow: none !important; border: none !important;
    background: transparent !important; padding: 0 !important;
    display: block !important; opacity: 1 !important;
  }
  .di-ket .cyc-tab, .di-ket .itcz-tab { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   YANG MENETAP CUMA LAMBANG DAN NAMANYA, KONTAINERNYA MUNCUL SAAT DISENTUH
   ---------------------------------------------------------------------------
   Berlaku untuk kontrol kanan DAN daftar parameter di kiri.

   Yang MENETAP  kotak kecil pembungkus lambang, lengkap garis tebal dan
                 bayangan kerasnya, plus namanya sebagai teks polos
   Yang MUNCUL   kontainer penaung nama, SATU PER SATU sesuai yang disentuh

   Penting: di panel kiri kontainernya muncul PER PARAMETER, bukan sepapan
   penuh sekaligus. Papan putih .panel.layers memang dilepas seterusnya, dan
   tiap baris berdiri sendiri sebagai kepingan.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (min-width: 641px) {

  /* ───────────────────────── KONTROL KANAN ───────────────────────── */
  /* Kotak lambangnya TIDAK diubah sama sekali. Yang berubah cuma namanya:
     dari tooltip yang muncul saat hover, jadi teks polos yang selalu tampil,
     lalu berubah jadi kontainer gelap saat disentuh.

     Dipakai `::after` yang sudah ada, bukan elemen baru, sebab satu elemen
     cuma punya satu ::after dan aturan tooltip lama sudah menempati slot itu. */
  .col.items-end [data-tip]::after {
    opacity: 1;
    transform: translateY(-50%);
    background: transparent;
    color: var(--ink);
    border-color: transparent;
    box-shadow: none;
    right: calc(100% + 9px);
    /* Halo tipis warna kertas. Bukan hiasan: tanpa kontainer, tidak ada lagi
       yang menaungi nama ini dari peta, dan peta bisa berwarna apa saja. */
    text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper), 0 1px 2px var(--paper);
    /* Kontainer tumbuh mulus saat parameternya dipilih. */
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  /* Kontainer gelap muncul saat disentuh (pratinjau) dan BERTAHAN saat
     kontrol ini dipilih (aktif). Sama seperti panel kiri. */
  .col.items-end [data-tip].active::after,
  .col.items-end [data-tip]:hover::after {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
    box-shadow: var(--shadow-sm);
    text-shadow: none;
  }

  /* Ukuran dan jarak toggle disamakan dengan panel kiri: kotak 34px, rapat 4px,
     dan hover menyala lemon seperti di kiri (tanpa efek tekan). */
  .col.items-end { gap: 4px; }
  .col.items-end .icon-btn {
    width: 34px; height: 34px;
    box-shadow: var(--shadow-sm);
  }
  .col.items-end .icon-btn .material-symbols-outlined { font-size: 19px; }
  .col.items-end .icon-btn:hover:not(:disabled) {
    transform: none;
    box-shadow: var(--shadow-sm);
    background: var(--lime);
  }
  .col.items-end .icon-btn.active .material-symbols-outlined,
  .col.items-end .icon-btn:hover:not(:disabled) .material-symbols-outlined { color: var(--on-lime); }

  /* Zoom (+/-) dan bahasa (ID/EN) ikut menyusut menyamai toggle: tinggi 34px,
     bayangan tipis, biar satu tumpukan rata. */
  .col.items-end .zoom, .col.items-end .lang { box-shadow: var(--shadow-sm); }
  .col.items-end .zoom button { width: 34px; height: 34px; }
  .col.items-end .zoom button .material-symbols-outlined { font-size: 19px; }
  .col.items-end .lang button {
    height: 34px; padding: 0 13px;
    display: flex; align-items: center; font-size: 13px;
  }

  /* ───────────────────────── PANEL KIRI ─────────────────────────
     Dibuat mirip panel kanan. Di kanan, kotak lambang MENETAP dan yang
     berubah cuma namanya: teks polos saat diam, kontainer gelap saat
     disentuh. Panel kiri sekarang persis begitu, tinggal arah namanya yang
     berbeda sebab panelnya di tepi kiri layar. */
  .panel.layers {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    gap: 4px;                         /* barisnya dirapatkan */
  }
  .panel.layers .layer-btn {
    background: transparent;
    border: none;
    padding: 0;                       /* rata dengan tepi kiri panel lain */
    gap: 9px;                         /* jarak lambang ke nama, sama dengan kanan */
  }
  /* Kotak lambangnya MENETAP, meniru .icon-btn di kanan. */
  .panel.layers .layer-btn .material-symbols-outlined {
    width: 34px; height: 34px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: var(--bw) solid var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 19px;
    /* Lemon-nya menyala mulus, bukan meloncat. */
    transition: background .15s ease, color .15s ease;
  }
  /* Disentuh / menyala: kotak lambangnya terisi lime, sama seperti .icon-btn
     di kanan. Bukan sebarisnya. Hover jadi pratinjau tampilan terpilih. */
  .panel.layers .layer-btn.active { background: transparent; }
  .panel.layers .layer-btn.active .material-symbols-outlined,
  .panel.layers .layer-btn:hover:not(.disabled) .material-symbols-outlined {
    background: var(--lime); color: var(--on-lime);
  }

  /* Tooltip nama yang MUNCUL saat hover dibuang dari panel kiri. Namanya sudah
     tampil sebagai teks polos, dan kontainer hitamnya kini muncul saat DIPILIH,
     bukan saat disentuh. */
  .panel.layers .layer-btn[data-tip]::after { content: none; }

  /* Namanya: teks polos saat diam, kontainer gelap saat DIPILIH. Cerminan
     tooltip di kanan, cuma tanpa perlu ::after sebab di sini namanya sudah
     punya elemen sendiri. */
  .panel.layers .lb-txt {
    padding: 4px 0;
    /* Halo tipis warna kertas. Bukan hiasan: tanpa kontainer, tak ada lagi
       yang menaungi nama ini dari peta, dan peta bisa berwarna apa saja. */
    text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper), 0 1px 2px var(--paper);
    /* Kontainer tumbuh mulus saat parameternya dipilih. */
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, padding .15s ease;
  }
  .panel.layers .layer-btn:hover:not(.disabled) { background: transparent; }
  /* Kontainer gelap muncul saat disentuh (pratinjau) dan BERTAHAN saat
     parameternya dipilih (aktif). */
  .panel.layers .layer-btn.active .lb-txt,
  .panel.layers .layer-btn:hover:not(.disabled) .lb-txt {
    background: var(--ink); color: var(--surface);
    border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm);
    padding: 4px 9px;
    text-shadow: none;
  }
}