/* ============================================
   File: public/signup.css
   Deskripsi: Overlay Sign-Up mandiri (form + input OTP). Prefix kelas: su-
   Tanggal: 2026-10-24
   Revisi: 2026-10-24 (S-18c-1) — file baru
   Catatan: warna dipetakan ke alias lokal --su-* yang membaca variabel tokens.css
            (--color-*) dengan fallback. Bila nama token berbeda, cukup ubah blok alias di bawah.
   ============================================ */

#signup-view {
  --su-bg: var(--color-bg, #FFFFFF);
  --su-surface: var(--color-surface, #F1F5F9);
  --su-text: var(--color-text, #0F172A);
  --su-muted: var(--color-text-muted, #64748B);
  --su-border: var(--color-border, #CBD5E1);
  --su-primary: var(--color-primary, #0066FF);
  --su-danger: var(--color-danger, #DC2626);
  --su-ok: var(--color-success, #16A34A);
}
@media (prefers-color-scheme: dark) {
  #signup-view {
    --su-bg: var(--color-bg, #0A0F1A);
    --su-surface: var(--color-surface, #131C2E);
    --su-text: var(--color-text, #F1F5F9);
    --su-muted: var(--color-text-muted, #94A3B8);
    --su-border: var(--color-border, #2A3750);
    --su-danger: var(--color-danger, #F87171);
    --su-ok: var(--color-success, #4ADE80);
  }
}

body.su-open { overflow: hidden; }

.su-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--su-bg);
  color: var(--su-text);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.su-card {
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: var(--space-4, 16px);
}

.su-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}
.su-title { margin: 0; font-size: var(--fs-20, 20px); font-weight: 700; }
.su-close {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--su-surface);
  color: var(--su-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.su-form { display: flex; flex-direction: column; gap: var(--space-3, 12px); padding-bottom: var(--space-6, 24px); }
.su-lead { margin: 0; color: var(--su-muted); line-height: 1.5; }
.su-lead strong { color: var(--su-text); }

.su-field { display: flex; flex-direction: column; gap: 6px; }
.su-label { font-size: 14px; font-weight: 600; }
.su-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--su-border);
  border-radius: 10px;
  background: var(--su-surface);
  color: var(--su-text);
  font: inherit;
  font-size: 16px; /* >= 16px: cegah auto-zoom iOS */
}
.su-input:focus { outline: 2px solid var(--su-primary); outline-offset: 1px; border-color: transparent; }
.su-input[aria-invalid="true"] { border-color: var(--su-danger); }
.su-input:disabled { opacity: .6; }

.su-otp {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .4em;
  padding-left: calc(12px + .4em); /* kompensasi letter-spacing agar tetap tampak di tengah */
}

.su-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px dashed var(--su-border);
  border-radius: 12px;
}
.su-group-title { margin: 0; font-size: 14px; font-weight: 700; }
.su-group-title span { font-weight: 400; color: var(--su-muted); }
.su-hint { margin: 0; font-size: 12px; color: var(--su-muted); }

.su-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.su-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--su-primary); }

.su-error, .su-info { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; }
.su-error { color: var(--su-danger); border: 1px solid var(--su-danger); background: transparent; }
.su-info { color: var(--su-ok); border: 1px solid var(--su-ok); background: transparent; }
.su-error[hidden], .su-info[hidden] { display: none; }

.su-submit, .su-resend, .su-form .btn-ghost { width: 100%; box-sizing: border-box; }
.su-submit[disabled], .su-resend[disabled] { opacity: .6; cursor: not-allowed; }

/* Pemisah + tombol daftar di halaman login (dipasang oleh app.js renderLogin) */
.login-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--space-3, 12px) 0;
  color: var(--color-text-muted, #64748B);
  font-size: 13px;
}
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border, #CBD5E1); }
#btn-signup-pwa { width: 100%; box-sizing: border-box; }