/* docs.css: a documentação pública (/docs/ e /docs/<página>). É carregado depois do styles.css e do paginas.css,
   com o mesmo ?v=. Toda classe daqui começa com "doc-", para não esbarrar nas da landing nem nas "pg-". As cores
   são só as do styles.css (valem nos dois temas): cor nova entra lá, nunca solta aqui. O terminal, o arquivo, a
   trilha, os passos e as listas de termo vêm do styles.css e do paginas.css; aqui eles só são ajustados
   dentro de .doc-texto. Sem style="" e sem script: a CSP do site não deixa. */

/* ---------- o atalho de teclado para pular o índice (só aparece com o foco) ---------- */
.doc-pular{position:absolute;left:-9999px;top:10px;z-index:30;padding:10px 18px;border-radius:999px;background:var(--grafite);color:var(--papel);font-size:15px;font-weight:600;text-decoration:none}
.doc-pular:focus{left:20px}

/* ---------- a página: o índice das páginas e o texto ---------- */
.doc-pagina{padding-bottom:104px}
.doc-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding-top:22px}
@media (min-width:1000px){
  .doc-grade{grid-template-columns:232px minmax(0,1fr);column-gap:64px;align-items:start;padding-top:38px}
}

/* ---------- o índice das páginas. No celular, uma lista no topo, com os links lado a lado ---------- */
.doc-indice{min-width:0}
.doc-indice-titulo{margin:0 0 10px;max-width:none;font-size:15px;font-weight:600;color:var(--pedra)}
.doc-grupos{display:flex;flex-wrap:wrap;gap:8px}
/* os grupos se desfazem: os links de todos correm juntos, quebrando de linha (a ordem continua a dos grupos) */
.doc-grupo,.doc-grupo ul{display:contents}
.doc-grupo-nome{display:none}
.doc-grupo li{display:block;list-style:none}
.doc-indice a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;background:var(--aluminio);font-size:15px;font-weight:500;color:var(--texto);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.doc-indice a:hover{color:var(--grafite)}
/* a página aberta: a luz acesa da casa, sem virar botão */
.doc-indice a[aria-current]{background:var(--branco);box-shadow:inset 0 0 0 1.5px var(--linha-forte);font-weight:600;color:var(--grafite)}
.doc-indice a[aria-current]::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--luz);box-shadow:0 0 0 3px var(--luz-halo)}
/* no computador, a coluna da esquerda, parada enquanto o texto rola */
@media (min-width:1000px){
  .doc-indice{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow-y:auto;padding-bottom:12px}
  .doc-indice-titulo{display:none}
  .doc-grupos{display:block}
  .doc-grupo{display:block}
  .doc-grupo + .doc-grupo{margin-top:24px}
  .doc-grupo ul{display:block;margin:6px 0 0;padding:0}
  .doc-grupo-nome{display:block;margin:0;padding:0 12px;max-width:none;font-size:14px;font-weight:600;color:var(--pedra)}
  .doc-indice a{display:flex;min-height:0;padding:7px 12px;border-radius:10px;background:transparent;font-size:16px;line-height:1.35;white-space:normal}
  .doc-indice a:hover{background:var(--aluminio)}
  .doc-indice a[aria-current]{background:var(--aluminio);box-shadow:none}
}

/* ---------- o texto: uma coluna de leitura ---------- */
/* a coluna leva os blocos largos (código, tabelas, listas de termo); o texto corrido para antes, na medida de
   leitura: 37.5rem dão até uns 76 caracteres por linha com a letra da casa (medido num Chromium, 2026-10-09) */
