/* ===========================================================================
   DOCUMENTAÇÃO. O QUE A FOLHA DO HUB NÃO RESOLVE, E SÓ ISSO.
   ===========================================================================

   [HARD] ESTA FOLHA NÃO DECLARA NENHUMA COR LITERAL.
   Tudo sai dos tokens de /hub.css, que já resolve tema claro e escuro nos dois
   caminhos (preferência do sistema e classe no <html>). Cor escrita aqui
   nasceria certa num tema e errada no outro, e o erro só apareceria no
   navegador de quem lê, nunca no nosso.

   [HARD] A DOCUMENTAÇÃO É O MESMO PRODUTO, ENTÃO ELA NÃO GANHA UM SISTEMA DE
   DESIGN PRÓPRIO. Cabeçalho, cartão, botão, pastilha, faixa e par de rótulo e
   valor vêm de /hub.css sem uma linha de sobrescrita. O que existe aqui é o
   que um painel denso não precisa ter e um texto longo precisa: coluna de
   leitura, bloco de código com botão de copiar, marcação do valor que a pessoa
   troca pelo dela, o mapa das páginas e a fileira lateral de navegação.

   OS DEGRAUS DE TIPOGRAFIA SÃO OS MESMOS, E O MAIOR JÁ EXISTE NA FOLHA.
   12/16, 14/20 e 16/24 são os três degraus do hub. O título de página usa
   24/32 peso 400, que não é degrau novo: é exatamente o `.hub-portao__titulo`
   de hub.css, o título das telas que não são painel (entrar, ficha, ativar).
   Documentação é uma dessas telas, não uma tabela de dados.

   ESPAÇO: a grade é de 8. Todo valor abaixo é múltiplo de 8, com uma exceção
   declarada (o 4px de raio do código em linha, que é metade do degrau menor e
   existe porque 8px num rótulo de uma palavra vira pílula).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. CABEÇALHO
   Reusa `.hub-cabecalho` inteiro. O que falta lá é só o empurrão do que vai
   para a direita, porque no hub aquele lugar é do seletor de conta.
   --------------------------------------------------------------------------- */
/* [HARD] O CABEÇALHO DA DOCUMENTAÇÃO GRUDA EM ZERO, E ESTA LINHA NÃO É ENFEITE.
   Em hub.css, `.hub-cabecalho` nasce com `top:var(--hub-h-aviso)`, os 44px da
   faixa de aviso do painel, e só volta a zero por duas regras que dependem de
   vizinhança: `.hub-aviso[hidden] ~ .hub-cabecalho` e
   `.hub-cabecalho:first-child`. Aqui nenhuma das duas casa: a documentação não
   tem faixa de aviso, e o primeiro filho do corpo é o link de pular para o
   conteúdo.
   MEDIDO na bancada, antes desta linha: o cabeçalho parava 44px abaixo do topo
   e cobria o título da fileira lateral. Nada aparecia no console. */
body > .hub-cabecalho{top:0}

.doc-cab__nome{
  font-size:14px; line-height:20px; font-weight:600;
  color:var(--muted-foreground);
  white-space:nowrap;
}
.doc-cab__fim{margin-left:auto; display:flex; align-items:center; gap:8px}

@media (max-width:640px){
  .doc-cab__nome{display:none}   /* a marca já diz onde a pessoa está */
}

/* ---------------------------------------------------------------------------
   2. A GRADE DA PÁGINA
   Duas colunas a partir de 1000px: a lista das páginas à esquerda, presa na
   rolagem, e o texto à direita. Abaixo disso vira uma coluna só, e a lista vai
   para BAIXO do texto, de propósito.

   [HARD] A ORDEM MUDA, E ELA MUDA POR ÁREA, NÃO POR `order`.
   No celular, dez links antes do primeiro parágrafo empurram o começo da
   leitura para fora da tela: a pessoa abre a página do curl e vê um índice.
   Com áreas nomeadas, a mesma marcação serve as duas telas sem duplicar nada,
   e a ordem de foco do teclado acompanha a ordem visual em ambas.
   --------------------------------------------------------------------------- */
.doc-grade{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"conteudo" "lado";
  gap:48px;
  padding:32px 0 64px;
}
@media (min-width:1000px){
  .doc-grade{
    grid-template-columns:240px minmax(0,1fr);
    grid-template-areas:"lado conteudo";
    align-items:start;
  }
}
.doc-conteudo{grid-area:conteudo; min-width:0}
.doc-lado{grid-area:lado; min-width:0}

@media (min-width:1000px){
  /* 64px do cabeçalho preso, mais a borda de 1px, mais 24px de folga, na grade
     de 8. A altura vem de `--hub-h-cabecalho` em hub.css, não de estimativa. */
  .doc-lado{position:sticky; top:88px}
}

