/* nd-nav.css — shell navigasi UI baru: topbar, tombol Provider, toggle tema, bottom nav mobile.
   Semua di-scope `body.nd-ui` supaya tidak bocor ke markup yang belum dimigrasi.
   Nilai warna/durasi/radius SELALU dari token (nd-tokens.css) — tidak ada literal di sini. */

/* ============================================================
   1. TOPBAR
   ============================================================ */

/* Glass dipindah ke pseudo-element. Ini BUKAN kosmetik:
   `backdrop-filter` pada .topbar membuatnya jadi containing block untuk
   descendant `position:fixed` — yaitu drawer menu mobile (#site-menu).
   Akibatnya drawer ter-anchor ke bar setinggi 60px, bukan ke viewport,
   lalu tumbuh ke atas dan keluar layar. Dipindah ke ::before → masalah hilang. */
body.nd-ui .topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: transparent;
  border-block-end: 0;
  backdrop-filter: none;
}
body.nd-ui .topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nd-glass);
  backdrop-filter: saturate(1.25) blur(12px);
  -webkit-backdrop-filter: saturate(1.25) blur(12px);
  border-block-end: 1px solid var(--nd-line-subtle);
}
/* Browser tanpa backdrop-filter: jangan tembus pandang — pakai surface pekat. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.nd-ui .topbar::before { background: var(--nd-s1); }
}

/* Saat drawer mobile terbuka, topbar harus naik di atas bottom-nav (150),
   last-watch-popup (180) dan FAB riwayat (181). Class .is-open sudah di-toggle
   oleh JS yang ada — nol JS baru. */
body.nd-ui .topbar.is-open { z-index: 200; }

body.nd-ui .topbar-inner { max-width: var(--nd-container-wide, 1360px); }

body.nd-ui .menu a {
  color: var(--nd-t2);
  font-weight: 600;
  border-radius: var(--nd-r-2);
  transition: color var(--nd-dur-1) var(--nd-ease-out), background-color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .menu a:hover { color: var(--nd-t1); background: var(--nd-s2); }
body.nd-ui .menu a.active { color: var(--nd-t1); }

/* ============================================================
   2. TOMBOL PROVIDER (navbar)
   --pv / --pv-t disuntik inline per provider; fallback aksen wajib ada
   supaya provider yang belum terdaftar tetap tampil benar.
   ============================================================ */

body.nd-ui .nd-pv-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-sp-2);
  min-block-size: 40px;
  padding: 0 var(--nd-sp-3);
  border: 0;
  border-radius: var(--nd-r-full);
  background: var(--nd-s2);
  color: var(--nd-t1);
  font: 700 var(--nd-fs-sm) / 1 var(--nd-font-text);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--nd-dur-1) var(--nd-ease-out), box-shadow var(--nd-dur-2) var(--nd-ease-out);
}

/* "Coloring yang match dan menyala" — hanya saat ada provider aktif. */
body.nd-ui .nd-pv-btn[data-pv]:not([data-pv=""]),
body.nd-ui .nd-pv-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 1px var(--pv, var(--nd-accent-400)),
              0 0 20px -6px var(--pv, var(--nd-accent-400));
}

/* Tile monogram: warna provider dipakai sebagai TINTA di atas latar tint-nya,
   bukan sebagai latar penuh — supaya kontras tetap terjaga di kedua tema. */
body.nd-ui .nd-pv-dot {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  border-radius: var(--nd-r-1);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--pv-t, var(--nd-accent-tint));
  color: var(--pv, var(--nd-accent-400));
  font: 800 var(--nd-fs-3xs) / 1 var(--nd-font-text);
  letter-spacing: 0;
}

body.nd-ui .nd-pv-caret {
  flex: 0 0 auto;
  color: var(--nd-t3);
  transition: transform var(--nd-dur-2) var(--nd-ease-out);
}
body.nd-ui .nd-pv-btn[aria-expanded="true"] .nd-pv-caret { transform: rotate(180deg); }

/* ============================================================
   3. TOGGLE TEMA
   ============================================================ */

