/* Panel Shortcut - kotak yang naik dari bawah (sketsa hal. 4).

   Bukan sebuah layar: yang sedang dikerjakan tetap kelihatan di belakangnya,
   karena pintasan dipakai SELAGI mengerjakan sesuatu. */

.sheet {
  position: fixed;
  top: var(--kepala-tinggi);
  right: 0;
  bottom: var(--kaki-tinggi);
  left: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.4);
}

/* Setinggi AREA KONTEN, berapa pun isinya. Ia tidak lagi mengambil kepala dan
   kaki aplikasi: keduanya harus tetap terlihat saat seseorang membuka Shortcut.
   Ruang penuh tetap dibutuhkan karena yang dicari orang di sini bisa berada di
   antara belasan kartu.

   Jalan keluarnya tidak ikut hilang bersama latar gelap yang tak bisa ditekan
   lagi: tombol × di kepala dan tombol Escape dua-duanya tetap menutup. */
.sheet__isi {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--latar);
  animation: sheet-naik 0.18s ease-out;
}

@keyframes sheet-naik {
  from {
    transform: translateY(14px);
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet__isi {
    animation: none;
  }
}

.sheet__kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sela);
  flex: none;
  padding: 12px var(--sela);
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
}

.sheet__judul {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.sheet__aksi {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* "Manage" sengaja KECIL dan di kanan ATAS - beda dari tombol Manage di layar
   lain yang berdiri di kanan bawah. Yang di sini mengubah panel yang sedang
   dilihat; yang di sana membuka layar lain. */
.sheet__atur {
  padding: 5px 12px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--kertas);
  color: var(--tinta-redup);
  font-size: 0.8125rem;
  cursor: pointer;
}

.sheet__atur--nyala {
  background: var(--utama);
  border-color: var(--utama);
  color: var(--utama-tinta);
}

/* Blok, bukan grid - alasannya sama dengan .rangka__isi di shell.css: anak yang
   memakai overflow hidden boleh diperas sampai nol di dalam grid, dan isinya
   lenyap alih-alih menggulung. */
/* flex: 1 WAJIB, dan bukan sekadar kerapian sejak panel ini punya kaki. Tanpa
   dia kotak gulir cuma setinggi isinya, dan kakinya berhenti tepat di bawah
   kartu terakhir alih-alih di dasar panel - melayang di tengah layar, jauh dari
   tombol bulat yang seharusnya berdiri di antara kedua tombolnya. */
.sheet__gulir {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sela);
}

.sheet__gulir > * + * {
  margin-top: var(--sela);
}

/* ---------- kaki panel: Create File · Create Task ----------

   DUA TOMBOL, DIBELAH KIRI DAN KANAN, dengan celah tetap di tengah. Celah itu
   bukan hiasan: tombol bulat Shortcut di kaki aplikasi menyembul ke ATAS,
   melewati garis footer dan masuk ke area konten - dan panel ini memenuhi area
   konten, jadi kakinya berhenti persis di belakang lingkaran itu. Tombol yang
   berdiri di tengah akan tertutup lingkaran itu dan tidak bisa ditekan siapa
   pun; yang tampak cuma tombol yang "tidak berbuat apa-apa".

   Lebar celahnya diambil dari lingkarannya sendiri (48px) plus jarak aman,
   bukan angka yang ditebak sendiri - lihat .kaki__tombol--tengah .kaki__bulat
   di style/shell.css. */
.sheet__kaki {
  display: flex;
  gap: 72px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--sela);
  background: var(--kertas);
  border-top: 1px solid var(--garis);
}

/* Tiap tombol mengambil sisa lebar yang sama - jadi keduanya berukuran sama
   berapa pun panjang tulisannya, dan celah tengahnya tetap di tengah. */
.sheet__buat {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--kertas);
  color: var(--tinta);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.sheet__buat:active {
  opacity: 0.7;
}

/* Keempat tombol tambah berdiri sebaris dan MELIPAT ke baris berikutnya di layar
   sempit. Empat kali "+ Sesuatu" tidak muat di layar 360px, dan yang tidak muat
   tanpa flex-wrap terpotong diam-diam di kanan - tombol "+ Report" hilang tanpa
   ada yang tahu ia pernah ada. */
.sheet__alat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Kartu pintasan lebih rapat daripada kartu di layar Manage: yang dibaca di sini
   cuma namanya, dan panel ini harus memuat lebih banyak baris dalam tinggi yang
   sama.

   Tombolnya WAJIB tetap sebaris dengan namanya. Kartu di layar Manage memberi
   kolom kanannya lebar terkecil 220px supaya baris "Controller: …" muat, dan di
   layar selebar HP itu membuat kolom kanan turun ke baris sendiri - satu kartu
   pintasan jadi setinggi tiga baris untuk memuat satu nama dan satu tombol.
   Di sini kolom kanan tidak pernah berisi keterangan, cuma tombol, jadi ia
   cukup selebar isinya. */
.sheet .kartu-panjang {
  padding: 8px 10px;
  flex-wrap: nowrap;
}

.sheet .kartu-panjang__kiri {
  flex: 1 1 auto;
}

.sheet .kartu-panjang__kanan {
  flex: 0 0 auto;
}

/* Baris tombolnya TIDAK naik ke pojok kartu di layar sempit, dan ini satu-satunya
   tempat yang mengecualikannya. Aturan di style/daftar.css melayangkan baris aksi
   ke pojok kanan atas karena di sana isinya selalu SATU tanda tiga titik, yang
   memang cuma memakan 34px. Di panel ini isinya sampai empat tombol berjajar -
   Run, naik, turun, lepas - dan empat tombol yang dilayangkan ke pojok menimpa
   nama cardnya sendiri. Kartu di sini juga tidak pernah bertumpuk dua baris:
   .sheet .kartu-panjang di atas sudah menahannya dengan flex-wrap: nowrap. */
@media (max-width: 560px) {
  .sheet .kartu-panjang:has(.kartu-panjang__aksi) .kartu-panjang__aksi {
    position: static;
  }
  .sheet .kartu-panjang:has(.kartu-panjang__aksi) .kartu-panjang__kiri {
    padding-right: 0;
  }
}

/* Tinggi tombol Run disamakan dengan tombol geser & lepas di sebelahnya. Tombol
   biasa berpadding tegak 12px dan berdiri 12px lebih tinggi daripada tombol ikon
   34px; berjajar, keduanya terbaca sebagai dua benda yang berlainan padahal
   ketiganya perbuatan atas kartu yang sama. */
.sheet .kartu-panjang__aksi .tombol {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.875rem;
}

/* ---------- pilihan card yang mau ditambahkan ---------- */

.pilihcard {
  display: grid;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}

.pilihcard__butir {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--kertas);
  text-align: left;
  cursor: pointer;
}

.pilihcard__butir:active {
  opacity: 0.7;
}

/* Selama folder tujuannya belum dipilih, menekan sebuah card tidak menyimpan apa
   pun - jadi cardnya dipadamkan, bukan dibiarkan menerima tekanan yang hilang
   tanpa jejak. */
.pilihcard__butir:disabled {
  opacity: 0.45;
  cursor: default;
}

.pilihcard__nama {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilihcard__tanda {
  flex: none;
  font-size: 0.75rem;
  color: var(--tinta-redup);
}