/* ==========================================================================
   Peça · bloco de DNS
   Cabeçalho com o nome do registro, a situação e uma frase em português
   explicando para que serve. Embaixo, o valor cru em fundo mais escuro com
   botão de copiar. Nunca peça para a pessoa digitar o valor.
   ========================================================================== */

.dns { border: 1rem solid var(--line); background: var(--bg-2); }
.dns--divergente { border-color: var(--fail); }

.dns__cabeca { display: flex; align-items: flex-start; gap: 14rem; padding: 16rem 18rem; }
.dns__glifo { font-family: var(--font-mono); font-size: 15rem; line-height: 1.2; width: 14rem; flex: none; }
.dns__nome { display: flex; align-items: center; gap: 12rem; flex-wrap: wrap; }
.dns__sigla { font-family: var(--font-mono); font-weight: 800; font-size: 14rem; }
.dns__frase { font-size: 13rem; color: var(--ink-2); margin-top: 6rem; line-height: 1.55; max-width: 620rem; }
.dns__espera { font-size: 12rem; color: var(--ink-3); margin-top: 8rem; line-height: 1.5; max-width: 620rem; }

.dns__valor {
  border-top: 1rem solid var(--line);
  background: var(--bg);
  padding: 12rem 18rem;
  display: grid;
  grid-template-columns: 72rem minmax(0, 1fr) auto;
  gap: 12rem;
  align-items: start;
}
.dns__valor .rotulo { padding-top: 2rem; letter-spacing: .12em; }
.dns__valor .dado { word-break: break-all; line-height: 1.6; }

.dns__diff { border-top: 1rem solid var(--line); background: var(--bg); padding: 14rem 18rem; }
.dns__diff-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220rem, 100%), 1fr));
  gap: 12rem;
}
.dns__diff-lado { border-left: 2rem solid; padding-left: 12rem; }
.dns__diff-lado .rotulo { letter-spacing: .12em; }
.dns__diff-lado .dado { word-break: break-all; margin-top: 8rem; }
.dns__diff-rodape {
  display: grid;
  grid-template-columns: 72rem minmax(0, 1fr) auto;
  gap: 12rem;
  align-items: center;
  margin-top: 16rem;
  padding-top: 14rem;
  border-top: 1rem solid var(--line);
}

/* No celular a coluna do rótulo sai da frente: rótulo em cima, valor embaixo. */
.mobile .dns__valor,
.mobile .dns__diff-rodape { grid-template-columns: minmax(0, 1fr); }
.mobile .dns__valor .btn,
.mobile .dns__diff-rodape .btn { justify-self: start; }

/* Progresso das cinco anotações */
.dns-progresso__barras { display: flex; gap: 4rem; margin-top: 14rem; }
.dns-progresso__barra { flex: 1; height: 10rem; }
.dns-progresso__nomes {
  display: flex;
  gap: 4rem;
  margin-top: 6rem;
  font-family: var(--font-mono);
  font-size: 10rem;
  letter-spacing: .1em;
}
.dns-progresso__nomes > span { flex: 1; }

/* --------------------------------------------------------------------------
   As chaves de DKIM, uma linha por chave
   Um domínio novo nasce com DUAS, e até 02/09 esta peça mostrava um ✓ só —
   o cliente publicava metade e a tela dizia que estava tudo certo (ponta C13).
   O placar («2 de 2») e a lista abaixo existem para o ✓ não poder mais mentir.
   -------------------------------------------------------------------------- */
.dns__resumo { color: var(--ink-3); letter-spacing: .06em; }

.dns__chaves {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  padding: 14rem 16rem 16rem;
  border-top: 1rem solid var(--line);
}
.dns__chave { border: 1rem solid var(--line); background: var(--bg); padding: 10rem 12rem; }
.dns__chave-cabeca { display: flex; align-items: baseline; gap: 8rem; flex-wrap: wrap; }
/* Grid, e não flex, pela mesma razão que o `.dns__valor` acima é grid: o
   `.btn--mini` tem `width: 100%`, e num flex ele toma a linha inteira e sobra
   largura zero para o valor — que então quebra UMA LETRA POR LINHA. A chave
   RSA tem 400 caracteres; o resultado é uma coluna de letras. Numa faixa
   `auto` do grid o mesmo `width: 100%` se resolve contra o conteúdo. */
.dns__chave-valor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10rem;
  align-items: start;
  margin-top: 8rem;
  padding-top: 8rem;
  border-top: 1rem dashed var(--line);
}
.dns__chave-valor .dado { font-size: 11rem; color: var(--ink-2); }
.mobile .dns__chave-valor { grid-template-columns: minmax(0, 1fr); }
.mobile .dns__chave-valor .btn { justify-self: start; }