/*
 * Gaya halaman masuk dan daftar akun.
 *
 * `error` menjadi `galatAuth` dan `notice` menjadi `noticeAuth`: keduanya
 * bentrok dengan berkas yang selalu ikut dimuat. `.error` di page.css adalah
 * kotak galat sehalaman penuh, `.notice` di kaki.css berwarna untuk latar
 * gelap. Nilainya tidak berubah; tabrakan dicari `npm run cek-css`.
 */
/* Halaman autentikasi anggota: buat akun, masuk, atur sandi, lupa sandi. */

/*
  DIPUSATKAN, bukan menempel ke tepi kiri.

  Halaman-halaman ini isinya cuma satu kolom sempit. Di dalam pembungkus
  selebar 76rem, kolom 32rem yang rata kiri menyisakan bidang kosong hampir
  selebar dua kali dirinya sendiri di sebelah kanan — halaman terbaca seperti
  belum selesai dimuat. Berbeda dengan halaman daftar, di sini tidak ada apa
  pun yang akan mengisi ruang itu, jadi kolomnya yang harus pindah ke tengah.
*/
.body {
  max-width: 32rem;
  margin: 2.5rem auto 0;
}

.form {
  padding: 2rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-kartu);
  box-shadow: var(--naik-panel);
}

.field {
  margin-bottom: 1.25rem;
}

.label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--t-dasar);
  font-weight: 600;
}

/*
  Bidang isian sengaja BESAR.

  Yang mengisi formulir ini guru besar, sebagian jauh di atas enam puluh tahun,
  dan sebagian membukanya dari ponsel. Tinggi 0.6rem padding memenuhi syarat
  minimum, tetapi memenuhi syarat bukan tujuannya di sini.
*/
.input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--t-isi);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.input:hover {
  border-color: var(--brand-300);
}

/*
  Cincin fokus memakai `box-shadow`, bukan `outline` tebal.

  Outline 3px pada kotak bersudut membulat digambar sebagian peramban sebagai
  persegi — sudutnya terpotong dan terlihat rusak. Bayangan mengikuti radiusnya.
  `outline` tetap disetel transparan agar mode kontras tinggi Windows, yang
  mengabaikan bayangan, tetap punya penanda fokus.
*/
.input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--primary);
  /* Halo lewat token: `--brand-100` terang / `--brand-950` gelap, nilai yang
     sama persis seperti sebelumnya. Media query yang dulu ada di bawah aturan
     ini tidak mengenal toggle tema, sehingga memilih tema terang di atas
     sistem gelap menyisakan halo gelap di sekeliling medan terang.

     Aturan yang IDENTIK juga ada di status.module.css. Menyatukannya menjadi
     satu primitif cincin fokus di page.module.css adalah pekerjaan terpisah. */
  box-shadow: 0 0 0 3px var(--brand-wash-kuat);
}

/* ---------- Penunjuk langkah ---------- */

/*
  Tiga langkah menuju formulir keanggotaan, ditampilkan di atas kotak isian.

  Gunanya menjawab satu kebingungan yang pasti muncul: "kenapa saya diminta
  membuat akun, bukan langsung mendaftar?" Melihat bahwa ini langkah pertama
  dari tiga membuat pertanyaan itu terjawab sebelum sempat ditanyakan — dan
  sekaligus menegaskan bahwa punya akun belum berarti menjadi anggota.
*/
.langkah {
  display: flex;
  align-items: flex-start;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  counter-reset: langkah;
}

.langkahButir {
  flex: 1;
  position: relative;
  padding-top: 2.5rem;
  text-align: center;
  font-size: var(--t-kecil);
  line-height: 1.35;
  color: var(--text-muted);
}

.langkahButir::before {
  counter-increment: langkah;
  content: counter(langkah);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-judul), Georgia, serif;
  font-size: var(--t-kecil);
  font-weight: 700;
}

