/* Auth layout (layout/auth.html.twig): login, password reset, anonymous 403/404.
   Sober sign-in: one plain card with the brand at the top and the language links at the
   bottom (below a thin divider), footer at the bottom of the window. */

.sv-auth {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sv-color-bg);
}

.sv-auth__main {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  padding: var(--sv-space-8) var(--sv-space-4);
}
@media (min-width: 48em) {
  .sv-auth__main { padding: var(--sv-space-12) var(--sv-space-6); }
}

/* Card. */
.sv-auth__frame {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-5);
  width: 100%;
  max-width: 30rem;
  min-width: 0;
  padding: var(--sv-space-6) var(--sv-space-5);
  border: 1px solid var(--sv-color-border);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-color-surface);
  box-shadow: var(--sv-shadow-sm);
}
.sv-auth__frame--narrow { max-width: 32rem; }
@media (min-width: 30em) {
  .sv-auth__frame { padding: var(--sv-space-8); }
}

/* Brand: the logo and app name of the app shell, at the top of the card. */
.sv-auth__brand {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-1) var(--sv-space-2);
  border-radius: var(--sv-radius-md);
  color: var(--sv-color-text);
  font-size: var(--sv-text-lg);
  font-weight: var(--sv-weight-semibold);
  text-decoration: none;
}
.sv-auth__brand:hover { text-decoration: none; }
.sv-auth__brand img { width: 2rem; height: 2rem; }

.sv-auth__title {
  margin: 0;
  font-size: var(--sv-text-xl);
}
.sv-auth__lead {
  margin: calc(-1 * var(--sv-space-3)) 0 0;
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-sm);
}

/* Login / password forms. */
.sv-auth__frame form .sv-field + .sv-field { margin-top: var(--sv-space-4); }
.sv-auth__frame form .sv-input { min-height: 2.5rem; }
.sv-auth__frame .sv-form-actions { padding-top: var(--sv-space-1); }
.sv-auth__frame .sv-form-actions .sv-button {
  flex: 1 1 100%;
  min-height: 2.5rem;
}
.sv-auth__frame .sv-field__hint { font-size: var(--sv-text-xs); }
.sv-auth__help {
  margin: 0;
  font-size: var(--sv-text-sm);
  text-align: center;
}
.sv-auth__help a {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
}

/* Anonymous language links: a small row at the bottom of the card. */
.sv-auth__langs {
  margin-top: var(--sv-space-1);
  padding-top: var(--sv-space-3);
  border-top: 1px solid var(--sv-color-border);
}
.sv-auth__langs ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sv-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-auth__langs li { margin: 0; }
.sv-auth__langs a,
.sv-auth__langs [aria-current] {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--sv-space-3);
  border-radius: var(--sv-radius-md);
  font-size: var(--sv-text-sm);
}
.sv-auth__langs a { color: var(--sv-color-link); text-decoration: none; }
.sv-auth__langs a:hover { text-decoration: underline; }
.sv-auth__langs [aria-current] {
  color: var(--sv-color-text);
  font-weight: var(--sv-weight-semibold);
}

.sv-auth__footer {
  justify-content: center;
  border-top: 0;
  background: transparent;
  text-align: center;
}

/* Error variant inside the auth card. */
.sv-auth .sv-error-page { padding: 0; border: 0; }