/* The central sign-in's pages (spec 03 RE-IAM-14), loaded only by them (UNFOLD_SIGN_IN["STYLES"]): Unfold's own
   sign-in layout made a form beside a picture from laptop width (Unfold shows its picture only on wide screens), with
   the website's pill buttons, the platform's logo, and the account request's modal (RE-IAM-15). */

@media (min-width: 640px) {
  body.login #page > div:first-child > div:first-child {
    width: 26rem;
  }
}

@media (min-width: 1024px) {
  body.login #page > .bg-cover {
    display: block;
    flex: 0 0 50%;
    max-width: none;
    background-position: center;
  }
}

@media (min-width: 1536px) {
  body.login #page > .bg-cover {
    flex-basis: 55%;
  }
}

.central-logo img {
  width: auto;
  height: 3.5rem;
  margin-bottom: 1.5rem;
}

body .central-pill {
  border-radius: 9999px;
}

.central-request {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.dark .central-request {
  border-top-color: var(--color-base-800, #1f2937);
}

.central-or {
  margin-bottom: 0.75rem;
  text-align: center;
}

.central-modal {
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.central-hp {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Right to left (Arabic): Unfold's styles have no right-to-left variants, so the header's arrow and its language menu
   turn here (templates/unfold/helpers/unauthenticated_header.html). */
[dir="rtl"] .central-back {
  transform: scaleX(-1);
}

[dir="rtl"] .group:hover .central-back {
  left: 0.25rem;
}

[dir="rtl"] .central-languages {
  right: auto;
  left: -0.5rem;
}