/*
  Garis penghubung antar-langkah.

  Digambar oleh butir KEDUA dan seterusnya, menjulur ke KIRI menuju butir
  sebelumnya — bukan ke kanan — supaya tidak ada garis yang menggantung keluar
  di ujung kanan daftar.

  Kedua ujungnya dipendekkan sejauh jari-jari cakram ditambah sedikit jarak.
  Versi sebelumnya hanya memberi jarak di ujung kanan, sehingga ujung kirinya
  menabrak cakram butir sebelumnya — dan karena garis ini milik elemen yang
  datang belakangan dalam DOM, ia tergambar DI ATAS cakram itu: garis abu
  membelah angka satu yang berlatar merah.

  Angkanya: cakram 1.85rem, jadi jari-jarinya 0.925rem; ditambah jarak 0.425rem
  menjadi 1.35rem di setiap ujung. Jarak antar-titik pusat sama dengan lebar
  satu butir (ketiganya `flex: 1`), sehingga lebar garisnya 100% dikurangi
  kedua ujung itu.
*/
.langkahButir + .langkahButir::after {
  content: '';
  position: absolute;
  /* Setengah tinggi cakram, dikurangi setengah tebal garis. */
  top: calc(0.925rem - 1px);
  right: calc(50% + 1.35rem);
  width: calc(100% - 2.7rem);
  height: 2px;
  background: var(--border);
}

.langkahAktif {
  color: var(--text);
  font-weight: 700;
}

.langkahAktif::before {
  border-color: var(--primary);
  background: var(--primary-isi);
  color: #fff;
}

/* ---------- Kolom kata sandi ---------- */

.sandiBungkus {
  position: relative;
}

/* Ruang bagi tombol lihat/sembunyi supaya tidak menimpa teksnya. */
.sandiBungkus .input {
  padding-right: 3.4rem;
}

/*
  Tombol lihat kata sandi.

  Formulir ini meminta dua belas karakter, diketik buta, DUA KALI. Di situlah
  orang paling sering gagal — dan kegagalannya baru ketahuan setelah dikirim.
  Tombol ini menghapus seluruh kelas kesalahan itu.

  Ia `type="button"`: tanpa itu ia menjadi tombol kirim bawaan formulir, dan
  menekan Enter di kolom sandi akan menampilkan sandi alih-alih mengirim.
*/
.sandiLihat {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--r-kartu);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.sandiLihat:hover {
  color: var(--primary);
  background: var(--bg-alt);
}

