/* Pop-up: konfirmasi, isian pendek, Details, dan menu perbuatan.
   Semuanya menutupi layar agar yang di belakangnya tidak bisa disentuh, lalu
   isi dialog selalu duduk di tengah supaya letaknya tidak berubah antar-HP dan
   desktop. */

.popup {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sela);
  background: rgba(0, 0, 0, 0.42);
}

.popup__isi {
  width: 100%;
  max-width: 460px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popup__kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.popup__judul {
  font-weight: 650;
  font-size: 1.0625rem;
}

.popup__ket {
  color: var(--tinta-redup);
  font-size: 0.875rem;
}

.popup__hapus {
  align-self: flex-start;
  padding: 6px 0;
  border: 0;
  background: none;
  color: #c0392b;
  font-size: 0.875rem;
  cursor: pointer;
}

/* ---------- daftar pilihan di dalam pop-up ----------
   Dipakai tanda tiga titik sebuah sel: tiap baris satu perbuatan, beserta
   keadaannya sekarang - supaya yang membukanya tahu apa yang sudah terpasang
   tanpa harus menekannya dulu. */

.popup__pilihan {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--kertas);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.popup__pilihan--diam {
  background: var(--latar);
  cursor: default;
}

.popup__pilihan-nama {
  font-weight: 600;
}

.popup__pilihan-ket {
  color: var(--tinta-redup);
  font-size: 0.8125rem;
}

/* ---------- Details ---------- */

.detail__daftar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--garis);
  font-size: 0.875rem;
}

.detail:last-child {
  border-bottom: 0;
}

.detail__label {
  flex: 0 0 42%;
  color: var(--tinta-redup);
}

.detail__nilai {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  word-break: break-word;
}

.detail__sebab {
  color: var(--tinta-redup);
  font-size: 0.8125rem;
}

/* ---------- pesan sekejap ---------- */

.pesan {
  position: fixed;
  left: 50%;
  bottom: calc(var(--kaki-tinggi) + 16px);
  z-index: 50;
  transform: translateX(-50%);
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--utama);
  color: var(--utama-tinta);
  font-size: 0.875rem;
}

.pesan--buruk {
  background: #c0392b;
  color: #fff;
}

/* ---------- pilihan tampilan (core/theme.js) ----------
   Pop-upnya sengaja tidak menutup saat sebuah pilihan disentuh: akibatnya
   terjadi seketika di seluruh layar di belakangnya, dan itu justru yang perlu
   dilihat sebelum orangnya memutuskan. */

.tema {
  display: grid;
  gap: 14px;
}

.tema__judul {
  margin-bottom: 6px;
  font-size: 0.8125rem;
  color: var(--tinta-redup);
}

.tema__ket {
  font-size: 0.8125rem;
  color: var(--tinta-redup);
}