body.nd-ui .nd-theme-btn {
  inline-size: 40px;
  block-size: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--nd-r-2);
  background: var(--nd-s2);
  color: var(--nd-t2);
  cursor: pointer;
  transition: color var(--nd-dur-1) var(--nd-ease-out), background-color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .nd-theme-btn:hover { color: var(--nd-t1); background: var(--nd-s3); }
/* Ikon bulan tampil saat tema gelap, matahari saat terang. */
body.nd-ui .nd-theme-btn .nd-theme-sun { display: none; }
:root[data-theme="light"] body.nd-ui .nd-theme-btn .nd-theme-sun,
html[data-theme="light"] body.nd-ui .nd-theme-btn .nd-theme-sun { display: block; }
:root[data-theme="light"] body.nd-ui .nd-theme-btn .nd-theme-moon,
html[data-theme="light"] body.nd-ui .nd-theme-btn .nd-theme-moon { display: none; }

/* ============================================================
   4. BOTTOM NAV MOBILE
   ============================================================ */

body.nd-ui .nd-bottomnav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  block-size: calc(var(--nd-bottomnav-h, 62px) + env(safe-area-inset-bottom, 0px));
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: var(--nd-s1);
  border-block-start: 1px solid var(--nd-line-subtle);
  box-shadow: var(--nd-e3);
  transition: transform var(--nd-dur-2) var(--nd-ease-out);
}

body.nd-ui .nd-bn-item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
  place-items: center;
  padding: var(--nd-sp-2) 2px;
  color: var(--nd-t3);
  text-decoration: none;
  background: none;
  border: 0;
  font: 600 var(--nd-fs-3xs) / 1.15 var(--nd-font-text);
  cursor: pointer;
  min-inline-size: 0;
}
body.nd-ui .nd-bn-item .nd-bn-ico { font-size: 1.125rem; line-height: 1; }
/* Label 2 baris, TANPA ellipsis: 23 bahasa punya panjang kata sangat berbeda
   dan slot hanya ~68px di layar 360px. */
body.nd-ui .nd-bn-label {
  text-align: center;
  inline-size: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}
body.nd-ui .nd-bn-item.is-active { color: var(--nd-t1); }

/* Indikator aktif: satu batang yang meluncur, bukan 5 garis yang fade.
   translateX dikali --nd-dir supaya arahnya benar di RTL (Arab). */
body.nd-ui .nd-bottomnav::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 20%;
  block-size: 2px;
  background: var(--nd-accent-400);
  transform: translateX(calc(var(--nd-bn-index, 0) * 100% * var(--nd-dir, 1)));
  transition: transform var(--nd-dur-2) var(--nd-ease-spring);
}

