/* ==========================================================================
   SANCTUM — login.css
   สไตล์เฉพาะหน้า index.html เท่านั้น
   ตัวแปรสี/ฟอนต์/ระยะ ทั้งหมดมาจาก terminal-theme.css
   ========================================================================== */

/* จัดกล่องทั้งหมดให้อยู่กลางจอแนวตั้ง เผื่อพื้นที่ statusline ไว้ด้วย */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--statusline-h));
}

.login {
  width: 100%;
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}

/* --------------------------------------------------------------------------
   ตราสัญลักษณ์
   -------------------------------------------------------------------------- */
.login__head {
  margin-bottom: var(--s-8);
}

.wordmark {
  margin: 0;
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: 0.42em;   /* ถ่างตัวอักษรให้อ่านช้าลง เหมือนป้ายหน้าประตู */
  text-indent: 0.42em;      /* ชดเชยช่องว่างท้ายบรรทัดที่ letter-spacing ทิ้งไว้ */
  color: var(--c-text);
}

.wordmark__sub {
  margin: var(--s-2) 0 0 0;
  color: var(--c-text-faint);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
}

/* --------------------------------------------------------------------------
   ข้อความบูตระบบ — ทยอยขึ้นทีละบรรทัด
   -------------------------------------------------------------------------- */
.boot {
  margin: 0 0 var(--s-6) 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  color: var(--c-text-faint);
}

.boot__line {
  opacity: 0;
  animation: boot-in 320ms var(--ease) forwards;
}
.boot__line:nth-child(1) { animation-delay: 120ms; }
.boot__line:nth-child(2) { animation-delay: 320ms; }
.boot__line:nth-child(3) { animation-delay: 520ms; }

.boot__ok   { color: var(--c-granted); }
.boot__wait { color: var(--c-pending); }

@keyframes boot-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   กล่องฟอร์ม
   -------------------------------------------------------------------------- */
.login__panel {
  opacity: 0;
  animation: boot-in 320ms var(--ease) 700ms forwards;
}

.login__error {
  margin: 0 0 var(--s-4) 0;
}

.login__submit {
  width: 100%;
}

.login__note {
  margin: var(--s-4) 0 0 0;
  font-size: var(--t-xs);
  line-height: var(--lh-tight);
}

/* --------------------------------------------------------------------------
   จอเล็ก
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .wordmark {
    font-size: var(--t-xl);
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }
}

/* --------------------------------------------------------------------------
   ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว — ข้ามแอนิเมชันบูตไปเลย
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .boot__line,
  .login__panel {
    opacity: 1;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   สลับระหว่างเข้าสู่ระบบกับสมัครบัญชี
   -------------------------------------------------------------------------- */
.login__switch {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--c-accent);
  font-family: var(--f-mono);
  font-size: inherit;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.login__switch:hover { border-bottom-color: var(--c-accent); }

.field__help {
  margin: var(--s-1) 0 0 0;
  color: var(--c-text-faint);
  font-size: var(--t-xs);
  line-height: var(--lh-tight);
}
.field__help[hidden] { display: none; }

.field[hidden] { display: none; }