/* O "em breve" do lunarea.app (15/10). Dele: "a gente não pode só mudar algumas coisinhas da
   landing page atual?". Tudo é o site oficial (cosmos/estilo.css), sem mudança; aqui só a lista de
   espera: o campo tem a cara do botão de contorno da home e o botão é o dourado de sempre. */

.lista.acoes {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 22rem;
}
.heroi .lista.acoes {
  margin-inline: auto;
}
.passo.centro .lista.acoes {
  margin-inline: auto;
}
.lista-linha {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lista-campo {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border-radius: 9999px;
  border: 1px solid var(--borda-ouro-40);
  background: var(--vidro-escuro);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: 400 18px/1 var(--f-texto);
  color: var(--marfim);
  text-align: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.lista-campo::placeholder {
  color: var(--creme-85);
  font-style: italic;
}
.lista-campo:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
}
.lista .btn-shimmer {
  width: 100%;
}
.lista .btn-shimmer:disabled {
  cursor: progress;
  filter: saturate(0.7);
}
.lista .nota {
  margin-top: 4px;
  text-align: center;
}

.lista-retorno {
  margin: 0;
  font: italic 500 18px/1.45 var(--f-texto);
  color: var(--marfim);
  text-align: center;
  text-wrap: balance;
}
.lista-retorno:empty {
  display: none;
}
/* depois de entrar na lista, sai o campo e fica a resposta */
.lista[data-estado="pronto"] .lista-linha,
.lista[data-estado="pronto"] .nota {
  display: none;
}

/* o campo que só robô preenche */
.mel {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* no computador, o campo e o botão lado a lado, como os dois botões da home; o botão desce pra
   baixo do campo quando a linha não comporta os dois (o texto dele é longo) */
@media (min-width: 640px) {
  .lista.acoes {
    max-width: 44rem;
    flex-wrap: nowrap;
  }
  .lista-linha {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .lista-campo {
    flex: 1 1 17rem;
    width: auto;
    text-align: left;
  }
  .lista .btn-shimmer {
    width: auto;
    flex: 1 0 auto;
  }
}