/* Slot provider menampilkan NAMA PENUH provider, bukan monogram lagi.

   Yang membuat itu mungkin bukan slot yang melebar — lebarnya tetap seperlima
   layar — melainkan ukuran hurufnya yang dihitung dari panjang nama. --pvl
   (jumlah huruf) ditempel inline oleh NdProvider::styleVars, sama seperti --pv
   dan --pv-t, jadi tidak ada JS pengukur dan tidak ada kedipan sebelum ukuran
   mapan.

   Kenapa 20vw: .nd-bottomnav adalah grid repeat(5,1fr) TANPA padding dan TANPA
   gap, jadi satu slot = TEPAT seperlima viewport (terukur 320->64px, 360->72px,
   390->78px, 430->86px). Dikurangi 4px (padding inline .nd-bn-item, 2px+2px)
   angkanya menjadi lebar KOTAK ISI, bukan lebar slot.

   Kenapa pembaginya garis (0,42n + 2,2) dan BUKAN satu konstanta per-huruf:
   lebar teks tidak sebanding lurus dengan jumlah huruf. Terukur di Manrope 700,
   "OhMyTV" (6 huruf) butuh 0,666em/huruf sedangkan "MinuteDrama" (11 huruf)
   cuma 0,594em/huruf — nama panjang punya lebih banyak huruf kecil. Satu
   konstanta karenanya wajib memakai rasio TERLEBAR dan akibatnya mengecilkan
   nama panjang jauh lebih dalam dari yang perlu (8,27px alih-alih 8,80px di
   320px). Garis ini membungkus lebar MAKSIMUM ke-58 nama di tiap panjang; kasus
   paling ketat ("DramaWave" 9 huruf dan "MinuteDrama" 11 huruf) masih menyisakan
   4,2% ruang.
   Suku kedua (0,62n) baru menang untuk n>11: garis di atas adalah interpolasi
   untuk 6..11 huruf — panjang yang benar-benar ada di config — dan terlalu
   longgar kalau diekstrapolasi. Suku ini membuat provider baru yang namanya
   lebih panjang dari katalog sekarang tetap muat tanpa menyentuh CSS.

   Kenapa clamp() dan bukan calc() telanjang:
   - batas ATAS var(--nd-fs-3xs) menjaga nama pendek persis seukuran label slot
     lain — 6-8 huruf tidak pernah mengecil di >=390px;
   - batas atas itu rem sedangkan suku fit vw, jadi ketika pengguna memperbesar
     font peramban min() otomatis memilih suku vw dan teks TETAP muat (terukur di
     html{font-size:24px}: "MinuteDrama" bertahan 10,85px, dokumen tidak bergeser,
     sementara "BiliTV" ikut membesar ke 15,68px seperti seharusnya);
   - lantai 8px SENGAJA px, bukan rem. Kalau lantai ikut membesar bersama font
     pengguna, clamp() justru mengembalikan lantai itu — MIN menang atas
     segalanya — dan teks meluber. Di >=320px lantai ini tidak pernah terpakai:
     nilai terkecil yang nyata adalah 8,80px (11 huruf di 320px). */
body.nd-ui #nd-bn-provider {
  /* minmax(0,1fr) menahan kolom grid. Tanpa ini track `auto` tumbuh mengikuti
     max-content teks nowrap, kotak label jadi LEBIH LEBAR dari slotnya, dan
     overflow:clip di bawah tidak pernah kebagian kerja — teks malah menumpuk ke
     slot tetangga. Satu-satunya kondisi yang bisa memicunya adalah font cadangan
     yang lebih lebar dari Manrope selama jendela font-display:swap. */
  grid-template-columns: minmax(0, 1fr);
}

/* Aura warna provider ("menyala"). Sengaja radial-gradient --pv-t di BELAKANG
   ikon dan nama, bukan cincin box-shadow: cincin 1px terbaca sebagai border
   (dilarang) dan di tema terang hasilnya pil keras, bukan cahaya. */
body.nd-ui #nd-bn-provider[data-pv]:not([data-pv=""])::before {
  content: "";
  /* WAJIB absolute: pseudo-element pada grid container ikut jadi grid item dan
     akan membuat baris ketiga kalau dibiarkan in-flow. */
  position: absolute;
  inset-block-start: 4px;
  /* inset-inline:0 + lebar pasti + margin auto = terpusat, dan benar di RTL
     tanpa perlu transform ber-arah. */
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 92%;
  block-size: 40px;
  background: radial-gradient(58% 52% at 50% 36%, var(--pv-t, var(--nd-accent-tint)), transparent 100%);
  pointer-events: none;
}

/* position:relative pada kedua anak ini BUKAN hiasan: ::before di atas sudah
   positioned, jadi tanpa ini ia menimpa ikon dan teks yang masih in-flow. */
body.nd-ui #nd-bn-provider[data-pv]:not([data-pv=""]) .nd-bn-ico {
  position: relative;
  color: var(--pv, var(--nd-accent-400));
  text-shadow: 0 0 10px var(--pv, var(--nd-accent-400));
}

