/* ==========================================================================
   A11 · Novo domínio
   O molde é o da a5_nova_conta, e a semelhança é deliberada: quem cria conta
   já conhece a forma — trilha à esquerda, painel à direita, uma trava por
   passo e o botão âmbar só quando ele pode ser clicado.

   Dois passos, não três: a a5 tem um terceiro porque a senha aparece uma vez
   só. Aqui o que vem depois de criar não cabe numa tela de assistente — é o
   DNS que o cliente precisa publicar, e ele mora na a3, que já sabe conferir.
   ========================================================================== */

.a11 { grid-template-columns: 260rem minmax(0, 1fr); }
.mobile .a11 { grid-template-columns: minmax(0, 1fr); }

.a11__trilha { padding: 22rem 20rem; display: flex; flex-direction: column; gap: 4rem; }
.a11__passo {
  display: flex;
  gap: 12rem;
  padding: 11rem 12rem;
  border-left: 2rem solid transparent;
}
.a11__passo--atual { background: var(--panel); border-left-color: var(--invert-bg); }
.a11__passo--feito { border-left-color: var(--ok); }
.a11__passo-num { font-family: var(--font-mono); font-weight: 800; font-size: 12rem; width: 14rem; flex: none; color: var(--ink-3); }
.a11__passo-nome { font-size: 13rem; font-weight: 600; color: var(--ink-3); }
.a11__passo--atual .a11__passo-nome,
.a11__passo--atual .a11__passo-num { color: var(--ink); }
.a11__passo--feito .a11__passo-num { color: var(--ok); }
.a11__passo-frase { font-size: 12rem; color: var(--ink-3); margin-top: 2rem; line-height: 1.4; }
.a11__nota-lateral { margin-top: auto; padding-top: 20rem; font-size: 12rem; color: var(--ink-3); line-height: 1.5; }

.a11__painel { padding: 26rem 28rem; min-height: 436rem; display: flex; flex-direction: column; }
.mobile .a11__painel { padding: 20rem 18rem; min-height: 0; }
.a11__campo-nota { font-size: 12rem; color: var(--ink-3); margin-top: 8rem; line-height: 1.5; }

.a11__caixa-nota {
  display: flex;
  gap: 12rem;
  margin-top: 22rem;
  padding: 14rem 16rem;
  border: 1rem solid var(--line);
  background: var(--bg);
  font-size: 12rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.a11__caixa-nota--fail { border-color: var(--fail); background: var(--veu-fail); margin-top: 10rem; }
.a11__caixa-nota--warn { border-color: var(--warn); background: var(--veu-warn); margin-top: 10rem; }

.a11__rodape {
  display: flex;
  align-items: center;
  gap: 10rem;
  flex-wrap: wrap;
  margin-top: 24rem;
  padding-top: 20rem;
  border-top: 1rem solid var(--line);
}