/*
 * T25 — chrome da documentação. Carregado DEPOIS de styles.css, que continua
 * sendo a fonte dos tokens, da tipografia, da marca e do controle de tema: esta
 * folha só acrescenta o que a LP não tem (sidebar, coluna de leitura, busca).
 *
 * Mesma regra da LP: HTML estático, nenhum build, nenhuma dependência. As
 * páginas se referenciam por caminho RELATIVO (`../styles.css` na raiz de
 * docs/, `../../styles.css` em guides/) e não por caminho absoluto — o site
 * precisa funcionar servido de uma subpasta, não só da raiz do domínio.
 */

/* ------------------------------------------------------- header das docs --- */

/* O header das docs é o da LP com um selo: mesma altura, mesma marca, mesmo
   controle de tema. Quem sai da landing e entra aqui não deve sentir que trocou
   de site. */
.docs-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  padding: 3px 8px;
  margin-inline-start: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.docs-badge:hover { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------- layout --- */

.docs {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-block: 40px 96px;
}

/* Sidebar sticky, alinhada abaixo do header (62px + respiro). */
.docs-nav {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.docs-nav h2 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
/* `styles.css` dá padding vertical generoso a TODO <section> — é a faixa da LP.
   Os grupos da sidebar também são <section>, e sem este reset cada um herdava
   até 112px de respiro: a sidebar abria ~190px entre "Documentação" e "Guias".
   Só o navegador pega isto; 200 no HTTP não vê espaçamento. */
.docs-nav section { padding-block: 0; }
.docs-nav section + section { margin-block-start: 26px; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav li { margin-block-end: 2px; }
.docs-nav a {
  display: block;
  padding: 6px 10px;
  margin-inline-start: -10px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: none;
  line-height: 1.35;
}
.docs-nav a:hover { background: var(--paper-2); color: var(--ink); }
/* `aria-current="page"` é o que marca a página corrente — o estilo segue o
   atributo, não uma classe paralela que pode dessincronizar dele. */
.docs-nav a[aria-current='page'] {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-deep);
  font-weight: 600;
}

/* --------------------------------------------------------------- busca --- */

/* Filtro da sidebar, não índice de texto completo: sem build não há índice para
   construir, e prometer busca que não acha o corpo das páginas seria pior do
   que não ter. O rótulo diz o que ela faz. */
.docs-search { margin-block-end: 22px; }
.docs-search input {
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13.5px;
}
.docs-search input::placeholder { color: var(--ink-3); }
.docs-search input:focus-visible { border-color: var(--accent); }
.docs-search .empty {
  display: none;
  margin-block-start: 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.docs-nav[data-empty='true'] .docs-search .empty { display: block; }

/* ------------------------------------------------------------ conteúdo --- */

.docs-main { min-width: 0; max-width: 74ch; }

/* A cota técnica da LP (`.spec`, em styles.css) entra aqui como o eyebrow da
   página: o mesmo rótulo em mono de antes, agora com a régua de traços que
   fecha a largura da coluna. É informação com uma linha, não um enfeite novo —
   e é uma das DUAS coisas que a LP empresta às docs. Todo o resto da cadência
   da LP (malha, régua da margem, inversão, numeral de placa, animação de
   entrada) fica de fora de propósito: documentação é lida muitas vezes
   procurando uma resposta, e ali a uniformidade é a funcionalidade. */
.docs-main .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 14px;
}
.docs-main h1 {
  font-size: clamp(30px, 4vw, 42px);
  margin-block-start: 12px;
}
.docs-main .lede {
  font-size: 17.5px;
  margin-block-start: 18px;
  color: var(--ink-2);
}
.docs-main h2 {
  font-size: 24px;
  margin-block-start: 52px;
  padding-block-start: 22px;
  border-top: 1px solid var(--rule);
}
.docs-main h3 { font-size: 17.5px; margin-block-start: 30px; }
.docs-main p { margin-block-start: 14px; font-size: 15.5px; }
.docs-main ul, .docs-main ol { margin-block-start: 14px; padding-inline-start: 22px; font-size: 15.5px; }
.docs-main li { margin-block-end: 9px; }
.docs-main li > ul { margin-block-start: 9px; }

.docs-main pre.code { margin-block-start: 18px; }

/* Tabela rola dentro da própria caixa: numa página de configuração ela é o
   elemento mais largo, e sem isto a página inteira ganha barra horizontal. */
.table-scroll { overflow-x: auto; margin-block-start: 18px; }
.docs-main table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
}
.docs-main th, .docs-main td {
  text-align: start;
  vertical-align: top;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--rule);
}
.docs-main th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.docs-main td code { white-space: nowrap; }

/* Caixa de nota: usada para "isto ainda não existe" e avisos de escopo. */
.note-box {
  margin-block-start: 22px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--card);
  font-size: 14.5px;
}
.note-box p { margin-block-start: 0; font-size: 14.5px; }
.note-box p + p { margin-block-start: 10px; }

