/* =====================================================================
   AkseleraSync — Layar Pemilih Portal
   ---------------------------------------------------------------------
   Layar pertama yang dilihat prospek sebelum masuk portal mana pun.
   Seluruh spacing/radius/tipografi/elevasi/durasi memakai token dari
   assets/css/tokens.css (dimuat lebih dulu).

   Aturan yang dijaga di berkas ini:
   - Tidak ada font-size di bawah var(--fs-caption) (12px).
   - Setiap kartu portal minimal setinggi var(--touch-min).
   - Tidak ada style inline di markup; semua dari class di sini.
   ===================================================================== */

.portal-selector-active .portal-selector-screen {
  min-height: 100dvh;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background:
    radial-gradient(circle at 10% 1%, rgba(215, 165, 46, .18), transparent 19rem),
    linear-gradient(180deg, #f8f6f0 0%, var(--canvas, #fcfbf7) 48%, #f4f7f6 100%);
}

/* --- Tombol "ganti portal" di kaki Beranda ------------------------- */
.portal-footer-block {
  display: grid;
  gap: var(--sp-3);
}

.portal-footer-block .brand-footer {
  margin-bottom: 0;
}

.portal-switch-action {
  width: 100%;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(36, 59, 114, .14);
  border-radius: var(--r-lg);
  color: var(--indigo, #243b72);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--elev-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.portal-switch-action:hover {
  border-color: rgba(36, 59, 114, .28);
  background: var(--indigo-soft, #e9edf6);
}

.portal-switch-action:active {
  transform: scale(.985);
}

.portal-switch-action .custom-icon,
.portal-switch-action .material-symbols-rounded {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.portal-selector-active > #bottomNav,
.portal-selector-active > #pageWatermark,
.portal-selector-active > #sheetLayer,
.portal-selector-active > #toast,
.portal-selector-active > #swipeBackHint {
  display: none !important;
}

/* --- Kerangka layar ------------------------------------------------- */
.portal-selector {
  --selector-radius: var(--r-xl);
  --selector-gutter: var(--sp-5);
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink, #15244a);
}

/* Pita gelap di belakang header. Dibuat full-bleed dengan sengaja. */
.portal-selector::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: calc(122px + env(safe-area-inset-top, 0px));
  border-radius: 0 0 var(--sp-7) var(--sp-7);
  background:
    radial-gradient(ellipse at 92% 112%, rgba(41, 218, 222, .3) 0%, rgba(41, 218, 222, .07) 40%, transparent 66%),
    radial-gradient(circle at 4% -25%, rgba(103, 139, 232, .34) 0%, transparent 48%),
    linear-gradient(142deg, #0f1935 0%, #1a346b 54%, #0b5369 100%);
  box-shadow: var(--elev-3);
  animation: portal-header-in calc(var(--motion-slow) + var(--motion-base)) var(--motion-ease) both;
}

.portal-selector__glow {
  position: absolute;
  z-index: -1;
  border-radius: var(--r-pill);
  pointer-events: none;
  filter: blur(1px);
  opacity: .55;
}

.portal-selector__glow--one {
  top: 128px;
  right: -82px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(8, 122, 96, .18), transparent 68%);
}

.portal-selector__glow--two {
  bottom: 2%;
  left: -100px;
  width: 230px;
  height: 230px;
  background: radial-gradient(circle, rgba(215, 165, 46, .15), transparent 68%);
}

/* --- Header brand --------------------------------------------------- */
.portal-selector__header {
  min-height: calc(112px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--selector-gutter) var(--sp-5);
  color: #fff;
}

.portal-selector__brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.portal-selector__brand-mark {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18));
}

.portal-selector__brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.portal-selector__brand-copy strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.portal-selector__brand-copy small {
  margin-top: var(--sp-1);
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

/* Bayangan gelap disengaja: logo duduk di atas pita navy, sedangkan
   token --elev-* disetel untuk kanvas terang dan tidak terbaca di sini. */
.portal-selector__school {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: contain;
  padding: var(--sp-1);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

/* --- Isi ------------------------------------------------------------ */
.portal-selector__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--sp-7) var(--selector-gutter) var(--sp-5);
  animation: portal-content-in var(--motion-slow) var(--motion-fast) var(--motion-ease) both;
}

