/* ==========================================================================
   /cadastro/ — o wizard

   Carregado só nesta página. Herda os tokens de cor, a tipografia e o .btn do
   app.css; aqui mora só o que é do wizard.
   ========================================================================== */

.su-head{text-align:center;margin:0 0 26px}
.su-head h1{margin:6px 0 10px}
.su-lead{margin:0 auto;max-width:52ch;color:var(--muted);font-size:15.5px;line-height:1.65}

/* ------------------------------ a timeline -------------------------------- */

.su-timeline{margin:0 0 20px}
.su-count{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--petrol);font-weight:700}
.su-count-title{display:block;margin-top:2px;font-family:"Inter",system-ui,sans-serif;font-size:19px;
  letter-spacing:normal;text-transform:none;color:var(--ink)}

.su-track{display:flex;gap:6px;list-style:none;margin:0;padding:0;counter-reset:none}
.su-step{flex:1 1 0;min-width:0}
.su-step > a,.su-step > .su-dot{text-decoration:none}

/*
 * A barra é o ::before do item, não uma div separada: um <li> já é o passo, e
 * acrescentar um elemento só para desenhar a linha daria ao leitor de tela um
 * nó a mais sem conteúdo.
 */
.su-step::before{content:"";display:block;height:4px;border-radius:var(--r-xs);background:var(--line-2)}
.su-done::before{background:var(--petrol)}
.su-now::before{background:var(--coral)}

.su-step .su-dot{display:none}
.su-label{display:block;margin-top:7px;font-size:12.5px;line-height:1.35;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-now .su-label{color:var(--ink);font-weight:600}
.su-step a{color:inherit}
.su-step a:hover .su-label{color:var(--petrol);text-decoration:underline}

/*
 * No celular os cinco rótulos não cabem lado a lado sem virar reticências em
 * todos. A barra continua, que é o que responde "quanto falta"; o nome do passo
 * atual já está grande logo acima, em .su-count-title.
 */
@media (max-width:640px){
  .su-label{display:none}
  .su-track{gap:5px}
}

/* ------------------------------- o cartão --------------------------------- */

.su-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px}
.su-card h2{margin:0 0 6px;font-size:22px}
.su-intro{margin:0 0 22px;color:var(--muted);font-size:14.5px}

.su-form{display:flex;flex-direction:column;gap:20px}

/* ------------------------------- um campo --------------------------------- */

.su-field{display:flex;flex-direction:column;gap:7px}
.su-top{display:flex;align-items:center;gap:8px}
.su-top label,.su-legend > span{font-weight:650;font-size:14.5px;color:var(--ink)}
.su-group{border:0;margin:0;padding:0;min-width:0}
.su-legend{display:flex;align-items:center;gap:8px;padding:0;margin-bottom:9px}

.su-input{width:100%;padding:12px 13px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  font:inherit;font-size:15px;color:var(--ink);background:var(--card)}
.su-input:focus-visible{outline:3px solid var(--coral-deep);outline-offset:2px;
  border-color:var(--petrol)}
.su-area{resize:vertical;line-height:1.6}
select.su-input{appearance:none;background-image:none;cursor:pointer}

