/* Sign in, sign up, password reset — one centred card. */
.entry {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--space-md);
}

.entry__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: min(24rem, 100%);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.entry__title {
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}

.entry__subtitle {
  margin-top: calc(var(--space-md) * -1 + var(--space-3xs));
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

.entry__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.entry__submit {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
}

/* The other way in — the Google button and, on the sign-in page, the pill
   marking it as the one this device used last. */
.entry__alternative {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
}

/* `button_to` wraps its button in a form, which the centring above would shrink
   to the width of the label — leaving `btn--full` full width of nothing. */
.entry__alternative form {
  align-self: stretch;
}

.entry__errors {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-building-soft);
  color: var(--color-danger);
  font-size: var(--text-sm);
}

.entry__links {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  text-align: center;
}

.entry__links a {
  font-weight: var(--weight-medium);
}

/* "Utiliser une autre adresse" ends the session, so it has to be a POST — but a
   third button would compete with the two real ones above it. It reads as a
   link and behaves as a form. */
.entry__links form {
  display: inline;
}

.entry__links button {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--weight-medium);
  text-decoration: underline;
  cursor: pointer;
}