/* Auth frame — Mesa Azul (Pattern 18): quiet column on canvas, same tokens as the desk. */

.auth-body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--dc-space-8) var(--dc-space-4);
}

.auth-frame {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-8);
  width: min(24rem, 100%);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--dc-space-3);
  color: var(--dc-text);
}

.auth-brand img {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--dc-radius-sm);
}

.auth-brand__label {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.auth-brand strong {
  font-size: var(--dc-fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.auth-brand small {
  color: var(--dc-text-muted);
  font-size: var(--dc-fs-xs);
  font-weight: 500;
}

.auth-intro {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  margin-block-end: var(--dc-space-6);
}

.auth-intro h1 {
  font-size: var(--dc-fs-xl);
}

.auth-intro p {
  color: var(--dc-text-muted);
}

.auth-form .form-actions {
  padding-top: var(--dc-space-2);
}

.auth-form .form-actions .btn {
  width: 100%;
}

@media (max-width: 860px) {
  .auth-body {
    place-items: start center;
    padding: var(--dc-space-6) var(--dc-space-4);
  }
}