/* ==========================================================================
   solitpmt · documentação (/docs) — css/docs.css
   Complementa o css/solit.css (que vem antes e não é alterado aqui): casca
   com o índice lateral, seções, tabelas da API, listas, campos e exemplos de
   código. Só tokens do sistema; nenhuma cor nova.

   Casca
   - A partir de 1024 px: índice à esquerda (.docs-indice, fixo na lateral,
     com rolagem própria) e o texto à direita, numa coluna de leitura.
   - Abaixo de 1024 px, com JS: barra fixa no topo com o botão "Índice" e a
     seção lida; o botão abre o índice embaixo dele. Sem JS: o índice fica
     aberto antes do texto, sem barra fixa.
   ========================================================================== */

/* ---------------------------------------------------------------- fonte */
/* IBM Plex Mono 400 (os exemplos de código): só esta página o carregava. As
   outras faces estão na seção 0 do solit.css, com a origem e a licença. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- casca */
.docs { padding-bottom: var(--esp-11); }

.docs__lateral { margin-bottom: var(--esp-7); padding-top: var(--esp-7); }

/* botão do índice (celular): o JS tira o hidden */
.docs__alternar {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font-size: var(--tam-ui);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.docs__alternar-rotulo {
  flex: none;
  font-size: var(--tam-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.docs__alternar-atual {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.docs__alternar::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icone-menu) center / contain no-repeat;
  mask: var(--icone-menu) center / contain no-repeat;
}
.docs__alternar[aria-expanded="true"]::after {
  -webkit-mask-image: var(--icone-fechar);
  mask-image: var(--icone-fechar);
}

@media (max-width: 1023px) {
  /* com JS: barra fixa de ponta a ponta, o índice recolhido */
  .js .docs__lateral {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 calc(-1 * var(--margem));
    padding: 0 var(--margem);
    border-bottom: 1px solid var(--linha);
    background: var(--fundo);
  }
  .js .docs__lateral .docs-indice { display: none; }
  .js .docs__lateral .docs-indice[data-aberto] {
    display: block;
    max-height: min(70vh, calc(100dvh - 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--esp-4) 0 var(--esp-5);
    border-top: 1px solid var(--linha);
  }
  /* a âncora não fica embaixo da barra */
  .js .docs-secao { scroll-margin-top: 76px; }
}

@media (min-width: 1024px) {
  .docs {
    display: grid;
    grid-template-columns: 14.5rem minmax(0, 1fr);
    column-gap: var(--esp-10);
  }
  /* o aside estica até o fim do texto; o índice (sticky no solit.css) anda junto */
  .docs__lateral { margin-bottom: 0; padding-top: var(--esp-9); }
  .docs__alternar { display: none; }
  .docs-indice {
    padding-right: var(--esp-2);
    scrollbar-width: thin;
    scrollbar-color: var(--linha-forte) transparent;
  }
}

/* ---------------------------------------------------------------- coluna de leitura */
.docs__conteudo {
  min-width: 0;
  max-width: 50rem;
  padding-top: var(--esp-8);
  font-size: var(--tam-campo);
  line-height: 1.7;
}
@media (min-width: 1024px) {
  .docs__conteudo { padding-top: var(--esp-9); }
}

/* Seção: rótulo do grupo, título e blocos em fluxo, separadas por uma linha */
.docs-secao {
  padding-block: var(--esp-10);
  border-top: 1px solid var(--linha);
  scroll-margin-top: var(--esp-5);
}
.docs-secao:first-child { padding-top: 0; border-top: 0; }
.docs-secao > * + * { margin-top: var(--esp-5); }
.docs-secao > .rotulo + * { margin-top: var(--esp-2); }
.docs-secao > h2 + *,
.docs-secao > h1 + * { margin-top: var(--esp-4); }
.docs-secao > h3 { margin-top: var(--esp-8); }
.docs-secao > h3 + * { margin-top: var(--esp-3); }
.docs-secao > .docs-exemplo,
.docs-secao > .cartao,
.docs-secao > .docs-exemplo + .docs-exemplo { margin-top: var(--esp-7); }

/* a abertura da página ganha mais respiro embaixo */
.docs-secao--abertura { padding-bottom: var(--esp-11); }
.docs-secao--abertura .titulo-secao { max-width: 16em; }

.docs-titulo {
  font-family: var(--fonte-marca);
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.docs-lead {
  max-width: 40em;
  font-size: var(--tam-lead);
  line-height: 1.65;
  color: var(--texto);
}
.docs-secao > p { max-width: 42em; }

.docs-nota { font-size: var(--tam-ui); color: var(--texto-suave); }

/* Código em linha, numa caixa leve. Segue a regra do solit.css: um nome só
   não quebra; o trecho com espaços (rota com método, corpo JSON, cabeçalho
   com valor) leva .trecho e quebra nos espaços, e uma rota longa quebra
   onde precisar (overflow-wrap: anywhere: o break-word herdado do body não
   reduz a largura mínima da coluna da grade, e a página rolaria de lado em
   320 px). */
.docs__conteudo :not(pre) > code {
  padding: 0.08em 0.32em;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--fundo-suave);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.docs__conteudo code.trecho { overflow-wrap: anywhere; }
.docs__conteudo pre code {
  padding: 0;
  border: 0;
  background: none;
}

/* ---------------------------------------------------------------- listas */
/* uma coluna que encolhe: um item largo não alarga a grade (seção 19 do solit.css) */
.docs-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); max-width: 42em; }
.docs-lista > li { position: relative; padding-left: var(--esp-6); }
ul.docs-lista > li::before {
  content: "";
  position: absolute;
  top: calc(0.85em - 2.5px);
  left: var(--esp-1);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--texto-suave);
}
ol.docs-lista { counter-reset: passo; gap: var(--esp-3); }
ol.docs-lista > li { counter-increment: passo; padding-left: var(--esp-8); }
ol.docs-lista > li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--texto-suave);
}
.docs-lista--pequena { font-size: var(--tam-ui); }

