/* Auth page composition. Shared appearance comes from ui.css. */
.auth-shell {
  max-width: var(--auth-width);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 42px;
  padding-bottom: 40px;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  margin: 0 0 30px 5px;
}

.auth-card {
  padding: 25px 22px;
  margin: 0;
}

.auth-card h1 {
  font-size: var(--text-title);
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin: 12px 0;
}

.auth-card .notice {
  margin: 10px 0 16px;
}

.auth-card label {
  margin-top: 18px;
}

.auth-submit {
  width: 100%;
  margin-top: 18px;
  min-height: 48px;
  font-size: 15px;
}

.auth-switch {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin: 22px 0 0;
  line-height: 1.8;
}

.auth-switch a {
  color: var(--color-accent);
  text-underline-offset: 4px;
}

.auth-footer {
  text-align: center;
  margin-top: 22px;
}

@media (max-width: 380px) {
  .auth-card {
    padding: 22px 17px;
  }

  .auth-card h1 {
    font-size: 25px;
  }
}