.doc-lado__titulo{
  font-size:12px; line-height:16px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted-foreground);
  margin:0 0 16px;
}
.doc-lado__lista{list-style:none; margin:0; padding:0}
.doc-lado__lista li{margin:0}
.doc-lado__link{
  display:block;
  padding:8px 8px 8px 16px;
  border-left:2px solid var(--border);
  font-size:14px; line-height:20px;
  color:var(--muted-foreground);
  text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
}
.doc-lado__link:hover{color:var(--foreground); border-left-color:var(--input)}
/* Duas coisas mudam na página corrente, nunca uma: o peso E a linha. É a mesma
   regra da aba ativa do hub, e pelo mesmo motivo: marcar só pela cor exclui
   quem não distingue matiz. */
.doc-lado__link[aria-current="page"]{
  color:var(--foreground);
  font-weight:600;
  border-left-color:var(--primary);
}
.doc-lado__link:focus-visible{outline-offset:-2px}

/* ---------------------------------------------------------------------------
   3. A COLUNA DE LEITURA
   760px é a medida de linha, não de tela: em 14/20, dá por volta de 90
   caracteres. Mais que isso e o olho perde a volta da linha.
   --------------------------------------------------------------------------- */
.doc-corpo{max-width:760px}

.doc-olho{
  display:block;
  font-size:12px; line-height:16px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted-foreground);
  margin:0 0 8px;
}
.doc-titulo{
  font-size:24px; line-height:32px; font-weight:400;
  color:var(--foreground);
  margin:0;
}
.doc-lead{
  font-size:16px; line-height:24px;
  color:var(--muted-foreground);
  margin:16px 0 0;
  max-width:640px;
}
.doc-h2{
  font-size:16px; line-height:24px; font-weight:600;
  color:var(--foreground);
  margin:48px 0 0;
}
.doc-h3{
  font-size:14px; line-height:20px; font-weight:600;
  color:var(--foreground);
  margin:32px 0 0;
}
.doc-corpo p{margin:16px 0 0}
.doc-corpo ul,
.doc-corpo ol{margin:16px 0 0; padding-left:24px}
.doc-corpo li{margin:8px 0 0}
.doc-corpo li:first-child{margin-top:0}
.doc-corpo strong{font-weight:600}

/* [HARD] O LINK DE TEXTO É SUBLINHADO SÓ DENTRO DE PARÁGRAFO E DE ITEM DE
   LISTA, e não em todo <a> da coluna. Um seletor `.doc-corpo a` tem
   especificidade maior que `.hub-btn` e carrega DEPOIS da folha do hub: ele
   sublinharia e repintaria todo botão que é link (o "Começar por aqui" da
   faixa de destaque, os dois do fim da página), sem erro nenhum aparecer. */
.doc-corpo p a,
.doc-corpo li a{
  color:var(--primary-strong);
  text-decoration:underline; text-underline-offset:2px;
}
.doc-corpo p a:hover,
.doc-corpo li a:hover{color:var(--primary-stronger)}

/* [HARD] OS COMPONENTES DO HUB DENTRO DA COLUNA MANTÊM AS MARGENS DELES.
   `.doc-corpo p` e `.hub-cartao__sub` têm a MESMA especificidade, e esta folha
   carrega depois do hub: sem as linhas abaixo, a documentação venceria por
   ordem de carga e empurraria 16px de margem para dentro do cartão, da faixa e
   do bloco de destaque. Não dá erro: só descola o texto do ícone ao lado. */
.doc-corpo .hub-cartao__sub{margin:2px 0 0}
.doc-corpo .hub-faixa-erro p,
.doc-corpo .hub-faixa-ok p,
.doc-corpo .hub-faixa-espera p{margin:0}
.doc-corpo .hub-faixa-erro p + p,
.doc-corpo .hub-faixa-ok p + p,
.doc-corpo .hub-faixa-espera p + p{margin-top:8px}
.doc-corpo .hub-destaque p{margin:8px 0 0}
.doc-corpo .hub-faixa-erro,
.doc-corpo .hub-faixa-ok,
.doc-corpo .hub-faixa-espera{margin-top:24px}
.doc-corpo .hub-cartao{margin-top:16px}
/* A CAIXA DE TABELA NÃO TEM MARGEM PRÓPRIA em hub.css, e ela não precisava ter:
   no painel ela vive dentro de um cartão, que já dá o respiro. Aqui ela vem
   logo depois de um parágrafo, e `.doc-corpo p` só declara margem no TOPO,
   então a tabela encostava na última linha do texto. Não dá erro nenhum: dá uma
   tabela grudada na frase que a apresenta. Os 16px são o mesmo degrau que o
   cartão e o bloco de código já usam. */
.doc-corpo .hub-tabela-caixa{margin-top:16px}