body.nd-ui #nd-bn-provider[data-pv]:not([data-pv=""]) .nd-pv-name {
  --pvl-box: calc(20vw - 4px);
  --pvl-a: calc(var(--pvl-box) / (var(--pvl, 8) * 0.42 + 2.2));
  --pvl-b: calc(var(--pvl-box) / (var(--pvl, 8) * 0.62));
  position: relative;
  font-size: clamp(8px, min(var(--pvl-a), var(--pvl-b)), var(--nd-fs-3xs));
  /* line-height ABSOLUT, bukan 1,15: tinggi baris label harus sama untuk ke-58
     provider. Kalau ia ikut font-size, baris grid mengecil saat nama panjang dan
     ikon bergeser ~1,3px tiap kali provider berganti. */
  line-height: calc(var(--nd-fs-3xs) * 1.15);
  font-weight: 700;
  color: var(--pv, var(--nd-accent-400));
  /* Nama merek tidak boleh dipenggal: .nd-bn-label sengaja membungkus 2 baris
     untuk 23 bahasa, tapi "DotDrama II" yang patah jadi "II" sendirian terbaca
     rusak — dan rumus di atas memang sudah menjamin satu baris muat. */
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: none;
  /* clip, BUKAN hidden: hidden membuat scroll container. Marginnya memberi ruang
     untuk aura text-shadow sambil tetap mengurung teks yang (secara teori) tidak
     muat ke dalam slotnya sendiri. */
  overflow: clip;
  overflow-clip-margin: 6px;
  text-overflow: ellipsis;
  text-shadow: 0 0 6px var(--pv, var(--nd-accent-400));
}

/* Tema terang: --pv di tema ini adalah tinta GELAP (mis. --pvf-ruby #780C45).
   Blur warna yang sama di atas nav putih bukan "menyala" melainkan kotor, dan di
   ukuran 9px ia memakan ketajaman huruf. Halonya dibalik ke --pv-t — versi
   terang dari warna yang sama — sehingga tinta gelap justru makin menonjol. */
:root[data-theme="light"] body.nd-ui #nd-bn-provider[data-pv]:not([data-pv=""]) .nd-bn-ico,
html[data-theme="light"] body.nd-ui #nd-bn-provider[data-pv]:not([data-pv=""]) .nd-bn-ico {
  text-shadow: 0 0 8px var(--pv-t, var(--nd-accent-tint));
}
:root[data-theme="light"] body.nd-ui #nd-bn-provider[data-pv]:not([data-pv=""]) .nd-pv-name,
html[data-theme="light"] body.nd-ui #nd-bn-provider[data-pv]:not([data-pv=""]) .nd-pv-name {
  text-shadow: 0 0 1px var(--pv-t, var(--nd-accent-tint)), 0 0 7px var(--pv-t, var(--nd-accent-tint));
}

/* Kata "Provider" tidak lagi terlihat ketika ada provider aktif — tempatnya
   dipakai nama provider — tapi TETAP ada di DOM. Tanpa ini nama aksesibel
   tautannya cuma "AnyReel", dan tidak ada apa pun yang memberi tahu pembaca
   layar bahwa tombol ini membuka pemilih provider. Terukur di pohon
   aksesibilitas Chromium: link "Pilih Provider: AnyReel". */