/* ---------------------------------------------------------------- campos (nome, etiqueta, descrição) */
.docs-campos { max-width: 42em; border-top: 1px solid var(--linha-forte); }
.docs-campos > div { padding-block: var(--esp-4); border-bottom: 1px solid var(--linha); }
.docs-campos dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  color: var(--tinta);
  line-height: 1.5;
}
.docs-campos dd {
  margin: var(--esp-2) 0 0;
  font-size: var(--tam-ui);
  line-height: 1.6;
  color: var(--texto);
}

/* ---------------------------------------------------------------- tabelas */
.docs-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tam-ui);
  line-height: 1.55;
  font-variant-numeric: tabular-nums lining-nums;
}
.docs-tabela th,
.docs-tabela td {
  padding: var(--esp-3) var(--esp-5) var(--esp-3) 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
  vertical-align: top;
}
.docs-tabela th:last-child,
.docs-tabela td:last-child { padding-right: 0; }
.docs-tabela thead th {
  padding-top: 0;
  border-bottom-color: var(--linha-forte);
  font-size: var(--tam-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
/* nome de campo no cabeçalho: sem caixa alta */
.docs__conteudo .docs-tabela thead code {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--tam-pequeno);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-suave);
}
.docs-tabela td { color: var(--texto); }
.docs-tabela td:first-child { color: var(--tinta); }
/* taxas e limites: o item em texto, o valor em navy */
.docs-tabela--valores td:first-child { color: var(--texto); }
.docs-tabela--valores td:last-child { font-weight: 500; color: var(--tinta); }
/* erros: a coluna HTTP ("413 / 415") não quebra */
.docs-tabela--http td:first-child { font-weight: 500; white-space: nowrap; }

/* celular: cada linha vira um bloco (primeira célula em cima, como título) */
@media (max-width: 39.99em) {
  .docs-tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .docs-tabela,
  .docs-tabela tbody,
  .docs-tabela tr,
  .docs-tabela td { display: block; }
  .docs-tabela tr { padding-block: var(--esp-3); border-bottom: 1px solid var(--linha); }
  .docs-tabela tbody tr:first-child { border-top: 1px solid var(--linha-forte); }
  .docs-tabela td { padding: 0; border: 0; }
  .docs-tabela td + td { margin-top: var(--esp-1); }
  .docs-tabela td:first-child { font-weight: 500; }
  /* taxas e limites: o item como rótulo, o valor embaixo em destaque */
  .docs-tabela--valores td:first-child { font-size: var(--tam-pequeno); font-weight: 400; }
}

/* ---------------------------------------------------------------- exemplos de código */
.docs-exemplo {
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--fundo-suave);
  overflow: hidden;
}
.docs-exemplo__cab {
  padding: var(--esp-3) var(--esp-5);
  border-bottom: 1px solid var(--linha);
  background: var(--superficie);
  font-size: var(--tam-pequeno);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.docs-exemplo__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
  padding: var(--esp-5);
}
.docs-exemplo pre {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--tam-pequeno);
  line-height: 1.65;
}
.docs-exemplo__nota {
  font-size: var(--tam-ui);
  line-height: 1.6;
  color: var(--texto);
}
.docs-exemplo__nota + pre { margin-top: calc(-1 * var(--esp-2)); }
@media (max-width: 479px) {
  .docs-exemplo__cab { padding-inline: var(--esp-4); }
  .docs-exemplo__corpo { padding: var(--esp-4); }
  .docs-exemplo pre { font-size: var(--tam-legenda); }
}

/* bloco de código solto (fora de um exemplo) */
.docs-secao > pre { font-size: var(--tam-pequeno); }

/* alertas dentro do texto e dos exemplos */
.docs-secao > .alerta { max-width: 42em; }
.docs-exemplo .alerta { background: var(--alerta-fundo); }

/* ---------------------------------------------------------------- ajuda (fim da página) */
.docs-ajuda .cartao__corpo { display: grid; gap: var(--esp-2); font-size: var(--tam-ui); }

/* ---------------------------------------------------------------- alto contraste */
@media (forced-colors: active) {
  .docs__alternar::after { forced-color-adjust: none; background: CanvasText; }
  ul.docs-lista > li::before { forced-color-adjust: none; background: CanvasText; }
}