/*
 * Guest pages (sign-in, password reset). Linked only from layouts/auth.php.
 *
 * The .authentication-* rules are the template's page-auth styles, as used in
 * GMS (gms/public_html/css/libs/auth.css): a centred card, without the
 * dotted shapes the template draws behind it. Served as-is, never purged.
 */

/* Authentication (from the template)
******************************************************************************* */
.authentication-wrapper {
  --auth-basic-inner-max-width: 460px;
  display: flex;
  flex-basis: 100%;
  inline-size: 100%;
  min-block-size: 100vh;
}
.authentication-wrapper .authentication-bg {
  background-color: var(--paper-bg);
}
.authentication-wrapper .authentication-inner {
  inline-size: 100%;
}
.authentication-wrapper .app-brand-logo.demo svg {
  block-size: 38px;
  inline-size: 22px;
}
.authentication-wrapper.authentication-basic {
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.authentication-wrapper.authentication-basic .authentication-inner {
  position: relative;
  max-inline-size: var(--auth-basic-inner-max-width);
}
.authentication-wrapper.authentication-basic .authentication-inner .card {
  z-index: 1;
}
@media (min-width: 576px) {
  .authentication-wrapper.authentication-basic .authentication-inner .card {
    padding: 1.5rem;
  }
}
.authentication-wrapper.authentication-basic .authentication-inner .card .app-brand {
  margin-block-end: 1.5rem;
}

/* Wide variant: layouts/auth.php with `photo` => false (graduate form questions, thank-you page) */
.authentication-wrapper.authentication-wide {
  --auth-basic-inner-max-width: 760px;
}

/* The check mark on the graduate form's thank-you page (form/thanks.php) */
.form-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 4rem;
  block-size: 4rem;
}

/* Campus photo panel (lg and up)
******************************************************************************* */
/* Maroon shows while the photo loads, then the photo fades in over it. */
.auth-photo {
  background-color: #5a0f12;
}
.auth-photo-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 72% 45%;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.auth-photo-img.is-loaded {
  opacity: 1;
}
.auth-photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58, 8, 10, 0.05) 30%, rgba(58, 8, 10, 0.55) 62%, rgba(46, 6, 8, 0.92) 100%);
}
.auth-photo-caption {
  max-inline-size: 34rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .auth-photo-img {
    transition: none;
  }
}

/* Validation
******************************************************************************* */
/* Bootstrap only reveals .invalid-feedback as a sibling of .is-invalid; the
   password message sits outside its input group, so reveal it per field. */
.form-control-validation:has(.is-invalid) .invalid-feedback {
  display: block;
}

/* Confirm dialog (graduate form consent, #14)
******************************************************************************* */
/* A native <dialog> opened with showModal(), wearing the template's .modal
 * classes: .modal gives the full-screen scroll container, .modal-dialog the
 * centred card. These rules undo the browser's own dialog box and draw the
 * template's backdrop colour. Bootstrap JS is not loaded; app.js opens it. */
dialog.modal {
  max-inline-size: none;
  max-block-size: none;
  padding: 0;
  border: 0;
  background: transparent;
}
dialog.modal[open] {
  display: block;
}
dialog.modal::backdrop {
  background-color: rgba(147, 149, 161, 0.5);
}
/* No page scroll behind an open dialog. */
html:has(dialog.modal[open]) {
  overflow: hidden;
}