/* Nomear — o diálogo de dar nome, da comp da 0.9.0.
 *
 * Os valores são os da comp, e onde este arquivo e `design/SEELE.dc.html`
 * discordarem, ela vence.
 *
 * O véu tem `opacity` e não `rgba`: o fundo é o mesmo negro absoluto do resto,
 * e o que se quer é apagá-lo, não tingi-lo. */

.camada-nomear {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.camada-nomear::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--seele-negro-absoluto);
  opacity: 0.78;
}

/* `position: relative` para ficar sobre o véu, que é irmão dele no `::before`.
 * A moldura laranja é o que separa este diálogo dos painéis atrás: eles usam
 * `--seele-linha`, e a cor de identidade aqui diz «isto está esperando você». */
.nomear-caixa {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-linha-forte);
}

.nomear-cabeca {
  padding: 16px 24px;
  border-bottom: 1px solid var(--seele-linha-forte);
  color: var(--seele-osso);
}

.nomear-titulo {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.08em;
}

.nomear-corpo {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nomear-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nomear-campo input { width: 100%; }

/* Vermelho, que o `07-estetica.md` reserva para erro — «se aparece, algo está
 * errado» — e imediatamente abaixo do campo, que é onde os olhos estão. */
.nomear-erro {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--seele-vermelho-alerta);
}

.nomear-acoes {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Sólido: é a ação principal do diálogo e a única que o fecha fazendo algo. */
.nomear-confirmar {
  min-height: 34px;
  padding: 0 16px;
  font: inherit;
  letter-spacing: 0.14em;
  color: var(--seele-negro-absoluto);
  background: var(--seele-laranja-nerv);
  border: 1px solid var(--seele-laranja-nerv);
  cursor: pointer;
}

.nomear-confirmar:hover:not([disabled]) {
  color: var(--seele-laranja-nerv);
  background: none;
}

/* Enquanto o servidor responde. `progress` e não `not-allowed`: o botão não
 * está proibido, está ocupado. */
.nomear-confirmar[disabled] {
  cursor: progress;
  opacity: 0.6;
}

/* ------------------------------------------------------------ seu perfil */

.perfil-caixa { max-width: 480px; }

.perfil-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* `line-height` próprio porque o título do perfil quebra linha. A pergunta do
   nome antes da primeira entrada («COMO OS OUTROS VÃO TE CHAMAR?») não cabe
   numa linha de 480px, e o título herdava os 16px de `base.css` com letra de
   24px: a segunda linha começava 22px antes de a primeira acabar. 1,15 dá 27,6px
   por linha, abaixo da altura do FECHAR ao lado — o cabeçalho de SEU PERFIL,
   numa linha só, fica com a altura de antes. */
.perfil-cabeca .nomear-titulo { flex: 1; line-height: 1.15; }

/* **As placas do cabeçalho sobre a capa** (D-capa-1; rascunho da API 6, §4):
   com a capa de quem usa no cabeçalho, o título e o FECHAR ficam sobre placas
   opacas da cor do fundo nativo da caixa, e o contraste é o de sem capa —
   medido em `bancada/capa.cjs` contra uma capa branca, uma preta e uma da cor
   da tinta. O título encolhe ao tamanho do texto, para a capa aparecer. */
.perfil-cabeca[data-com-capa] :where(.nomear-titulo, #perfil-fechar) {
  background-color: var(--seele-negro-painel);
}

.perfil-cabeca[data-com-capa] .nomear-titulo { flex: 0 1 auto; margin-right: auto; }

.perfil-imagem {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* A prévia: 72px, que é o dobro do avatar da lista de pessoas — grande o
   bastante para se ver o que se escolheu, pequena o bastante para caber ao
   lado do texto que explica o limite. Quadrada e de canto reto, como tudo. */
.perfil-previa {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-absoluto);
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--seele-laranja-nerv);
}

.perfil-previa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perfil-imagem-texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.perfil-imagem-acoes {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* O apelido é leitura, e o desenho diz isso: mesmo corpo do dado, sem moldura
   de campo. Uma caixa em volta prometeria que se digita ali. */
.perfil-apelido {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--seele-osso);
}

/* O pé do perfil: `CANCELAR` fantasma e `SALVAR` sólido, à direita, com os
   valores da comp. Ele é do apelido — a imagem já se aplicou quando se apertou
   `ESCOLHER`, e a prévia acima é a confirmação dela. */
.perfil-fim {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}