/* ==========================================================================
   ChatISP: /api

   So o que e EXCLUSIVO desta pagina. Capa, trilha, painel, especificacoes,
   passos, fita, comparativo, aviso, relacionadas e chamada vivem em
   css/pagina.css; grade, cartao, lista-marcada e nota vivem em css/site.css.

   Uma peca propria, e o motivo de este arquivo existir:

     .codigo  bloco de codigo <pre>. O kit nao tem um, porque esta e a unica
              pagina do site que precisa mostrar uma requisicao. Fundo
              --sup-2, borda de 1px, raio --r-md, monoespacada, --c4 e
              overflow-x: auto. Uma linha longa rola dentro do bloco em vez
              de esticar a pagina no celular.

     .codigo-bloco / .codigo-topo  a moldura com o rotulo "Exemplo
              ilustrativo". O rotulo faz parte do contrato editorial desta
              pagina: o contrato real da API nao esta publicado aqui.

   Tambem mora aqui o <code> inline, pelo mesmo motivo: fora de .prosa ele
   nao tem estilo, e esta pagina escreve nome de cabecalho no meio da frase.

   Nenhum valor escrito a mao: so var().
   ========================================================================== */

/* Havia aqui um `.pagina-api { --mono: ... }`: a familia monoespacada nao
   existia como token e esta folha declarava a sua. Em 20/09/2026 --mono
   subiu para css/tokens.css, junto de --fonte e --titulo, e as seis copias
   espalhadas pelo site viraram uma. A regra de baixo ja usava var(--mono) e
   nao mudou uma letra: so passou a ler o token de verdade. */

/* --------------------------------------------------------------------------
   01. Codigo inline

   Mesma receita do <code> de .prosa (css/pagina.css), porque o leitor nao
   deve perceber que sao dois blocos diferentes. Os dois valores em em sao
   herdados de la de proposito: em acompanha o tamanho do texto ao redor,
   que muda entre o lead da capa e a celula de uma <dd>.
   -------------------------------------------------------------------------- */

.pagina-api :is(p, dd, li, .secao-lead, .capa-lead) > code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  background: var(--sup-2);
  color: var(--verde);
  font-family: var(--mono);
  font-size: var(--corpo-mono);
  /* O nome de um cabecalho HTTP nao pode quebrar no meio. */
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   02. Bloco de codigo

   Sem moldura propria: o rotulo e o <pre> sao duas pecas empilhadas, e quem
   desenha a caixa e o <pre>. Assim o bloco funciona solto na secao e dentro
   do painel da capa sem virar caixa dentro de caixa.
   -------------------------------------------------------------------------- */

.codigo-bloco {
  display: grid;
  /* minmax(0, 1fr) e o que segura o <pre>: sem isso o conteudo largo empurra
     a coluna do grid em vez de rolar. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e3);
}

.codigo-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e1) var(--e4);
}

.codigo-rotulo {
  color: var(--verde);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.codigo-marca {
  color: var(--tenue);
  font-family: var(--mono);
  font-size: var(--c5);
}

.codigo {
  margin: 0;
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
  color: var(--texto);
  font-family: var(--mono);
  font-size: var(--c4);
  line-height: 1.75;
  /* <pre> ja nasce com white-space: pre, entao a linha longa nao quebra.
     Ela rola aqui dentro. E o bloco e alcancavel pelo teclado por causa do
     tabindex no HTML das tabelas; aqui o rolo e curto e horizontal. */
  overflow-x: auto;
  tab-size: 2;
}

.codigo code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

/* Os dois destaques dentro do codigo. <b> e a linha que o leitor veio
   buscar: o cabecalho de autenticacao, o cabecalho de assinatura. <i> e o
   trecho que NAO e contrato: o corpo que esta pagina se recusa a inventar. */
.codigo b {
  color: var(--verde);
  font-weight: var(--p-medio);
}

.codigo i {
  color: var(--tenue);
  font-style: normal;
}

/* A legenda que desmente o bloco. Fica logo abaixo dele, nao no rodape da
   secao, para que ninguem copie o exemplo sem ler a ressalva. */
.codigo-legenda {
  max-width: 76ch;
  margin-top: var(--e4);
}

/* --------------------------------------------------------------------------
   03. Ajustes da capa

   O painel da capa vem com fundo --superficie (--sup-2), que e exatamente o
   fundo do .codigo. Um degrau abaixo (--sup-1) devolve o relevo: a moldura
   afunda, o codigo sobe.
   -------------------------------------------------------------------------- */

.pagina-api .capa-painel {
  background: var(--sup-1);
}

/* --------------------------------------------------------------------------
   04. Fita e tabela desta pagina
   -------------------------------------------------------------------------- */

/* Os tres eventos sao nomes tecnicos, nao rotulos de marketing: ficam
   monoespacados para que se leiam como valor, e nao como frase. */
.pagina-api .fita li {
  font-family: var(--mono);
}

/* As celulas desta tabela sao marcas e quantidades curtas ("3", "10", "Sem
   limite"). Sem o nowrap, "Sem limite" quebra em duas linhas e desalinha a
   unica linha comparavel da tabela. */
.pagina-api .comparativo td {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   05. Espaco entre a fita, o codigo e a legenda
   -------------------------------------------------------------------------- */

.pagina-api .fita + .codigo-bloco {
  margin-top: var(--esp-bloco);
}

/* --------------------------------------------------------------------------
   06. Responsivo: 980 / 680 / 380
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .codigo {
    padding: var(--e4);
  }
}

@media (max-width: 680px) {
  .codigo-topo {
    /* Rotulo em cima, nome do exemplo embaixo: lado a lado eles se espremem
       e o segundo some no corte. */
    justify-content: flex-start;
  }

  .codigo-marca {
    flex-basis: 100%;
  }
}

@media (max-width: 380px) {
  .codigo {
    padding: var(--e3);
  }
}