/* Badminton Club — kerangka halaman.
   Mobile  : full-bleed, 100% lebar × tinggi layar.
   Desktop : artboard 393×873 di tengah, sisanya --gap (token DS untuk ruang
             di luar artboard). Batasnya GARIS, bukan bayangan — DS tanpa shadow.

   100dvh, bukan 100vh: di Safari iOS 100vh menghitung layar TANPA bilah alamat,
   jadi halaman selalu kelebihan ~60px dan ikut ter-scroll walau isinya muat.

   Ambang 768px = tablet ke atas. Di bawah itu layar memang selebar ponsel,
   membingkainya jadi 393 malah menyisakan pinggiran kosong. */

/* tokens.css / typography.css TIDAK menyetel box-sizing. Tanpa baris ini
   .app jadi 443×923 (393+48 padding+2 border), bukan 393×873. */
*, *::before, *::after { box-sizing: border-box; }

/* Atribut hidden HARUS menang atas display dari kelas.
   Aturan bawaan browser `[hidden] { display: none }` spesifisitasnya cuma 0,1,0
   dan kalah dari `.sheet { display: flex }`. Akibatnya elemen yang di-set
   `el.hidden = true` tetap terlihat, padahal propertinya sudah true — persis
   yang bikin bottom sheet tidak mau tertutup. */
[hidden] { display: none !important; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface);
}

/* .app TIDAK ikut scroll. Yang scroll cuma .app-main, supaya header dan bottom
   nav tetap menempel — perilaku app, bukan halaman web. Karena itu height,
   bukan min-height: kalau min-height, .app ikut memanjang mengikuti isi dan
   nav-nya terdorong ke bawah layar. */
.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  background: var(--surface);
  color: var(--primary);
  overflow: hidden;
}

/* Kolom header + konten. Ada supaya waktu .app dibalik jadi row (landscape),
   header tidak ikut jadi kolom sempit di sebelah nav. */
.app-col {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* min-height: 0 WAJIB. Default flex item itu min-height: auto, artinya dia
   menolak mengecil di bawah tinggi isinya — overflow-y tidak pernah aktif dan
   isi yang panjang malah mendorong nav keluar frame. */
.app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  body {
    display: grid;
    place-items: center;
    background: var(--gap);
  }

  .app {
    width: 393px;
    height: 873px;
    /* Layar pendek (laptop 768p, browser + dock) tidak cukup 873. Tanpa clamp
       ini artboard-nya terpotong di atas dan bawah sekaligus karena di-center. */
    max-height: calc(100dvh - 48px);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-modal);
  }
}

/* =====================================================================
   Header — flush, tanpa garis bawah.
   Catatan: di mockup bit garis pemisah header dihapus karena jelek di mobile;
   aturan itu diikuti di sini. Bottom nav TETAP bergaris karena tanpa itu
   deretan ikonnya mengambang di atas konten yang lewat di belakangnya.
   ===================================================================== */

.hd {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-item-loose);
  height: 56px;
  padding: 0 var(--gap-item-loose) 0 var(--gap-layout-tight);
  background: var(--surface);
}

/* Tombol yang berdiri di KIRI judul (panah kembali) dibuat menempel tepi kiri,
   menambal padding kiri header yang memang disiapkan untuk teks. */
.hd .icbtn-lead { margin-left: calc(var(--gap-layout-tight) * -1 + var(--gap-item-base)); }

.hd-title {
  font: var(--text-heading-1);
  color: var(--primary);
  margin-right: auto;
}

/* Ikon yang berdiri sendiri (tanpa label) pakai --icon, bukan warna teks. */
.icbtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--icon);
  border-radius: var(--radius-field);
  cursor: pointer;
}
.icbtn:hover { background: var(--surface-hover); }

/* =====================================================================
   Bottom nav
   ===================================================================== */

.nav {
  flex: 0 0 auto;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--surface-border);
  /* Home indicator iPhone menutupi ~34px paling bawah. Tanpa baris ini label
     tab tertimpa garis itu di perangkat asli, walau di browser terlihat aman. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-item-base);
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  font: var(--text-label-sb);
  /* Ikon nempel label, jadi warnanya ikut warna teks lewat currentColor —
     bukan --icon. */
  color: var(--tertiary);
  cursor: pointer;
  position: relative;
  /* Item nav bisa berupa <a> (punya halaman) atau <button> (belum), jadi
     garis bawah tautan dimatikan di sini. */
  text-decoration: none;
}

.nav-item[aria-current="page"] { color: var(--brand); }

/* Label tab disembunyikan SECARA VISUAL saja, teksnya tetap ada di DOM supaya
   pembaca layar dan aria-label tetap punya nama tab. Dihapus dari markup, nama
   tabnya hilang sama sekali dan ikon tanpa nama tidak terbaca.
   position: absolute bikin dia keluar dari flow, jadi gap 4px di .nav-item
   tidak menyisakan ruang kosong.

   Balikin labelnya: set data-nav="labels" di <body>. */
.nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

body[data-nav="labels"] .nav-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

/* =====================================================================
   Devbar — alat uji DI LUAR frame, desktop saja: rotasi + terang/gelap.
   Disuntik oleh shell.js supaya tiap halaman baru tidak perlu menyalin
   markup-nya. Ini alat bantu, bukan bagian produk: dia hidup di atas --gap,
   di luar .app, dan tidak pernah muncul di mobile.
   ===================================================================== */

.devbar { display: none; }

@media (min-width: 768px) {
  .devbar {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    gap: var(--gap-item-loose);
  }

  .devbar button {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-item-loose);
    height: 36px;
    padding: 0 var(--gap-section-base);
    font: var(--text-body-4b);
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-field);
    cursor: pointer;
  }
  .devbar button:hover { background: var(--surface-hover); }

  /* Landscape: 393×873 ditukar jadi 873×393. max-width ikut dipasang karena
     873 lebih lebar dari jendela browser yang disempitkan. */
  body[data-orient="landscape"] .app {
    width: 873px;
    height: 393px;
    max-width: calc(100vw - 48px);
    flex-direction: row;
  }

  /* Nav pindah jadi rail kiri. Di DOM dia tetap elemen terakhir — urutan itu
     yang benar buat pembaca layar pada tata letak bottom nav — jadi posisinya
     digeser pakai order, bukan dengan memindah markup. */
  body[data-orient="landscape"] .nav {
    order: -1;
    flex-direction: column;
    /* Ditengahkan vertikal. Waktu mendatar cuma empat item di kolom setinggi
       layar, dan kalau ditumpuk dari atas sisanya jadi ruang kosong panjang di
       bawah yang bikin rail-nya terlihat terpotong. */
    justify-content: center;
    width: 72px;
    border-top: 0;
    border-right: 1px solid var(--surface-border);
    padding-bottom: 0;
    /* Landscape memindahkan safe area ke sisi kiri/kanan, bukan bawah. */
    padding-left: env(safe-area-inset-left, 0px);
  }

  body[data-orient="landscape"] .nav-item {
    flex: 0 0 auto;
    width: 100%;
  }
}