/*
 * Telas sem login (entrar, senha, convite, sem sinal).
 * Celular: faixa da marca em cima e o formulário embaixo.
 * Notebook: painel verde à esquerda e formulário à direita.
 */
.auth { min-height: 100dvh; background: var(--color-surface); }

.auth__brand {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-4) var(--space-5);
  background: var(--gradient-brand-dark);
  color: var(--color-on-primary);
}

/* Linhas de plantio ao fundo, só decoração */
.auth__brand::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 80%;
  background: repeating-linear-gradient(100deg, var(--color-sidebar-hover) 0 2px, transparent 2px 28px);
  transform: perspective(300px) rotateX(55deg);
  pointer-events: none;
}

.auth__logo { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-large); font-weight: 700; }
.auth__logo img { width: 2.75rem; height: 2.75rem; }
.auth__tagline { display: none; }

.auth__panel { padding: var(--space-6) var(--space-4); }
.auth__content { max-width: 26rem; margin: 0 auto; }
.auth__content h1 { margin-bottom: var(--space-2); }
.auth__lead { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.auth__links { margin-top: var(--space-5); }
.auth .button--block { display: flex; width: 100%; }

@media (min-width: 1024px) {
  .auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

  .auth__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-7);
  }

  .auth__tagline { display: block; position: relative; z-index: 1; max-width: 24rem; }
  .auth__tagline strong { display: block; margin-bottom: var(--space-3); font-size: var(--font-size-display); line-height: 1.15; }
  .auth__tagline span { color: var(--color-sidebar-text); font-size: var(--font-size-large); }

  .auth__panel { display: flex; align-items: center; padding: var(--space-7); }
  .auth__content { width: 100%; }
}