/* Código EM LINHA. 12/16 dentro de um texto 14/20 porque o monoespaçado
   desenha maior que a fonte do texto no mesmo tamanho declarado. O raio de 4px
   é a exceção de grade declarada no topo desta folha. */
.doc-corpo :not(pre) > code{
  font-family:var(--mono);
  font-size:12px; line-height:16px;
  background:var(--muted);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 4px;
  overflow-wrap:anywhere;
}

/* O VALOR DE UM PAR RÓTULO E VALOR, QUANDO ELE É FRASE.
   [HARD] `.hub-par__valor` do hub NÃO serve aqui, e o motivo é estrutural:
   ele é `display:flex`, desenhado para valor atômico com pastilha e lápis ao
   lado. Uma frase com link e código dentro vira uma fileira de itens de flex,
   cada pedaço quebrando em lugar errado. O rótulo continua sendo o do hub. */
.doc-par__valor{
  font-size:14px; line-height:20px;
  color:var(--foreground);
  margin:0;
}
.doc-par__valor code{overflow-wrap:anywhere}

/* O bloco de destaque do hub ganha respiro quando vem depois de um parágrafo,
   e não depois de um cartão (que já traz a emenda de 32px na folha do hub). */
.doc-corpo .hub-destaque{margin-top:24px}

/* ---------------------------------------------------------------------------
   4. BLOCO DE CÓDIGO
   Barra em cima com o rótulo e o botão de copiar, e o código embaixo.

   [HARD] O BOTÃO NÃO FLUTUA SOBRE O CÓDIGO. Botão absoluto no canto do bloco
   fica por cima da primeira linha assim que ela é longa, e some por baixo dela
   quando a pessoa rola para o lado. A barra separada custa 32px de altura e
   nunca cobre nada.

   O bloco ROLA SOZINHO na horizontal. Comando de terminal não quebra linha: a
   barra invertida no fim da linha é sintaxe, e uma quebra que o navegador
   inventa entra no texto que a pessoa copia.
   --------------------------------------------------------------------------- */
