/* ═══════════════════════════════════════════════════════════════════════════
   manual-xdoc-index.css — a veste do ÍNDICE do X-DOC (as três camadas)
   Consumidores: manual-xdoc.html
   ⚠️ RECORTE VERBATIM do <style> inline (LOOP 05, 04/09/2026): idem: sem gêmeo, mesmo padrão dos irmãos.
   ⛔ NÃO devolva estas regras para dentro do HTML de uma das páginas: elas eram
      IDÊNTICAS byte a byte nas cópias e é isso que torna a folha legítima. Duas
      cópias divergem no primeiro conserto (R5 desta casa).
   ⚠️ A ORDEM das regras é a original — ⛔ não reordene, ⛔ não "agrupe por tema":
      a cascata desta folha é a cascata que o inline tinha.
   ═══════════════════════════════════════════════════════════════════════════ */

html,body{margin:0;background:var(--bg-base);color:var(--text);font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--accent)}a:hover{color:var(--accent-strong)}
/* ⚠️ O <defs> NÃO OCUPA LINHA (2026-08-19, Tony viu a faixa acima da capa). `width="0"
   height="0"` zera a caixa, mas o svg é INLINE: ele ainda cria um line box e sobrava uma
   tira de ~20px no topo. O `mnXdDefs` do app resolve com o mesmo `position:absolute` —
   aqui vale igual. ⛔ NÃO tirar o `position`: a faixa volta. */
.xd-defs{position:absolute;width:0;height:0;overflow:hidden}
/* 🗂 AS TRÊS CAIXAS — a grade que abre o capítulo. Reaproveita os tokens do manual
   (`--mp-*`, `--border-soft`); o ouro é O MESMO do X-DOC no app: oklch(0.62 0.11 78) claro,
   oklch(0.8 0.11 84) escuro. ⛔ NÃO inventar um segundo dourado aqui. */
.xd-box{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 4px}
/* (o ouro agora vem do `body` — busque `--xd-gold` no alto) */
/* 🚪 AS TRÊS CAIXAS SÃO PORTAS (Tony, 31/08) — cada uma abre o capítulo do seu estado
   (`-lacrado`, `-aberto`, `-assinado`) em hiperfoco, só com "Voltar".
   ⚠️ As três folhas JÁ EXISTIAM e nada apontava para elas a partir daqui: eram órfãs. As caixas
      nomeiam exatamente esses três estados — então o link não é enfeite, é o caminho que
      faltava. ⛔ NÃO voltar a `div`: caixa que descreve um capítulo e não leva a ele é beco.
   ⚠️ `data-hyperfocus` + `hub-focus.js`: o pop-up full-screen com "Voltar" é o padrão
      universal do site, o MESMO que Termos/Privacidade usam. ⛔ NÃO escrever overlay próprio.
   ⚠️ Dentro da gaveta a camada 2 (`html.hf a[href]`) neutraliza estes links, de propósito: lá
      o único caminho é voltar (§5b), e empilhar um segundo overlay no painel de ~550px seria
      exatamente o que a regra proíbe. A porta é da web; na gaveta as caixas leem como texto. */
.xd-b{display:flex;flex-direction:column;gap:9px;padding:17px 16px 18px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);text-decoration:none;color:inherit;position:relative;transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
/* ✨ HOVER: a caixa sobe um fio, o ouro toma a borda e o glifo ganha um halo do próprio tom.
   ⚠️ O realce é do OURO do X-DOC (`--xd-gold`), não do azul do manual: o hover deve prometer
      o destino, e o destino é uma folha de X-DOC. ⛔ NÃO usar `--accent` aqui.
   ⚠️ `translateY` de 2px e nada mais — card que cresce no hover empurra o vizinho no grid. */