.portal-selector__eyebrow {
  align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  color: var(--emerald-dark, #075b49);
  border: 1px solid rgba(8, 122, 96, .15);
  border-radius: var(--r-pill);
  background: var(--emerald-soft, #e7f3ef);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.portal-selector h1 {
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: clamp(var(--fs-display), 7.4vw, calc(var(--fs-display) * 1.36));
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.portal-selector h1:focus {
  outline: none;
}

.portal-selector__lead {
  max-width: 52ch;
  margin: 0;
  color: var(--muted, #64718a);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

.portal-selector__choices {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --- Kartu portal ---------------------------------------------------
   Keempat portal setara; tidak ada yang lebih utama. Karena itu kartu
   dibedakan HANYA pada satu tingkat: warna ubin ikon. Latar kartu,
   border, bayangan, panah, dan seluruh perilaku hover identik untuk
   keempatnya, sehingga tidak ada kartu yang tampak "terpilih".

   Warna diambil dari palet brand, satu per portal, dan seluruh tint
   dihitung pada persentase yang sama di atas putih (16% untuk ubin,
   24% untuk garis ubin) supaya intensitasnya benar-benar seragam.  */
.portal-choice {
  position: relative;
  width: 100%;
  min-height: max(var(--touch-min), 108px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-align: left;
  border: 1px solid var(--line, #e7e3d9);
  border-radius: var(--selector-radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--elev-1);
  cursor: pointer;
  animation: portal-choice-in var(--motion-base) var(--motion-ease) both;
  transition:
    transform var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease);
  -webkit-tap-highlight-color: transparent;
}

.portal-choice:nth-child(1) { animation-delay: calc(var(--motion-fast) * 1); }
.portal-choice:nth-child(2) { animation-delay: calc(var(--motion-fast) * 1.5); }
.portal-choice:nth-child(3) { animation-delay: calc(var(--motion-fast) * 2); }
.portal-choice:nth-child(4) { animation-delay: calc(var(--motion-fast) * 2.5); }

.portal-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.portal-choice:focus-visible {
  outline: 3px solid rgba(36, 59, 114, .34);
  outline-offset: 3px;
  border-color: rgba(36, 59, 114, .34);
}

.portal-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(36, 59, 114, .23);
  box-shadow: var(--elev-2);
}

.portal-choice:active {
  transform: translateY(0) scale(.992);
}

.portal-choice__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--portal-accent-soft, #e9edf6);
  box-shadow: inset 0 0 0 1px var(--portal-accent-line, transparent);
}

.portal-choice__icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(21, 36, 74, .12));
}

/* Set ikon SVG inline — digambar sebagai satu keluarga di portal-router.js.
   Tanpa drop-shadow: goresan sudah tegas, bayangan justru mengaburkannya
   pada ukuran kecil. */
.portal-choice__glyph {
  width: 42px;
  height: 42px;
  display: block;
}

/* Sebagian aset ikon (mis. leadership-home.webp) diekspor tanpa kanal
   alfa sehingga membawa kotak putih ikut serta. Tanpa penanganan ini,
   kotak putihnya menutupi ubin berwarna dan kartu itu jadi terlihat
   berbeda sendiri. multiply membuat area putih menyatu dengan ubin
   tanpa mengubah artwork-nya. Lihat catatan aset di portal-router.js. */
.portal-choice__icon--boxed img {
  mix-blend-mode: multiply;
  filter: none;
}

.portal-choice__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.portal-choice__label {
  color: var(--ink, #15244a);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}

.portal-choice__description {
  color: var(--muted, #64718a);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.portal-choice__arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--indigo-soft, #e9edf6);
  transition:
    transform var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease);
}

.portal-choice__arrow img {
  width: 19px;
  height: 19px;
}

.portal-choice:hover .portal-choice__arrow {
  transform: translateX(2px);
  background: #dfe6f3;
}

/* --- Aksen per portal -----------------------------------------------
   Satu warna brand per portal. Pemetaannya mempertahankan warna yang
   sudah dipakai chrome masing-masing portal (Guru zamrud, Staf indigo,
   Pimpinan emas), dan Wali mengambil terakota yang belum terpakai —
   sekaligus melepas emas agar tidak dipakai dua portal sekaligus.

   --portal-accent-soft = warna brand 16% di atas putih
   --portal-accent-line = warna brand 24% di atas putih
   Persentasenya sama untuk keempatnya, jadi tidak ada yang lebih kuat. */

/* Terakota Hangat #C6613B */
.portal-choice--wali {
  --portal-accent-soft: #f6e6e0;
  --portal-accent-line: #f1d9d0;
}

/* Zamrud Amanah #087A60 */
.portal-choice--guru {
  --portal-accent-soft: #d7eae6;
  --portal-accent-line: #c4dfd9;
}

/* Indigo Madani #243B72 */
.portal-choice--staf {
  --portal-accent-soft: #dce0e8;
  --portal-accent-line: #cad0dd;
}

/* Emas Ilmu #D7A52E */
.portal-choice--pimpinan {
  --portal-accent-soft: #f9f1de;
  --portal-accent-line: #f5e9cd;
}

/* --- Merebut kembali kesetaraan kartu -------------------------------
   assets/css/portal-leadership.css baris 25-42 dimuat SETELAH berkas ini
   (index.html memuat portal-router.css lalu portal-leadership.css) dan
   menimpa kartu Pimpinan dengan latar gradasi emas, ubin emas, panah
   emas, serta hover khusus. Akibatnya kartu Pimpinan terbaca seperti
   sedang terpilih dan tiga kartu lain terasa sekunder — padahal keempat
   portal setara.

   Layar pemilih adalah milik berkas ini; stylesheet portal semestinya
   tidak menjangkau ke dalamnya. Selama aturan di sana belum dihapus,
   blok ini mengambil kembali kendali lewat specificity yang lebih tinggi
   (prefiks .portal-selector__choices), bukan dengan !important.

   TINDAK LANJUT: hapus blok "Portal switcher" di portal-leadership.css
   baris 25-42; setelah itu seluruh blok ini boleh ikut dihapus. */
.portal-selector__choices .portal-choice--pimpinan {
  border-color: var(--line, #e7e3d9);
  background: rgba(255, 255, 255, .96);
}

.portal-selector__choices .portal-choice--pimpinan:hover {
  border-color: rgba(36, 59, 114, .23);
  box-shadow: var(--elev-2);
}

.portal-selector__choices .portal-choice--pimpinan .portal-choice__icon {
  background: var(--portal-accent-soft);
  box-shadow: inset 0 0 0 1px var(--portal-accent-line);
}

.portal-selector__choices .portal-choice--pimpinan .portal-choice__arrow {
  background: var(--indigo-soft, #e9edf6);
}

/* Delay mentah .32s dari berkas yang sama mengabaikan token gerak. */
.portal-selector__choices .portal-choice:nth-child(4) {
  animation-delay: calc(var(--motion-fast) * 2.5);
}

/* --- Catatan & kaki -------------------------------------------------- */
.portal-selector__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: 0 var(--sp-1);
  color: var(--muted, #64718a);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.portal-selector__note img {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}

.portal-selector__footer {
  padding: var(--sp-3) var(--selector-gutter) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  color: #8a93a6;
  font-size: var(--fs-caption);
  text-align: center;
}

.portal-selector__footer strong {
  color: var(--indigo, #243b72);
  font-weight: var(--fw-heavy);
}

@keyframes portal-header-in {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes portal-content-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes portal-choice-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Tablet & desktop -----------------------------------------------
   Cangkang aplikasi (#app) dibatasi 480px karena seluruh portal memang
   berbingkai ponsel. Layar pemilih adalah pengecualian yang disengaja:
   ini layar pertama yang sering ditayangkan lewat proyektor, dan pada
   480px separuh layar 1280 hanya jadi ruang kosong. Selama mode pemilih
   aktif — dan HANYA selama itu — bingkai dilebarkan ke 760px sehingga
   kartu muat dua kolom dengan lebar wajar (~330px), tidak melar. Batas
   kembali ke 480px begitu portal dipasang.                            */
@media (min-width: 620px) {
  .portal-selector,
  .portal-selector-active .portal-selector-screen {
    min-height: calc(100dvh - var(--sp-8));
  }

  .portal-selector {
    --selector-gutter: var(--sp-6);
  }

  .portal-selector::before {
    border-radius: var(--sp-7) var(--sp-7) var(--sp-8) var(--sp-8);
  }
}

@media (min-width: 900px) {
  /* Menang atas .app { max-width: 480px } dari <style> index.html lewat
     urutan sumber: portal-router.css dimuat setelahnya. */
  .portal-selector-active {
    max-width: 760px;
  }

  .portal-selector {
    --selector-gutter: var(--sp-7);
  }

  .portal-selector::before {
    height: calc(164px + env(safe-area-inset-top, 0px));
  }

  .portal-selector__header {
    min-height: calc(154px + env(safe-area-inset-top, 0px));
  }

  /* Isi ditambatkan tepat di bawah pita, BUKAN dipusatkan. Memusatkan
     akan membagi sisa ruang menjadi dua celah besar (di bawah pita dan
     di atas footer) sehingga layar terasa mengambang. Dengan ditambatkan,
     setiap jarak antar bagian adalah nilai --sp-* yang eksplisit dan
     sisa ruang hanya terkumpul di satu tempat: di atas footer. */
  .portal-selector__content {
    padding-block: var(--sp-7) var(--sp-6);
  }

  /* Grid kartu yang menyerap sisa ruang.

     Tinggi jendela desktop bervariasi (800 / 900 / 1080), sedangkan isi
     selain kartu tingginya tetap. Daripada menebak tinggi kartu dengan
     angka ajaib, grid diberi flex:1 sehingga ia sendiri yang mengambil
     sisa ruang, dengan dua baris 1fr yang membaginya rata. Hasilnya
     jarak "kartu -> note" dan "note -> footer" selalu persis nilai
     --sp-*, bukan sisa ruang, di seluruh rentang tinggi yang wajar.

     minmax(140px, 1fr) menjaga kartu tetap layak di jendela pendek;
     max-height mencegah kartu jadi kosong melompong di layar sangat
     tinggi. */
  .portal-selector__choices {
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(140px, 1fr));
    max-height: clamp(320px, 44vh, 460px);
    gap: var(--sp-5);
    margin-top: var(--sp-7);
  }

  .portal-choice {
    padding: var(--sp-5);
    gap: var(--sp-4);
  }

  .portal-choice__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--r-xl);
  }

  .portal-choice__icon img,
  .portal-choice__glyph {
    width: 52px;
    height: 52px;
  }

  .portal-selector__note {
    align-self: flex-start;
    margin-top: var(--sp-6);
  }
}

@media (max-width: 340px) {
  .portal-selector {
    --selector-gutter: var(--sp-4);
  }

  .portal-selector__school {
    width: 46px;
    height: 46px;
  }

  .portal-choice {
    grid-template-columns: auto minmax(0, 1fr);
    padding-inline: var(--sp-3);
  }

  .portal-choice__icon {
    width: 51px;
    height: 51px;
  }

  .portal-choice__arrow {
    display: none;
  }
}

/* Jendela desktop pendek (mis. 1280x768): rapatkan agar layar pemilih
   tetap muat tanpa menggulir. */
@media (min-width: 900px) and (max-height: 820px) {
  .portal-selector::before {
    height: calc(140px + env(safe-area-inset-top, 0px));
  }

  .portal-selector__header {
    min-height: calc(130px + env(safe-area-inset-top, 0px));
  }

  .portal-selector__content {
    padding-block: var(--sp-6) var(--sp-5);
  }

  .portal-selector__choices {
    grid-template-rows: repeat(2, minmax(124px, 1fr));
    margin-top: var(--sp-6);
  }
}

@media (max-height: 760px) and (max-width: 899px) {
  .portal-selector::before {
    height: calc(104px + env(safe-area-inset-top, 0px));
  }

  .portal-selector__header {
    min-height: calc(98px + env(safe-area-inset-top, 0px));
    padding-top: calc(var(--sp-4) + env(safe-area-inset-top, 0px));
    padding-bottom: var(--sp-4);
  }

  .portal-selector__content {
    padding-top: var(--sp-5);
  }

  .portal-selector h1 {
    margin-top: var(--sp-2);
  }

  .portal-selector__choices {
    gap: var(--sp-2);
    margin-top: var(--sp-5);
  }

  .portal-choice {
    padding-block: var(--sp-3);
  }

  .portal-choice__icon {
    width: 52px;
    height: 52px;
  }

  .portal-selector__note {
    margin-top: var(--sp-4);
  }

  .portal-selector__footer {
    padding-top: var(--sp-2);
  }
}

/* Token --motion-* sudah menjadi 0ms saat gerak dikurangi; aturan di bawah
   memastikan animasi masuk benar-benar mati, termasuk untuk pengguna yang
   memilih .reduce-motion dari dalam aplikasi. */
@media (prefers-reduced-motion: reduce) {
  .portal-selector::before,
  .portal-selector__content,
  .portal-choice,
  .portal-choice__arrow {
    animation: none;
    transition: none;
  }
}

.reduce-motion .portal-selector::before,
.reduce-motion .portal-selector__content,
.reduce-motion .portal-choice,
.reduce-motion .portal-choice__arrow {
  animation: none;
  transition: none;
}

/* Portal Wali action-target floor: preserve icon size while enlarging the hit area. */
html[data-active-portal="wali"] .topbar :is(.back-btn, .top-action) {
  width: var(--touch-min);
  min-width: var(--touch-min);
  height: var(--touch-min);
  min-height: var(--touch-min);
  flex-basis: var(--touch-min);
}