/* Site de docs: só var(--token) de tokens.css (carregado antes). Escuro é o padrão; o claro vem de [data-theme='light'] nos tokens. */

/* Pares de texto medidos por scripts/docs/contraste-do-site.spec.ts, nos dois temas. */
:root {
  --site-fundo: var(--surface-0);
  --site-fundo-lateral: var(--surface-1);
  --site-texto: var(--text-primary);
  --site-texto-2: var(--text-secondary);
  --site-texto-mudo: var(--text-muted);
  --site-link: var(--accent);
  --site-codigo-fundo: var(--code-bg);
  --site-codigo-texto: var(--syntax-text);
  /* Componentes da doc (AT-857): fundo do aviso (color-mix, medido pelo spec) e cor do título sobre ele. No corpo, só --site-texto e --site-texto-2. */
  --site-aviso-nota-fundo: var(--accent-panel);
  --site-aviso-nota-titulo: var(--accent);
  --site-aviso-dica-fundo: var(--success-panel);
  --site-aviso-dica-titulo: var(--success);
  --site-aviso-cuidado-fundo: var(--warning-panel);
  --site-aviso-cuidado-titulo: var(--warning);
  --site-aviso-perigo-fundo: var(--danger-panel);
  --site-aviso-perigo-titulo: var(--danger);
  --site-historico-fundo: var(--surface-2);
  --site-passo-fundo: var(--accent);
  --site-passo-texto: var(--on-accent);
  /* Quadrado do logo (AT-856): o par do LogoMark do produto, medido pelo spec. */
  --site-logo-fundo: var(--accent);
  --site-logo-texto: var(--on-accent);
}

* { box-sizing: border-box; }
html { background: var(--site-fundo); }
body {
  margin: 0;
  background: var(--site-fundo);
  color: var(--site-texto);
  font: 400 15px/1.65 var(--font-body);
}
a { color: var(--site-link); }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: -0.01em; line-height: 1.25; scroll-margin-top: 72px; }
h1 { font-size: 30px; letter-spacing: -0.02em; }
h2 { font-size: 22px; margin-top: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
h3 { font-size: 17px; margin-top: 1.6em; }
code, pre { font-family: var(--font-mono); font-size: var(--fs-mono); }
code { background: var(--site-codigo-fundo); color: var(--site-codigo-texto); padding: 0.1em 0.35em; border-radius: var(--r-xs); }
pre { background: var(--site-codigo-fundo); color: var(--site-codigo-texto); padding: var(--space-3); border-radius: var(--r-lg); border: 1px solid var(--border); overflow-x: auto; line-height: 1.5; }
pre code { padding: 0; background: none; }
table { border-collapse: collapse; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; }
th { background: var(--surface-2); }
blockquote { margin: 1em 0; padding: 0.2em 1em; border-left: 3px solid var(--border-strong); color: var(--site-texto-2); }
img, svg { max-width: 100%; height: auto; }
/* Largura de leitura (~72ch); tabela, código, figura e Mermaid ficam na largura toda. */
article.doc > :is(p, ul, ol, blockquote, h1, h2, h3, h4, .admonicao, .historico, .passos, .abas, .cartoes) { max-width: 72ch; }
article.doc > :is(.cartoes) { max-width: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-aviso, .site-faixa { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); background: var(--warning-panel); border-bottom: 1px solid var(--warning-panel-border); color: var(--site-texto); }
.site-faixa { border: 1px solid var(--warning-panel-border); border-radius: var(--r-md); margin-bottom: var(--space-3); }

.site-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); height: 56px; background: var(--site-fundo-lateral); border-bottom: 1px solid var(--border); }
.site-nav .marca { display: inline-flex; align-items: center; gap: var(--space-1); font: 700 18px var(--font-heading); color: var(--site-texto); text-decoration: none; margin-right: auto; }
.marca-logo, .hero-logo { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--site-logo-fundo); color: var(--site-logo-texto); }
.site-github { font-size: var(--fs-sm); color: var(--site-texto-2); text-decoration: none; }
.site-github:hover { color: var(--site-link); }
.site-nav input, .site-nav select { background: var(--surface-2); color: var(--site-texto); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 6px 10px; font: inherit; font-size: var(--fs-sm); }
.site-nav button { background: var(--surface-2); color: var(--site-texto); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 6px 10px; cursor: pointer; }
.site-nav [data-menu-alternar] { display: none; }
.site-nav [data-busca-lista] { position: absolute; top: 56px; right: var(--space-3); width: min(420px, 90vw); max-height: 60vh; overflow: auto; margin: 0; padding: var(--space-2); list-style: none; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.site-nav [data-busca-lista][hidden] { display: none; }

.site-corpo { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; max-width: 1400px; margin: 0 auto; }
.site-side { position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; padding: var(--space-3); border-right: 1px solid var(--border); font-size: var(--fs-sm); }
.site-side h2 { font: 600 var(--fs-label) var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--site-texto-2); border: 0; margin: var(--space-3) 0 var(--space-1); padding: 0; }
.site-side ul { list-style: none; margin: 0; padding-left: var(--space-3); }
.site-side > section > details > ul, .site-side > section > ul { padding-left: 0; }
.site-side summary { cursor: pointer; list-style: none; padding: 3px 8px; border-radius: var(--r-sm); color: var(--site-texto); }
.site-side summary::-webkit-details-marker { display: none; }
.site-side summary::before { content: '\25B8'; display: inline-block; width: var(--space-3); color: var(--site-texto-2); }
.site-side details[open] > summary::before { content: '\25BE'; }
.site-side summary:hover { background: var(--surface-2); }
.site-side summary:focus-visible { outline: 2px solid var(--site-link); outline-offset: -2px; }
.site-side summary h2 { display: inline; margin: 0; }
.site-side summary span { display: inline; padding: 0; }
.site-side > section > details > summary { margin-top: var(--space-3); }
.site-side a, .site-side span { display: block; padding: 3px 8px; border-radius: var(--r-sm); text-decoration: none; color: var(--site-texto); }
.site-side a:hover { background: var(--surface-2); }
.site-side a[aria-current='page'] { background: var(--accent-soft); color: var(--site-link); font-weight: 600; }
main { min-width: 0; padding: var(--space-4) var(--space-5); }
.site-toc { position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; padding: var(--space-4) var(--space-3); font-size: var(--fs-sm); }
.site-toc h2 { font: 600 var(--fs-label) var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--site-texto-2); border: 0; margin: 0 0 var(--space-2); padding: 0; }
.site-toc ul { list-style: none; margin: 0; padding: 0; }
.site-toc li.n3 { padding-left: var(--space-3); }
.site-toc a { display: block; padding: 2px 0; text-decoration: none; color: var(--site-texto-2); }
.site-toc a:hover { color: var(--site-link); }
.site-foot { display: flex; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--site-texto-2); }

