/* Documentação dos MCPs (/mcp/docs/...): menu lateral + texto. Mesmos tokens do site (fundo #0d0d0d, verde #33ff33, âmbar #ffb000). */
.docs { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3.5rem; max-width: 80rem; margin: 0 auto; padding: 3.5rem 1.5rem 7rem; }
@media (max-width: 900px) { .docs { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 2rem; } }

/* menu lateral */
.doc-nav { position: sticky; top: 7rem; align-self: start; max-height: calc(100vh - 9rem); overflow: auto; padding-right: 0.5rem; font-size: 0.8125rem; line-height: 1.5; }
@media (max-width: 900px) { .doc-nav { position: static; max-height: none; padding: 1.25rem; border: 1px solid rgba(51, 255, 51, 0.2); background: rgba(10, 26, 10, 0.5); } }
.doc-grupo { margin: 0 0 0.75rem; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-amber); }
.doc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.doc-nav > ul > li > a { display: block; padding: 0.25rem 0; color: rgba(51, 255, 51, 0.7); text-decoration: none; transition: color 0.15s; }
.doc-nav a:hover, .doc-nav a[aria-current="page"] { color: var(--s-green); }
.doc-nav a[aria-current="page"]::before { content: '> '; color: var(--s-amber); }
.doc-nav ul ul { margin: 0.25rem 0 0.75rem 0.9rem; padding-left: 0.9rem; border-left: 1px solid rgba(51, 255, 51, 0.2); }
.doc-nav ul ul a { display: block; padding: 0.1rem 0; font-size: 0.75rem; color: rgba(51, 255, 51, 0.55); text-decoration: none; }

/* texto */
.doc { min-width: 0; max-width: 52rem; }
.doc h1 { margin: 0 0 1.25rem; font-family: 'VT323', ui-monospace, monospace; font-weight: 500; font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; color: var(--s-green); text-wrap: balance; }
.doc .doc-lead { margin: 0 0 2.5rem; font-size: 1rem; line-height: 1.7; color: rgba(51, 255, 51, 0.78); max-width: 46rem; }
.doc section { padding-top: 3rem; margin-top: 3rem; border-top: 1px solid rgba(51, 255, 51, 0.2); scroll-margin-top: 6.5rem; }
.doc section:first-of-type { margin-top: 0; }
.doc h2 { margin: 0 0 1.25rem; font-family: 'VT323', ui-monospace, monospace; font-weight: 500; font-size: 2.25rem; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--s-green); }
.doc h3 { margin: 2rem 0 0.75rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-amber); }
.doc p, .doc li { font-size: 0.875rem; line-height: 1.8; color: rgba(51, 255, 51, 0.78); }
.doc p { margin: 0 0 1rem; max-width: 46rem; }
.doc strong { color: var(--s-green); font-weight: 500; }
.doc a { color: var(--s-green); text-decoration: none; background: linear-gradient(var(--s-green), var(--s-green)) left bottom / 100% 1px no-repeat; }
.doc a:hover { color: var(--s-amber); background-image: linear-gradient(var(--s-amber), var(--s-amber)); }
.doc ul, .doc ol { margin: 0 0 1.25rem; padding-left: 1.4rem; max-width: 46rem; }
.doc ul { list-style: none; padding-left: 1.2rem; }
.doc ul li { position: relative; margin-bottom: 0.45rem; }
.doc ul li::before { content: ''; position: absolute; left: -1.2rem; top: 0.75em; width: 5px; height: 5px; background: var(--s-amber); }
.doc ol li { margin-bottom: 0.6rem; padding-left: 0.3rem; }
.doc ol li::marker { color: var(--s-amber); }
.doc code { padding: 1px 6px; font: 500 0.82em 'Fira Code', ui-monospace, monospace; color: var(--s-green); background: rgba(51, 255, 51, 0.07); border: 1px solid rgba(51, 255, 51, 0.2); overflow-wrap: anywhere; }
.doc pre { margin: 0 0 1.25rem; padding: 1rem 1.25rem; overflow-x: auto; border: 1px solid rgba(51, 255, 51, 0.2); background: var(--s-bg2); }
.doc pre code { padding: 0; border: 0; background: none; font-size: 0.8125rem; }

/* tabelas: rolam na horizontal dentro da própria caixa, a página não */
.doc-tabela { margin: 0 0 1.5rem; overflow-x: auto; border: 1px solid rgba(51, 255, 51, 0.2); background: rgba(10, 26, 10, 0.4); }
.doc table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.doc th { padding: 0.7rem 0.9rem; text-align: left; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-amber); border-bottom: 1px solid rgba(51, 255, 51, 0.2); white-space: nowrap; }
.doc td { padding: 0.7rem 0.9rem; vertical-align: top; font-size: 0.8125rem; line-height: 1.6; color: rgba(51, 255, 51, 0.78); border-bottom: 1px solid rgba(51, 255, 51, 0.1); }
.doc tr:last-child td { border-bottom: 0; }
.doc td:first-child { white-space: nowrap; }
/* tabela de textos longos (solução de problemas, o que já foi validado): as duas colunas quebram linha e dividem a largura */
.doc-tabela.texto table { min-width: 0; table-layout: fixed; }
.doc-tabela.texto td:first-child { white-space: normal; width: 38%; }
.doc-tabela.texto td, .doc-tabela.texto th { overflow-wrap: anywhere; }
@media (max-width: 40rem) { .doc-tabela.texto table { table-layout: auto; min-width: 30rem; } }

/* tipo da ferramenta */
.doc .tipo { display: inline-block; padding: 1px 8px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(51, 255, 51, 0.35); color: var(--s-green); white-space: nowrap; }
.doc .tipo.escrita { border-color: var(--s-amber); color: var(--s-amber); }
.doc .tipo.conta { border-color: rgba(51, 255, 51, 0.2); color: rgba(51, 255, 51, 0.6); }

/* avisos */
.doc .nota { margin: 0 0 1.25rem; padding: 0.9rem 1.1rem; max-width: 46rem; border-left: 2px solid var(--s-amber); background: rgba(255, 176, 0, 0.05); }
.doc .nota p { margin: 0; font-size: 0.8125rem; }
.doc .nota p + p { margin-top: 0.6rem; }
.doc .nota strong { color: var(--s-amber); }
.doc-fim { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(51, 255, 51, 0.2); display: flex; flex-wrap: wrap; gap: 1rem 2rem; font-size: 0.8125rem; }