.sandiLihat:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Batang panjang kata sandi — hanya panjang, bukan tebakan "kekuatan". */
.ukur {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.ukurBatang {
  flex: 1;
  height: 4px;
  border-radius: var(--r-kecil);
  background: var(--border);
  overflow: hidden;
}

.ukurIsi {
  display: block;
  height: 100%;
  border-radius: var(--r-kecil);
  background: var(--primary);
  transition: width 0.2s ease;
}

.ukurTeks {
  flex: none;
  font-size: var(--t-kecil);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.ukurCukup {
  color: var(--primary);
  font-weight: 700;
}

/* Penanda kecocokan ulangan sandi. */
.cocok {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: var(--t-kecil);
  font-weight: 600;
}

.cocokYa {
  color: var(--primary);
}

.cocokBelum {
  color: var(--text-muted);
  font-weight: 600;
}

.inputError {
  border-color: var(--primary);
  border-width: 2px;
}

.hint {
  margin: 0.4rem 0 0;
  font-size: var(--t-kecil);
  color: var(--text-muted);
  line-height: 1.55;
}

.fieldError {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  margin: 0.4rem 0 0;
  font-size: var(--t-kecil);
  font-weight: 600;
  color: var(--primary);
}

/* Selebar kolom — satu-satunya bedanya dari tombol kirim baku. */
.submit {
  /* Gabungan: pasang juga kelas "tombolKirim" pada elemennya di Blade. */
  width: 100%;
  transition: background 0.16s ease, transform 0.16s ease;
}

.submit:hover:not(:disabled) {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {

  .input,
  .ukurIsi,
  .submit {
    transition: none;
  }

  .submit:hover:not(:disabled) {
    transform: none;
  }
}

.submit:hover:not(:disabled) {
  background: var(--primary-isi-hover);
  color: #fff;
}

.submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/*
  GALAT MEDAN: TULISAN, BUKAN KOTAK.

  Bentuk sebelumnya memberi pesan galat `border: 2px solid var(--primary)`,
  `border-radius: var(--r-kartu)`, dan `background: var(--bg)` — tepat sama
  dengan `.input` di atasnya. Terukur pada halaman masuk di lebar 1440px,
  sesudah sandi salah dimasukkan:

    kotak isian   lebar 474  x=483  border 2px solid rgb(168,8,8)  radius 8px
    pesan galat   lebar 474  x=483  border 2px solid rgb(168,8,8)  radius 8px
    jarak antar keduanya: 0px

  Warna latarnya sama putih, warna teksnya sama gelap, tepinya bersambung
  tanpa celah. Hasilnya bukan "pesan galat di bawah isian" melainkan KOTAK
  ISIAN KEDUA yang menempel di bawah yang pertama — dan orang mencoba
  mengetik ke dalamnya.

  Sekarang ia berupa baris tulisan merah bertanda seru, jelas lebih kecil
  dari isiannya dan tidak lagi berbingkai.
*/
.galatAuth {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.45rem 0 0;
  color: var(--primary);
  font-size: var(--t-kecil);
  font-weight: 600;
  line-height: 1.55;
}

/*
  Penanda tidak boleh hanya warna. Merah saja tidak sampai kepada pembaca
  yang buta warna maupun pada cetakan hitam putih, jadi bentuknya sendiri
  yang menyampaikan: cakram bertanda seru.
*/
.galatAuth::before {
  content: '!';
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.12em;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.86em;
  font-weight: 700;
  line-height: 1;
}

/*
  PERINGATAN SEHALAMAN FORMULIR, di atas medan pertamanya.

  Dipakai untuk pernyataan yang tidak dimiliki satu medan pun — "surel atau
  kata sandi tidak cocok", "terlalu sering mencoba", "akun dinonaktifkan".
  Latarnya `--brand-wash` supaya terbaca sebagai bidang pemberitahuan, bukan
  sebagai isian yang menunggu diketik.
*/
.peringatan {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem;
  border-left: 4px solid var(--primary);
  border-radius: var(--r-kecil);
  background: var(--brand-wash);
  color: var(--brand-ink);
  font-size: var(--t-dasar);
  line-height: 1.6;
}

.peringatanIkon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Kotak sandi dengan tombol lihat ---------- */

.kotakSandi {
  position: relative;
}

/*
  Ruang di kanan disediakan LEWAT CSS, bukan lewat skrip yang menyuntik
  tombolnya. Kalau paddingnya ikut dipasang skrip, teks sandi yang panjang
  sempat tergambar menembus tombol pada kedipan pertama sebelum skrip jalan.
  Tanpa tombol pun padding ini tidak merugikan apa-apa.
*/
.inputSandi {
  padding-right: 3.4rem;
}

.lihatSandi {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  /* 44px: target sentuh terkecil yang masih nyaman ditekan dengan ibu jari. */
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-kecil);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.lihatSandi:hover {
  background: var(--bg-alt);
  color: var(--primary);
}

.lihatSandi:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--brand-wash-kuat);
}

.lihatSandiIkon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Terbaca pembaca layar, tidak memakan ruang di layar. */
.authSr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Centang "ingat saya" ---------- */

/*
  Seluruh barisnya dapat diklik, bukan hanya kotak 13px bawaan peramban.

  Kotak centang bawaan berukuran sekitar 13x13px — seperempat dari target
  sentuh terkecil yang dianjurkan. Membungkusnya dengan <label> membuat
  tulisannya ikut menjadi sasaran, sehingga yang dapat ditekan menjadi
  selebar barisnya.
*/
.centang {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /*
    0,55rem, BUKAN 0,35rem. Terukur di lebar 390px: barisnya 201 x 38px —
    di bawah target sentuh 44px. Tulisan dan kotaknya tidak berubah ukuran;
    yang ditambah hanya ruang tekannya.
  */
  padding: 0.55rem 0;
  font-size: var(--t-dasar);
  cursor: pointer;
}

.centangKotak {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.centangKotak:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.inlineLink {
  font-weight: 700;
  white-space: nowrap;
}

/*
  Tautan di baris kaki formulir BERDIRI SENDIRI sebagai sasaran, bukan
  menyatu dalam kalimat: `.links` berjenis flex, sehingga anaknya menjadi
  blok. Terukur di 390px, "Belum punya akun? Buat akun" hanya setinggi 26px.

  Ditulis di sini dan bukan pada `.inlineLink` secara umum, karena tautan
  yang sama juga dipakai DI DALAM kalimat persetujuan — di sana ia harus
  tetap mengikuti tinggi barisnya, sebab memperbesarnya akan merenggangkan
  paragrafnya.
*/
.links .inlineLink {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: var(--t-dasar);
}

.done {
  padding: 2.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: var(--r-kartu);
  text-align: center;
}

.doneMark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--primary-isi);
  color: #fff;
  font-size: var(--t-besar);
}

