/* ==========================================================================
   SGP — Design System · Camada 10: central de ajuda (.ajuda, .ajuda-artigo)

   Fatia F18. A capa é uma pilha de grupos com cartões; o artigo é uma leitura
   longa com uma coluna de apoio. A tipografia do Markdown renderizado mora em
   .ajuda-prosa e NÃO usa seletor de elemento solto — fica toda debaixo do
   bloco, para não vazar em nenhuma outra tela do sistema.
   ========================================================================== */

.ajuda {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}

.ajuda__busca {
  max-width: 34rem;
  /* min-width:0 no filho de flex: sem isso o campo não encolhe abaixo do
     conteúdo e "corta" a tela em largura pequena. */
  min-width: 0;
}

.ajuda__contagem {
  margin: calc(-1 * var(--esp-4)) 0 0;
}

.ajuda__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

/* O filtro da tela apaga o grupo inteiro com grupo.hidden = true. O display:flex
   acima é declaração de autor e vence o [hidden] da folha do navegador, que é de
   origem UA — sem esta linha o título do grupo ("Começar aqui", "Contatos"…)
   continua desenhado sobre uma grade vazia quando nenhum artigo dele casa com a
   busca. Mesmo gotcha documentado em 10_sms.css. */
.ajuda__grupo[hidden] { display: none; }

.ajuda__grupo-titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
}

.ajuda__grupo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--raio-md);
  background: var(--cor-acao-suave);
  color: var(--cor-acao-forte);
}

.ajuda__cartao {
  height: 100%;
}

.ajuda__termos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  margin-top: var(--esp-3);
}

.ajuda__vazio.oculto { display: none; }

/* --- O artigo ------------------------------------------------------------ */

.ajuda-artigo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--esp-5);
  align-items: start;
}

.ajuda-artigo__corpo { min-width: 0; }

.ajuda-artigo__lado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  position: sticky;
  top: var(--esp-4);
}

.ajuda-artigo__termos { margin: var(--esp-2) 0 0; }
.ajuda-artigo__termos dt { font-weight: var(--peso-medio); }
.ajuda-artigo__termos dd { margin: 0 0 var(--esp-2); }

.ajuda-artigo__vizinhos {
  margin: var(--esp-2) 0 0;
  padding-left: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

@media (max-width: 60rem) {
  .ajuda-artigo { grid-template-columns: minmax(0, 1fr); }
  .ajuda-artigo__lado { position: static; }
}

/* --- Tipografia do Markdown renderizado ---------------------------------- */

.ajuda-prosa {
  max-width: 46rem;
  font-size: var(--texto-md);
  line-height: var(--altura-solta);
  color: var(--cor-texto);
}

/* O renderizador cria uma âncora invisível por título (deep link para a seção).
   Ela não deve ocupar espaço nem aparecer para o leitor de tela. */
.ajuda-prosa .anchor {
  display: none;
}

.ajuda-prosa > :first-child { margin-top: 0; }
.ajuda-prosa > :last-child { margin-bottom: 0; }

.ajuda-prosa h2 {
  margin: var(--esp-6) 0 var(--esp-2);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.ajuda-prosa h3 {
  margin: var(--esp-5) 0 var(--esp-2);
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}

.ajuda-prosa p { margin: 0 0 var(--esp-3); }

.ajuda-prosa ul,
.ajuda-prosa ol {
  margin: 0 0 var(--esp-3);
  padding-left: var(--esp-5);
}

.ajuda-prosa li { margin-bottom: var(--esp-1); }
.ajuda-prosa li > ul, .ajuda-prosa li > ol { margin-top: var(--esp-1); }

.ajuda-prosa strong { font-weight: var(--peso-semi); }

.ajuda-prosa a {
  color: var(--cor-acao-forte);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ajuda-prosa code {
  font-family: var(--fonte-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-afundado);
}

.ajuda-prosa blockquote {
  margin: 0 0 var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  border-left: 3px solid var(--cor-acao);
  background: var(--cor-acao-suave);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
  color: var(--cor-texto);
}

.ajuda-prosa blockquote p:last-child { margin-bottom: 0; }

/* Tabela larga rola dentro do próprio bloco: a página nunca rola na horizontal. */
.ajuda-prosa table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 var(--esp-4);
  font-size: var(--texto-sm);
}

.ajuda-prosa th,
.ajuda-prosa td {
  border: 1px solid var(--cor-borda);
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  vertical-align: top;
}

.ajuda-prosa th {
  background: var(--cor-fundo-afundado);
  font-weight: var(--peso-semi);
}

.ajuda-prosa hr {
  margin: var(--esp-5) 0;
  border: 0;
  border-top: 1px solid var(--cor-borda);
}