body.nd-ui .nd-pv-role {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bottom nav hanya di bawah 1024px. */
@media (min-width: 1024px) {
  body.nd-ui .nd-bottomnav { display: none; }
}

/* ============================================================
   5. LAPISAN FIXED YANG SUDAH ADA
   ============================================================ */

/* CATATAN: padding bawah body, pengecualian halaman player, dan penyembunyian
   bottom-nav saat search terbuka TIDAK ditulis di sini — semuanya hidup di
   nd-tokens.css (bagian --nd-bottomnav-h / --nd-safe-bottom) supaya urutan
   sumbernya terjaga dan tidak ada aturan kembar di dua file. */

@media (max-width: 1023.98px) {
  /* Popup "lanjut nonton" dirender dari layout, jadi muncul di SETIAP halaman
     untuk pengunjung yang kembali. Tanpa ini ia duduk persis di atas bottom nav. */
  body.nd-ui .last-watch-popup { inset-block-end: var(--nd-safe-bottom); }
}

/* ============================================================
   6. PEMBAGIAN DESKTOP / MOBILE
   ============================================================ */

/* Di bawah 1024px, tombol Provider dan toggle tema TIDAK ditampilkan di topbar:
   Provider sudah punya slot sendiri di bottom nav, dan toggle tema ikut masuk
   drawer menu. Topbar mobile harus tetap satu baris ramping: logo + search + menu. */
@media (max-width: 1023.98px) {
  body.nd-ui .topbar .nd-pv-btn { display: none; }
}

/* Tombol tema ikon tampil di SEMUA lebar — baris teks "Ganti tema" di drawer
   sudah dihapus (keputusan owner: ikon bulan/matahari saja, lebih modern).
   Luberan 31px di 1024px yang dulu jadi alasan menyembunyikannya sudah
   diperbaiki struktural lewat prioritas flex-shrink di bagian 6. */


/* ============================================================
   7. PICKER PROVIDER DI DALAM NAVBAR
   Kontrol ini DIPINDAH dari body halaman (dulu bagian "Filter Provider").
   Markup & id-nya tidak berubah — hanya tampilannya yang disesuaikan
   agar menyatu dengan navbar.
   ============================================================ */

body.nd-ui .topbar .provider-home-controls {
  display: flex;
  align-items: center;
  gap: var(--nd-sp-2);
  margin: 0;
  flex: 0 0 auto;
}

body.nd-ui .topbar .provider-home-combo {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Tanpa garis tepi (permintaan owner). Bentuknya dibaca dari permukaan s2
     yang kontras terhadap topbar, dan dari glow warna provider saat aktif. */
  border: 0;
  border-radius: var(--nd-r-full);
  background: var(--nd-s2);
  overflow: hidden;
  block-size: 40px;
}

body.nd-ui .topbar .provider-home-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-sp-2);
  padding: 0 var(--nd-sp-3);
  border: 0;
  background: transparent;
  color: var(--nd-t1);
  font: 700 var(--nd-fs-sm) / 1 var(--nd-font-text);
  cursor: pointer;
  white-space: nowrap;
}

/* Titik provider = warna provider aktif, "menyala". */
body.nd-ui .topbar .provider-home-picker-dot {
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: var(--pv, var(--nd-accent-400));
  box-shadow: 0 0 8px var(--pv, var(--nd-accent-400));
  flex: 0 0 auto;
}

body.nd-ui .topbar .provider-home-combo-divider {
  inline-size: 1px;
  background: var(--nd-line);
  flex: 0 0 auto;
}

body.nd-ui .topbar .provider-home-search-wrap {
  display: flex;
  align-items: center;
  position: relative;
  min-inline-size: 0;
}
body.nd-ui .topbar .provider-home-search-input {
  border: 0;
  background: transparent;
  color: var(--nd-t1);
  font: 500 var(--nd-fs-sm) / 1 var(--nd-font-text);
  padding: 0 var(--nd-sp-3);
  inline-size: 11rem;
  min-inline-size: 0;
  outline: none;
}
body.nd-ui .topbar .provider-home-search-input::placeholder { color: var(--nd-t3); }

/* Glow mengikuti provider aktif, sama seperti .nd-pv-btn. */
body.nd-ui .topbar .provider-home-combo:focus-within,
body.nd-ui .topbar .provider-home-picker-trigger[aria-expanded="true"] ~ * ,
body.nd-ui .topbar .provider-home-controls[data-pv]:not([data-pv=""]) .provider-home-combo {
  box-shadow: 0 0 0 1px var(--pv, var(--nd-accent-400)),
              0 0 20px -6px var(--pv, var(--nd-accent-400));
}

/* Di bawah 1024px kontrol ini tidak muat di topbar: slot Provider di bottom nav
   yang membuka picker. Kontrolnya tetap ada di DOM (JS memerlukannya), hanya
   dipindahkan keluar layar agar tetap bisa diukur & difokuskan. */
@media (max-width: 1023.98px) {
  body.nd-ui .topbar .provider-home-controls {
    position: absolute;
    inset-inline-start: var(--nd-sp-3);
    inset-block-start: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
  }
}

