/* Concord — a tela de entrada.
 *
 * Carregada só por login.php, depois de assets/concord.css. Não vive dentro
 * dele porque concord.css é a BASE (fontes, paleta, primitivas de controle) e
 * é carregada por toda página de PHP, inclusive as sete do Work — que não têm
 * tela de login e não devem pagar por ela.
 *
 * O que esta tela era, até 2026-09-04: `body.auth-page` com `.bg-blobs` (três
 * manchas roxas desfocadas em movimento), um cartão `.glass` translúcido com
 * `backdrop-filter: blur(20px)` e o botão de tema numa bolha de vidro
 * flutuando no canto. Era o visual "iOS 26 liquid glass" de assets/app.css —
 * coerente consigo mesmo, e de outro produto: o Concord de hoje (o app Next)
 * não tem vidro, nem degradê, nem mancha em lugar nenhum. Tem superfície
 * opaca com borda de 1px, canto arredondado e um roxo só.
 *
 * A tela de entrada é a PRIMEIRA coisa que alguém vê do sistema. Enquanto ela
 * prometia um produto e a tela seguinte entregava outro, a promessa é que
 * estava errada.
 */

/* A página inteira centra o cartão. `min-height: 100svh` e não `100vh`: no
   Safari do iPhone a barra de endereço entra na conta de `vh` e o cartão
   nasce empurrado para fora da dobra. */
body.auth {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: var(--page);
}

.auth-caixa {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

/* A marca no mesmo lockup do cabeçalho da barra lateral do Concord e da do
   Work — "TD" em Manrope preta itálica colada ao nome. Aqui em escala cheia
   (32/22px, o valor medido no build do Next), porque nesta tela ela é o
   assunto e não um cabeçalho de barra. */
.auth-marca { --c-marca-td: 32px; --c-marca-nome: 22px; }

.auth-cartao {
  width: 100%; box-sizing: border-box;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  /* A mesma sombra suave dos cartões do Concord: presença sem elevação
     teatral. Nada de backdrop-filter — o custo de composição de um vidro
     numa tela que existe para receber duas palavras digitadas nunca se
     pagou. */
  box-shadow: 0 1px 2px rgba(8, 11, 26, .04), 0 8px 24px rgba(8, 11, 26, .06);
}

.auth-titulo {
  margin: 0 0 4px;
  font-size: 22px; font-weight: 800; letter-spacing: -.025em;
  color: var(--text-primary);
}
.auth-sub {
  margin: 0 0 20px;
  font-size: 14px; color: var(--text-secondary);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-campo { display: flex; flex-direction: column; gap: 6px; }
/* Rótulo acima do campo, 13px/700 — o peso que o Concord dá a rótulo de
   formulário ("Dados do usuário", "Ideias criadas"). Não é caixa alta: caixa
   alta ali é o rótulo de SEÇÃO da barra lateral, outro papel. */
.auth-campo > span {
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
}
/* Pílula de largura cheia — a mesma forma da busca e dos selects do Concord
   (`rounded-full border border-border focus:ring-2 focus:ring-primary-soft`),
   em 46px, que é a altura de controle dele. A tela de login não tem o aperto
   de densidade que fez o Work descer para 28px: aqui há dois campos e nenhuma
   tabela disputando a altura. */
.auth-campo > input {
  width: 100%; box-sizing: border-box;
  height: 46px; padding: 0 16px;
  font-size: 15px; color: var(--text-primary);
  background: var(--field-bg);
  border: 1px solid var(--field-brd);
  border-radius: var(--r-pill);
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.auth-campo > input:focus {
  border-color: var(--field-brd-focus);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* O primário ocupa a linha inteira; a forma (pílula roxa, peso 700, a sombra
   da marca) vem de .c-btn--primario em concord.css, sem redeclarar nada. */
.auth-entrar { width: 100%; margin-top: 6px; }

/* O erro é o único lugar da tela onde outra cor aparece, e ela carrega
   informação: a tentativa não passou. Faixa tingida com o texto no mesmo
   matiz, o padrão que as pílulas de status do Work já usam. */
.auth-erro {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger-fg);
  font-size: 14px; font-weight: 600;
}

/* O alternador de tema fica ABAIXO do cartão, no fluxo — não numa bolha
   fixada no canto da janela. É o mesmo item de rodapé que o Concord e o Work
   têm na barra lateral: ícone, palavra, tom apagado. */
.auth-tema { font-size: 13px; }

/* Sombra mais funda no escuro: sobre --surface #12141d uma sombra de 6% de
   preto não existe. */
:root.dark .auth-cartao, :root[data-theme="dark"] .auth-cartao {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .auth-cartao {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}