/*
 * 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; }
/* On sign-up, Google is the main action: dark, with the mark on a white badge. */
.auth__google--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); min-height: 52px; font-size: 16px; }
.auth__google--primary:hover { background: var(--ink-raised); border-color: var(--ink-raised); }
.auth__google-badge { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth__google-badge .auth__google-mark { width: 16px; height: 16px; }
.auth__google-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-line); border-top-color: var(--peach); flex-shrink: 0; animation: auth-spin .8s linear infinite; }
.auth__google.is-busy { background: var(--ink-line); border-color: var(--ink-line); cursor: progress; }
.auth__google.is-busy .auth__google-spinner { display: inline-block; }
.auth__google.is-busy .auth__google-badge { display: none; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth__google-spinner { animation-duration: 2.4s; } }

.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); }

/* A student's note in a teacher invitation (/teach/join/:token). */
.teach-join__note { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--radius-md); background: var(--sand); font-size: 15px; color: var(--ink); }

/* A word of the language taught beside a heading or label in the apps' sign-in sheets (auth_accent). */
.auth__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.auth__accent { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 8px; font-weight: 400; }
.auth__title-row .auth__accent { margin-left: 0; }
.auth__accent-word { font-family: var(--font-arabic); font-style: italic; font-size: 1.35em; color: var(--clay-hover); }
.auth__title-row .auth__accent-word { font-size: 23px; }
.auth__accent-en { font-size: 13px; color: var(--text-muted); }
.auth__forgot { align-self: flex-end; display: inline-flex; align-items: baseline; min-height: 44px; }