/* ============================================================
   8. SISA GAYA "FILTER PROVIDER" YANG SUDAH TIDAK RELEVAN
   ============================================================ */

/* Banner cover di balik explorer dulu masuk akal saat area ini adalah panel
   "Filter Provider" dengan judul besar. Sekarang area ini adalah KONTEN UTAMA
   halaman, dan banner itu menembus di belakang kartu sehingga poster jadi
   berebut perhatian dengan gambar latar. Dimatikan. */
body.nd-ui .provider-home-explorer::before { content: none; }

/* Panel yang dulu "kotak di dalam halaman" kini menyatu dengan halaman. */
body.nd-ui .provider-home-explorer {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-inline: 0;
  padding-block-start: 0;
}

/* ============================================================
   9. PITA 1024–1279px — CEGAH TOPBAR MELUBER
   Terukur di 1024px: brand 66 + search 250 + menu 470 + kontrol provider 380
   + tombol tema 40 = 1206px pada viewport 1024px → scroll horizontal 271px.
   Di pita ini bottom nav sudah disembunyikan, jadi tombol Provider HARUS tetap
   ada di topbar. Yang dilepas adalah kolom "Cari film <provider>" — pencarian
   provider tetap tersedia DI DALAM picker sheet, yang punya kolom carinya sendiri.
   ============================================================ */

@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.nd-ui .topbar .provider-home-search-wrap,
  body.nd-ui .topbar .provider-home-combo-divider { display: none; }

  body.nd-ui .topbar .provider-home-combo { background: transparent; }

  /* Beri ruang: menu & search global menyusut lebih dulu sebelum
     tombol Provider, karena Provider adalah kontrol utama halaman ini. */
  body.nd-ui .global-search { max-inline-size: 15rem; }
  body.nd-ui .menu { gap: var(--nd-sp-2); }
  body.nd-ui .menu a,
  body.nd-ui .menu > details > summary { padding-inline: var(--nd-sp-2); }
}

/* Jaring pengaman: apa pun yang terjadi, topbar tidak boleh memaksa
   halaman menggulir ke samping. */
body.nd-ui .topbar-inner { max-inline-size: 100%; }
body.nd-ui .topbar-main { min-inline-size: 0; flex-wrap: nowrap; }
body.nd-ui .menu { min-inline-size: 0; }

/* ============================================================
   10. JARING PENGAMAN TOPBAR — tidak boleh meluber di lebar mana pun
   Sapuan 11 viewport menemukan 1024px masih bisa menggulir ke samping karena
   kontrol provider tidak mau menyusut. Daripada menambal per-breakpoint,
   semua anak topbar dibuat BOLEH menyusut, dan yang paling tidak kritis
   menyusut lebih dulu.
   ============================================================ */

body.nd-ui .topbar-main > * { min-inline-size: 0; }

/* Search global: paling lentur, boleh menyusut jauh. */
body.nd-ui .global-search { flex: 1 1 8rem; min-inline-size: 0; }

/* Menu: boleh menyusut, isinya sudah bisa masuk drawer di layar kecil.
   JANGAN pakai overflow:hidden di sini — .menu adalah induk dari semua
   <details> nav (Tag/Genre/Bahasa/Akun), jadi clipping-nya memotong panel
   dropdown sehingga tidak satu pun dropdown bisa terlihat. Penahan luberan
   cukup lewat flex-shrink di bawah ini. */
body.nd-ui .menu { flex: 0 1 auto; min-inline-size: 0; }

/* Kontrol provider: menyusut terakhir, dan tidak pernah melebihi sepertiga bar. */
body.nd-ui .topbar .provider-home-controls {
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: 34%;
}
body.nd-ui .topbar .provider-home-combo { min-inline-size: 0; max-inline-size: 100%; }
body.nd-ui .topbar .provider-home-picker-trigger {
  min-inline-size: 0;
  overflow: hidden;
}
body.nd-ui .topbar .provider-home-picker-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
}
body.nd-ui .topbar .provider-home-search-input { inline-size: 100%; min-inline-size: 0; }

