/* ================================================================
   CAMPOS.CSS
   Inputs de texto simples e textarea. Os campos de "escolha" (chips
   e cards) NÃO estão aqui — estão em botoes.css, porque visualmente
   e funcionalmente são botões, não campos de digitação. O campo de
   data também não está aqui — é um componente próprio, veja
   calendario.css.
   ================================================================ */

.field{margin-top:26px;}          /* espaço acima do primeiro campo de cada bloco de tela */
.field + .field{margin-top:18px;} /* quando há dois .field seguidos, o espaço entre eles é um pouco menor que o espaço acima do primeiro */
.field label{
  display:block;font-size:10px;letter-spacing:0.16em;color: rgba(222, 255, 145, 0.75);margin-bottom:8px;
  text-shadow:0 1px 8px rgba(0,0,0,0.9);
}

input[type=text],input[type=tel],textarea{
  /* campos de texto simples: sem caixa fechada, só uma linha embaixo
     (visual minimalista, tipo "campo de assinatura") */
  width:100%;background:rgba(0, 10, 1, 0.9);border:none;border-bottom:1px solid var(--line);
  padding:11px 4px;
  font-size:16px;
  /* IMPORTANTE: esse 16px não é escolha estética — é o tamanho mínimo
     que evita que o Safari/Chrome no iPhone dê zoom automático na tela
     inteira quando o campo recebe foco. Se você diminuir esse valor,
     o zoom automático volta a acontecer no mobile. */
  letter-spacing:0.01em;
  transition:border-color .25s ease; /* a linha de baixo muda de cor suavemente ao focar o campo */
}
input::placeholder,textarea::placeholder{color:#aaa89e;opacity:1;}
/* cor do texto de exemplo (placeholder) — de propósito mais apagada
   que o texto que a pessoa realmente digita, pra não confundir os dois */
input:focus,textarea:focus{border-bottom-color:var(--acid);outline:none;}
/* outline:none remove o contorno padrão (geralmente feio) do navegador
   ao focar — a acessibilidade de navegação por teclado já está coberta
   pela regra :focus-visible lá em base.css, então remover este outline
   específico não prejudica quem usa teclado */

textarea{
  resize:none; /* impede o usuário de arrastar o canto pra redimensionar — mantém o layout previsível */
  min-height:110px;line-height:1.6;
  border:1px solid var(--line);border-radius:3px;padding:13px;
  /* diferente do input de texto (só linha embaixo), a textarea do campo
     "ideia" é uma caixa fechada — visualmente sinaliza que é um campo
     de texto mais longo, não uma resposta de uma linha só */
}
.counter{margin-top:6px;font-size:10px;color:rgba(238,233,220,0.4);text-align:right;}
#f_ideia{min-height:18em;}
@media(min-width:720px){#f_ideia{min-height:12em;}}
/* o contador "120/600" embaixo da textarea — o número é atualizado
   pelo JavaScript em js/campos-texto.js a cada tecla digitada */