/* =========================================================
   Ravisign - documentação (/wiki/): menu com busca, conteúdo e índice.
   Prefixo .wk-. Cores pelos tokens --d2-* e --st-* do site; blocos de
   código escuros nos dois temas.
   ========================================================= */

.wk-corpo {
  --wk-topo: 72px;
  --wk-codigo-fundo: #0f1b1e;
  --wk-codigo-topo: #142428;
  --wk-codigo-borda: #22363b;
  --wk-codigo-texto: #d7e3ec;
  --wk-codigo-apagado: #8b98a5;
  --wk-info: #2563eb;
  --wk-atencao: #d97706;
  --wk-breve: #7c3aed;
}
html[data-theme="dark"] .wk-corpo {
  --wk-codigo-fundo: #0a1214;
  --wk-codigo-topo: #0f1a1d;
  --wk-codigo-borda: #1e2c30;
  --wk-info: #60a5fa;
  --wk-atencao: #fbbf24;
  --wk-breve: #a78bfa;
}
html:has(.wk-corpo) { scroll-padding-top: 92px; }
@media (max-width: 960px) { html:has(.wk-corpo) { scroll-padding-top: 130px; } }

.wk-pagina {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 232px;
  gap: 0 40px;
  width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 24px;
  align-items: start;
}

/* ---------------- menu ---------------- */
.wk-menu {
  position: sticky; top: var(--wk-topo);
  height: calc(100vh - var(--wk-topo));
  display: flex; flex-direction: column;
  border-right: 1px solid var(--d2-border);
  padding: 24px 18px 24px 0;
  min-width: 0;
}
.wk-menu-topo { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.wk-busca { position: relative; flex: 1; }
.wk-busca > svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--d2-text-faint); pointer-events: none; }
.wk-busca-campo {
  width: 100%; height: 40px; padding: 0 36px 0 36px;
  border-radius: 10px; border: 1px solid var(--d2-border-strong);
  background: var(--d2-bg-elevated); color: var(--d2-text);
  font: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.wk-busca-campo::placeholder { color: var(--d2-text-faint); }
.wk-busca-campo:focus { outline: none; border-color: var(--d2-brand); box-shadow: 0 0 0 3px var(--st-tinta); }
.wk-busca-campo::-webkit-search-cancel-button { display: none; }
.wk-busca-limpar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--d2-text-muted); cursor: pointer; }
.wk-busca-limpar:hover { background: var(--d2-bg-hover); color: var(--d2-text); }
.wk-busca-limpar svg { width: 15px; height: 15px; }
.wk-menu-fechar { display: none; }

.wk-navegacao, .wk-resultados { overflow-y: auto; flex: 1; margin-right: -10px; padding-right: 10px; overscroll-behavior: contain; }
.wk-grupo + .wk-grupo { margin-top: 2px; }
.wk-grupo-titulo {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--d2-text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.wk-grupo-titulo:hover { background: var(--d2-bg-hover); }
.wk-grupo-icone { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--st-tinta); color: var(--d2-brand); }
.wk-grupo-icone svg { width: 15px; height: 15px; }
.wk-grupo-nome { flex: 1; min-width: 0; }
.wk-grupo-seta { width: 15px; height: 15px; color: var(--d2-text-faint); transition: transform .18s; flex: none; }
.wk-grupo.aberto .wk-grupo-seta { transform: rotate(90deg); }
.wk-grupo-paginas { list-style: none; margin: 0; padding: 0 0 0 23px; display: none; }
.wk-grupo.aberto .wk-grupo-paginas { display: block; padding-top: 2px; padding-bottom: 8px; }
.wk-grupo-paginas li { border-left: 1px solid var(--d2-border); }
.wk-grupo-paginas a {
  display: block; margin-left: -1px; padding: 6px 10px 6px 16px;
  border-left: 2px solid transparent; color: var(--d2-text-muted);
  text-decoration: none; font-size: 13.5px; line-height: 1.4;
  border-radius: 0 8px 8px 0;
  transition: color .12s, background .12s, border-color .12s;
}
.wk-grupo-paginas a:hover { color: var(--d2-text); background: var(--d2-bg-hover); }
.wk-grupo-paginas a.ativo { color: var(--d2-brand); border-left-color: var(--d2-brand); background: var(--st-tinta); font-weight: 600; }