.doneText {
  margin: 0 0 1.5rem;
  font-size: var(--t-dasar);
  line-height: 1.7;
}

.noticeAuth {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-kartu) var(--r-kartu) 0;
  background: var(--bg);
  color: var(--text-muted);
  font-size: var(--t-kecil);
  line-height: 1.65;
}

/*
  PENUNJUK LANGKAH DI LAYAR SEMPIT: ANGKANYA SAJA.

  Penunjuk ini dirancang untuk TIGA langkah — lihat catatan di atas — dan
  formulir keanggotaan punya TUJUH. Dengan `flex: 1`, tujuh label mendatar
  tidak pernah cukup ruang: terukur di lebar 390px, halamannya meluber 91px
  ke samping, dan dua label terakhir — "Privasi & Pernyataan" dan "Tinjau &
  Kirim" — menjorok sampai 481px.

  Yang disembunyikan hanya NAMANYA, bukan angkanya. Tujuh lingkaran bernomor
  tetap berderet, sehingga "saya di langkah berapa dari berapa" tetap
  terjawab — dan nama langkah yang sedang dibuka toh SUDAH tertulis sebagai
  legend tepat di bawah penunjuk ini. Menyembunyikannya di sini tidak
  menghilangkan keterangan apa pun; ia hanya berhenti menuliskannya dua kali.
*/
@media (max-width: 40rem) {
  .langkahNama {
    display: none;
  }

  /* Tanpa label di bawahnya, ruang untuk teks tidak lagi diperlukan. */
  .langkahButir {
    padding-top: 2.15rem;
  }
}

/*
  PILIHAN DI FORMULIR TUJUH LANGKAH.

  Radio dan kotak centang di sana tidak pernah digayakan sama sekali —
  terukur 13 x 13px, ukuran mentah bawaan peramban, dengan baris label
  setinggi 24px. Target sentuh terkecil yang dianjurkan 44px.

  Di situlah pemohon memilih jenis permohonannya dan mencentang
  persetujuannya; salah tekan pada baris setipis itu berarti mengirim
  pengajuan dengan jenis yang keliru. Kelasnya sama dengan yang dipakai
  halaman masuk dan daftar akun, jadi bentuknya pun seragam di seluruh alur.

  `.centang` sendiri sudah membuat seluruh barisnya dapat ditekan; yang
  ditambahkan di sini hanya perataan untuk label yang memanjang sampai dua
  baris — tanpa itu, kotaknya terpusat terhadap seluruh tinggi baris dan
  tidak lagi sejajar dengan baris pertama tulisannya.
*/
.field .centang {
  align-items: flex-start;
  width: 100%;
}

