/* =====================================================================
   Penyusun Peta — tampilan
   Semua warna lewat token tema, jadi mode terang dan gelap ikut sendiri.
   Kecuali satu: KERTASNYA selalu putih. Kertas yang ikut menggelap
   berbohong soal hasil cetak.
   ===================================================================== */

html.tl-aktif, html.tl-aktif body { overflow: hidden }

#tl-akar {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  background: var(--kanvas); color: var(--teks);
  font-family: var(--font);
}

/* --- pita atas ------------------------------------------------------ */
#tl-pita {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; min-height: 52px;
  background: var(--permukaan);
  border-bottom: 1px solid var(--garis);
}
.tl-pita-bagian { display: flex; align-items: center; gap: 4px }
.tl-pita-bagian.tengah { flex: 1; justify-content: center; flex-wrap: wrap }
.tl-nama-dok { font-weight: 700; font-size: 14px; margin-left: 4px; white-space: nowrap }

.tl-tbl {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--teks-2);
  font: inherit; font-size: 13px; cursor: pointer;
}
.tl-tbl:hover { background: var(--lembut); color: var(--teks) }
.tl-tbl:disabled { opacity: .35; cursor: default }
.tl-tbl.utama { background: var(--utama); color: var(--utama-isi-teks); border-color: var(--utama) }
.tl-tbl.utama:hover { background: var(--utama-sentuh); color: var(--utama-isi-teks) }
.tl-pemisah { width: 1px; height: 22px; background: var(--garis); margin: 0 4px }
.tl-zoom { font-size: 12px; color: var(--teks-2); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums }

/* --- badan ---------------------------------------------------------- */
#tl-badan { flex: 1; display: flex; min-height: 0 }

#tl-alat {
  width: 48px; flex: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 4px;
  background: var(--permukaan); border-right: 1px solid var(--garis);
}
.tl-alat-tbl {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--teks-2); cursor: pointer;
}
.tl-alat-tbl:hover { background: var(--lembut); color: var(--teks) }
.tl-alat-tbl.aktif { background: var(--utama); color: var(--utama-isi-teks); border-color: var(--utama) }

#tl-kerja { flex: 1; display: flex; flex-direction: column; min-width: 0 }
#tl-penggaris-atas { display: flex; height: 18px; flex: none }
#tl-penggaris-pojok { width: 18px; flex: none; background: var(--lembut); border-right: 1px solid var(--garis); border-bottom: 1px solid var(--garis) }
#tl-baris-lembar { flex: 1; display: flex; min-height: 0 }
.tl-penggaris { background: var(--lembut); color: var(--teks-3); overflow: hidden; flex: none }
#tl-penggaris-x { height: 18px; border-bottom: 1px solid var(--garis); flex: 1 }
#tl-penggaris-y { width: 18px; border-right: 1px solid var(--garis) }
.tl-penggaris svg { display: block }

#tl-lapik { flex: 1; overflow: auto; background: var(--kanvas); padding: 30px }
#tl-panggung { display: flex; justify-content: center; align-items: flex-start; min-height: 100% }
#tl-kertas {
  background: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.12);
  user-select: none; touch-action: none;
}
#tl-kaki {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 5px 12px; font-size: 12px; color: var(--teks-3);
  background: var(--permukaan); border-top: 1px solid var(--garis); min-height: 28px;
}
#tl-posisi { font-variant-numeric: tabular-nums }

/* --- sisi kanan ------------------------------------------------------ */
#tl-sisi {
  width: 306px; flex: none; display: flex; flex-direction: column;
  background: var(--permukaan); border-left: 1px solid var(--garis); min-height: 0;
}
.tl-tab { display: flex; border-bottom: 1px solid var(--garis); flex: none }
.tl-tab-tbl {
  flex: 1; height: 36px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--teks-3); border-bottom: 2px solid transparent;
}
.tl-tab-tbl.aktif { color: var(--utama); border-bottom-color: var(--utama); font-weight: 600 }
.tl-daftar { max-height: 30vh; overflow: auto; padding: 4px; flex: none; border-bottom: 1px solid var(--garis) }
.tl-properti { flex: 1; overflow: auto; padding: 8px 10px 24px }

.tl-unsur-baris {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px;
}
.tl-unsur-baris:hover { background: var(--lembut) }
.tl-unsur-baris.aktif { background: var(--utama-isi); color: var(--teks) }
.tl-unsur-ikon { display: grid; place-items: center; color: var(--teks-3); flex: none }
.tl-unsur-nama { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tl-mata { border: 0; background: transparent; color: var(--teks-3); cursor: pointer; padding: 2px; display: grid; place-items: center }
.tl-mata:hover { color: var(--teks) }

.tl-judul-bagian {
  margin: 14px 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teks-3); font-weight: 700;
}
.tl-judul-bagian:first-child { margin-top: 2px }
.tl-baris { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 13px }
.tl-baris > label { width: 96px; flex: none; color: var(--teks-2) }
.tl-baris.penuh { flex-wrap: wrap }
.tl-kendali { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0 }
.tl-num, .tl-teks, .tl-pilih, .tl-area {
  min-width: 0; width: 100%; height: 30px; padding: 0 8px;
  border: 1px solid var(--garis); border-radius: var(--r-sm);
  background: var(--bg); color: var(--teks); font: inherit; font-size: 13px;
}
.tl-area { height: 68px; padding: 6px 8px; resize: vertical; line-height: 1.4 }
.tl-num { font-variant-numeric: tabular-nums }
.tl-num:focus, .tl-teks:focus, .tl-pilih:focus, .tl-area:focus { outline: 2px solid var(--utama); outline-offset: -1px }
.tl-warna { display: flex; align-items: center; gap: 4px }
.tl-warna input[type=color] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--garis); border-radius: 6px; background: var(--bg); cursor: pointer }
.tl-centang { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--teks-2); cursor: pointer }
.tl-rata { display: flex; flex-wrap: wrap; gap: 4px }
.tl-tbl-kecil {
  height: 28px; padding: 0 9px; border: 1px solid var(--garis); border-radius: var(--r-sm);
  background: var(--bg); color: var(--teks-2); font: inherit; font-size: 12px; cursor: pointer;
}
.tl-tbl-kecil:hover { background: var(--lembut); color: var(--teks); border-color: var(--garis-kuat) }
.tl-nilai { font-size: 13px; color: var(--teks); font-variant-numeric: tabular-nums }
.tl-bantuan { font-size: 12px; color: var(--teks-3); margin: 6px 0; line-height: 1.45 }
.tl-kosong { font-size: 12.5px; color: var(--teks-3); padding: 10px; line-height: 1.5 }
.tl-daftar-layer { max-height: 168px; overflow: auto; border: 1px solid var(--garis); border-radius: var(--r-sm); padding: 6px; display: grid; gap: 3px }
.tl-tabel-edit .tl-baris input { font-size: 12px }