.doc-bloco{
  margin:16px 0 0;
  background:var(--muted);
  border:1px solid var(--border);
  border-radius:var(--radius-box);
  overflow:hidden;
}
.doc-bloco__topo{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 8px 8px 16px;
  background:var(--secondary);
  border-bottom:1px solid var(--border);
}
.doc-bloco__acoes{display:flex; align-items:center; gap:8px}
.doc-bloco__rotulo{
  font-size:12px; line-height:16px; font-weight:600;
  color:var(--muted-foreground);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.doc-bloco pre{
  margin:0;
  padding:16px;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:14px; line-height:20px;
  color:var(--foreground);
  tab-size:2;
}
.doc-bloco pre:focus-visible{outline-offset:-2px}
.doc-bloco code{font:inherit; color:inherit; background:none; border:0; padding:0}

/* O AVISO DA CÓPIA. Ele fica no bloco, ao lado do botão, e não numa faixa da
   página: quem copiou está olhando para o botão. `aria-live` é o que faz o
   leitor de tela anunciar a troca sem mover o foco. */
.doc-bloco__aviso{
  font-size:12px; line-height:16px;
  color:var(--action-text);
  white-space:nowrap;
}
.doc-bloco__aviso[data-falhou="sim"]{color:var(--danger-foreground); white-space:normal}

/* O VALOR QUE VOCÊ TROCA PELO SEU. Ele é marcado no código para a pessoa achar
   sem ler tudo. Contraste medido em hub.css: 5,71:1 no claro e 7,26:1 no
   escuro, os dois sobre o próprio realce. */
.doc-slot{
  background:var(--accent);
  color:var(--accent-foreground);
  border-radius:4px;
  padding:0 4px;
  font-weight:600;
}
/* [HARD] DENTRO DO CÓDIGO O REALCE NÃO TEM FOLGA LATERAL, e isto veio de olhar
   a imagem, não de medir. Com os 4px de cada lado, `"to": "5511987654321"`
   aparecia como `"to": " 5511987654321 "` e `/SEU_PHONE_NUMBER_ID/messages`
   como `/ SEU_PHONE_NUMBER_ID /messages`: o realce inventava um espaço dentro
   do valor, no único lugar da obra onde um espaço a mais quebra a chamada. O
   fundo sozinho já marca o que a pessoa troca. */
.doc-bloco .doc-slot{padding:0}

/* ---------------------------------------------------------------------------
   5. O MAPA DAS PÁGINAS (só na porta)
   Cartão que é link inteiro, com o número do capítulo no azulejo. O azulejo é
   o mesmo `.hub-cartao__azulejo` do painel, e é ele, não um título maior, que
   dá presença ao bloco.
   --------------------------------------------------------------------------- */
/* As duas listas próprias desta folha vêm SEMPRE escritas com `.doc-corpo` na
   frente. Sem isso, `.doc-corpo ul` e `.doc-corpo li` (que são mais
   específicos que uma classe sozinha) devolvem o recuo e as bolinhas de lista
   de texto para dentro do mapa e dos passos. */
.doc-corpo .doc-mapa{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:minmax(0,1fr);
}
.doc-corpo .doc-mapa li{margin:0}
@media (min-width:720px){
  .doc-corpo .doc-mapa{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.doc-corpo .doc-mapa__item{color:inherit; text-decoration:none}
.doc-mapa__item{
  display:flex; align-items:flex-start; gap:16px;
  padding:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  text-decoration:none;
  transition:border-color .15s ease, background-color .15s ease;
  height:100%;
}
.doc-mapa__item:hover{border-color:var(--primary); background:var(--secondary)}
.doc-mapa__n{
  flex:0 0 auto; width:32px; height:32px;
  border-radius:var(--radius-tile);
  background:var(--accent); color:var(--accent-foreground);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:20px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.doc-mapa__texto{min-width:0}
.doc-mapa__nome{
  display:block;
  font-size:16px; line-height:24px; font-weight:600;
  color:var(--foreground);
}
.doc-mapa__frase{
  display:block;
  font-size:14px; line-height:20px;
  color:var(--muted-foreground);
  margin-top:8px;
}
/* A página que ainda não foi publicada não vira link morto: ela fica no mapa,
   apagada, dizendo o que é. Link para 404 gasta a confiança de quem clicou. */
.doc-mapa__item[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
}

/* ---------------------------------------------------------------------------
   6. PASSOS NUMERADOS
   O número é conteúdo, e por isso ele vem do <ol> e não de um <span> escrito à
   mão: lista renumerada à mão sai errada na primeira edição.
   --------------------------------------------------------------------------- */
.doc-corpo .doc-passos{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  counter-reset:passo;
}
.doc-corpo .doc-passo{
  counter-increment:passo;
  position:relative;
  padding-left:48px;
  margin:48px 0 0;
}
.doc-corpo .doc-passo:first-child{margin-top:0}
.doc-passo::before{
  content:counter(passo);
  position:absolute; left:0; top:0;
  width:32px; height:32px;
  border-radius:var(--radius-tile);
  background:var(--accent); color:var(--accent-foreground);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:20px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.doc-corpo .doc-passo__titulo{
  font-size:16px; line-height:24px; font-weight:600;
  color:var(--foreground);
  margin:4px 0 0;   /* centra o texto na altura do azulejo de 32px */
}
.doc-corpo .doc-passo > :first-child{margin-top:4px}

/* ---------------------------------------------------------------------------
   7. RODAPÉ DA PÁGINA E CAMINHO PARA A PRÓXIMA
   --------------------------------------------------------------------------- */
.doc-prox{
  display:flex; flex-wrap:wrap; gap:16px;
  margin:48px 0 0;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.doc-pe{
  border-top:1px solid var(--border);
  padding:24px 0 48px;
  font-size:12px; line-height:16px;
  color:var(--muted-foreground);
}
.doc-pe p{margin:0}
.doc-pe p + p{margin-top:8px}
.doc-pe a{color:var(--primary-strong); text-decoration:underline; text-underline-offset:2px}
.doc-pe a:hover{color:var(--primary-stronger)}

/* ---------------------------------------------------------------------------
   8. O LINK DE PULAR PARA O CONTEÚDO

   As dez páginas de /docs abrem com `<a class="sr-only" href="#conteudo">`.
   `.sr-only` (hub.css:514) esconde com `clip:rect(0 0 0 0)` e NÃO tinha
   nenhuma regra `:focus` em hub.css nem aqui: o link recebia foco, funcionava
   ao apertar Enter, e continuava invisível. Quem navega por teclado sem leitor
   de tela via o foco sumir no começo da página, sem saber o que estava
   selecionado. Falha calada, do tipo que estas páginas passam o dia a explicar.

   `position:fixed` em vez de `static` de propósito: `static` empurraria o
   cabeçalho para baixo no instante do foco, e a página inteira daria um pulo.
   O `z-index` fica acima do cabeçalho, que é o único elemento que ele poderia
   cruzar. A regra vale só para `:focus` e só dentro de /docs, então os outros
   usos de `.sr-only` (as legendas de tabela e o título da coluna de ações, que
   não recebem foco) continuam escondidos como antes.
   --------------------------------------------------------------------------- */
.sr-only:focus{
  position:fixed; top:8px; left:8px; z-index:60;
  width:auto; height:auto; margin:0; padding:8px 16px;
  overflow:visible; clip:auto; white-space:nowrap;
  background:var(--card); color:var(--foreground);
  border:1px solid var(--border); border-radius:8px;
  font-size:14px; line-height:20px; font-weight:600;
  text-decoration:none;
}