.xd-b:hover{border-color:color-mix(in oklab,var(--xd-gold) 55%,transparent);background:color-mix(in oklab,var(--xd-gold) 7%,var(--bg-elev));transform:translateY(-2px);box-shadow:0 10px 26px -14px color-mix(in oklab,var(--xd-gold) 60%,transparent)}
.xd-b:focus-visible{outline:2px solid var(--xd-gold);outline-offset:3px}
.xd-b:active{transform:translateY(0)}
/* o chamado só aparece no hover — em repouso as três caixas seguem sendo a comparação que sempre
   foram; ⚠️ ele ocupa espaço desde sempre (`visibility`, não `display`) para o grid não pular. */
.xd-b-go{margin-top:auto;padding-top:10px;font-family:"Geist Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--xd-gold);visibility:hidden;opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .18s ease}
.xd-b:hover .xd-b-go,.xd-b:focus-visible .xd-b-go{visibility:visible;opacity:1;transform:none}
.xd-b-go i{font-style:normal;display:inline-block;transition:transform .18s ease}
.xd-b:hover .xd-b-go i{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){.xd-b,.xd-b-go,.xd-b-go i{transition:none}.xd-b:hover{transform:none}}
/* 📱 no estreito/toque o chamado fica sempre visível: sem cursor não há hover, e aí a porta
   ficaria invisível justamente onde o toque é o único gesto.
   ⚠️ Aqui é `@media` MESMO, e não `@container` — ao contrário do cartão da loja no capítulo
      dos recados, que consulta LARGURA. `hover` é media feature de CAPACIDADE DO PONTEIRO, e
      `@container` só consulta tamanho/estilo do contêiner: não existe forma de exprimir isto
      ali. ⛔ NÃO "consertar" para `@container` — quebraria o comportamento em toque. */
@media (hover: none){.xd-b-go{visibility:visible;opacity:1;transform:none}}
.xd-b-ic{display:flex;align-items:center;gap:9px;color:var(--xd-gold)}
/* 🔒 OS TRÊS GLIFOS SÃO OS DO PRODUTO (2026-08-19, mesmo achado da folha do lacrado:
   os cartões tinham contornos inventados). Levantados verbatim de mnDocIc, com os
   gradientes num <defs> inline — numa página estática o mnXdDefs não roda.
   ⚠️ viewBox "5 0 39 48": largura 39/48 da altura, e o glifo traz a cor dentro dele,
      então o `color` do bloco não o pinta mais. ⛔ NÃO redesenhar aqui. */
.xd-b-ic svg{display:block;flex:none;filter:drop-shadow(0 1.5px 3px oklch(0.2 0.02 80 / .3))}
.theme-dark .xd-b-ic svg{filter:drop-shadow(0 1px 4px oklch(0.62 0.11 78 / .28))}
.xd-b-ic em{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.xd-b b{font-size:1rem;font-weight:600;letter-spacing:-.005em}
.xd-b p{margin:0;font-size:.84rem;line-height:1.6;color:var(--text-dim);text-wrap:pretty}
.xd-b span.xd-b-ask{font-family:"Geist Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.06em;color:var(--xd-gold)}
/* 🌑 O CARTÃO DA EXCEÇÃO — o anônimo, FORA do trio (Tony, 04/09 — decisão A).
   ⚠️ A GRAMÁTICA É OUTRA DE PROPÓSITO: o trio são três cartões IGUAIS em grade de 3, porque
      são três pedidos irmãos do envio. Este é UM cartão largo, deitado, com filete TRACEJADO
      — a mesma família (mesmo ouro, mesmo raio, mesmo hover), sintaxe diferente. É o que
      deixa a página dizer "três operações e uma quarta caixa" sem escrever isso duas vezes.
   ⛔ NÃO o mova para dentro do `.xd-box`: quebra o `repeat(3,1fr)` E faz a página afirmar
      quatro operações, que é o oposto do que o capítulo ensina.
   ⛔ NÃO troque o tracejado por cor nova: o ouro do X-DOC é um só (`--xd-gold`), e o que
      distingue a exceção é o TRAÇO, não o tom. */
.xd-exc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:start;margin:14px 0 4px;padding:16px 17px 17px;border:1px dashed color-mix(in oklab,var(--xd-gold) 40%,transparent);border-radius:14px;background:var(--bg-elev);text-decoration:none;color:inherit;position:relative;transition:border-color .16s,background .16s,transform .16s,box-shadow .16s}
.xd-exc:hover{border-style:solid;border-color:color-mix(in oklab,var(--xd-gold) 62%,transparent);background:color-mix(in oklab,var(--xd-gold) 7%,var(--bg-elev));transform:translateY(-2px);box-shadow:0 10px 26px -14px color-mix(in oklab,var(--xd-gold) 52%,transparent)}
.xd-exc:focus-visible{outline:2px solid var(--xd-gold);outline-offset:3px}
.xd-exc:active{transform:translateY(0)}
.xd-exc-ic{flex:none;display:grid;place-items:center;padding-top:2px}
.xd-exc-ic svg{display:block;width:30px;height:auto;filter:drop-shadow(0 1.5px 3px oklch(0.2 0.02 80 / .3))}
.theme-dark .xd-exc-ic svg{filter:drop-shadow(0 1px 4px oklch(0.62 0.11 78 / .28))}
.xd-exc-m{display:flex;flex-direction:column;gap:5px;min-width:0}
.xd-exc-m em{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--xd-gold)}
.xd-exc-m b{font-size:1rem;font-weight:600;letter-spacing:-.005em}
.xd-exc-m p{margin:0;font-size:.84rem;line-height:1.6;color:var(--text-dim);text-wrap:pretty}
.xd-exc-m p b{color:var(--text);font-weight:600}
/* o chamado aparece no hover, como no trio — e ocupa espaço desde sempre (`visibility`,
   ⛔ não `display`) para o cartão não crescer e empurrar a seção abaixo. */
.xd-exc-go{margin-top:4px;font-family:"Geist Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--xd-gold);visibility:hidden;opacity:0;transform:translateY(-2px);transition:opacity .18s ease,transform .18s ease}
.xd-exc:hover .xd-exc-go,.xd-exc:focus-visible .xd-exc-go{visibility:visible;opacity:1;transform:none}
.xd-exc-go i{font-style:normal;display:inline-block;transition:transform .18s ease}
.xd-exc:hover .xd-exc-go i{transform:translateX(3px)}
/* ⚠️ em toque não existe hover: o chamado fica visível (mesma regra do trio). */
@media (hover: none){.xd-exc-go{visibility:visible;opacity:1;transform:none}}
@media(max-width:760px){.xd-exc{grid-template-columns:1fr;gap:11px}.xd-exc-ic{place-items:start}}
.xd-ul{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.xd-ul li{padding-left:15px;border-left:2px solid var(--border-soft);font-size:.9rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.xd-ul li b{color:var(--text)}
@media(max-width:760px){.xd-box{grid-template-columns:1fr}}
/* 📖 DENTRO DA CARTEIRA (hiperfoco): sem a barra de topo do manual — o cabeçalho da gaveta
   já diz onde estamos e já tem o "‹". A hero perde o respiro de página solta. */
html.hf .mw-bar{display:none}
/* 🚪❌ E o CHAMADO das três caixas sai junto na gaveta. 🐞 A regra `@media (hover:none)` deixa o
   `.xd-b-go` sempre visível em aparelho sem cursor — mas ali a camada 2 mata o clique, então no
   telefone, pela gaveta, cada cartão exibia um "ler o capítulo →" dourado que não fazia nada.
   ⚠️ É o §5b ao contrário: a regra é "esconder CAMINHO que ali não existe, nunca TEXTO" — e o
      CTA é chrome de navegação, não prosa. O texto do cartão segue lido por inteiro.
   ⚠️ Lição: link neutralizado pela camada 2 não basta — o que ANUNCIA o link tem de sumir com
      ele. ⛔ NÃO acrescentar chamado a um link sem conferir como ele fica em hiperfoco.
   🐞 REINCIDIU EM 04/09, com o `.xd-exc-go` (o cartão da exceção): ele nasceu com o gêmeo
      `@media (hover:none)` e ⛔ NÃO foi acrescentado a esta lista — o "ler o capítulo →"
      dourado voltou a aparecer sem clicar, no telefone pela gaveta. 🔑 A regra que isso
      revela: chamado novo entra AQUI no mesmo commit em que nasce. ⛔ NÃO criar um terceiro
      `*-go` sem somá-lo a esta linha. */
html.hf .xd-b-go,html.hf .xd-exc-go{display:none}
/* 🔗 CAMADA 2 · O SELETOR QUE NÃO SE PODE ESQUECER (2026-08-19). A lista nominal de chrome
   acima cobre o que EU lembrei de listar; esta regra cobre o resto para sempre: em hiperfoco,
   todo link que sai desta folha deixa de ser link. Âncora da mesma página continua viva.
   ⚠️ DEGRADA PARA TEXTO, não some: uma frase nunca perde uma palavra no meio. Por isso
      `pointer-events:none` + cor herdada, e não `display:none`.
   ⛔ NÃO voltar a depender só da lista nominal: link novo em prosa passaria batido. */
html.hf a[href]:not([href^="#"]){pointer-events:none;color:inherit;text-decoration:none;cursor:default}
html.hf .mw-hero{padding-top:22px}
/* 🖱 A BARRA DE ROLAGEM É DA CASA na visão web (2026-08-19, Tony): a nativa do Chrome é
   cinza-clara e larga, e dentro da gaveta escura ela grita. Fina, sem setas, no tom do
   texto. ⚠️ Firefox usa `scrollbar-*`; WebKit/Blink, os pseudo-elementos — os dois blocos
   descrevem a MESMA barra, não escolha um só. */
html{scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--text) 26%,transparent) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--text) 22%,transparent);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--text) 38%,transparent);background-clip:content-box}
::-webkit-scrollbar-button{display:none}
/* ⚖️ DUAS COLUNAS: o que a matemática resolve × o que ainda precisa de âncora (2026-08-20).
   Regras trazidas da folha do lacrado — ⛔ NÃO mandar para `manual.css`: obrigaria bump do
   `?v=` em ~78 páginas por um bloco que vive em três folhas. Cópia local é o padrão daqui. */