/* resultados da busca */
.wk-resultados-info { font-size: 13px; color: var(--d2-text-muted); padding: 10px 4px; }
.wk-resultado {
  display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--d2-text);
  border: 1px solid transparent;
}
.wk-resultado + .wk-resultado { margin-top: 4px; }
.wk-resultado:hover, .wk-resultado:focus-visible { background: var(--d2-bg-hover); border-color: var(--d2-border); }
.wk-resultado small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-text-faint); }
.wk-resultado b { display: block; font-size: 14px; font-weight: 600; margin: 1px 0 3px; }
.wk-resultado span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--d2-text-muted); overflow-wrap: anywhere; }
.wk-resultado mark { background: color-mix(in srgb, var(--d2-brand) 22%, transparent); color: var(--d2-text); border-radius: 3px; padding: 0 1px; }
.wk-resultado-esq { padding: 10px 12px; }
.wk-resultado-esq + .wk-resultado-esq { margin-top: 4px; }

/* ---------------- conteúdo ---------------- */
.wk-conteudo { min-width: 0; padding: 36px 0 56px; }
.wk-migalha { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d2-text-faint); margin-bottom: 10px; }
.wk-migalha a { color: var(--d2-text-muted); text-decoration: none; }
.wk-migalha a:hover { color: var(--d2-brand); }
.wk-titulo { font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; color: var(--d2-text); }

.wk-texto { font-size: 15.5px; line-height: 1.72; color: var(--d2-text); max-width: 880px; }
.wk-texto > :first-child { margin-top: 0; }
.wk-texto p, .wk-texto ul, .wk-texto ol { margin: 0 0 16px; }
.wk-texto ul, .wk-texto ol { padding-left: 24px; }
.wk-texto li + li { margin-top: 5px; }
.wk-texto li > ul, .wk-texto li > ol { margin: 6px 0 0; }
.wk-texto h2 { font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--d2-border); position: relative; }
.wk-texto h3 { font-size: 18px; line-height: 1.35; font-weight: 600; margin: 30px 0 10px; position: relative; }
.wk-texto h4 { font-size: 15.5px; font-weight: 600; margin: 22px 0 8px; }
.wk-ancora { margin-left: 8px; color: var(--d2-text-faint); text-decoration: none; font-weight: 500; opacity: 0; transition: opacity .12s, color .12s; }
.wk-texto h2:hover .wk-ancora, .wk-texto h3:hover .wk-ancora, .wk-ancora:focus-visible { opacity: 1; }
.wk-ancora:hover { color: var(--d2-brand); }
.wk-texto a:not(.wk-ancora) { color: var(--d2-brand); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--d2-brand) 40%, transparent); text-underline-offset: 3px; }
.wk-texto a:not(.wk-ancora):hover { text-decoration-color: var(--d2-brand); }
.wk-texto strong { font-weight: 600; }
.wk-texto hr { border: 0; border-top: 1px solid var(--d2-border); margin: 32px 0; }
.wk-texto img { max-width: 100%; border-radius: 12px; border: 1px solid var(--d2-border); }
.wk-texto :not(pre) > code {
  font-family: var(--d2-font-mono, ui-monospace, monospace); font-size: .86em;
  padding: 2px 6px; border-radius: 6px;
  background: var(--d2-bg-subtle); border: 1px solid var(--d2-border); color: var(--d2-text);
  overflow-wrap: anywhere;
}
.wk-texto h2 code, .wk-texto h3 code { font-size: .9em; }

/* tabelas */
.wk-tabela { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--d2-border); border-radius: 12px; background: var(--d2-bg-elevated); box-shadow: var(--st-sombra-1); }
.wk-tabela table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.wk-tabela th {
  text-align: left; padding: 10px 14px; background: var(--d2-bg-subtle);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-text-muted);
  border-bottom: 1px solid var(--d2-border); white-space: nowrap;
}
.wk-tabela td { padding: 10px 14px; border-bottom: 1px solid var(--d2-border); vertical-align: top; }
.wk-tabela tr:last-child td { border-bottom: 0; }
.wk-tabela tbody tr:hover td { background: color-mix(in srgb, var(--d2-bg-hover) 55%, transparent); }
.wk-tabela td:first-child code { white-space: nowrap; }

