/* FalaTu's sign-in layout. Loaded after the upstream theme styles. */
body.auth-page {
  align-items: stretch;
  background:
    radial-gradient(circle at 14% 78%, rgba(49, 216, 198, .13), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(255, 123, 104, .08), transparent 30%),
    var(--bg-primary);
}

.falatu-auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(34rem, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  width: min(100% - 64px, 1440px);
  min-height: 100vh;
  margin: 0 auto;
}

.falatu-auth-hero {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: space-between;
  padding: clamp(34px, 5vw, 64px) 0;
}

.falatu-hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  color: var(--text-primary);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  text-decoration: none;
}

.falatu-hero-brand img { filter: drop-shadow(0 8px 22px rgba(49, 216, 198, .26)); }
.falatu-hero-copy { max-width: 650px; }
.falatu-eyebrow { margin: 0 0 18px; color: var(--accent); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.falatu-hero-copy h2 { margin: 0; color: var(--text-primary); font-size: clamp(3rem, 5.1vw, 5.4rem); font-weight: 800; letter-spacing: -.065em; line-height: 1.05; }
.falatu-hero-copy h2 em { color: var(--accent); font-style: normal; }
.falatu-hero-copy > p:not(.falatu-eyebrow) { max-width: 560px; margin: 26px 0 0; color: var(--text-secondary); font-size: 1.12rem; line-height: 1.65; }
.falatu-hero-features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.falatu-hero-features span { padding: 9px 13px; border: 1px solid var(--border-light); border-radius: 999px; background: rgba(49, 216, 198, .06); color: var(--text-primary); font-size: .78rem; font-weight: 600; }
.falatu-hero-note { margin: 0; color: var(--text-muted); font-size: .86rem; }

body.auth-page .auth-container { width: 100%; max-width: 40rem; margin: 0; padding: 28px 0; justify-self: end; }

/* O tema escolhido pela pessoa pode estreitar este card: o tema "compact", por
   exemplo, o fixa em 23rem por [data-haven-region="auth-shell"], que tem
   especificidade maior que a regra acima. Aqui a especificidade e maior de
   proposito, porque o card de acesso precisa desta largura — e o de cadastro,
   com o dobro de campos, precisa de mais ainda. */
html body.auth-page[data-haven-page="auth"] .auth-container[data-haven-region="auth-shell"] {
  max-width: 40rem;
  padding: 28px 0;
}
html body.auth-page.falatu-registering[data-haven-page="auth"] .auth-container[data-haven-region="auth-shell"] {
  max-width: 46rem;
}
body.auth-page .auth-card { padding: clamp(28px, 3vw, 44px); border-color: var(--border-light); border-radius: 24px; background: linear-gradient(150deg, var(--bg-card), var(--bg-secondary)); box-shadow: 0 24px 70px rgba(0, 0, 0, .22); }
/* Icone e titulo na mesma linha, em vez de um sob o outro: o formulario de
   cadastro e alto e cada linha economizada conta. O resto do cabecalho
   (subtitulo, nome do servidor, aviso de acesso) segue abaixo, atravessando
   as duas colunas. */
body.auth-page .auth-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  margin-bottom: 24px;
  text-align: left;
}
body.auth-page .auth-header .logo { grid-column: 1; grid-row: 1; line-height: 0; }
body.auth-page .auth-header h1 { grid-column: 2; grid-row: 1; }
body.auth-page .auth-header > :not(.logo):not(h1) { grid-column: 1 / -1; }
body.auth-page .auth-header .logo img { width: 3rem; height: 3rem; margin: 0; }
body.auth-page .auth-header h1 { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -.04em; }
body.auth-page .auth-header .tagline { margin-top: 8px; font-size: .94rem; line-height: 1.5; }
body.auth-page .auth-header .server-title { font-size: 1rem; letter-spacing: 0; }
body.auth-page .auth-tabs,
body.auth-page .auth-theme-bar { display: none !important; }