/* Tombol ikon tidak boleh ikut menyusut sampai tak bisa ditekan. */
body.nd-ui .nd-theme-btn,
body.nd-ui .hamburger,
body.nd-ui .search-toggle,
body.nd-ui .global-search-back { flex: 0 0 auto; }

/* ============================================================
   11. DRAWER MENU MOBILE — panel mengambang, bukan baris di dalam bar
   Aturan lama membuat drawer jadi baris penuh di bawah bar dengan dua hal:
   .topbar-main{flex-wrap:wrap} + .menu{flex-basis:100%}. Bagian 10 mematikan
   wrap demi jaring pengaman anti-scroll-horizontal, jadi drawer yang terbuka
   ikut terjepit di baris bar: terukur hanya 160px lebarnya dan bar menggelembung
   dari 68px jadi 352px (logo melayang di tengah layar). Solusinya BUKAN
   menghidupkan wrap lagi — drawer dikeluarkan dari aliran flex: saat .is-open ia
   jadi panel absolut di bawah bar (containing block = .topbar-main yang
   position:relative), sehingga tinggi bar tidak berubah sama sekali.
   Dibatasi <=980px karena HANYA di situ markup lama memberi drawer tata letak
   kolom (.topbar.is-open .menu{display:flex} + flex-direction:column) dan panel
   dropdown di dalamnya sudah position:static — di atas 980px menu masih baris
   horizontal biasa di dalam bar dan overflow-y di sini justru akan memotongnya.
   ============================================================ */

@media (max-width: 980px) {
  body.nd-ui .topbar.is-open .menu {
    position: absolute;
    inset-block-start: calc(100% + var(--nd-sp-3));
    inset-inline: 0;
    z-index: 2;
    /* inline-size/max-inline-size dinolkan: .menu lama punya width:100% dan
       max-width:80vw yang akan mengecilkan panel jadi 80% layar. */
    inline-size: auto;
    max-inline-size: none;
    max-block-size: min(70vh, 26rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--nd-sp-2);
    border-block-start: 0;
    border-radius: var(--nd-r-3);
    background: var(--nd-s4);
    box-shadow: var(--nd-e4);
  }
}

/* ============================================================
   12. DROPDOWN PROVIDER VERSI SSR (partials/nd-provider-nav)
   Dipakai di halaman yang tidak memuat provider explorer di bodinya. Memakai
   <details>/<summary> supaya buka-tutupnya tidak bergantung pada JS sama sekali;
   isinya <a> nyata sehingga tetap jadi tautan internal untuk mesin pencari.
   ============================================================ */

body.nd-ui .nd-pv-wrap { position: relative; flex: 0 0 auto; }
body.nd-ui .nd-pv-wrap > summary { list-style: none; }
body.nd-ui .nd-pv-wrap > summary::-webkit-details-marker { display: none; }
body.nd-ui .nd-pv-wrap[open] > .nd-pv-btn .nd-pv-caret { transform: rotate(180deg); }
body.nd-ui .nd-pv-wrap[open] > .nd-pv-btn {
  box-shadow: 0 0 0 1px var(--pv, var(--nd-accent-400)),
              0 0 20px -6px var(--pv, var(--nd-accent-400));
}

body.nd-ui .nd-pv-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--nd-sp-2));
  inset-inline-end: 0;
  z-index: var(--nd-z-dropdown, 60);
  inline-size: min(20rem, calc(100vw - 2rem));
  background: var(--nd-s1);
  border: 0;
  border-radius: var(--nd-r-3);
  box-shadow: var(--nd-e3);
  padding: var(--nd-sp-2);
  animation: nd-pv-in var(--nd-dur-2) var(--nd-ease-out) both;
}

@keyframes nd-pv-in {
  from { opacity: 0; transform: translateY(-.4rem) scale(.98); }
  to   { opacity: 1; transform: none; }
}

