/*
 * 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; }