.doc-texto{--doc-medida:37.5rem;min-width:0;max-width:47rem;container-type:inline-size}
.doc-texto h1{font-size:clamp(34px,4.2vw,52px);line-height:1.03;letter-spacing:-0.042em;max-width:none}
.doc-abre{margin:18px 0 0;font-size:clamp(19px,1.5vw,21px);line-height:1.5;color:var(--texto);text-wrap:pretty}
.doc-data{margin:14px 0 0;font-size:15px;color:var(--pedra)}
.doc-texto h2{margin:56px 0 0;padding-top:30px;border-top:1px solid var(--linha);font-size:clamp(25px,2.3vw,31px);line-height:1.14;letter-spacing:-0.028em;max-width:none}
.doc-texto h3{margin:36px 0 0;max-width:var(--doc-medida);font-size:20px;line-height:1.3;letter-spacing:-0.012em;text-wrap:balance}
.doc-texto p{margin:16px 0 0;max-width:var(--doc-medida);color:var(--texto);text-wrap:pretty}
.doc-texto h2 + p,.doc-texto h3 + p{margin-top:12px}
.doc-texto ul:not([class]),.doc-texto ol:not([class]){margin:16px 0 0;padding-left:24px;max-width:var(--doc-medida);color:var(--texto)}
.doc-texto ul:not([class]) > li + li,.doc-texto ol:not([class]) > li + li{margin-top:6px}
.doc-texto li > p:first-child{margin-top:0}
.doc-texto strong{font-weight:600;color:var(--grafite)}
.doc-texto a:not([class]){font-weight:600;color:var(--grafite);text-decoration:underline;text-decoration-color:var(--linha-forte)}
.doc-texto a:not([class]):hover{text-decoration-color:var(--grafite)}