/* blocos de código */
.wk-codigo { margin: 0 0 20px; border-radius: 12px; overflow: hidden; background: var(--wk-codigo-fundo); border: 1px solid var(--wk-codigo-borda); }
.wk-codigo-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 14px; background: var(--wk-codigo-topo); border-bottom: 1px solid var(--wk-codigo-borda); }
.wk-codigo-topo > span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wk-codigo-apagado); }
.wk-copiar {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: 7px; border: 1px solid var(--wk-codigo-borda); background: transparent;
  color: #a8b5c2; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.wk-copiar:hover { color: #fff; border-color: #3d4a57; background: rgba(255, 255, 255, .04); }
.wk-copiar.copiado { color: #34d399; border-color: rgba(52, 211, 153, .45); }
.wk-copiar svg { width: 14px; height: 14px; }
.wk-codigo pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.wk-codigo code { font-family: var(--d2-font-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.65; color: var(--wk-codigo-texto); white-space: pre; }
.wk-r-chave { color: #7dd3fc; }
.wk-r-texto { color: #86efac; }
.wk-r-numero { color: #fcd34d; }
.wk-r-literal, .wk-r-palavra { color: #f9a8d4; }
.wk-r-comentario { color: #7b8a97; font-style: italic; }
.wk-r-comando { color: #c4b5fd; font-weight: 600; }
.wk-r-opcao { color: #fdba74; }
.wk-r-variavel { color: #93c5fd; }

/* avisos */
.wk-aviso {
  --wk-cor: var(--wk-info);
  margin: 0 0 20px; padding: 14px 16px 14px 46px; position: relative;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--wk-cor) 32%, transparent);
  background: color-mix(in srgb, var(--wk-cor) 8%, var(--d2-bg-elevated));
  font-size: 14.5px; line-height: 1.65;
}
.wk-aviso::before {
  content: ''; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px;
  background: var(--wk-cor);
  -webkit-mask: var(--wk-icone) center / contain no-repeat; mask: var(--wk-icone) center / contain no-repeat;
}
.wk-aviso > :last-child { margin-bottom: 0; }
.wk-aviso p { margin: 0 0 8px; }
.wk-aviso-rotulo { color: var(--wk-cor); font-weight: 700; margin-right: 2px; }
.wk-aviso[data-tipo="nota"] { --wk-cor: var(--wk-info); --wk-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); }
.wk-aviso[data-tipo="atencao"] { --wk-cor: var(--wk-atencao); --wk-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.wk-aviso[data-tipo="dica"] { --wk-cor: var(--d2-brand); --wk-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.wk-aviso[data-tipo="breve"] { --wk-cor: var(--wk-breve); --wk-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.wk-texto blockquote:not(.wk-aviso) { margin: 0 0 20px; padding: 4px 16px; border-left: 3px solid var(--d2-border-strong); color: var(--d2-text-muted); }

/* anterior e próxima */
.wk-vizinhas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; max-width: 880px; }
.wk-vizinha {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px;
  border: 1px solid var(--d2-border); border-radius: 14px; background: var(--d2-bg-elevated);
  text-decoration: none; color: var(--d2-text); box-shadow: var(--st-sombra-1);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.wk-vizinha:hover { border-color: var(--st-tinta-borda); box-shadow: var(--st-sombra-2); transform: translateY(-1px); }
.wk-vizinha.proxima { text-align: right; }
.wk-vizinha small { font-size: 12px; color: var(--d2-text-faint); font-weight: 500; }
.wk-vizinha b { font-size: 15px; font-weight: 600; color: var(--d2-brand); }
.wk-vizinha span { font-size: 12.5px; color: var(--d2-text-muted); }
.wk-vizinha.vazia { border: 0; background: none; box-shadow: none; }

.wk-ajuda {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; max-width: 880px; padding: 18px 20px; border-radius: 14px;
  background: var(--st-tinta); border: 1px solid var(--st-tinta-borda);
}
.wk-ajuda b { font-size: 15px; }
.wk-ajuda p { margin: 2px 0 0; font-size: 14px; color: var(--d2-text-muted); }

.wk-nao-encontrada { max-width: 560px; padding: 40px 0 8px; }
.wk-nao-encontrada-icone { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--st-tinta); color: var(--d2-brand); margin-bottom: 18px; }
.wk-nao-encontrada-icone svg { width: 28px; height: 28px; }
.wk-nao-encontrada p { color: var(--d2-text-muted); margin: 0 0 22px; }

/* esqueleto durante a troca de página */
.wk-esq { border-radius: 8px; background: linear-gradient(90deg, var(--d2-bg-subtle) 25%, var(--d2-bg-hover) 50%, var(--d2-bg-subtle) 75%); background-size: 200% 100%; animation: wk-brilho 1.2s ease-in-out infinite; }
.wk-esq-titulo { height: 36px; width: 46%; margin-bottom: 24px; }
.wk-esq-linha { height: 14px; margin-bottom: 12px; }
.wk-esq-bloco { height: 120px; margin: 22px 0; border-radius: 12px; }
@keyframes wk-brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.wk-carregando .wk-texto, .wk-carregando .wk-vizinhas { opacity: .35; pointer-events: none; transition: opacity .15s; }

/* ---------------- índice "Nesta página" ---------------- */
.wk-indice { position: sticky; top: var(--wk-topo); max-height: calc(100vh - var(--wk-topo)); overflow-y: auto; padding: 36px 0 24px; min-width: 0; }
.wk-indice-titulo { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--d2-text-faint); margin-bottom: 10px; }
.wk-indice ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--d2-border); }
.wk-indice a {
  display: block; margin-left: -1px; padding: 4px 0 4px 14px; border-left: 2px solid transparent;
  font-size: 13px; line-height: 1.45; color: var(--d2-text-muted); text-decoration: none;
  transition: color .12s, border-color .12s;
}
.wk-indice a.nivel-3 { padding-left: 26px; font-size: 12.5px; }
.wk-indice a:hover { color: var(--d2-text); }
.wk-indice a.ativo { color: var(--d2-brand); border-left-color: var(--d2-brand); font-weight: 500; }

/* botão do menu (celular e tablet) */
.wk-menu-botao { display: none; }
.wk-veu { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wk-esq { animation: none; }
  .wk-vizinha, .wk-vizinha:hover { transition: none; transform: none; }
}

@media (max-width: 1240px) {
  .wk-pagina { grid-template-columns: 256px minmax(0, 1fr); gap: 0 36px; }
  .wk-indice { display: none; }
}

@media (max-width: 960px) {
  .wk-corpo { --wk-topo: 64px; }
  .wk-pagina { grid-template-columns: minmax(0, 1fr); padding: 0 18px; }
  .wk-menu-botao {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: var(--wk-topo); z-index: 40;
    margin: 0 -18px; padding: 10px 18px; width: calc(100% + 36px);
    border: 0; border-bottom: 1px solid var(--d2-border);
    background: color-mix(in srgb, var(--d2-bg) 92%, transparent); backdrop-filter: blur(10px);
    color: var(--d2-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
  }
  .wk-menu-botao svg { width: 18px; height: 18px; flex: none; color: var(--d2-brand); }
  .wk-menu-botao-texto { flex: none; }
  .wk-menu-botao-atual { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--d2-text-muted); font-weight: 400; text-align: right; }
  .wk-menu {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 210;
    width: min(340px, 88vw); height: auto;
    padding: 16px; border-right: 1px solid var(--d2-border);
    background: var(--d2-bg-elevated); box-shadow: var(--st-sombra-2);
    transform: translateX(-104%); transition: transform .22s ease;
  }
  .wk-menu.aberto { transform: none; }
  .wk-menu-fechar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--d2-border); background: var(--d2-bg-elevated); color: var(--d2-text-muted); cursor: pointer; }
  .wk-menu-fechar svg { width: 18px; height: 18px; }
  .wk-veu { display: block; position: fixed; inset: 0; z-index: 200; background: rgba(8, 15, 20, .45); }
  .wk-veu[hidden] { display: none; }
  .wk-conteudo { padding-top: 22px; }
  .wk-titulo { font-size: 28px; }
}

@media (max-width: 520px) {
  .wk-titulo { font-size: 25px; }
  .wk-texto { font-size: 15px; }
  .wk-texto h2 { font-size: 20px; margin-top: 36px; }
  .wk-texto h3 { font-size: 17px; }
  .wk-vizinhas { grid-template-columns: 1fr; }
  .wk-vizinha.vazia { display: none; }
  .wk-codigo code { font-size: 12.5px; }
  .wk-tabela table { font-size: 13.5px; }
  .wk-menu-botao-atual { display: none; }
}