/* Cartões de destino, no índice e no fim de cada página. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-block-start: 24px;
}
/* Canto reto, não arredondado: os cartões carregam os cantos de chapa da LP
   (`.plate`), e tique de canto em borda arredondada não fecha. */
.card {
  display: block;
  padding: 18px 20px 20px;
  border: 1px solid var(--rule);
  background: var(--card);
  text-decoration: none;
  transition: border-color 120ms;
}
.card:hover { border-color: var(--accent); }
.card h3 { margin: 0; font-size: 16.5px; color: var(--ink); }
.card p { margin-block-start: 7px; font-size: 14px; color: var(--ink-2); }

/* Rodapé de página: o próximo passo, sempre explícito. */
.docs-next {
  margin-block-start: 56px;
  padding-block-start: 22px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}
.docs-next .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 6px;
}

/* --------------------------------------------------------- responsivo --- */

@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block-end: 64px; }
  /* Sticky numa coluna só empurraria o conteúdo para fora da tela. */
  .docs-nav {
    position: static;
    max-height: none;
    padding-block-end: 24px;
    border-bottom: 1px solid var(--rule);
  }
  .docs-nav section + section { margin-block-start: 20px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
}

.docs-api #scalar-app {
  margin-block-start: 32px;
  min-height: 70vh;
  border: 1px solid var(--rule);
  background: var(--card);
}

/* Scalar (Bliss/VTEX): tokens T25 por cima do theme `none`.

   ANCORADO EM `data-theme`, NÃO NAS CLASSES `.light-mode`/`.dark-mode`, e isso
   é o conserto de um bug real: o Scalar é DONO da classe do <body>. Ele a
   reescreve depois que a página monta, e `darkMode` só é lido uma vez, na
   criação. O resultado era `data-theme="light"` com `body.dark-mode` — página
   clara e endpoints escuros — e o observer nunca corrigia, porque `data-theme`
   não tinha mudado.

   `data-theme` no <html> é o único atributo que o Scalar não toca, então é
   dele que os tokens saem. Os seletores descendentes existem porque o Scalar
   também carimba `.dark-mode` nos próprios `.scalar-card`, e descendente vence
   por proximidade — `:root[data-theme]` tem especificidade maior e desempata a
   favor do tema da página. Como o toggle próprio do Scalar está escondido
   (`hideDarkModeToggle: true`), o tema desta página é a única fonte da verdade. */
:root[data-theme='light'],
:root[data-theme='light'] .dark-mode,
:root[data-theme='light'] .light-mode {
  --scalar-color-1: #0b0b0b;
  --scalar-color-2: #46423b;
  --scalar-color-3: #6f6a60;
  --scalar-color-accent: #ec6f30;
  --scalar-background-1: #fef8ec;
  --scalar-background-2: #f8f0df;
  --scalar-background-3: #fffdf7;
  --scalar-background-accent: rgb(236 111 48 / 0.12);
  --scalar-border-color: #ded4bf;
  --scalar-font: 'IBM Plex Sans', system-ui, sans-serif;
  --scalar-font-code: 'IBM Plex Mono', ui-monospace, monospace;
}

:root[data-theme='dark'],
:root[data-theme='dark'] .light-mode,
:root[data-theme='dark'] .dark-mode {
  --scalar-color-1: #ffffff;
  --scalar-color-2: #c2bcb2;
  --scalar-color-3: #8d867b;
  --scalar-color-accent: #ec6f30;
  --scalar-background-1: #0b0b0b;
  --scalar-background-2: #141210;
  --scalar-background-3: #131110;
  --scalar-background-accent: rgb(236 111 48 / 0.16);
  --scalar-border-color: #2a2621;
  --scalar-font: 'IBM Plex Sans', system-ui, sans-serif;
  --scalar-font-code: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Sem JS o atributo não existe; segue o SO. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root:not([data-theme]) .light-mode,
  :root:not([data-theme]) .dark-mode {
  --scalar-color-1: #ffffff;
  --scalar-color-2: #c2bcb2;
  --scalar-color-3: #8d867b;
  --scalar-color-accent: #ec6f30;
  --scalar-background-1: #0b0b0b;
  --scalar-background-2: #141210;
  --scalar-background-3: #131110;
  --scalar-background-accent: rgb(236 111 48 / 0.16);
  --scalar-border-color: #2a2621;
  --scalar-font: 'IBM Plex Sans', system-ui, sans-serif;
  --scalar-font-code: 'IBM Plex Mono', ui-monospace, monospace;
  }
}


@media (max-width: 560px) {
  .docs-badge { display: none; }
}

/* Rótulo visível só para leitor de tela: a caixa de filtro é reconhecível pelo
   placeholder, mas placeholder não é nome acessível. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.language-switch { display: inline-flex; gap: 2px; margin-inline-start: 6px; }
.language-switch button { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 4px; padding: 4px 6px; font: 500 11px/1 'IBM Plex Mono', monospace; cursor: pointer; }
.language-switch button[aria-checked='true'] { background: currentColor; color: var(--paper, #fef8ec); }