.field .centang .centangKotak {
  margin-top: 0.15rem;
}

/*
|--------------------------------------------------------------------------
| Tombol kedua (Kembali)
|--------------------------------------------------------------------------
|
| Formulir tujuh langkah memakai `.keluar` untuk tombol "Kembali", dan kelas
| itu HANYA terdefinisi di dasbor.css — yang tidak dimuat halaman ini. Jadi
| tombol Kembali pada formulir pendaftaran tergambar sebagai tombol bawaan
| peramban, di sebelah tombol "Lanjut" yang merah dan rapi.
|
| Ditemukan penjaga `kelas-tanpa-gaya` di audit halaman, bukan oleh mata —
| dan ia ada di formulir yang dipakai guru besar sungguhan, pada langkah yang
| paling sering ditekan orang yang ingin membetulkan isian sebelumnya.
|
| Namanya memang janggal untuk tombol Kembali; ia diwarisi dari tombol
| "Keluar" di Dasbor Anggota, yang bentuknya sama: tombol kedua, bergaris,
| tidak menonjol. Menamainya ulang menjadi `.tombolKedua` di kedua tempat
| adalah pekerjaan tersendiri. Nilainya disalin apa adanya dari dasbor.css
| supaya keduanya tetap serupa.
*/

.keluar {
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: var(--t-dasar);
  white-space: nowrap;
  cursor: pointer;
}

.keluar:hover {
  border-color: var(--brand-300);
  color: var(--primary);
}

/* ---------------------------------------------------------------------- *
 * Ringkasan galat formulir pendaftaran
 *
 * Diletakkan di LUAR seluruh langkah, dan gayanya dibuat agar tidak mungkin
 * terlewat. Sebabnya ada di komentar blade-nya: sebelum kotak ini ada,
 * pengiriman yang ditolak mengembalikan halaman ke langkah 1 dengan pesan
 * galatnya terkubur di dalam langkah lain yang `hidden` — sehingga yang
 * terlihat cuma halaman berkedip tanpa sebab, dan laporan yang sampai ke
 * Sekretariat berbunyi "tidak bisa mengisi form".
 * ---------------------------------------------------------------------- */

.ringkasanGalat {
    margin: 0 0 1.5rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--galat-batas, #f5c2c0);
    border-left: 4px solid var(--galat, #b42318);
    border-radius: 0.5rem;
    background: var(--galat-latar, #fdecec);
}

/* Tanpa ini, menggulir otomatis ke kotak ini akan meletakkannya tepat di
   bawah kepala situs yang menempel, sehingga baris pertamanya tertutup. */
.ringkasanGalat {
    scroll-margin-top: 6rem;
}

.ringkasanGalat:focus {
    outline: none;
}

.ringkasanGalat:focus-visible {
    outline: 2px solid var(--galat, #b42318);
    outline-offset: 2px;
}

.ringkasanGalatJudul {
    margin: 0 0 0.625rem;
    font-weight: 600;
    color: var(--galat-teks, #8a1c14);
}

.ringkasanGalatDaftar {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--galat-teks, #8a1c14);
}

.ringkasanGalatDaftar li + li {
    margin-top: 0.375rem;
}

/* Nama langkahnya ditebalkan supaya mata menemukan TUJUANNYA lebih dulu,
   bukan keluhannya. Yang dicari orang adalah ke mana ia harus pergi. */
.ringkasanGalatDaftar strong {
    font-weight: 600;
}

/* Kalimat penutup lebih redup: ia menenangkan, bukan memerintah. Yang harus
   dibaca lebih dulu daftarnya. */
.ringkasanGalatKaki {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    color: var(--galat-teks, #8a1c14);
    opacity: 0.85;
}