/* ---------- código. Os blocos rolam por dentro; a página nunca rola para o lado ---------- */
/* no meio do texto: a mesma plaquinha dos comandos das páginas de dentro (.pg-cmd), quebrando quando é comprida */
.doc-texto :not(pre) > code{padding:.12em .4em;border-radius:6px;background:var(--aluminio-2);color:var(--grafite);font:500 .86em/1.45 ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.doc-texto h2 > code,.doc-texto h3 > code{padding:0;background:none;font-size:.94em;font-weight:600}
/* o terminal da casa (.terminal): o comando com a cor do terminal e o que ele responde mais apagado */
.doc-texto .terminal{margin-top:16px;max-width:100%}
.doc-texto .terminal .doc-saida{color:var(--inverso-fraco)}
/* o conteúdo de um arquivo (.pg-arquivo), sem quebrar as linhas: rola por dentro como o terminal */
.doc-texto .pg-arquivo{margin:16px 0 0}
.doc-texto .pg-arquivo pre{white-space:pre;overflow-x:auto;overflow-wrap:normal}
.doc-texto pre{tab-size:2}

/* ---------- o que tem nesta página ---------- */
.doc-nesta{margin:30px 0 0;padding:18px 20px 20px;border-radius:var(--raio);background:var(--aluminio)}
.doc-texto .doc-nesta-titulo{margin:0;max-width:none;font-size:15px;font-weight:600;color:var(--pedra)}
.doc-texto .doc-nesta ul{margin:10px 0 0;padding:0;max-width:none;list-style:none;columns:2;column-gap:28px;font-size:16px}
.doc-nesta li{break-inside:avoid;padding:3px 0}
.doc-nesta a{color:var(--grafite);text-decoration:underline;text-decoration-color:var(--linha-forte)}
.doc-nesta a:hover{text-decoration-color:var(--grafite)}
.doc-nesta code{overflow-wrap:anywhere}
@container (max-width:479px){.doc-texto .doc-nesta ul{columns:1}}
@container (min-width:700px){.doc-texto .doc-nesta-tres ul{columns:3}}

/* ---------- aviso no meio do texto: um fio à esquerda, sem caixa ---------- */
.doc-nota{margin:20px 0 0;padding:2px 0 2px 18px;max-width:var(--doc-medida);border-left:3px solid var(--grafite)}
.doc-nota > :first-child{margin-top:0}
.doc-atencao{border-left-color:var(--ambar)}

/* ---------- um comando ou uma ferramenta da referência ---------- */
.doc-comando{margin:40px 0 0;padding-top:26px;border-top:1px solid var(--linha)}
.doc-texto .doc-comando > h3{margin:0;font-size:22px}
.doc-texto .doc-uso{margin:12px 0 0;max-width:none;font:500 15px/1.6 ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;color:var(--texto);overflow-wrap:anywhere}

/* ---------- listas de termo e explicação (.pg-defs) dentro do texto ---------- */
.doc-texto .pg-defs{margin:20px 0 0}
.doc-texto .pg-defs dt > code{white-space:nowrap}
@container (max-width:559px){.doc-texto .pg-defs dt > code{white-space:normal}}
.doc-texto .pg-passos{margin:20px 0 0;max-width:calc(var(--doc-medida) + 48px)}
.doc-texto .pg-passos > li > div > :first-child{margin-top:0}

/* ---------- tabelas: no celular cada linha vira um bloco, com o nome da coluna em cima ---------- */
.doc-tabela{width:100%;margin:22px 0 0;border-collapse:collapse}
.doc-tabela caption{padding:0 0 12px;text-align:left;font-size:15px;font-weight:600;color:var(--pedra)}
.doc-tabela th,.doc-tabela td{padding:14px 0;border-top:1px solid var(--linha);text-align:left;vertical-align:top;font-size:16.5px;font-weight:400;line-height:1.5;color:var(--texto);text-wrap:pretty}
.doc-tabela thead th{padding:0 0 10px;border-top:0;vertical-align:bottom;font-size:15px;font-weight:600;color:var(--pedra)}
.doc-tabela th + th,.doc-tabela td{padding-left:20px}
.doc-tabela tbody th{font-weight:600;color:var(--grafite)}
.doc-tabela tbody tr:last-child > *{border-bottom:1px solid var(--linha)}
@container (min-width:600px){
  .doc-tabela tbody th{width:27%}
  .doc-tabela-3 td{width:36.5%}
  /* o nome de uma ferramenta ou de um motivo não quebra no meio: a primeira coluna cede */
  .doc-tabela tbody th > code{white-space:nowrap}
}
@container (max-width:599px){
  .doc-tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .doc-tabela,.doc-tabela tbody,.doc-tabela tr,.doc-tabela th,.doc-tabela td{display:block}
  .doc-tabela caption{display:block}
  .doc-tabela tr{padding:16px 0;border-top:1px solid var(--linha)}
  .doc-tabela tbody tr:last-child{border-bottom:1px solid var(--linha)}
  .doc-tabela th,.doc-tabela td,.doc-tabela tbody tr:last-child > *{padding:0;border:0}
  .doc-tabela tbody th{font-size:18px;letter-spacing:-0.01em}
  .doc-tabela td{margin-top:8px}
  .doc-tabela td::before{content:attr(data-rotulo);display:block;font-size:14px;color:var(--pedra)}
}

/* ---------- o índice (docs/index.html): cada página com uma frase ---------- */
.doc-mapa{margin:16px 0 0;padding:0;list-style:none}
.doc-mapa > li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 28px;padding:14px 0;border-top:1px solid var(--linha)}
.doc-mapa > li:last-child{border-bottom:1px solid var(--linha)}
.doc-mapa span{color:var(--texto);text-wrap:pretty}
@container (min-width:560px){
  .doc-mapa > li{grid-template-columns:12.5em minmax(0,1fr);align-items:baseline}
  .doc-situacoes > li{grid-template-columns:15.5em minmax(0,1fr)}
}

/* ---------- o fim da página: a anterior, a próxima e as páginas de produto ---------- */
.doc-seguir{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 28px;margin:64px 0 0;padding-top:24px;border-top:1px solid var(--linha)}
@container (min-width:520px){.doc-seguir{grid-template-columns:repeat(2,minmax(0,1fr))}.doc-seguir .doc-proxima{text-align:right}}
.doc-texto .doc-seguir p{margin:0;max-width:none;font-size:15px;color:var(--pedra)}
.doc-seguir a{display:block;margin-top:2px;font-size:18px}
.doc-texto .doc-produto{margin:28px 0 0;font-size:16px;color:var(--pedra)}
.doc-texto .doc-produto a{font-weight:600}