/* ═══ Presisi · halaman: auth ═════════════════════════════════════════
   Masuk/Daftar (student/login.html), Lupa kata sandi (forgot_password),
   Atur ulang kata sandi (reset_password), Menunggu verifikasi (pending),
   Hasil verifikasi email (verify_result).
   Template memakai dua kelas: s-* (kerangka klasik + hook student.js) dan
   ps-* (gaya ini). Gaya inline yang khusus klasik dirender hanya saat
   PRESISI_UI mati; di sini semuanya lewat kelas. Semua selector diawali .ps-ui.
   Jangan set `display` pada #auth-error, #fp-error, #fp-success, #rp-error,
   #rp-success: JS mengatur style.display. */

/* ── bingkai: kartu di tengah, rata atas; kaki halaman tetap di dasar layar ── */
/* width: di kerangka tamu <main> adalah item flex dengan margin auto (shrink-to-fit);
   tanpa ini kartu ikut menyempit bila teksnya pendek */
.ps-ui .ps-content:has(> .ps-auth) { flex: 1 0 auto; width: 100%; }
/* .s-auth-container (student.css) membawa justify-content:center; di grid itu membuat
   lajur menyusut ke lebar isi. Lajur eksplisit selebar wadah, kartu tetap di tengah. */
.ps-ui .ps-auth { min-height: 0; padding: 20px 0 16px; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.ps-ui .ps-auth-card { max-width: 440px; min-width: 0; }   /* min-width: item grid tidak boleh melebar mengikuti isi (captcha 300px) */

/* ── judul & pengantar ─────────────────────────────────────────────── */
.ps-ui .ps-auth .s-auth-title { margin: 0 0 6px; font-size: var(--ps-fs-3xl); font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; color: var(--ps-tx); text-wrap: balance; }
.ps-ui .ps-auth .s-auth-subtitle { margin: 0 0 24px; font-size: var(--ps-fs-md); line-height: 1.55; color: var(--ps-tx-2); text-wrap: pretty; }
.ps-ui .ps-auth .s-auth-subtitle strong { color: var(--ps-tx); font-weight: 700; overflow-wrap: anywhere; }

/* ── catatan (sesi berakhir di login, email belum terkirim di pending) ── */
.ps-ui .ps-auth .s-kicked-notice { margin: 0 0 20px; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--ps-kin) 38%, var(--ps-surface)); border-radius: var(--ps-r); background: var(--ps-kin-tint); color: var(--ps-tx-2); font-size: var(--ps-fs-sm); line-height: 1.5; text-align: left; }
.ps-ui .ps-auth .s-kicked-notice strong { display: block; margin-bottom: 2px; color: var(--ps-tx); font-weight: 700; }

/* ── formulir ──────────────────────────────────────────────────────── */
.ps-ui .ps-auth .s-auth-form { gap: 18px; }
.ps-ui .ps-auth .ps-field { gap: 6px; }
.ps-ui .ps-auth .ps-field > label { margin: 0; font-size: var(--ps-fs-sm); font-weight: 700; line-height: 1.4; color: var(--ps-tx); }
.ps-ui .ps-auth .ps-field input { height: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--ps-r); background: var(--ps-surface); color: var(--ps-tx); font-family: var(--ps-font); font-size: 16px; letter-spacing: normal; line-height: normal; }
.ps-ui .ps-auth .ps-field input::placeholder { color: var(--ps-tx-3); opacity: 1; }
.ps-ui .ps-auth .ps-field input:hover:not(:focus) { border-color: color-mix(in oklab, var(--ps-tx-3) 40%, var(--ps-bd)); }
/* kode referral: huruf kapital lebih mudah dibaca dengan sedikit jarak */
.ps-ui .ps-auth #referral_code:not(:placeholder-shown) { letter-spacing: 0.06em; }
/* teks bantuan: tx-2 (tx-3 di 12px tidak lolos kontras AA) */
.ps-ui .ps-auth .ps-field small, .ps-ui .ps-auth .ps-field .ps-help { font-size: var(--ps-fs-xs); line-height: 1.5; color: var(--ps-tx-2); }
/* status cek nama pengguna: warna diatur student.js; kosong = tidak memakan ruang */
.ps-ui .ps-auth #username-status { display: block; min-height: 0; margin: 0; font-weight: 700; }
.ps-ui .ps-auth #username-status:empty { position: absolute; }   /* keluar dari grid: tanpa celah ganda, tetap di pohon aksesibilitas (aria-live) */

/* tombol tampil/sembunyi kata sandi: ditengahkan tanpa transform (aturan
   global button:active mengganti transform dan membuat tombol melompat) */
