/* auth-google: the sign-in page. One centred card on the paper background; everything else comes from base.css. */
/* A column flexbox, not a grid: a grid track would grow to fit Google's fixed-width button on a narrow phone and push the page sideways. */
.m-auth { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
.m-auth__card {
  max-width: 480px; margin: 0 auto; padding: var(--s3); text-align: center;
  box-shadow: 0 12px 32px rgba(11, 37, 69, 0.08), var(--shadow);
}
@media (min-width: 600px) { .m-auth__card { padding: var(--s4); } }
.m-auth__card > * + * { margin-top: var(--s2); }
.m-auth__card h1 { font-size: 1.85rem; }
.m-auth__card h1 + .m-auth__lead { margin-top: var(--s1); }
.m-auth__lead { color: var(--muted); max-width: 42ch; margin-left: auto; margin-right: auto; }

/* Tutor faces above the heading: one big portrait on the way to a lesson, a row of four otherwise. */
.m-auth__faces { display: grid; justify-items: center; gap: 10px; }
.m-auth__avatars { list-style: none; display: flex; justify-content: center; padding-left: 12px; }
.m-auth__avatars li { margin-left: -12px; }
.m-auth__avatars img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  border: 3px solid var(--white); box-shadow: 0 1px 3px rgba(11, 37, 69, 0.25); background: var(--navy-100);
}
.m-auth__faces--one .m-auth__avatars { padding-left: 0; }
.m-auth__faces--one .m-auth__avatars li { margin-left: 0; }
.m-auth__faces--one .m-auth__avatars img { width: 96px; height: 96px; border-width: 4px; }
.m-auth__caption { font-weight: 700; color: var(--navy); line-height: 1.3; font-size: 0.95rem; }
.m-auth__faces--one .m-auth__caption { font-size: 1.05rem; }
.m-auth__note { display: block; font-weight: 400; color: var(--muted); font-size: 0.95rem; }

/* The Google button: as wide as the card allows, up to Google's 400 px cap, with a placeholder until the script draws it. */
.m-auth__google { display: flex; justify-content: center; margin-top: var(--s3); }
.m-auth__button { width: 100%; max-width: 400px; min-height: 44px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.m-auth__button:empty { border: 1px dashed var(--line); border-radius: 4px; color: var(--muted); font-size: 0.9rem; }
.m-auth__button:empty::before { content: "Loading Google sign-in\2026"; }
.m-auth__card[data-state="busy"] .m-auth__button { opacity: 0.5; pointer-events: none; }

/* While our server checks the credential, and when something goes wrong. */
.m-auth__status { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; }
.m-auth__status[hidden], .m-auth__error[hidden] { display: none; }
.m-auth__spinner {
  width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--navy); border-radius: 50%;
  animation: m-auth-spin 0.8s linear infinite;
}
@keyframes m-auth-spin { to { transform: rotate(360deg); } }
.m-auth__error { text-align: left; background: var(--red-bg); border: 1px solid var(--red-line); border-radius: 10px; padding: 12px var(--s2); color: var(--red); font-weight: 700; }
.m-auth__error .btn { margin-top: var(--s1); min-height: 40px; }
.m-auth__notice { text-align: left; }

/* What signing in means, in three lines. */
.m-auth__points {
  list-style: none; text-align: left; display: grid; gap: 10px; margin-top: var(--s3);
  padding: var(--s2); background: var(--paper); border-radius: 10px; font-size: 0.95rem;
}
.m-auth__points li { position: relative; padding-left: 28px; }
.m-auth__points li::before { content: "\2713"; position: absolute; left: 4px; top: 0; color: var(--green); font-weight: 700; }
.m-auth__legal, .m-auth__dev { margin-top: var(--s2); }