@media (max-width: 1100px) { .site-corpo { grid-template-columns: 260px minmax(0, 1fr); } .site-toc { display: none; } }
@media (max-width: 760px) {
  .site-nav [data-menu-alternar] { display: block; }
  .site-corpo { grid-template-columns: minmax(0, 1fr); }
  .site-side { display: none; position: fixed; inset: 56px 0 0 0; z-index: 9; max-height: none; background: var(--site-fundo-lateral); }
  body.menu-aberto .site-side { display: block; }
  main { padding: var(--space-3); }
}
.site-pager { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }

/* Referência da API (Redoc 3 estático, AT-725): sem JS nada abre, busca ou navega no Redoc, então a barra lateral, a busca e a lista "Show N more" saem (a navegação é a do site) e a operação usa a coluna inteira, com os exemplos abaixo. */
.menu-content, [data-testid='floating-button'], [data-testid='items-navigation-list'], [data-testid='show-more-operations'], [data-testid='color-mode-switcher'], [data-component-name='Sidebar/SidebarActions'] { display: none !important; }
main :is([data-testid='middle-panel'], [data-testid='right-panel']) { width: 100% !important; max-width: none !important; flex: none !important; }
main :has(> [data-testid='middle-panel']) { display: flex !important; flex-direction: column !important; }
main, #api-content { max-width: 100%; overflow-wrap: anywhere; }
main pre, main table { max-width: 100%; overflow-x: auto; }
@media (max-width: 760px) { .site-nav { gap: var(--space-1); padding: 0 var(--space-2); } .site-nav input { min-width: 0; flex: 1 1 60px; width: 60px; } .site-nav select { min-width: 0; max-width: 84px; } }

