/* Entrada (06/10/2026): uma tela de boas-vindas inteira, sem a barra de cima.
   Referências: as boas-vindas do Duolingo, do Speak e do ELSA — a marca em
   destaque no alto, a promessa, os motivos e a ação principal na zona do
   polegar. O espaço que sobra em tela alta se divide entre os blocos, em vez
   de ficar em branco embaixo (medido antes: no 412×915, 406 px vazios, 44% da
   tela). Só tokens --ui-*, então o claro e o escuro vêm deles. Fora de
   @layer, de propósito: prevalece sobre as regras antigas da entrada, que
   estão em camadas, sem !important. */

body[data-route="/login"] .topbar { display: none; }

/* O brilho azul-petróleo atrás do logo: o `::before` do .app, que a
   interface unificada esconde nas outras telas. */
body[data-route="/login"] .app::before,
body[data-ui-unificada][data-route="/login"] .app::before {
  display: block; content: ""; position: absolute; inset: 0 0 auto;
  height: min(62dvh, 36rem); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 90% 72% at 50% -4%,
    color-mix(in oklab, var(--ui-brand-vivid) 18%, transparent), transparent 72%);
}

body[data-route="/login"] .view.login-view {
  box-sizing: border-box;
  width: 100%; max-width: 30rem; min-height: 100dvh; margin-inline: auto;
  display: flex; flex-direction: column; gap: clamp(20px, 3.6vh, 36px);
  padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + clamp(24px, 4.5vh, 48px))
           clamp(16px, 5vw, 28px)
           calc(env(safe-area-inset-bottom, 0px) + 24px);
  color: var(--ui-text); font-family: "Segoe UI", system-ui, sans-serif;
}

/* ── a marca e a promessa ───────────────────────────────────────────── */
/* As duas margens automáticas (aqui e em .login__acoes) dividem a sobra de
   altura: metade acima da marca, metade antes do botão. Com uma só, o vão
   inteiro ficava entre o cartão e o botão (~120 px no 412×915). */
.login__topo { display: grid; justify-items: center; gap: 10px; text-align: center; margin-top: auto; }
body[data-route="/login"] .login__topo .login__mark {
  position: relative; width: clamp(104px, 31vw, 136px); height: auto; aspect-ratio: 1;
  margin: 0 0 8px;
}
/* Um halo que respira devagar: a voz é o produto. Some com movimento reduzido. */
.login__topo .login__mark::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--ui-brand-vivid) 24%, transparent) 0,
    transparent 70%);
  animation: login-respira 5s ease-in-out infinite;
}
.login__topo .login__mark-img { position: relative; }
@keyframes login-respira { 50% { transform: scale(1.1); opacity: .65; } }
.login__topo .login__marca {
  margin: 0; color: var(--ui-brand); font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em;
}
body[data-route="/login"] .login__topo h1 {
  margin: 0; font-size: clamp(2.05rem, 8.6vw, 2.85rem); line-height: 1.06; font-weight: 700;
  letter-spacing: -.04em; text-wrap: balance;
}
.login__topo .login__lead {
  margin: 0; max-width: 31ch; color: var(--ui-muted); font-size: 1.0625rem; line-height: 1.55;
  text-wrap: balance;
}

/* ── os motivos ─────────────────────────────────────────────────────── */
.login__motivos {
  display: grid; margin: 0; padding: 4px 0; list-style: none;
  border: 1px solid var(--ui-border); border-radius: 22px; background: var(--ui-surface);
}
.login__motivos li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 14px 18px;
}
.login__motivos li + li { border-top: 1px solid var(--ui-border); }
.login__motivo-icone {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  color: var(--ui-brand); background: var(--ui-soft);
}
.login__motivo-icone .icon { width: 22px; height: 22px; }
.login__motivo-texto { display: grid; gap: 2px; min-width: 0; }
.login__motivo-texto strong {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: .9688rem; line-height: 1.35; font-weight: 650;
}
.login__motivo-texto > span { color: var(--ui-muted); font-size: .875rem; line-height: 1.45; }
.login__selo {
  padding: 1px 7px; border-radius: 7px; color: var(--ui-brand); background: var(--ui-soft);
  font-size: .6875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
}

/* ── a ação, na zona do polegar ─────────────────────────────────────── */
.login__acoes { display: grid; gap: 14px; margin-top: auto; }
body[data-route="/login"] .login__acoes .stack { gap: 12px; }
body[data-route="/login"] .login__acoes .btn--google {
  min-height: 56px; border-radius: 18px; font-size: 1rem; font-weight: 650;
  box-shadow: 0 8px 22px color-mix(in oklab, var(--ui-button) 26%, transparent);
}
body[data-route="/login"] .login__acoes .composer__hint {
  margin: 0; color: var(--ui-muted); font-size: .8125rem; line-height: 1.55; text-align: center;
}
body[data-route="/login"] .login__acoes .login__privacy { max-width: none; }
body[data-route="/login"] .login__acoes .login__privacy a { color: var(--ui-brand); font-weight: 600; }
body[data-route="/login"] .login__acoes .login__aviso { margin: 0; text-align: left; }

/* Tela até 820 px de altura (a maioria dos Android, celular deitado,
   aparelho pequeno): tudo mais junto, para o botão e os avisos caberem sem
   rolar. Medido: no 360×780 a tela rolava 131 px antes deste ajuste. */
@media (max-height: 820px) {
  body[data-route="/login"] .view.login-view { gap: 18px; padding-top: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 24px); }
  body[data-route="/login"] .login__topo .login__mark { width: 92px; margin-bottom: 2px; }
  .login__topo { gap: 6px; }
  body[data-route="/login"] .login__topo h1 { font-size: 2rem; }
  .login__topo .login__lead { font-size: 1rem; }
  .login__motivos li { padding: 11px 16px; }
}
@media (max-height: 680px) {
  body[data-route="/login"] .login__topo .login__mark { width: 72px; }
  body[data-route="/login"] .login__topo h1 { font-size: 1.8rem; }
  body[data-route="/login"] .view.login-view { gap: 14px; }
}
/* Celular estreito: ícone e respiro menores, para a descrição caber numa linha. */
@media (max-width: 380px) {
  .login__motivos li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-inline: 14px; }
  .login__motivo-icone { width: 40px; height: 40px; border-radius: 12px; }
}
/* Tela larga e alta: a coluna fica no meio, com a ação logo abaixo. */
@media (min-width: 900px) and (min-height: 760px) {
  body[data-route="/login"] .view.login-view { justify-content: center; padding-block: 48px; }
  .login__topo { margin-top: 0; }
  .login__acoes { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .login__topo .login__mark::before { animation: none; }
}