/* Signed-out pages: sign in, forgot / reset password, invitations, the card check.
   They wear the website's look (tuka.vet), like the vet app: dark slate, the toucan's quarter circles
   in the corners, and the logo with its wordmark above a white card */

.auth-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--space-6) var(--space-4);
  background: var(--slate-800);

  /* Two loose quarter circles, like the ones floating on tuka.vet */
  &::before,
  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    opacity: 0.16;
  }

  &::before {
    top: -4rem;
    left: -4rem;
    width: 16rem;
    height: 16rem;
    background: var(--toucan-mustard);
    border-radius: 0 0 100% 0;
  }

  &::after {
    right: -5rem;
    bottom: -5rem;
    width: 22rem;
    height: 22rem;
    background: var(--toucan-mint);
    border-radius: 100% 0 0 0;
  }
}

.auth-container {
  width: 100%;
  max-width: var(--auth-card-width);
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);

  .brand-mark {
    width: 3.25rem;
    height: 3.25rem;
  }
}

/* "tuka" in the website's wordmark, and the product's name after it in mint */
.auth-brand__name {
  color: #f4efe4;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.auth-brand__product {
  color: var(--toucan-mint);
  font-weight: 600;
}

.auth-card {
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.auth-card__header {
  margin-bottom: var(--space-6);
  text-align: center;
}

.auth-card__title {
  font-size: var(--text-xl);
}

.auth-card__subtitle {
  margin-top: var(--space-1-5);
  color: var(--color-text-muted);
}

/* Sits on the dark background, under the card */
.auth-footer {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--slate-200);
  font-size: var(--text-sm);

  a {
    color: var(--white);
  }
}

.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  a {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }
}

/* "Español · Valencià" under the login card and the public pages */
.locale-switcher {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);

  [aria-current] {
    color: var(--color-text);
    font-weight: var(--weight-medium);
  }
}

/* On the login page's dark background */
.auth-shell .locale-switcher {
  color: var(--slate-200);

  a,
  [aria-current] {
    color: var(--white);
  }
}

/* ---------- The second step of signing in (sessions/verifications) ---------- */

.auth-card__note {
  text-align: center;
}

/* The six digits of the emailed code, easy to compare with the email */
.sign-in-code {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  letter-spacing: 0.3em;
  text-align: center;
}

/* "Remember this device", with its hint under the sentence */
.auth-card .check-line .form-hint {
  display: block;
  margin-top: var(--space-1);
}