/* ==========================================================================
   10 · Polish terakhir
   Hierarki kelompok di panel Parameter · penanda "Wajib" · keadaan kosong Library
   ========================================================================== */

/* ---------------------------------------------------------- panel Parameter -- */

/* Label kelompok (Suara / Materi): bobot lebih tegas + garis, supaya
   "cara" dan "isi" terbaca sebagai dua bagian, bukan daftar field rata */
.form-group__label {
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-1);
}

/* Penanda wajib: chip kecil, bukan teks dalam tanda kurung yang mudah lewat */
.req {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-edge-2);
  color: var(--accent);
  font-size: var(--t-10);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
  vertical-align: middle;
}

/* -------------------------------------------------------- keadaan kosong -- */

/* Library kosong: isi ditengahkan supaya panel tidak terlihat ditinggalkan,
   plus satu petunjuk nyata (pintasan "/" memang ada di keyboard.js) */
.zu-library-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-2);
  font-size: var(--t-12);
  line-height: 1.5;
}

.zu-library-empty::after {
  content: "Tekan / untuk mencari, atau mulai dengan membuat satu lagu.";
  max-width: 30ch;
  color: var(--muted);
  font-size: var(--t-11);
}

/* Kartu Library sama tinggi dengan kartu Parameter (dasar kolom rata).
   Supaya sisa ruang saat belum ada lagu tidak terbaca sebagai ruang mati,
   keadaan kosong dibiarkan MENGISI kartu dan menengahkan dirinya. */
.zu-library-card {
  display: flex;
  flex-direction: column;
}

.zu-library-card .zu-library-empty {
  flex: 1 1 auto;
}

/* Gulir panel dibuat KELIHATAN. Kalau batang gulir tersembunyi, isi di bawah
   (Style Utama, Opsi lanjutan) dikira tidak ada — bukan cuma tersembunyi. */
.zu-compose-panel::-webkit-scrollbar {
  width: 10px;
}

.zu-compose-panel::-webkit-scrollbar-track {
  background: transparent;
}

.zu-compose-panel::-webkit-scrollbar-thumb {
  border: 3px solid var(--sheet);
  border-radius: 999px;
  background: var(--rule);
}

.zu-compose-panel::-webkit-scrollbar-thumb:hover {
  background: var(--ink-2);
}

/* ------------------------------------------------------------ cacat kecil -- */

/* 1. Banner: kata yang ditekankan jangan pakai aksen di atas aksen pucat
      (kontras rendah). Tinta penuh + garis aksen yang lebih tegas. */
.env-banner {
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent-edge-3);
}

.env-banner strong {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* 2. Tombol "Gunakan default API": beri bentuk kontrol, bukan pill abu pasif */
.zu-gender-reset {
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink-2);
  font-size: var(--t-11);
  font-weight: 500;
  box-shadow: 0 1px 2px var(--shade-1);
}

.zu-gender-reset:hover {
  border-color: var(--accent-edge-3);
  color: var(--ink);
}

.zu-gender-reset:active {
  transform: translateY(1px);
}

/* tanda bahwa ini kontrol yang bisa ditekan, bukan label status */
.zu-gender-reset::before {
  content: "↺";
  font-size: var(--t-12);
  line-height: 1;
  color: var(--accent);
}

/* 3. Menu aktif: penanda kiri dipertegas, teks ikut aksen */
.nav-item--active::before {
  width: 3px;
}

.nav-item--active .nav-label {
  font-weight: 600;
}

.nav-item--active {
  background: var(--accent-wash);
}

/* ------------------------------------------------- baris aksi panel Parameter -- */

/* Footer sticky di dalam panel yang menggulir. Dibuat sebagai BATANG nyata
   (plat solid + garis atas), bukan pemudaran: pemudaran terbaca sebagai
   tumpang tindih dengan teksarea yang sedang lewat. Konten tetap bisa
   digulir penuh sampai di atas batang ini. */
.zu-compose-panel .form-actions {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
  background: var(--sheet);
}

/* Banner TIDAK disembunyikan di layar lebar. Elemen #env-banner dikendalikan
   JS (show/hide) dan bisa memuat pesan lain selain "belum ada kunci", jadi
   menyembunyikannya lewat CSS berisiko menelan pesan yang sah. Duplikasi
   dengan status sidebar dibiarkan — lebih baik diulang daripada hilang. */