body.nd-ui .nd-pv-filter {
  inline-size: 100%;
  background: var(--nd-s2);
  border: 0;
  border-radius: var(--nd-r-2);
  color: var(--nd-t1);
  font: 500 var(--nd-fs-sm) / 1.2 var(--nd-font-text);
  padding: var(--nd-sp-2) var(--nd-sp-3);
  margin-block-end: var(--nd-sp-2);
}
body.nd-ui .nd-pv-filter::placeholder { color: var(--nd-t3); }
body.nd-ui .nd-pv-filter:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--nd-accent-400); }

body.nd-ui .nd-pv-list {
  display: grid;
  gap: 2px;
  max-block-size: min(60vh, 24rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.nd-ui .nd-pv-opt {
  display: flex;
  align-items: center;
  gap: var(--nd-sp-2);
  padding: var(--nd-sp-2) var(--nd-sp-3);
  border-radius: var(--nd-r-2);
  color: var(--nd-t2);
  font: 600 var(--nd-fs-sm) / 1.2 var(--nd-font-text);
  text-decoration: none;
  transition: background-color var(--nd-dur-1) var(--nd-ease-out), color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .nd-pv-opt:hover { background: var(--nd-s2); color: var(--nd-t1); }
body.nd-ui .nd-pv-opt.is-active {
  color: var(--nd-t1);
  background: var(--pv-t, var(--nd-accent-tint));
  box-shadow: inset 0 0 0 1px var(--pv, var(--nd-accent-400));
}
body.nd-ui .nd-pv-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nd-ui .nd-pv-opt[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.nd-ui .nd-pv-panel { animation: none; }
}

/* ============================================================
   13. DROPDOWN SSR SEBAGAI SHEET DI MOBILE
   Di bawah 1024px <summary> tombol Provider di topbar memang disembunyikan
   (bagian 6) dan yang membuka <details> ini adalah slot Provider di bottom nav.
   Panel versi desktop tidak bisa dipakai apa adanya: wrap-nya duduk di dalam
   .topbar dengan ukuran 0x0, jadi panel absolut-nya nempel di pojok layar; dan
   .topbar cuma z-index 40 sementara bottom-nav 150, jadi panel ketimbun.
   ============================================================ */

@media (max-width: 1023.98px) {
  /* Angkat topbar di atas bottom-nav (150), last-watch-popup (180) dan FAB (181)
     selama panel terbuka — pola yang sama dengan .topbar.is-open untuk drawer.
     Kelas .nd-pv-open di-toggle listener 'toggle' di exoplayer-base. */
  body.nd-ui.nd-pv-open .topbar { z-index: 200; }

  /* Panel dilepas dari wrap: sheet yang duduk persis di atas bottom nav. */
  body.nd-ui .nd-pv-wrap[open] > .nd-pv-panel {
    position: fixed;
    inset-inline: var(--nd-sp-3);
    inset-block-start: auto;
    inset-block-end: calc(var(--nd-safe-bottom) + var(--nd-sp-2));
    inline-size: auto;
    /* Dibatasi + margin auto supaya di tablet tidak melar jadi pita selebar layar. */
    max-inline-size: 26rem;
    margin-inline: auto;
    padding: var(--nd-sp-3);
    border-radius: var(--nd-r-4);
    box-shadow: var(--nd-e4);
    outline: 1px solid var(--nd-line-subtle);
    animation: nd-pv-sheet-in var(--nd-dur-2) var(--nd-ease-out) both;
  }
  body.nd-ui .nd-pv-wrap[open] > .nd-pv-panel .nd-pv-list { max-block-size: 48vh; }

  /* Scrim pakai ::after milik wrap supaya tidak ada markup baru. Penutupnya ada
     di JS: pseudo-element BUKAN target event, jadi tap di scrim ber-target wrap
     sendiri dan harus diukur dari PANEL, bukan dari wrap. */
  body.nd-ui .nd-pv-wrap[open]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--nd-scrim-weak);
  }
}

@keyframes nd-pv-sheet-in {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: none; }
}

/* Spesifisitas aturan sheet (0,4,1) menang atas blok reduced-motion di bagian 12,
   jadi pengecualian gerak harus ditulis ulang di sini. */
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  body.nd-ui .nd-pv-wrap[open] > .nd-pv-panel { animation: none; }
}