.ps-ui .ps-auth .s-pw-wrap > input { padding-right: 48px; }
.ps-ui .ps-auth .s-pw-toggle { top: 0; bottom: 0; right: 4px; margin: auto 0; transform: none; width: 36px; height: 36px; border-radius: var(--ps-r-sm); color: var(--ps-tx-3); transition: background-color var(--ps-t) var(--ps-ease), color var(--ps-t) var(--ps-ease); }
.ps-ui .ps-auth .s-pw-toggle:hover { background: var(--ps-sunken); color: var(--ps-tx); }
.ps-ui .ps-auth .s-pw-toggle:active { transform: none; }
.ps-ui .ps-auth .s-pw-toggle[aria-pressed="true"] { color: var(--ps-kon-3); }
.ps-ui .ps-auth .s-pw-toggle:focus-visible { outline: 2px solid var(--ps-kon-3); outline-offset: 0; }

/* ── pesan: error, sukses, panel email belum diverifikasi ───────────── */
.ps-ui .ps-auth .s-auth-error { padding: 10px 14px; border: 1px solid color-mix(in oklab, var(--ps-danger) 26%, var(--ps-surface)); border-radius: var(--ps-r); background: var(--ps-danger-soft); color: var(--ps-danger-tx); font-size: var(--ps-fs-sm); line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.ps-ui .ps-auth .ps-auth-ok { padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--ps-ok) 28%, var(--ps-surface)); border-radius: var(--ps-r); background: var(--ps-ok-soft); color: var(--ps-ok-tx); font-size: var(--ps-fs-sm); line-height: 1.55; text-align: left; overflow-wrap: anywhere; }
.ps-ui .ps-auth .ps-auth-ok strong { font-weight: 700; }
/* login ditolak karena email belum diverifikasi: panel petunjuk + kirim ulang
   (HTML disisipkan student.js ke #auth-error), bukan error merah */
.ps-ui .ps-auth .s-auth-error:has(#resend-verify-btn) { border-color: color-mix(in oklab, var(--ps-kin) 38%, var(--ps-surface)); background: var(--ps-kin-tint); color: var(--ps-tx-2); }
.ps-ui .ps-auth .s-auth-error:has(#resend-verify-btn) strong { color: var(--ps-tx); font-weight: 700; }
.ps-ui .ps-auth #resend-verify-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 14px; border: 1px solid var(--ps-bd); border-radius: var(--ps-r); background: var(--ps-surface); color: var(--ps-tx); font-family: var(--ps-font); font-size: var(--ps-fs-sm); font-weight: 700; box-shadow: var(--ps-sh-1); cursor: pointer; transition: border-color var(--ps-t) var(--ps-ease); }
.ps-ui .ps-auth #resend-verify-btn:hover:not(:disabled), .ps-ui .ps-auth #resend-verify-btn:active:not(:disabled) { border-color: var(--ps-tx-3); background: var(--ps-surface); transform: none; }
.ps-ui .ps-auth #resend-verify-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* captcha Turnstile (iframe 300px): perkecil di layar sangat sempit */
@media (max-width: 370px) {
  .ps-ui .ps-auth .cf-turnstile { max-width: 100%; transform: scale(0.83); transform-origin: left top; }
}

/* ── tombol utama lebar penuh ──────────────────────────────────────── */
.ps-ui .ps-auth .s-auth-submit { width: 100%; height: 46px; margin-top: 2px; padding: 0 16px; border-radius: var(--ps-r); font-size: var(--ps-fs-md); }
.ps-ui .ps-auth .s-auth-submit:disabled { opacity: 0.6; }

/* catatan kecil di bawah tombol */
.ps-ui .ps-auth .ps-auth-note { display: block; margin-top: -6px; text-align: center; font-size: var(--ps-fs-xs); line-height: 1.5; color: var(--ps-tx-2); text-wrap: pretty; }

/* ── tautan alternatif di kaki kartu ───────────────────────────────── */
.ps-ui .ps-auth .ps-auth-alt { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--ps-bd-2); text-align: center; font-size: var(--ps-fs-sm); line-height: 1.6; color: var(--ps-tx-2); }
.ps-ui .ps-auth .ps-auth-alt a { display: inline-flex; align-items: center; gap: 4px; color: var(--ps-kin-hi); font-weight: 700; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--ps-t) var(--ps-ease), color var(--ps-t) var(--ps-ease); }
.ps-ui .ps-auth .ps-auth-alt a:hover { text-decoration-color: currentColor; }
.ps-ui .ps-auth .ps-auth-alt a:active { transform: none; }
.ps-ui .ps-auth .ps-auth-alt .ps-i { width: 16px; height: 16px; }
.ps-ui .ps-auth .ps-auth-forgot { margin-bottom: 6px; }
.ps-ui .ps-auth .ps-auth-forgot a { color: var(--ps-tx-2); font-weight: 700; }
.ps-ui .ps-auth .ps-auth-forgot a:hover { color: var(--ps-tx); }