.falatu-form-heading { margin: 0 0 18px; color: var(--text-primary); font-size: .85rem; font-weight: 750; }
.falatu-register-note { margin: 0; color: var(--text-secondary); font-size: .84rem; line-height: 1.5; }
body.auth-page .auth-form { gap: 17px; }
body.auth-page .form-group label { margin-bottom: 5px; color: var(--text-secondary); font-size: .73rem; }
body.auth-page .form-group input { min-height: 46px; border-radius: 10px; }
body.auth-page .btn-primary { min-height: 48px; border-radius: 10px; font-weight: 750; }
body.auth-page .auth-recovery-links { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
body.auth-page .auth-recovery-links a,
.falatu-invite-prompt,
.falatu-back-prompt { font-size: .82rem; }
.falatu-invite-prompt,
.falatu-back-prompt { margin: 4px 0 0; color: var(--text-secondary); text-align: center; }
.falatu-invite-prompt a,
.falatu-back-prompt a { color: var(--accent); font-weight: 700; text-decoration: none; }
.falatu-invite-prompt a:hover,
.falatu-back-prompt a:hover { text-decoration: underline; }
body.auth-page .auth-lang-bar { margin-top: 24px; }
body.auth-page .auth-version { color: var(--text-muted); }

/* ── Cadastro ───────────────────────────────────────────────────────────
   O formulario tem o dobro de campos do de entrada, entao o card precisa de
   largura de verdade. A coluna dele nunca encolhe abaixo de 34rem; antes ela
   acompanhava o heroi e sobravam ~400px para quatro campos. */
@media (min-width: 1150px) {
  body.auth-page.falatu-registering .falatu-auth-shell {
    grid-template-columns: minmax(0, 1fr) minmax(34rem, 1.05fr);
    gap: clamp(32px, 4vw, 72px);
  }
  body.auth-page.falatu-registering .auth-container { max-width: 46rem; }
}

/* Entre 901 e 1149px nao cabem os dois lado a lado sem espremer um deles.
   O heroi sai e o formulario fica centralizado, com a largura inteira. */
@media (min-width: 901px) and (max-width: 1149px) {
  body.auth-page.falatu-registering .falatu-auth-shell {
    grid-template-columns: 1fr;
    width: min(100% - 64px, 44rem);
  }
  body.auth-page.falatu-registering .falatu-auth-hero { display: none; }
  body.auth-page.falatu-registering .auth-container { max-width: none; justify-self: stretch; }
}

@media (min-width: 901px) {
  body.auth-page.falatu-registering #register-form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  /* Linha inteira: o texto, o usuario (que tem a dica longa embaixo), o token,
     o captcha, o botao e o link de voltar. Sobram senha e confirmacao lado a
     lado, que e o par que faz sentido comparar. */
  body.auth-page.falatu-registering #register-form > .falatu-register-note,
  body.auth-page.falatu-registering #register-form > #reg-username-group,
  body.auth-page.falatu-registering #register-form > #reg-token-group,
  body.auth-page.falatu-registering #register-form > #reg-captcha-group,
  body.auth-page.falatu-registering #register-form > button,
  body.auth-page.falatu-registering #register-form > .falatu-back-prompt { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .falatu-auth-shell { grid-template-columns: 1fr; gap: 10px; width: min(100% - 40px, 600px); padding: 24px 0 40px; }
  .falatu-auth-hero { gap: 18px; padding: 0; }
  .falatu-hero-copy h2 { font-size: clamp(2.1rem, 7vw, 3.3rem); }
  .falatu-hero-copy > p:not(.falatu-eyebrow) { margin-top: 12px; font-size: .94rem; }
  .falatu-hero-features, .falatu-hero-note { display: none; }
  .falatu-eyebrow { margin-bottom: 8px; }
  body.auth-page .auth-container { max-width: none; padding: 0; justify-self: stretch; }
}

@media (max-width: 520px) {
  .falatu-auth-shell { width: min(100% - 28px, 600px); padding-top: 16px; }
  .falatu-auth-hero { gap: 12px; }
  .falatu-hero-brand img { width: 38px; height: 38px; }
  .falatu-hero-copy h2 { font-size: 2rem; }
  .falatu-hero-copy > p:not(.falatu-eyebrow) { display: none; }
  body.auth-page .auth-card { padding: 24px; border-radius: 18px; }
}