.xd-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 0}
@media(max-width:760px){.xd-two{grid-template-columns:1fr}}
.xd-col{padding:17px 18px 18px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev)}
.xd-col>b{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;font-family:"Geist Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.xd-col.yes>b{color:oklch(0.5 0.12 155)}
.xd-col.no>b{color:oklch(0.53 0.19 26)}
.theme-dark .xd-col.yes>b{color:oklch(0.76 0.13 158)}
.theme-dark .xd-col.no>b{color:oklch(0.72 0.16 28)}
.xd-col ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.xd-col li{font-size:.86rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
.xd-col li b{color:var(--text);font-weight:600}
/* 🔐 O BLOCO DO SIGILO (Tony, 31/08): "a circulação de documento é só um texto em Markdown
   anexado com o recado, o E2E já tem que vir junto". Certo — não há transporte separado: o
   X-DOC viaja DENTRO do recado, mesmo envelope, mesmo sigilo.
   ⚠️ A frase boa aqui não é "também é E2E" (isso seria selo genérico de "seguro", que o
      `backend/MAPA-schema-v1.md` proíbe) — é o PAR: **o teor viaja lacrado, o selo é público**.
      Sigilo e prova costumam ser troca; aqui não são, e é exatamente o que o hash compra.
   ⛔ NÃO estender a promessa ao ARMAZENAMENTO nem à forja: `docs/X-DOC-CLOUD.md` é taxativo
      ("a forja é o furo do E2E"; recuperação de chave na nuvem enfraquece E2E). Este bloco fala
      de CIRCULAÇÃO, e só dela. — o par visual é duas colunas que se opõem em uma linha. */
/* ⚠️ O CONTÊINER É O ENVELOPE, NÃO A GRADE: um contêiner não consulta a si mesmo, e a consulta
   aqui muda `grid-template-columns` da PRÓPRIA `.xd-e2e`. Por isso o `container-type` mora no
   `.xd-e2e-w`, que é só o envelope. ⛔ NÃO mover para a `.xd-e2e` — a regra ficaria inerte, em
   silêncio (mesmo tropicão do `.ft-chn-go` no rodapé da prova).
   ⚠️ E é `@container`, não `@media`: na gaveta o painel tem ~550px com viewport de desktop. */
/* 🏅 O OURO DO X-DOC MORA NO `body` — UMA definição, não uma por bloco (31/08).
   🐞 Estava no `.xd-box`, então o bloco do sigilo (`.xd-e2e`), que nasceu fora dele, recebeu
      `var(--xd-gold)` indefinido e caiu no herdado — rótulo branco onde devia ser dourado, sem
      erro nenhum no console. ⚠️ Token de tema que vive num componente vira invisível para o
      próximo componente. ⛔ NÃO redeclarar em bloco novo: use este.
   ⚠️ É O MESMO ouro do X-DOC no app: oklch(0.62 0.11 78) claro, oklch(0.8 0.11 84) escuro.
      ⛔ NÃO inventar um segundo dourado. */
body{--xd-gold:oklch(0.62 0.11 78)}
.theme-dark body{--xd-gold:oklch(0.8 0.11 84)}
/* 📐 O DIAGRAMA DESENHA NO OURO DO X-DOC. As regras de `.mp-dg` vivem no manual.css (subiram
   em 31/08, quando esta virou a 2ª folha a usá-las); aqui só se escolhe a cor por `--mp-dg-a`.
   ⚠️ Esta folha é IRMÃ do capítulo da fita: mesmo dialeto de traço (fino, currentColor, rótulo
      mono de 10,5px, desenho de 360 na vertical) e cor DIFERENTE — o vocabulário é do manual, o
      acento é do capítulo. ⛔ NÃO desenhar o X-DOC em azul: azul é a corrente do PING. */
/* 🔤 RÓTULO DE DIAGRAMA É `var(--text-mute)`, NUNCA `currentColor` + `fill-opacity` (31/08).
   🐞 Dois rótulos nasceram em ouro com opacidade e deram 2,5–2,7:1 no tema CLARO — ilegíveis.
      O ouro já é marginal (3,33:1); qualquer `fill-opacity` por cima o derruba abaixo disso.
   ⚠️ Os outros 27 rótulos dos mesmos diagramas já usavam `--text-mute` (7,69 claro · 6,21
      escuro): os dois eram a EXCEÇÃO, não a regra. ⛔ NÃO pintar texto de diagrama com o acento
      — o acento é do TRAÇO; o texto é do tom de leitura da folha. */
/* ⚠️ O ACENTO É DO CAPÍTULO, não do bloco: `--mp-dg-a` mora no `.mp` para que `.mp-dg`,
   `.mp-adv` e `.mp-cat` — os três componentes compartilhados do manual — leiam o MESMO ouro.
   🐞 Nasceu escopada no `.mp-dg` e as listas saíram azuis: variável presa a um componente é
      invisível para o vizinho (o mesmo tropicão do `--xd-gold` no `.xd-box`, horas antes). */
.mp{--mp-dg-a:var(--xd-gold)}
.xd-e2e-w{container-type:inline-size}
.xd-e2e{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:26px 0 4px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);overflow:hidden}
.xd-e2e>div{padding:16px 17px 17px;display:flex;flex-direction:column;gap:7px}
.xd-e2e>div+div{border-left:1px solid var(--border-soft)}
.xd-e2e i{font-style:normal;display:flex;align-items:center;gap:7px;font-family:"Geist Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--xd-gold)}
.xd-e2e b{font-size:.95rem;font-weight:640;letter-spacing:-.005em}
.xd-e2e p{margin:0;font-size:.84rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
@container (max-width:520px){.xd-e2e{grid-template-columns:1fr}.xd-e2e>div+div{border-left:0;border-top:1px solid var(--border-soft)}}