/* ── halaman status (pending, verify_result) ───────────────────────── */
.ps-ui .ps-auth .ps-auth-ic { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px; border-radius: var(--ps-r-lg); background: var(--ps-ok-soft); color: var(--ps-ok-tx); font-size: 0; }
.ps-ui .ps-auth .ps-auth-ic .ps-i { width: 24px; height: 24px; stroke-width: 2; }
.ps-ui .ps-auth .ps-auth-ic-info { background: var(--ps-kin-soft); color: var(--ps-kin-hi); }
.ps-ui .ps-auth .ps-auth-ic-fail { background: var(--ps-danger-soft); color: var(--ps-danger-tx); }

/* data akun: baris label/nilai bergaris tipis, rata kiri */
.ps-ui .ps-auth .s-pending-info { margin: 0 0 14px; padding: 0; border: 0; border-top: 1px solid var(--ps-bd-2); border-bottom: 1px solid var(--ps-bd-2); border-radius: 0; background: none; text-align: left; }
.ps-ui .ps-auth .s-pending-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: var(--ps-fs-sm); line-height: 1.45; color: var(--ps-tx-2); }
.ps-ui .ps-auth .s-pending-row + .s-pending-row { border-top: 1px solid var(--ps-bd-2); }
.ps-ui .ps-auth .s-pending-row > span { flex: none; }
.ps-ui .ps-auth .s-pending-row > strong { min-width: 0; color: var(--ps-tx); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.ps-ui .ps-auth .s-pending-note { font-size: var(--ps-fs-xs); line-height: 1.55; color: var(--ps-tx-2); text-wrap: pretty; }

/* baris tombol aksi */
.ps-ui .ps-auth .ps-auth-actions { display: flex; gap: 10px; margin-top: 20px; }
.ps-ui .ps-auth .ps-auth-actions-col { flex-direction: column; }
.ps-ui .ps-auth .ps-auth-actions .ps-btn { flex: 1 1 0; min-width: 0; height: 46px; min-height: 46px; padding: 0 16px; border-radius: var(--ps-r); font-family: var(--ps-font); font-size: var(--ps-fs-md); font-weight: 700; line-height: 1.2; text-decoration: none; }
.ps-ui .ps-auth .ps-auth-actions-col .ps-btn { flex: none; width: 100%; }
.ps-ui .ps-auth .ps-auth-actions .ps-btn-primary { border-color: transparent; background: var(--ps-kon); color: var(--ps-kon-on); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08), var(--ps-sh-1); }
.ps-ui .ps-auth .ps-auth-actions .ps-btn-primary:hover:not(:disabled), .ps-ui .ps-auth .ps-auth-actions .ps-btn-primary:active:not(:disabled) { background: var(--ps-kon-2); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08), var(--ps-sh-1); }
.ps-ui .ps-auth .ps-auth-actions .ps-btn-secondary { border-color: var(--ps-bd); background: var(--ps-surface); color: var(--ps-tx); box-shadow: var(--ps-sh-1); }
.ps-ui .ps-auth .ps-auth-actions .ps-btn-secondary:hover:not(:disabled), .ps-ui .ps-auth .ps-auth-actions .ps-btn-secondary:active:not(:disabled) { border-color: var(--ps-tx-3); background: var(--ps-surface); }
.ps-ui .ps-auth .ps-auth-actions .ps-btn:disabled { opacity: 0.6; }
/* status kirim ulang di halaman pending: kosong = tidak memakan ruang */
.ps-ui .ps-auth #pending-resend-status { min-height: 0; font-size: var(--ps-fs-xs); line-height: 1.5; color: var(--ps-tx-2); }
.ps-ui .ps-auth #pending-resend-status:empty { position: absolute; }

/* ── sentuh: target ≥44px ──────────────────────────────────────────── */
@media (pointer: coarse) {
  .ps-ui .ps-auth .ps-field input { height: 48px; }
  .ps-ui .ps-auth .s-pw-toggle { right: 2px; width: 44px; height: 44px; }
  .ps-ui .ps-auth #resend-verify-btn { min-height: 44px; }
  .ps-ui .ps-auth .ps-auth-alt a { min-height: 44px; }
  .ps-ui .ps-auth .ps-auth-forgot { margin-bottom: 0; }
}

/* ── HP ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ps-ui .ps-auth { padding: 0 0 8px; }
  .ps-ui .ps-anon .ps-content:has(> .ps-auth) { padding-bottom: 32px; }
  .ps-ui .ps-auth .s-auth-title { font-size: var(--ps-fs-2xl); }
  .ps-ui .ps-auth .s-auth-subtitle { margin-bottom: 20px; }
  .ps-ui .ps-auth .ps-auth-alt { margin-top: 20px; padding-top: 14px; }
}