/*
 * Sign-in and password pages for students, teachers and staff (Devise views).
 * Same split screen as onboarding; footer links reuse .onb__back.
 */

.auth { display: flex; flex-direction: column; gap: 28px; max-width: 520px; }
.auth__header { display: flex; flex-direction: column; gap: 14px; }
.auth__lead { font-size: 18px; line-height: 1.5; color: var(--text-body); }
.auth__form { display: flex; flex-direction: column; gap: 18px; }
.auth__small-link { font-size: 14px; font-weight: 500; }

.auth__check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; align-self: flex-start; }
.auth__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }

.auth__footer { font-size: 15px; flex-wrap: wrap; }

/* Large Arabic word in the dark aside. */
.auth__word { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.auth__word-ar { font-size: clamp(48px, 6vw, 76px); line-height: 1.6; color: var(--peach); align-self: flex-start; }
.auth__word-en { font-size: 15px; color: var(--text-on-dark-muted); }

@media (max-width: 860px) {
  .auth__word { display: none; }
}

/* Staff two-factor setup and sign-in */
.two-factor__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.5; }
.two-factor__qr { margin: 12px 0 8px; width: 196px; padding: 12px; background: #fff; border-radius: var(--radius-md); }
.two-factor__qr svg { display: block; width: 100%; height: auto; }
.two-factor__secret { font-size: 13px; word-break: break-all; }
.two-factor__code { font-size: 22px; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.two-factor__codes { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: var(--sand-hover); border-radius: var(--radius-md); font-size: 16px; }
.two-factor__signout { background: none; border: 0; padding: 0; cursor: pointer; }

/* "Continue with Google", then "or" before the email form */
.auth__google-form { display: contents; }
.auth__google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.auth__google:hover { border-color: var(--ink); }
.auth__google-mark { flex-shrink: 0; }
.auth__or { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 13px; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }