/* ==========================================================================
   STHEFANY — telas de acesso
   acesso.css · v0.1.0
   --------------------------------------------------------------------------
   A mecânica de entrar numa área fechada: a caixa centralizada, o campo do
   código, o reenvio, e a alternância de telas por `data-etapa`.

   Saiu de `contratante.css` na 0.57.0, quando a área de imprensa passou a
   usar a mesma mecânica. Componente usado por duas páginas mora fora da folha
   de uma delas — mesma regra do carrossel, do campo em bloco e do item de
   material. Carregar `contratante.css` inteiro para pegar a tela de código
   traria junto o bento, o seletor de contrato e o histórico, que a imprensa
   não tem.

   O acesso das duas áreas é por código de uso único no e-mail. Sem senha para
   criar, sem cadastro para lembrar, sem tela de recuperação — e a equipe da
   Sthefany não vira suporte de senha. O código vale quinze minutos e pedir
   outro invalida o anterior.

   O que MUDA entre as duas áreas é o que vem antes do código: o contratante
   já está no contrato, então o e-mail dele a agência conhece. Na imprensa não
   há contrato, e por isso existe uma etapa a mais — o credenciamento.
   ========================================================================== */

.sp-acesso {
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--sp-area-topo));
  padding-block: var(--sp-e-8);
}

.sp-acesso__caixa {
  width: min(30rem, 100%);
  padding: var(--sp-e-8);
  border-radius: var(--sp-raio-bloco);
}

/* `display: block` porque a margem inferior não vale em elemento em linha, e
   o `line-height: 0` zera a caixa do SVG: sem os dois, a marca nasce colada
   no título. */
.sp-acesso__marca {
  display: block;
  margin-block-end: var(--sp-e-6);
  color: var(--sp-texto);
  line-height: 0;
}
.sp-acesso__marca svg { height: 2.5rem; width: auto; }

.sp-acesso__titulo { font-size: var(--sp-t-h3); }

.sp-acesso__texto {
  margin-block-start: var(--sp-e-3);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
}

.sp-acesso__campos { display: grid; gap: var(--sp-e-4); margin-block-start: var(--sp-e-6); }
.sp-acesso__acao { width: 100%; justify-content: center; }

.sp-acesso__rodape {
  margin-block-start: var(--sp-e-5);
  padding-block-start: var(--sp-e-5);
  border-block-start: 1px solid var(--sp-linha-clara);
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  line-height: 1.6;
}

/* --- campo do código -----------------------------------------------------------
   Seis dígitos, espaçados e em tabular. Campo de código com a mesma cara de
   campo de nome faz a pessoa digitar o e-mail de novo. */

.sp-codigo {
  width: 100%;
  padding: var(--sp-e-4);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--sp-raio);
  background: transparent;
  color: inherit;
  font-family: var(--sp-fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--sp-transicao);
}
.sp-codigo:focus { outline: none; border-color: var(--sp-acento); }
.sp-codigo::placeholder { color: var(--sp-tinta-3); letter-spacing: .5em; }

.sp-acesso__reenviar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-e-2);
  color: var(--sp-acento-texto);
  font-size: var(--sp-t-peq);
}

/* --- alternância de telas --------------------------------------------------
   Uma página, várias telas, uma visível. Listar as combinações que somem seria
   ilegível e quebraria a cada tela nova — com cinco telas seriam vinte. A
   regra genérica esconde todas; cada área reacende a da vez, porque o
   `display` de cada tela depende do que ela é.

   `.sp-etapa` é a classe base, e `.sp-etapa--<nome>` identifica qual. */
.sp-etapa { display: none; }


/* ==========================================================================
   Chrome da área fechada
   --------------------------------------------------------------------------
   Topo e rodapé próprios, sem gaveta e sem barra de abas. Não é estilo: a
   gaveta leva para Artistas, Loja e Agenda, e quem clica em qualquer um deles
   sai da área e perde a sessão. Aqui só existem a marca, quem entrou e a
   saída.

   Saiu de `contratante.css` na 0.57.0, com o resto da mecânica.
   ========================================================================== */

.sp-area__topo {
  border-block-end: 1px solid var(--sp-linha-clara);
  background: var(--sp-papel);
}

.sp-area__topo-interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-4) var(--sp-e-6);
  min-height: var(--sp-area-topo);
  padding-block: var(--sp-e-4);
}

.sp-area__marca { display: block; line-height: 0; color: var(--sp-tinta); }
.sp-area__marca svg { height: 1.75rem; width: auto; }

