/* Kerangka layar: kepala menempel di atas, kaki di bawah, isi bergulir di
   antaranya. Bentuknya mengikuti sketsa hal. 1-4. */

/* Lajur tegak, BUKAN grid bertiga baris. Grid mengharuskan jumlah anaknya
   diketahui lebih dulu, dan garis "sinyal hilang" muncul-hilang sendiri di
   antara kepala dan isi - begitu ia ada, isinya turun ke baris yang bukan
   miliknya dan kaki terdorong keluar layar. Di lajur tegak yang menentukan
   bukan urutan barisnya melainkan siapa yang boleh melar. */
.rangka {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Kotak yang menggulung. Dua hal di sini gampang dirusak tanpa sadar:

   1. min-height: 0 WAJIB ada. Tanpa itu kotak ini melar mengikuti isinya
      alih-alih menggulungnya, dan isi yang panjang terpotong di bawah tanpa
      bisa dijangkau. Bawaan sebuah petak grid adalah "jangan menyusut lebih
      kecil dari isimu", dan itu membatalkan overflow-y di bawah.

   2. Susunannya BLOK, bukan grid. Pernah dicoba grid supaya jarak antar panel
      cukup diatur sekali lewat gap - dan itu merusak layar dengan cara yang
      tidak kelihatan seperti kerusakan CSS: tiap panel memakai overflow hidden
      (demi sudut membulat), dan di dalam grid anak yang begitu boleh diperas
      sampai nol. Isi yang lebih tinggi dari layar tidak menggulung, melainkan
      DIPIPIHKAN sampai muat - panel tinggal judulnya, isinya lenyap.
      Di susunan blok itu tidak mungkin terjadi: tinggi anak selalu setinggi
      isinya, dan yang berlebih diserahkan ke gulir. */
.rangka__isi {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sela);
}

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

/* Pada halaman yang punya alat konteks, main hanya menjadi rangka tegak.
   Yang bergulir dipindah ke .halaman__gulir, sehingga toolbar berdiri di luar
   scroller dan tidak mungkin dilewati konten yang bergerak. */
.rangka__isi:has(> .halaman--bertoolbar) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.halaman--bertoolbar {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.halaman__gulir {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--sela) var(--sela);
}

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

/* ---------- garis "sinyal hilang" ----------
   Duduk di antara kepala dan isi, bukan melayang di atas layar: yang perlu
   diketahui orangnya bukan peringatan yang harus ditutup, melainkan keterangan
   yang tetap terbaca selama keadaannya masih berlangsung. */

.offline {
  flex: none;
  padding: 8px var(--sela);
  background: rgba(230, 160, 20, 0.2);
  color: var(--chip-tunggu);
  font-size: 0.8125rem;
  text-align: center;
}

/* ---------- kepala ---------- */

.kepala {
  position: relative;
  z-index: 60;
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: var(--kepala-tinggi);
  padding: 8px var(--sela);
  padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
}

/* Toolbar adalah sambungan kepala halaman, bukan blok yang dipisahkan garis.
   :has() hanya aktif pada layar yang benar-benar memakai toolbar; layar statis
   tetap memiliki pemisah kepala seperti semula. */
.rangka:has(> .rangka__isi > .halaman--bertoolbar) > .kepala {
  border-bottom: 0;
}

/* Bila pemberitahuan tampil, ia menjadi sambungan setelah kepala dan sebelum
   toolbar. Tidak ada margin atas yang menyisakan latar di antaranya. */
.rangka:has(> .rangka__isi > .halaman--bertoolbar) > .notifbar {
  margin-top: 0;
}

.kepala__ws {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.kepala__aku {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kepala__teks {
  display: grid;
  min-width: 0;
  flex: 1;
}

.kepala__nama {
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kepala__peran {
  font-size: 0.8125rem;
  color: var(--tinta-redup);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kepala__menu {
  display: grid;
  gap: 4px;
  padding: 10px 4px;
  border: 0;
  background: none;
  cursor: pointer;
}
.kepala__menu span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tinta);
  border-radius: 2px;
}

/* ---------- kaki ---------- */

.kaki {
  position: relative;
  z-index: 60;
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: space-around;
  min-height: var(--kaki-tinggi);
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  background: var(--kertas);
  border-top: 1px solid var(--garis);
}

.kaki__tombol {
  display: grid;
  justify-items: center;
  gap: 3px;
  flex: 1;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--tinta-redup);
  cursor: pointer;
}

.kaki__bulat {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--netral);
}

/* Shortcut mengambang seperti tombol tengah aplikasi sosial: lingkarannya
   melampaui garis footer, sedangkan label tetap sebidang dengan navigasi lain. */
.kaki__tombol--tengah {
  position: relative;
  align-self: stretch;
  min-height: 52px;
  padding: 0;
}

.kaki__tombol--tengah .kaki__bulat {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translateX(-50%);
  border: 4px solid var(--kertas);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.kaki__tombol--tengah .kaki__label {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
}

.kaki__label {
  font-size: 0.6875rem;
}

.kaki__tombol--aktif {
  color: var(--tinta);
}
.kaki__tombol--aktif .kaki__bulat {
  background: var(--utama);
}

/* Warna kedua untuk garis yang sama: bukan sinyal yang hilang melainkan berkas
   yang sudah berganti - lihat core/pwa.js. Bentuknya sengaja sama, karena
   keduanya menjawab pertanyaan yang sama: "kenapa yang di layar begini?" */
.offline--baru {
  background: var(--netral);
  color: var(--tinta);
}

.offline__tombol {
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--kertas);
  font-size: 0.8125rem;
  cursor: pointer;
}