.su-has-error .su-input{border-color:#B3261E}
.su-error{margin:0;font-size:13.5px;color:#B3261E;font-weight:600}

/* ----------------------- o pontinho de interrogação ----------------------- */

/*
 * <details> puro: abre e fecha sem JavaScript, é alcançável pelo teclado e o
 * leitor de tela o anuncia como um bloco que expande. A CSP deste site é
 * `script-src 'self'` sem `unsafe-inline`, então um tooltip do jeito usual
 * exigiria abrir um buraco na política numa página pública, por uma dica.
 */
/*
 * A âncora é o CAMPO, não o botãozinho.
 *
 * A primeira versão ancorava no próprio <details>, que é um item de 20px dentro
 * de uma linha flex, e com `width:100%` no celular a caixa cresceu sem teto: o
 * documento foi de 420px para 1461px de largura e a página inteira passou a
 * rolar na horizontal. Ancorada no .su-field, com left e right presos em zero,
 * ela não tem como ser mais larga do que o campo que explica.
 */
.su-field{position:relative}
.su-tip{position:static;flex:none}
.su-tip summary{list-style:none;cursor:pointer;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--petrol-soft);color:var(--petrol-deep);
  border:1px solid transparent}
.su-tip summary::-webkit-details-marker{display:none}
.su-tip summary:hover{background:var(--petrol);color:#fff}
.su-tip summary:focus-visible{outline:3px solid var(--coral-deep);outline-offset:2px}
.su-tip[open] summary{background:var(--petrol);color:#fff}

/*
 * Fora do fluxo em qualquer tamanho.
 *
 * Empurrando o conteúdo para baixo, abrir uma dica move o campo que se está
 * lendo - num formulário de cinco passos isso acontece dezenas de vezes e cada
 * vez custa o lugar do olho. Flutuando, a caixa cobre o que está embaixo, que é
 * o comportamento que todo mundo já conhece de um balão de ajuda.
 *
 * `left:0;right:0` prende a largura à do campo: ela não pode transbordar nem
 * para a direita nem para a esquerda, em nenhuma tela. No desktop o `right`
 * solta e a caixa vira um balão de 340px, que lê melhor do que uma faixa larga.
 */
.su-tip p{position:absolute;left:0;right:0;z-index:5;margin:26px 0 0;
  padding:12px 14px;background:var(--petrol-wash);
  border:1px solid var(--petrol-soft);border-radius:var(--r-sm);
  font-size:13.5px;line-height:1.6;color:var(--ink);font-weight:400;
  box-shadow:0 10px 30px rgba(7,38,28,.16)}

@media (min-width:721px){
  .su-tip p{right:auto;width:340px;max-width:100%}
}

/* ------------------------- caixas de marcar ------------------------------- */

.su-checks{display:grid;gap:10px}
.su-check{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.su-check:hover{border-color:var(--petrol);background:var(--petrol-wash)}
.su-check input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--petrol)}
.su-check b{display:block;font-size:14.5px;font-weight:650}
.su-check small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.su-check-solo{border-style:dashed}

/* --------------------------- cidade que falta ----------------------------- */

/*
 * Sempre no HTML, escondido por CSS quando a pessoa não escolheu "minha cidade
 * não está aqui". Sem JavaScript o bloco simplesmente aparece, e o formulário
 * continua utilizável: os dois campos são ignorados pelo servidor a menos que a
 * opção esteja escolhida, então preenchê-los à toa não faz mal nenhum.
 */
.su-city-extra{padding:16px;border:1.5px dashed var(--line-2);border-radius:var(--r-md);
  background:var(--bg-2)}
.su-note{margin:0 0 14px;font-size:13.5px;color:var(--muted);line-height:1.6}
.su-row{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media (max-width:560px){ .su-row{grid-template-columns:1fr} }

/*
 * Escondido por padrão, e revelado SEM JavaScript.
 *
 * O `:has()` lê a opção que está escolhida no select e abre o bloco no mesmo
 * instante, sem script nenhum - o que importa porque a CSP deste site não
 * permite script embutido e porque a página tem que funcionar no primeiro
 * pintar. A classe .su-folded vem do servidor e é a rede de baixo: num
 * navegador sem :has(), o bloco aparece depois do primeiro envio, junto com a
 * mensagem que pede o nome da cidade.
 */
/*
 * O bloco da profissão é o mesmo do da cidade, com o mesmo mecanismo: escondido
 * pelo servidor, revelado pelo `:has()` no instante em que a opção é escolhida,
 * sem uma linha de JavaScript. A rede de baixo também é a mesma: num navegador
 * sem `:has()`, o bloco aparece depois do primeiro envio, junto da mensagem que
 * pede o nome da profissão.
 */
.su-cat-extra{padding:16px;border:1.5px dashed var(--line-2);border-radius:var(--r-md);
  background:var(--bg-2)}
/*
 * Os dois valores estão escritos aqui porque um seletor CSS não lê uma
 * constante de PHP. Eles são Signup::CATEGORY_OTHER e Signup::CITY_OTHER: trocar
 * qualquer um dos dois lá desliga a revelação AQUI, sem erro nenhum e sem teste
 * que acuse. Se mexer num, mexa no outro.
 */
.su-cat-extra.su-folded{display:none}
.su-form:has(#su-category option[value="outra-profissao"]:checked) .su-cat-extra.su-folded{display:block}

/* "Minha área não está aqui" (2026-09-25): same mechanism, one level down.
   The value is Signup::FAMILY_OTHER; change one, change the other. */
.su-fam-extra{margin-top:14px}
.su-fam-extra.su-folded{display:none}
.su-form:has(#su-category_family option[value="outra-area"]:checked) .su-fam-extra.su-folded{display:block}

.su-city-extra.su-folded{display:none}
.su-form:has(#su-city option[value="outra"]:checked) .su-city-extra.su-folded{display:block}

/* A isca mudou para o app.css em 2026-09-21: o formulário de evento também a
   desenha, e esta folha não é carregada no painel. */

/* ------------------------------- os botões -------------------------------- */

.su-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  margin-top:4px;padding-top:20px;border-top:1px solid var(--line)}
/* No celular o principal vem primeiro e ocupa a linha: é o que a pessoa
   procura, e o polegar alcança a base da tela antes do topo. */
@media (max-width:560px){
  .su-actions{flex-direction:column-reverse}
  .su-actions .btn{width:100%}
}

.su-foot{margin:18px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}

@media (max-width:640px){
  .su-card{padding:22px 18px}
}

/* --------------------------- as telas do fim ------------------------------ */

/*
 * "Confira seu e-mail" e o resultado do clique.
 *
 * As duas substituem o wizard em vez de aparecerem embaixo dele, então o título
 * delas é o h1 da página e o cartão é o único bloco na tela. Largura menor que a
 * do formulário de propósito: aqui não há campo nenhum para preencher, é texto
 * para ler, e uma medida de leitura curta é o que a torna legível.
 */
.su-final{max-width:56ch;margin:0 auto;text-align:center}
.su-final h1{margin:0 0 10px;font-size:26px}
.su-final .su-intro{margin:0 auto 20px;max-width:48ch;font-size:15.5px;color:var(--muted)}
.su-final .su-actions{justify-content:center;border-top:0;padding-top:4px}
.su-final .su-foot{margin-top:16px}

/* O único sinal de sucesso que não depende de cor: a borda muda de espessura. */
.su-ok{border-color:var(--petrol);border-width:2px}

/*
 * As três dicas do "confira seu e-mail".
 *
 * Alinhadas à esquerda dentro de um cartão centralizado: são instruções, e
 * instrução centralizada obriga o olho a procurar o começo de cada linha.
 */
.su-hints{margin:0 auto 22px;padding:16px 18px 16px 34px;max-width:46ch;text-align:left;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);
  font-size:13.5px;line-height:1.7;color:var(--muted)}
.su-hints li + li{margin-top:8px}

.su-resend{margin:0;padding-top:18px;border-top:1px solid var(--line)}
.su-resend .su-note{margin:0 0 10px}

/* ---- a tela de confirmar (2026-09-21) ---- */

/*
 * O resumo do que está prestes a ser criado.
 *
 * Alinhado à esquerda dentro de um cartão que é centralizado: o .su-final
 * centraliza tudo, e dado em par rótulo/valor centralizado fica ilegível -
 * o olho perde a coluna. É a mesma razão pela qual a ficha do perfil não é
 * centralizada.
 *
 * Sem raio novo e sem sombra: reusa a superfície do .su-card em que vive.
 */
.su-confirm{margin:0 0 22px;text-align:left;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.su-confirm-row{display:flex;gap:14px;align-items:baseline;padding:11px 2px;border-top:1px solid var(--line)}
.su-confirm-row:first-child{border-top:0}
.su-confirm dt{flex:0 0 96px;margin:0;font-size:13px;color:var(--muted)}
.su-confirm dd{flex:1;margin:0;font-size:15.5px;color:var(--ink);word-break:break-word}

@media (max-width:480px){
  /* Abaixo disso a coluna de 96px come metade da largura do valor. */
  .su-confirm-row{display:block;padding:9px 2px}
  .su-confirm dt{margin-bottom:2px}
}

/* Erro no campo que virou combobox: a borda vermelha vai para a caixa visível. */
.su-has-error .bcb-input{border-color:#B3261E}