.tl-simbol-kisi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 8px }
.tl-simbol {
  aspect-ratio: 1; display: grid; place-items: center; padding: 4px;
  border: 1px solid var(--garis); border-radius: var(--r-sm);
  background: var(--bg); color: var(--teks-2); cursor: pointer;
}
.tl-simbol svg { width: 100%; height: 100% }
.tl-simbol:hover { border-color: var(--garis-kuat); color: var(--teks) }
.tl-simbol.aktif { border-color: var(--utama); color: var(--utama); background: var(--utama-isi) }

/* --- menu kanan & sunting teks --------------------------------------- */
.tl-menu {
  position: fixed; z-index: 500; min-width: 190px; padding: 5px;
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r-md); box-shadow: var(--bayang-lg);
}
.tl-menu button {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--teks); font: inherit; font-size: 13px; cursor: pointer;
}
.tl-menu button:hover { background: var(--lembut) }
.tl-menu-garis { height: 1px; background: var(--garis); margin: 4px 2px }

.tl-edit-teks {
  position: fixed; z-index: 500; margin: 0; padding: 0;
  border: 2px solid var(--utama); background: #fff; color: #0B2117;
  resize: none; overflow: hidden; line-height: inherit;
}

@media (max-width: 900px) {
  #tl-sisi { width: 250px }
  .tl-pita-bagian.tengah { justify-content: flex-start }
  .tl-nama-dok { display: none }
}

/* =====================================================================
   LAYAR SEMPIT
   ---------------------------------------------------------------------
   Papan gambar dengan rel alat di kiri dan panel properti di kanan
   hanya masuk akal kalau ada lebar untuk ketiganya. Di lebar 412 piksel
   tidak ada. Susunannya diputar menjadi bertumpuk: rel alat jadi
   deretan mendatar di atas, kertas di tengah, properti jadi lembar di
   bawah — yang juga paling mudah dijangkau ibu jari.
   ===================================================================== */
@media (max-width: 900px) {
  /* Pita atas satu baris yang bisa digeser. Sebelumnya ia melipat jadi
     empat baris setinggi 165 piksel — sepertiga layar habis untuk
     tombol, sebelum kertasnya sempat tampil. */
  /* Dua baris, bukan satu. Dalam satu baris, tombol "Peta", "PDF" dan
     "Ekspor" sudah memakan 397 dari 412 piksel — kelompok tengahnya
     tersisa 15 piksel dan seluruh isinya (berkas, urungkan, zoom)
     lenyap tanpa tanda apa pun. Di baris sendiri ia lega dan bisa
     digeser mendatar. */
  #tl-pita { min-height: 46px; padding: 6px 8px; gap: 6px; row-gap: 2px; flex-wrap: wrap }
  .tl-pita-bagian { flex: 0 0 auto }
  .tl-pita-bagian:last-child { margin-left: auto }
  .tl-pita-bagian.tengah {
    order: 3; flex: 1 1 100%; min-width: 0; flex-wrap: nowrap;
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
  }
  .tl-pita-bagian.tengah::-webkit-scrollbar { display: none }
  .tl-tbl { height: 36px; padding: 0 9px; font-size: 12.5px }
  .tl-nama-dok { display: none }

  #tl-badan { flex-direction: column }
  #tl-alat {
    width: auto; flex: 0 0 auto; flex-direction: row;
    overflow-x: auto; scrollbar-width: none;
    border-right: 0; border-bottom: 1px solid var(--garis);
    padding: 4px 6px; gap: 2px;
  }
  #tl-alat::-webkit-scrollbar { display: none }
  .tl-alat-tbl { flex: 0 0 auto }

  #tl-kerja { flex: 1 1 auto; min-height: 0 }
  #tl-lapik { padding: 12px }
  /* Penggaris memakan ruang yang justru dibutuhkan kertasnya. */
  #tl-penggaris-atas, #tl-penggaris-y { display: none }

  #tl-sisi {
    width: auto; flex: 0 0 auto; max-height: 40vh;
    border-left: 0; border-top: 1px solid var(--garis);
  }
  .tl-daftar { max-height: 19vh }
  .tl-baris > label { width: 84px }
  .tl-simbol-kisi { grid-template-columns: repeat(8, 1fr) }
}