/* v16.79 · Morphing Glass Navigation
   Indikator tab aktif = SATU kapsul kaca yang berpindah dan berubah bentuk (memanjang lalu menyusut),
   bukan ikon lama yang padam dan ikon baru yang menyala.

   HP (≤640px)   : memakai .npv-ind yang sudah ada (v16.75). Yang baru hanya efek morph pada kapsulnya.
   Desktop (≥641px): satu elemen .mg-ind disisipkan oleh morph-nav.js ke dalam .nav-wrap.
                     Kapsul per-tombol (.active) dimatikan HANYA bila .mg-on ada di .nav-wrap.

   Fallback (tanpa animasi): prefers-reduced-motion, html.mo-lite, data-ui-effects="low", atau tanpa
   Element.animate → kapsul langsung pindah. Tanpa JS sama sekali → .mg-on tidak pernah dipasang, sehingga
   tampilan persis v16.78. Dimuat setelah prismatic-edge.css. Hapus <link> ini (dan morph-nav.js) untuk kembali ke v16.78. */

/* ---------- Dasar: kapsul tidak pernah ikut tata letak (anak flex .nav-wrap) ---------- */
.nav-wrap > .mg-ind { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; }
@media (max-width: 640px) { .nav-wrap > .mg-ind { display: none; } }   /* HP memakai dock; strip tab sudah disembunyikan */

/* ---------- Desktop / tablet ---------- */
@media (min-width: 641px) {
  /* tombol tampil di atas kapsul */
  html body.authed #app .glass-pill.nav-wrap.mg-on .nav-pill-btn { position: relative; z-index: 1; }

  /* kapsul bersama: bentuk & material sama dengan kapsul aktif v16.75 (token --gn-cap-*) */
  .nav-wrap > .mg-ind {
    width: 0; height: 0; z-index: 0;
    border-radius: 18px;
    transform-origin: 0 50%;
    background: var(--gn-cap-bg);
    box-shadow: var(--gn-cap-edge), var(--gn-cap-drop);
    transition: opacity .2s ease;
  }
  /* pantulan cahaya tipis di tepi atas kapsul */
  .nav-wrap > .mg-ind::after {
    content: ''; position: absolute; top: 1px; left: 50%; width: 26px; height: 1px; margin-left: -13px;
    border-radius: 1px; background: linear-gradient(90deg, transparent, var(--gn-cap-spec), transparent);
  }

  /* matikan kapsul per-tombol dari v16.75.1 (kapsul sekarang milik .mg-ind) */
  html body.authed #app .glass-pill.nav-wrap.mg-on .nav-pill-btn.active {
    background: transparent !important;
    box-shadow: none !important;
  }
  html body.authed #app .glass-pill.nav-wrap.mg-on .nav-pill-btn.active::after { opacity: 0; }
  /* cincin fokus keyboard tetap terlihat pada tab aktif */
  html body.authed #app .glass-pill.nav-wrap.mg-on .nav-pill-btn.active:focus-visible {
    box-shadow: var(--focus-ring, 0 0 0 2px #0E0F11, 0 0 0 4px #C8A96A) !important;
  }
}

/* Kontras lebih tinggi: tepi kapsul tegas (pengganti aturan per-tombol v16.75.1) */
@media (min-width: 641px) and (prefers-contrast: more) {
  .nav-wrap > .mg-ind { box-shadow: inset 0 0 0 1.5px var(--accent-text, #C8A96A); }
}
/* Warna paksa: kapsul menjadi garis sistem; garis per-tombol dimatikan agar tidak ganda */
@media (min-width: 641px) and (forced-colors: active) {
  .nav-wrap > .mg-ind { background: transparent; box-shadow: none; border: 1px solid Highlight; box-sizing: border-box; }
  .nav-wrap > .mg-ind::after { display: none; }
  html body.authed #app .glass-pill.nav-wrap.mg-on .nav-pill-btn.active { border-width: 0; }
}

/* ---------- HP: morph pada kapsul .npv-ind ----------
   Kelas .mg-go dipasang sebentar oleh morph-nav.js tiap kali tab berpindah.
   Sisi belakang (trailing edge) tetap, sisi depan memanjang searah gerak, lalu menyusut: kapsul terasa "cair".
   --mg-sx = rasio panjang puncak (dihitung dari jarak lompatan). Hanya transform + filter; tanpa layout. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  html:not(.mo-lite):not([data-ui-effects="low"]) body.npv.authed .npv-dock .npv-ind[data-mg-dir="r"]::before { transform-origin: 0 50%; }
  html:not(.mo-lite):not([data-ui-effects="low"]) body.npv.authed .npv-dock .npv-ind[data-mg-dir="l"]::before { transform-origin: 100% 50%; }
  html:not(.mo-lite):not([data-ui-effects="low"]) body.npv.authed .npv-dock .npv-ind.mg-go::before {
    animation: mg-dock-morph .46s cubic-bezier(.3, .8, .3, 1);
  }
  @keyframes mg-dock-morph {
    0%   { transform: scale(1, 1); filter: none; }
    38%  { transform: scale(var(--mg-sx, 1.3), .9); filter: brightness(1.14); }
    100% { transform: scale(1, 1); filter: none; }
  }
}