.sp-area__topo-acao {
  display: flex;
  align-items: center;
  gap: var(--sp-e-4);
  margin-inline-start: auto;
}

.sp-area__quem { color: var(--sp-tinta-3); font-size: var(--sp-t-mini); }

.sp-area__rodape {
  padding-block: var(--sp-e-6);
  border-block-start: 1px solid var(--sp-linha-clara);
}
.sp-area__rodape-interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-e-3) var(--sp-e-5);
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
}
.sp-area__rodape-texto { margin: 0; }

/* --- painel ----------------------------------------------------------------
   A tela do material é a única que nasce direto no topo da página, sem a
   caixa centralizada das outras. Sem reservar a altura do topo fixo, o título
   nascia por baixo da barra — cortado ao meio no desktop, invisível por
   inteiro no celular. */
.sp-painel { padding-block: var(--sp-e-7) var(--sp-secao-meia); }

/* ==========================================================================
   Recolhido
   --------------------------------------------------------------------------
   `<details>` nativo: abre sem script, fecha com Escape, funciona no teclado
   e a busca da página acha o conteúdo fechado. É para consulta rara — o
   histórico, quem tem acesso, o contrato.
   ========================================================================== */

.sp-recolhe {
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-cartao);
}

.sp-recolhe__gatilho {
  display: flex;
  align-items: center;
  gap: var(--sp-e-3);
  padding: var(--sp-e-4) var(--sp-e-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--sp-t-peq);
}
.sp-recolhe__gatilho::-webkit-details-marker { display: none; }
.sp-recolhe__gatilho:hover { color: var(--sp-acento-texto); }
.sp-recolhe__gatilho > i:first-child { color: var(--sp-acento-texto); font-size: 1.125rem; }

.sp-recolhe__nome { font-weight: 600; }
.sp-recolhe__conta { color: var(--sp-tinta-3); font-size: var(--sp-t-mini); }

.sp-recolhe__seta {
  margin-inline-start: auto;
  color: var(--sp-tinta-3);
  transition: transform var(--sp-transicao);
}
.sp-recolhe[open] .sp-recolhe__seta { transform: rotate(180deg); }

.sp-recolhe__corpo {
  padding: 0 var(--sp-e-5) var(--sp-e-5);
  border-block-start: 1px solid var(--sp-linha-clara);
  padding-block-start: var(--sp-e-5);
}

/* ==========================================================================
   Histórico
   --------------------------------------------------------------------------
   O que a área registra fica visível para quem foi registrado. Contar
   downloads sem mostrar o registro à própria pessoa é coleta silenciosa;
   mostrar transforma o mesmo dado em recibo.

   O registro é do e-mail, não da pessoa: uma secretaria de paróquia e uma
   redação de rádio costumam ter três ou quatro pessoas usando o mesmo
   endereço, e "você baixou" seria mentira.
   ========================================================================== */

.sp-historico {
  display: grid;
  gap: var(--sp-e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-historico__item {
  padding-block-end: var(--sp-e-4);
  border-block-end: 1px solid var(--sp-linha-clara);
}
.sp-historico__item:last-child { padding-block-end: 0; border-block-end: 0; }

.sp-historico__quando {
  display: block;
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  font-variant-numeric: tabular-nums;
}
.sp-historico__oque {
  display: block;
  margin-block-start: 2px;
  font-size: var(--sp-t-peq);
  font-weight: 600;
}
.sp-historico__quem {
  display: block;
  margin-block-start: 2px;
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  overflow-wrap: anywhere;
}
.sp-historico__nota {
  margin-block-start: var(--sp-e-5);
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  line-height: 1.6;
}

/* Uma linha do histórico: o que foi baixado à esquerda, quando à direita. */
.sp-historico__linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-e-2) var(--sp-e-4);
  padding-block: var(--sp-e-3);
  border-block-end: 1px solid var(--sp-linha-clara);
  font-size: var(--sp-t-peq);
}
.sp-historico__linha:last-of-type { border-block-end: 0; }

/* --- atalho para a outra área ----------------------------------------------
   Um endereço pode ser as duas coisas: a paróquia que contrata o show também
   tem quem escreva sobre ele. Como o acesso é o mesmo cookie, quem tem os
   dois papéis não entra duas vezes — atravessa pelo topo.

   Nasce escondido: só aparece para quem tem o outro papel, e quem tem um só
   nunca vê uma porta que não abre para ele. No WordPress a decisão é do
   template, com `current_user_can`. */
[data-outro-papel] { display: none; }

[data-papeis~="imprensa"][data-papeis~="contratante"] [data-outro-papel] {
  display: inline-flex;
}