/* Componentes da doc (AT-857). A página de exemplo é reference/componentes-da-doc. */
.admonicao { --aviso-fundo: var(--site-aviso-nota-fundo); --aviso-titulo: var(--site-aviso-nota-titulo); --aviso-borda: var(--accent-panel-border); margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); border-left: 4px solid var(--aviso-titulo); border-radius: var(--r-md); color: var(--site-texto); }
.admonicao-dica { --aviso-fundo: var(--site-aviso-dica-fundo); --aviso-titulo: var(--site-aviso-dica-titulo); --aviso-borda: var(--success-panel-border); }
.admonicao-cuidado { --aviso-fundo: var(--site-aviso-cuidado-fundo); --aviso-titulo: var(--site-aviso-cuidado-titulo); --aviso-borda: var(--warning-panel-border); }
.admonicao-perigo { --aviso-fundo: var(--site-aviso-perigo-fundo); --aviso-titulo: var(--site-aviso-perigo-titulo); --aviso-borda: var(--danger-panel-border); }
.admonicao-titulo { margin: 0 0 var(--space-1); font: 700 var(--fs-label) var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase; color: var(--aviso-titulo); }
.admonicao > :last-child { margin-bottom: 0; }
.admonicao > :nth-child(2) { margin-top: 0; }
.historico { margin: var(--space-3) 0; background: var(--site-historico-fundo); border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; }
.historico-faixa { margin: 0; padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--border-strong); font-size: var(--fs-sm); font-style: italic; color: var(--site-texto-2); }
.historico > :not(.historico-faixa) { margin-left: var(--space-3); margin-right: var(--space-3); }
.passos > ol { list-style: none; counter-reset: passo; margin: var(--space-3) 0; padding: 0; }
.passos > ol > li { counter-increment: passo; position: relative; padding: 0 0 var(--space-3) 44px; }
.passos > ol > li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--site-passo-fundo); color: var(--site-passo-texto); font: 700 var(--fs-sm)/28px var(--font-heading); text-align: center; }
.passos > ol > li::after { content: ''; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--border); }
.passos > ol > li:last-child::after { display: none; }
.cartoes > ul { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.cartoes li { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--site-texto-2); }
.cartoes li:hover, .cartoes li:focus-within { border-color: var(--accent); }
.cartoes li a { font: 600 16px var(--font-heading); text-decoration: none; }
.cartoes li a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); }
.cartoes li a:focus-visible { outline: none; }
.cartoes li:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.abas { margin: var(--space-3) 0; }
.aba-rotulo { margin: 0 0 var(--space-1); font-weight: 700; color: var(--site-texto-2); }
.abas-js .aba-rotulo { display: none; }
.abas-lista { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); }
.abas-lista button { background: none; color: var(--site-texto-2); border: 0; border-bottom: 2px solid transparent; padding: 6px 12px; font: 600 var(--fs-sm) var(--font-body); cursor: pointer; }
.abas-lista button[aria-selected='true'] { color: var(--site-texto); border-bottom-color: var(--accent); }
.abas-js .aba[hidden] { display: none; }
figure.figura { margin: var(--space-4) 0; }
figure.figura img { display: block; border: 1px solid var(--border); border-radius: var(--r-lg); }
figure.figura figcaption { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--site-texto-2); max-width: 72ch; }
.adr-filtro { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.adr-filtro[hidden], .doc [hidden] { display: none; }
.adr-filtro label { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--site-texto-2); }
.adr-filtro select { background: var(--surface-2); color: var(--site-texto); border: 1px solid var(--border); border-radius: var(--r-md, 6px); padding: 4px 8px; font: inherit; max-width: 100%; }

/* Página inicial (AT-856): sem barra lateral nem sumário; hero em duas colunas, cartões e diferenciais. */
.site-corpo.inicio { grid-template-columns: minmax(0, 1fr); }
.inicio .site-nav [data-menu-alternar] { display: none; }
.inicio article.doc > :is(.hero, .cartoes, .diferenciais) { max-width: 1100px; margin-left: auto; margin-right: auto; }
.hero { align-content: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--space-5, 40px); align-items: center; margin: var(--space-3) 0; }
.hero > :not(.hero-logo, p:has(> img)) { grid-column: 1; }
.hero .hero-logo { grid-column: 1; width: 48px; height: 48px; border-radius: 13px; margin-bottom: var(--space-2); justify-self: start; }
.hero h1 { font-size: 40px; margin: 0 0 var(--space-1); }
.hero p { color: var(--site-texto-2); font-size: var(--fs-lg, 18px); margin: 0; }
.hero p:has(> img) { grid-column: 2; grid-row: 1 / span 3; }
.hero img { display: block; width: 100%; max-height: 300px; object-fit: cover; object-position: top left; border: 1px solid var(--border); border-radius: var(--r-lg); }
[data-theme='dark'] .hero img[src*='-claro.'] { display: none; }
[data-theme='light'] .hero img[src*='-escuro.'] { display: none; }
.diferenciais { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.diferencial { padding: var(--space-3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--site-texto-2); font-size: var(--fs-sm); }
.diferencial b { color: var(--site-texto); }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero p:has(> img) { grid-column: 1; grid-row: auto; margin-top: var(--space-3); } }
.inicio .cartoes > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }