/* ⚠️ ESTA FOLHA SERVE O MANUAL INTEIRO (2026-08-15): nasceu como `manual-protocolo.css`
   para uma página só e virou a folha de todos os capítulos da PING Wallet. O vocabulário
   `.mp-*` continua (renomear 400 seletores não paga o troco); o que é da NAVEGAÇÃO usa
   `.mn-*`. ⛔ NÃO criar folha por capítulo: a cara do manual é uma só.
   ⚠️ O índice de capítulos vive SÓ na home (`manual-wallet.html`). Trilho repetido em cada
   arquivo obrigaria a editar todos a cada capítulo novo — e o trilho lateral rouba a
   largura de que a lente precisa (o zoom das lentes depende da coluna). */
/* ════════════════════════════════════════════════════════════════════════════
   MANUAL DO PROTOCOLO — só o layout da PÁGINA.

   ⚠️ Os status são renderizados com as CLASSES REAIS do produto (`.ft-b`,
      `.ft-tick`, `.ft-msgs`), servidas por `styles.css`. É de propósito: o
      manual não pode divergir do app. Mudou o carimbo lá, muda aqui sozinho.
   ⛔ NÃO recriar `.ft-tick*` nem `.ft-b*` aqui. Se o manual precisar de um tom
      novo, ele nasce em `styles.css` e o app herda junto.
   ════════════════════════════════════════════════════════════════════════════ */
/* ⚠️ O AZUL DO MENSAGEIRO É TOKEN DA PÁGINA (2026-08-15): nascia dentro do `.mp-map` e o
   passarinho da hero, que está fora, precisou de uma segunda cópia do mesmo hex.
   ⛔ NÃO redeclarar em bloco filho — duas cópias de uma cor divergem no primeiro ajuste. */
.mp{--mp-blue:#007AFF;max-width:860px;margin:0 auto;padding:0 22px 120px}
/* 🐦 o passarinho do recado: alinhado à primeira linha do título, no azul do mensageiro
   (não no rosa da publicação) — ele nomeia a REDE DE RECADOS, não a página.
   ⚠️ Traçado idêntico ao `bird` do `icons.jsx`, os SEIS paths (a asa é o sexto). */
.mp-bird{display:inline-block;vertical-align:-.06em;width:.86em;height:.86em;margin-right:.3em;color:var(--mp-blue);stroke-width:1.7}
@media(max-width:640px){.mp-bird{width:.8em;height:.8em;margin-right:.24em}}
.mp-hd{padding:64px 0 40px;border-bottom:1px solid var(--border-soft)}
.mp-kk{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono,ui-monospace,monospace);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mp-hd h1{margin:14px 0 0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(2.3rem,5.4vw,3.5rem);line-height:1.04;letter-spacing:-.015em}
.mp-hd p{margin:16px 0 0;max-width:56ch;font-size:1.02rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.mp-sec{padding:52px 0 0}
.mp-sec>h2{margin:0 0 6px;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.9rem;letter-spacing:-.01em}
.mp-sec>p.mp-lead{margin:0 0 30px;max-width:58ch;font-size:.95rem;line-height:1.62;color:var(--text-mute);text-wrap:pretty}
.mp-n{display:inline-block;margin-right:10px;font-family:var(--font-mono,ui-monospace,monospace);font-size:.78em;color:var(--text-dim)}

/* uma FICHA por status: à esquerda o carimbo como ele aparece; à direita o que ele diz */
.mp-cards{display:flex;flex-direction:column;gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:14px;overflow:hidden}
/* ⚠️ A COLUNA DO CARIMBO MANDA (2026-08-15, Tony: "aperta mais o texto também"): a lente é
   o assunto da ficha, e ela ficava sem folga enquanto o texto corria 68 caracteres por
   linha — largura de artigo, não de legenda. Agora a coluna esquerda cresce até 380 e o
   texto se limita a ~52ch, que é a medida de leitura confortável. Sobra folga para a lente
   ampliar mais. ⛔ NÃO devolver `1fr` ao texto sem `max-width`: ele reocupa tudo. */
.mp-card{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:22px;padding:22px 24px;background:var(--bg-base)}
.mp-say{max-width:52ch}
@media(max-width:720px){.mp-card{grid-template-columns:1fr;gap:14px}}
/* ⚠️ O AZUL DO MENSAGEIRO É DE ESCOPO: no app ele vem de `.set-sheet` (o azul-iOS da
   gaveta), não do tema da página — que é rosa. O manual reproduz só o TOKEN, nunca o
   layout da gaveta. ⛔ Mudou o azul lá, mude aqui: senão o manual ilustra outro produto. */
.mp-demo{position:relative;display:flex;flex-direction:column;justify-content:center;--accent:#007AFF;--accent-bg:color-mix(in oklch,#007AFF 14%,transparent)}
/* a bolha do manual não é tecla: aqui ela é ilustração */
.mp-demo .ft-b{cursor:default;max-width:100%}
.mp-demo .ft-b:active{transform:none;filter:none}
/* 🖍 O TÍTULO DA FICHA VEM GRIFADO (2026-08-15, Tony): manual se lê com caneta na mão, e o
   grifo é o gesto de quem marca o que importa numa folha — combina com o tom notarial da
   peça melhor que negrito maior ou cor.
   ⚠️ `width:fit-content` para o grifo ABRAÇAR o texto: sem isso o gradiente pinta a coluna
   inteira e vira faixa de cabeçalho, não caneta.
   ⚠️ Mesmo amarelo do carimbo "ignorou" (`.ft-tick.ign`), mas SEM a animação de risco: lá o
   traço correndo é o ato acontecendo; aqui é anotação parada de quem já leu.
   ⛔ NÃO animar este grifo: duas canetas na mesma tela competem pelo olho. */
.mp-say>h3{--gf:#ffe680;--gf2:#ffdb4d;width:fit-content;margin:0 0 5px;padding:1px 5px;background:linear-gradient(transparent 12%,var(--gf) 12%,var(--gf2) 90%,transparent 90%);font-size:.98rem;font-weight:650;letter-spacing:-.005em;color:#1a1a1a}
/* 🖍 A CANETA TEM A COR DO CARIMBO (2026-08-15, Tony: "aqui a caneta deve ser verde"). O
   grifo do título pega o tom do status que a ficha explica — verde na entrega, azul no
   trânsito da fila, cinza no vencimento — porque cor arbitrária no título brigaria com a
   cor que o carimbo já ensina logo ao lado.
   ⚠️ Por `:has()` de propósito: a cor sai do CARIMBO que está na ficha, sem atributo novo em
   12 blocos de HTML — dado repetido é dado que diverge. ⛔ NÃO carimbar a cor na marcação.
   ⚠️ A ficha do ciclo fica no amarelo neutro: o título dela ("Teor · hora · carimbo") não é
   sobre um status, e o carimbo troca a cada 3s — a caneta piscaria de cor. */
/* ⚠️ `:where()` DENTRO DO `:has()` NÃO É ENFEITE (2026-08-15, achado na verificação): sem
   ele `.ft-tick.dl` soma duas classes e a regra vira (0,4,1), vencendo o pino do ciclo
   (0,3,1) — a caneta da primeira ficha piscava de verde/azul a cada passo, exatamente o que
   o aviso abaixo proíbe. Com `:where` o `:has` pesa zero e as três caem para (0,2,1), abaixo
   do pino, que passa a ganhar SEMPRE — não por ordem na folha. ⛔ NÃO tirar o `:where`. */
.mp-card:has(:where(.ft-tick.dl)) .mp-say>h3{--gf:#c6f3ce;--gf2:#98e6a8}
.mp-card:has(:where(.ft-tick.skip)) .mp-say>h3{--gf:#cfe3ff;--gf2:#a6c9ff}
.mp-card:has(:where(.ft-tick.nodest)) .mp-say>h3{--gf:#e8e8e8;--gf2:#d6d6d6}
.mp-card:has([data-cycle]) .mp-say>h3{--gf:#ffe680;--gf2:#ffdb4d}
.mp-say>p{margin:0;font-size:.86rem;line-height:1.58;color:var(--text-mute);text-wrap:pretty}
.mp-say>p+p{margin-top:9px}
.mp-when{display:block;margin:0 0 9px;font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.mp-say b{font-weight:650;color:var(--text)}

/* a régua: a escada inteira num relance */
/* ⚠️ A RÉGUA CARREGA O MESMO ESCOPO DA BOLHA (2026-08-15, achado na verificação): ela
   ficara fora do override e mostrava o MESMO status em duas cores na mesma página —
   rosa da página na régua, azul-iOS no cartão logo abaixo. E os tons de `srv`/`dl` moram
   em `.ft-b.out .ft-tick.*`, que não alcança carimbo fora de bolha: a régua repete essas
   duas regras, e só elas. ⛔ NÃO inventar cor aqui — copie a do app ou o manual ilustra
   outro produto. */
.mp-rule{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 34px;padding:18px 20px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);--accent:#007AFF;--accent-bg:color-mix(in oklch,#007AFF 14%,transparent)}
.mp-rule .ft-tick{opacity:1}
.mp-rule .ft-tick.srv{color:oklch(0.42 0.11 82)}
.mp-rule .ft-tick.dl{color:oklch(0.4 0.13 155)}
.mp-rule i{font-style:normal;color:var(--text-dim);font-size:12px}

/* nota de doutrina: o porquê, não o quê */
.mp-note{margin:26px 0 0;padding:16px 18px;border-left:2px solid var(--accent);background:var(--accent-bg);border-radius:0 10px 10px 0}
.mp-note p{margin:0;font-size:.9rem;line-height:1.6;color:var(--text-mute)}
.mp-note strong{color:var(--text)}
.mp-foot{margin:64px 0 0;padding:22px 0 0;border-top:1px solid var(--border-soft);font-size:.82rem;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.mp-foot a{color:var(--accent);text-decoration:none}
.mp-foot a:hover{text-decoration:underline}

/* 🔍 A LENTE (2026-08-15, Tony): o carimbo é a menor coisa da tela e é o assunto da
   página — num manual ele precisa ser LIDO, não caçado. A bolha fica no tamanho real (é
   assim que a pessoa vai encontrá-la) e a lente mostra o mesmo carimbo ampliado, ligado
   por um filete.
   ⚠️ O conteúdo da lente é CLONADO do carimbo da bolha por JS (ver o fim do HTML): não
      existe segunda cópia da marcação para divergir. ⛔ NÃO escrever o carimbo duas vezes
      no HTML — foi assim que o "ignorou" perdeu o grifo na primeira versão.
   ⚠️ Ampliação por `scale`, nunca por `font-size`: o traço do SVG e a entrelinha crescem
      junto, então o que se vê é o carimbo real maior — não um desenho parecido. */
/* A lente é a MESMA BOLHA, ampliada (2026-08-15, Tony): mesmo fundo e mesma borda do
   `.ft-b.out` — copiados dali, não inventados aqui. ⛔ NÃO dar cor própria à lente: ela
   deixaria de parecer o pedaço de uma bolha e viraria um cartão do manual.
   ⚠️ O glow de 3px substitui a moldura: dissolve a aresta contra o branco da página, para
      a lente flutuar em vez de recortar. */
/* ⚠️ a lente usa as classes `.ft-b.out`: aqui só se NEUTRALIZA o que é de bolha de chat
   (o rabinho, o teto de largura, o cursor de tecla). ⛔ NÃO redefinir cor nem fonte. */
/* ⛔ SEM BORDA SÓLIDA na lente (2026-08-15, Tony, 2ª vez): `.ft-b.out` traz um filete de
   1px, que na bolha é certo (ela vive sobre a folha do chat) e aqui é errado — a lente
   flutua na página branca e precisa DISSOLVER, não recortar. Só o halo segura a forma.
   ⚠️ A cor de FUNDO continua a da bolha: o que se remove é a aresta, não o material. */
.mp-loupe.ft-b{max-width:none;cursor:default;gap:0;border:0}
.mp-loupe.ft-b::before{display:none}
.mp-loupe .ft-bt{opacity:1}
.mp-loupe{position:relative;align-self:flex-start;margin:34px 0 8px 14px;padding:13px 18px;border:0;border-radius:14px;background:color-mix(in oklab,var(--accent) 13%,var(--bg-elev));box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 9%,transparent),0 0 10px 4px color-mix(in oklab,var(--accent) 7%,transparent);display:inline-flex;align-items:center}
/* ⛔ SEM filete solto por cima da lente (2026-08-15, Tony: "basta um efeito visual
   mostrando que ele vem do canto do balão"): a linha vertical não apontava para lugar
   nenhum — nascia no ar. Agora o elo é a CUNHA (`.mp-wedge`), traçada de canto a canto
   entre o carimbo dentro da bolha e a lente, como numa prancha técnica. */
/* ⚠️ `zoom`, NÃO `transform: scale()` (2026-08-15): scale não empurra caixa — a lente
   media 223px e o carimbo transbordava 400px por cima da coluna de texto. Com `zoom` o
   layout cresce junto e a moldura se ajusta sozinha, sem JS medindo nada. ⛔ NÃO voltar ao
   scale: a medição por JS erra sempre que a fonte carrega depois. */
/* ⚠️ UMA LINHA, SEMPRE (2026-08-15, Tony): o carimbo mais longo ("na sua caixa — distribui
   em 3 s") quebrava em duas linhas na lente, e carimbo quebrado não é o mesmo carimbo que
   está na bolha — a lente promete ser o MESMO pedaço, visto de perto.
   ⚠️ `nowrap` garante a linha; o zoom é o que a faz caber na coluna. ⛔ NÃO subir o zoom
   sem conferir o carimbo mais longo: ele é o que define o teto. */
/* ⚠️ ZOOM FLUIDO, NÃO DEGRAU (2026-08-15, achado na verificação): com valor fixo por faixa
   sobrava uma janela (861–920px) em que a coluna já havia encolhido e o zoom ainda não — o
   carimbo vazava por cima do texto. `clamp` amarra a ampliação à largura da coluna, então
   não existe faixa sem folga.
   ⚠️ O teto é o carimbo mais longo COM contador de 2 dígitos ("distribui em 25 s"), não o de
   1 dígito que abre o ciclo. ⛔ NÃO voltar a zoom fixo. */
/* ⚠️ ZOOM EM DEGRAUS, NUNCA `calc` COM vw (2026-08-15, Tony: "o zoom quase não existe"):
   `zoom` aceita número ou porcentagem, e `calc(.5 + 1.4vw)` mistura número com comprimento —
   declaração inválida, que o navegador descarta em silêncio e a lente volta a 1×. Duas
   tentativas caíram nisso. ⛔ NÃO usar unidade de comprimento dentro do `zoom`.
   ⚠️ Os degraus acompanham a COLUNA (`minmax(280px,380px)`), e o teto é o carimbo mais longo
   com contador de 2 dígitos. Abaixo de 720px a ficha empilha e a largura inteira volta. */
.mp-loupe-in{display:block;zoom:1.75;white-space:nowrap}
@media(max-width:1180px){.mp-loupe-in{zoom:1.6}}
@media(max-width:1040px){.mp-loupe-in{zoom:1.45}}
@media(max-width:900px){.mp-loupe-in{zoom:1.3}}
.mp-loupe-in .ft-tick,.mp-loupe-in .ft-tick em{white-space:nowrap}
.mp-loupe .ft-tick{opacity:1}
/* ⛔ SEM RÓTULO "o carimbo, ampliado" (2026-08-15): o filete e a moldura já dizem que é
   uma ampliação — e num carimbo curto ("27 s") a legenda ficava mais larga que a própria
   lente, vazando para fora. Mesma régua dos botões: se precisa de bula, está errado. */


/* 🔍 A CUNHA: dois filetes saindo do carimbo REAL (dentro da bolha) e abrindo até a
   lente. É o gesto da prancha técnica — "este pedaço, visto de perto".
   ⚠️ É desenhada por JS porque depende da posição dos dois cantos, e refeita no resize:
      cunha que não acompanha o layout aponta para o vazio. ⛔ NÃO tentar fazer com
      pseudo-elemento rotacionado: a bolha muda de largura com o texto. */
/* ⚠️ A ONDA É DO AZUL DA BOLHA (2026-08-15, Tony), não um cinza neutro: ela é o mesmo
   material da bolha se esticando até a lente — cinza fazia parecer sombra, e sombra não
   liga uma coisa à outra. O tom sai de `--accent` (azul-iOS no escopo do mensageiro),
   pelo `currentColor` que o gradiente do SVG usa. */
.mp-wedge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;color:color-mix(in oklab,var(--accent) 13%,transparent)}
/* ⚠️ ONDA, não cunha de régua (Tony): duas curvas que saem do carimbo e se abrem até a
   lente, em transparência — presença sem contorno. ⛔ NÃO pôr `stroke`: filete vira
   moldura, e moldura é exatamente o que não pode haver aqui. */
.mp-wedge path{stroke:none}
/* ⛔ SEM MOLDURA no carimbo dentro da bolha (2026-08-15, Tony): a bolha do manual tem de
   ser IDÊNTICA à do chat — qualquer traço a mais e o manual passa a ilustrar uma tela que
   não existe. O elo é só a onda; a origem se entende pelo lugar de onde ela sai. */

/* 🖍 NO MANUAL O GRIFO ROLA EM LAÇO (2026-08-15, Tony): no app a caneta passa uma vez e
   pronto — quem está lendo o manual chega depois e veria só o resultado. Aqui ela
   repassa: risca, fica 3s cheia, risca de novo. ⛔ NÃO mexer no `ftSweep` do app: lá o
   gesto acontecer duas vezes seria mentira sobre o ato.
   ⚠️ Respeita quem pediu menos movimento (`prefers-reduced-motion`). */
/* ⚠️ O RISCO APAGA, NÃO DESFAZ (Tony): riscar de trás para frente parecia CORREÇÃO — como
   quem cancela o que escreveu. O ciclo certo é o da caneta: risca (0→14%), fica cheia 3s,
   some por transparência (sem encolher) e recomeça do zero.
   ⛔ NÃO animar `background-size` na volta: é isso que produz o gesto invertido. */
@keyframes mpSweepLoop{0%{background-size:0% 82%;opacity:1}14%{background-size:100% 82%;opacity:1}90%{background-size:100% 82%;opacity:1}97%{background-size:100% 82%;opacity:0}97.01%{background-size:0% 82%;opacity:0}100%{background-size:0% 82%;opacity:1}}
/* ⚠️ SINCRONIZADAS (2026-08-15, Tony): a caneta passa na bolha e na lente ao MESMO tempo.
   Duas passadas fora de fase seriam dois carimbos, e a lente deixaria de ser o mesmo
   pedaço visto de perto. Mesma animação, mesmo início — nenhum `delay` de nenhum lado.
   ⚠️ A ficha inteira é o palco (`.mp-demo`), não só a lente. */
.mp-demo .ft-hl-sweep{animation:mpSweepLoop 4s linear infinite}
@media(prefers-reduced-motion:reduce){.mp-demo .ft-hl-sweep{animation:none;background-size:100% 82%}}

/* 🗺 A TRAJETÓRIA (2026-08-15, Tony): o desenho que o texto sozinho não faz — o recado
   saindo de UM aparelho, atravessando a rede de nós da federação e se distribuindo para
   TODOS os aparelhos da outra conta. É a planta que as quatro seções depois destrincham.
   ⚠️ Sem nenhuma marca ou logo: é diagrama, não peça de marca.
   ⛔ NÃO transformar em animação com movimento contínuo — o pulso é lento e discreto; o
      manual explica, não faz demonstração de tecnologia. */
/* ⚠️ o diagrama usa o MESMO azul do mensageiro (o token da gaveta), não o rosa da página:
   ele desenha o trajeto do recado, e recado aqui é azul. */
.mp-map{color:var(--mp-blue);margin:34px 0 0;padding:26px 24px 20px;border:1px solid var(--border-soft);border-radius:16px;background:var(--bg-elev)}
.mp-map svg{display:block;width:100%;height:auto}
.mp-map-l{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 0}
.mp-map-l div{font-size:.78rem;line-height:1.5;color:var(--text-mute)}
/* ⚠️ O RÓTULO É O 1º FILHO, ⛔ NÃO "todo b" (04/09/2026, Tony com print: "quebrou, veja como
   ficou desproporcional"). 🐞 A regra vestia QUALQUER `<b>` da legenda com a veste do rótulo —
   mono, caixa-alta, `display:block` — então um negrito escrito no meio da frase virava um
   bloco em versalete no meio do parágrafo, partindo a linha em três. 🔑 Seletor de elemento
   dentro de um componente é armadilha: ele vale para o que ainda não foi escrito. Com
   `:first-child` o rótulo continua idêntico e a ênfase em prosa volta a ser ênfase.
   ⚠️ Ênfase no meio da legenda usa `<strong>` (não vestido aqui, negrito herdado do navegador).
   ⛔ NÃO voltar a `.mp-map-l b` solto. */
.mp-map-l b:first-child{display:block;font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:0 0 3px}
.mp-map-l strong{font-weight:650;color:var(--text)}
@media(max-width:640px){.mp-map-l{grid-template-columns:1fr;gap:8px}}
/* o pulso que percorre a trajetória: um ponto só, devagar */
.mp-dot{fill:var(--mp-blue)}
@media(prefers-reduced-motion:reduce){.mp-dot animateMotion{display:none}}

/* 🔒 O DIAGRAMA É UMA PEÇA DE PRIVACIDADE (2026-08-15, Tony): a réplica em oito nós, sem
   contexto, assusta — "meu recado está em oito lugares?". O título em azul responde antes
   da pergunta nascer: o que se replica é um pacote LACRADO. ⛔ NÃO tirar o subtítulo: a
   ilustração sozinha diz o oposto do que o produto promete. */
/* ⚠️ NEGRITO (2026-08-15, Tony): é a promessa central da peça, e serifa fina em azul
   claro lia como legenda. O peso é o que faz a frase mandar na composição. */
.mp-map-t{margin:0 0 6px;font-family:"Instrument Serif",Georgia,serif;font-weight:700;font-size:1.6rem;letter-spacing:-.01em;color:var(--mp-blue);text-wrap:pretty}
/* ⚠️ O SUBTÍTULO É AZUL POR PADRÃO (2026-08-15, Tony): ele é a mesma frase do título — a
   promessa de privacidade — e não texto corrido da página. Estava cinza na regra base e só
   virava azul abaixo de 900px, então na maior parte das larguras aparecia com a cor
   errada. ⛔ NÃO devolver `--text-mute` aqui. */
/* ⚠️ MESMA MEDIDA DA LEGENDA (2026-08-15, Tony): o subtítulo herda corpo, entrelinha e o
   azul do diagrama — é a mesma família de texto de apoio da peça, e ter tamanho próprio
   fazia dele um segundo título. ⛔ NÃO dar corpo avulso: se a legenda mudar, ele muda junto. */
/* ⚠️ ESCOPADO EM `.mp-map` DE PROPÓSITO (2026-08-15, três tentativas perdidas): o bloco do
   mapa mora DENTRO do `.mp-hd`, e `.mp-hd p` (0,1,1) vencia `.mp-map-s` (0,1,0) — a regra
   estava certa e nunca valia. ⛔ NÃO desescopar: sem o `.mp-map` na frente, o subtítulo
   volta a herdar o corpo e a cor do parágrafo do cabeçalho. */
.mp-map .mp-map-s{margin:0 0 22px;max-width:62ch;font-size:.78rem;line-height:1.5;color:var(--mp-blue);text-wrap:pretty}

/* ⚠️ O CORPO DO TEXTO ENCOLHE ANTES DO LAYOUT VIRAR (2026-08-15, Tony: "esse css não tá
   pegando"). Estava tudo em `max-width:640px`, mas a peça já fica estreita bem antes —
   num painel de 700–900px o título e o subtítulo continuavam em corpo de desktop e
   ocupavam meia tela. Tipografia e layout têm pontos de quebra DIFERENTES: o texto aperta
   quando a COLUNA aperta, não quando o telefone chega.
   ⛔ NÃO juntar as duas faixas num único `@media`. */
@media(max-width:900px){.mp-map-t{font-size:1.32rem}}
/* 📱 MOBILE (2026-08-15, Tony): o diagrama tem 900 unidades de largura — espremido em
   360px, a rede vira um borrão de 4mm e as legendas somem. No estreito ele DEITA: o
   viewBox recorta a rede inteira e o desenho ganha altura em vez de perder detalhe.
   ⛔ NÃO reduzir mais: abaixo disto o traço some e a peça deixa de explicar. */
@media(max-width:640px){
  .mp{padding:0 16px 80px}
  .mp-hd{padding:40px 0 28px}
  .mp-map{padding:20px 16px 16px;border-radius:14px}
  .mp-map-t{font-size:1.28rem}
  /* no estreito o subtítulo desce de tom e de corpo: ele acompanha o título em azul
     (é a mesma frase de privacidade, não texto corrido da página) e cede peso para o
     desenho, que é o que a peça tem de mostrar primeiro. */
  .mp-map .mp-map-s{margin-bottom:14px}
  /* ⛔ SEM BARRA DE ROLAGEM (2026-08-15, Tony): rolar na horizontal esconde METADE do
     desenho e obriga a descobrir que ele rola — um diagrama que não se vê inteiro não
     explica nada. O desenho ENCOLHE e cede o que é redundante: os rótulos dentro do SVG
     saem, porque a legenda numerada logo abaixo já nomeia as três etapas.
     ⚠️ Some o texto, não o traço: a forma da rede é o que a peça precisa mostrar. */
  .mp-map-sc{margin:0;padding:0;overflow:visible}
  .mp-map-sc svg{min-width:0}
  .mp-map-sc svg text{display:none}
  .mp-sec{padding:38px 0 0}
  .mp-sec>h2{font-size:1.5rem}
  .mp-card{padding:18px 16px}
  .mp-rule{padding:14px;gap:7px}
  .mp-rule i{display:none}
  /* a lente desce em vez de ficar ao lado: no estreito não há coluna para a onda cruzar */
  .mp-loupe{margin:26px 0 6px;max-width:100%}
  .mp-loupe-in{zoom:1.55}
  .mp-hd h1{font-size:2.1rem}
}
@media(max-width:400px){.mp-loupe-in{zoom:1.15}}

/* ══ CHASSI DE ENCICLOPÉDIA ════════════════════════════════════════════════════════
   ⚠️ O SUMÁRIO É DE DENTRO DO CAPÍTULO, NÃO ENTRE CAPÍTULOS (2026-08-15, Tony pediu cara de
   Wikipédia). É o que resolve o conflito com a lente: a coluna de leitura NÃO encolhe — o
   sumário mora na margem que já existia, e só aparece quando há margem (≥1080px). Abaixo
   disso vira um `<details>` no topo, que é o que a própria Wikipédia faz no telefone.
   ⛔ NÃO pôr o índice dos 7 capítulos aqui: ele vive só na home (um capítulo novo não pode
   obrigar a editar todos os arquivos). */
.mw{display:grid;grid-template-columns:minmax(0,1fr)}
/* ⚠️ SÓ DIVIDE EM DUAS COLUNAS QUANDO HÁ SUMÁRIO (2026-08-15, achado na verificação): a
   home tem UM filho só, e sem `grid-column` o `main` caía na coluna de 214px — o verbete
   inteiro espremido acima de 1080px, que é justamente a tela de quem lê manual.
   ⚠️ Duas travas de propósito, porque o defeito é silencioso: o `:has()` só divide quando o
   sumário existe, E o `grid-column:2` fixa o conteúdo na coluna de leitura mesmo se alguém
   mexer no seletor. ⛔ NÃO tirar nenhuma das duas. */
/* 🧭 A BARRA LATERAL DO SUMÁRIO — três consertos de uma vez (05/09/2026, Tony com print:
   "o menu lateral está afundando no topo, deveria ter um respiro… e existe muito espaço na
   lateral direita, o menu poderia aparecer antes").
   🔑 1 · `top` DESCONTA A BARRA. A `.mw-bar` é `position:sticky;top:0` e mede **53px**; com
        `top:24px` o sumário passava POR BAIXO dela ao rolar, e o item 01 ficava cortado.
        Agora `top:73px` = 53 da barra + 20 de respiro, e o `max-height` desconta o mesmo.
        ⛔ NÃO voltar a um `top` que ignore a barra: ela é fixa em TODA folha do manual.
   🔑 2 · A 2ª COLUNA É `minmax(0,820px)`, ⛔ NÃO `1fr`. Com `1fr` a coluna comia toda a
        largura, o `justify-content:center` ficava sem espaço livre para distribuir, e o
        conjunto grudava à ESQUERDA com centenas de pixels sobrando à direita — o que o print
        mostra. Limitando a coluna, o grid volta a ter folga e centra de verdade.
   🔑 3 · O BREAKPOINT CAIU PARA 1080px. Conta: 214 (menu) + 40 (gap) + 48 (padding) = 302 de
        chrome; a 1080 sobram 778 para a leitura — mais do que os 720 que a prosa pede. A 1180
        o menu só aparecia em tela grande, e no meio o leitor ficava sem índice à vista.
   ⚠️ Os três limites andam juntos: mexeu num, refaça a conta dos outros. */
@media(min-width:1080px){.mw:has(.mw-toc){grid-template-columns:214px minmax(0,820px);gap:40px;justify-content:center;padding:0 24px}.mw:has(.mw-toc)>.mp{grid-column:2;margin:0;padding-left:0;padding-right:0;max-width:820px}}
.mw-toc{margin:0}
@media(min-width:1080px){.mw-toc{position:sticky;top:73px;margin:56px 0 0;padding:0 0 0 2px;border-left:1px solid var(--border-soft);max-height:calc(100vh - 97px);overflow:auto}}
@media(max-width:1079px){.mw-toc{margin:0 auto;padding:14px 20px 0;max-width:900px}}
.mw-toc summary{cursor:pointer;list-style:none;font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);padding:0 0 8px 12px}
.mw-toc summary::-webkit-details-marker{display:none}
.mw-toc summary::after{content:" ▾";opacity:.6}
.mw-toc[open] summary::after{content:" ▴"}
.mw-toc ol{list-style:none;margin:0;padding:0;counter-reset:mwt}
.mw-toc li{counter-increment:mwt;margin:0}
.mw-toc a{display:flex;gap:8px;padding:5px 10px 5px 12px;font-size:.8rem;line-height:1.35;color:var(--text-mute);text-decoration:none;border-radius:0 6px 6px 0}
.mw-toc a::before{content:counter(mwt,decimal-leading-zero);flex:none;font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--text-dim);padding-top:2px}
.mw-toc a:hover{color:var(--accent);background:var(--bg-elev)}
/* ══ CABEÇALHO DE VERBETE ══════════════════════════════════════════════════════════ */
/* a linha de metadados: de onde vem o verbete, em que idioma, quando revisou — o gesto de
   enciclopédia. ⚠️ Sem data inventada: a revisão sai do próprio conteúdo. */
.mw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--border-soft);font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}
.mw-meta a{color:var(--text-dim);text-decoration:none}
.mw-meta a:hover{color:var(--accent)}
.mw-meta i{font-style:normal;opacity:.45}
/* trocador de idioma: só entram os idiomas que EXISTEM. ⛔ NÃO listar tradução que não foi
   escrita — link morto é pior no Google que idioma a menos (e o `hreflang` tem de ser
   recíproco: página que não aponta de volta é ignorada). */
.mw-lang{display:flex;gap:2px;margin-left:auto}
.mw-lang a,.mw-lang b{padding:2px 7px;border-radius:5px;font-weight:600;text-decoration:none}
.mw-lang b{background:var(--accent);color:#fff}
.mw-lang a{color:var(--text-dim)}
.mw-lang a:hover{background:var(--bg-elev);color:var(--accent)}
/* ══ SEÇÃO COM FILETE (a assinatura tipográfica de enciclopédia) ═══════════════════ */
/* ⚠️ ESCOPADO NO `article`, NÃO EM `.mp-sec` (2026-08-15, achado na verificação): o `h2`
   do índice da home vive fora de seção e ficava sem serifa e sem filete — a página-índice é
   justamente a que precisa parecer verbete. */
.mp article>h2,.mp-sec>h2{padding-bottom:7px;border-bottom:1px solid var(--border-soft)}
.mp article>h2{font-family:"Instrument Serif",Georgia,serif;font-size:1.5rem;font-weight:400;letter-spacing:-.012em;line-height:1.16;margin:38px 0 0;color:var(--text)}
/* ══ HOME · o índice dos capítulos ═════════════════════════════════════════════════ */
/* ⚠️ LISTA DE VERBETES, NÃO GRADE DE CARTÕES (Tony: "tipo Wikipédia"): linha corrida com
   número, nome e o que ensina. Cartão grande vira vitrine; verbete se lê em varredura. */
.mn-ix{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--border-soft)}
.mn-ix li{border-bottom:1px solid var(--border-soft)}
.mn-ch{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;padding:15px 6px;text-decoration:none;transition:background .14s}
.mn-ch:hover{background:var(--bg-elev)}
/* ⚠️ COLISÃO DE CASCATA RESOLVIDA (LOOP 05, 04/09/2026): `.mn-ch-n` e `.mn-ch-d` também
   existem no styles.css (são o CARTÃO DA CORRENTE X-DOC, coisa diferente do índice de
   capítulos). As 17 páginas de manual carregavam as duas folhas e esta vencia por ordem —
   mas ⛔ NÃO redeclarava `line-height`/`overflow-wrap` (no -n) nem `opacity` (no -d), que
   VAZAVAM do cartão da corrente. Agora o manual declara os quatro: mesmo pixel de antes,
   sem depender de uma folha que os manuais nem carregam mais (viraram tokens.css).
   ⛔ NÃO remova `opacity:.5`: é ele que apaga a descrição do capítulo — e é o que o
   `.mn-ch.soon .mn-ch-d{opacity:.7}` logo abaixo sobrepõe nos capítulos em preparo. */
.mn-ch-n{grid-row:1/3;font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;font-weight:600;line-height:1.25;letter-spacing:.06em;color:var(--text-dim);padding-top:4px;overflow-wrap:anywhere}
.mn-ch-t{font-family:"Instrument Serif",Georgia,serif;font-size:1.28rem;line-height:1.14;letter-spacing:-.01em;color:var(--accent);margin:0 0 3px}
.mn-ch-d{font-size:.84rem;line-height:1.5;color:var(--text-mute);opacity:.5;text-wrap:pretty}
/* ⚠️ EM PREPARO APARECE, MAS NÃO É LINK (decisão do Tony): o mapa inteiro se vê, e clicar
   em nada é pior que não poder clicar. ⛔ NÃO apontar para página vazia. */
.mn-ch.soon{cursor:default}
.mn-ch.soon:hover{background:transparent}
.mn-ch.soon .mn-ch-t{color:var(--text-mute)}
.mn-ch.soon .mn-ch-d{opacity:.7}
.mn-tag{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:20px;vertical-align:2px;background:var(--bg-elev);font-family:var(--font-mono,ui-monospace,monospace);font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
/* ══ PÉ DO CAPÍTULO ════════════════════════════════════════════════════════════════ */
.mn-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:52px 0 0;padding:18px 0 0;border-top:1px solid var(--border-soft)}
.mn-next{font-size:.84rem;color:var(--text-mute)}
.mn-next b{display:block;font-family:"Instrument Serif",Georgia,serif;font-size:1.16rem;font-weight:400;color:var(--text);margin:2px 0 0}
.mn-next span{font-family:var(--font-mono,ui-monospace,monospace);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.mn-all{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--border-soft);border-radius:9px;background:var(--bg-elev);font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none}
.mn-all:hover{border-color:var(--accent);color:var(--accent)}

/* ══════════════════════════════════════════════════════════════════════════════════════
   A CASCA DA CARTEIRA (2026-08-15, Tony: "deve parecer que ainda estamos dentro da
   carteira"). O manual abre de dois jeitos — como página pública no Google e como
   "saiba mais" em hiperfoco DENTRO da gaveta. Nos dois casos ele tem de ser a carteira.

   ⚠️ ESCURO NÃO É GOSTO, É VERACIDADE. A página afirma "estes são os carimbos de
      verdade" — e a carteira é SEMPRE escura. Mostrar bolha e carimbo sobre papel branco
      era ilustrar um estado que o aplicativo nunca renderiza; a folha clara desmentia a
      frase mais importante do manual. ⛔ NÃO devolver o manual para o tema claro.
   ⚠️ O tema vem do PRÓPRIO app (`.theme-dark` de styles.css) e o acento vem da gaveta
      (`#0A84FF`, o mesmo que `.set-sheet` mapeia) — ⛔ NÃO escrever paleta nova aqui:
      duas paletas divergem no primeiro conserto.
   ⚠️ As classes vão no `<html>`, não no `<body>`: o fundo da barra de rolagem e o
      sobressalto do iOS leem do elemento raiz — no `<body>` sobrava uma faixa clara.
   ══════════════════════════════════════════════════════════════════════════════════ */
/* ⚠️ O MANUAL SEGUE O TEMA DA CARTEIRA (2026-08-15, Tony): em hiperfoco ele abre no tema em
   que o app está, e na web segue o sistema. Por isso o acento é TOKEN nos dois modos, nunca
   valor fixo — os hex são os mesmos que `.set-sheet` mapeia em styles.css (claro #007AFF,
   escuro #0A84FF). ⛔ NÃO fixar tema aqui: era `.mw-dark` cravado no `<html>` e o manual
   ficava escuro dentro de uma carteira clara. */
/* ⚠️ `:root`, NÃO `html` (2026-08-15, Tony viu o rosa): `styles.css` declara o acento da MARCA
   em `:root` — `oklch(0.68 0.26 0)`, rosa —, e `:root` é pseudo-classe (0,1,0), que vence o
   seletor de tipo `html` (0,0,1) mesmo vindo antes na ordem. No escuro passava porque
   `html.theme-dark` é (0,1,1); no claro o rosa vencia. A carteira é AZUL em todo lugar.
   ⛔ NÃO baixar para `html` de novo. */
/* 🔵 O CINTO (LOOP 07, 04/09/2026): `:root:root` é (0,2,0) e vence o (0,1,1) do
   `@media (prefers-color-scheme:dark) html:not(.theme-light)` do tokens.css. Sem isso o azul
   da carteira PERDIA em máquina de SO escuro sempre que nenhuma das duas classes de tema
   estava no `<html>` — JS desligado, script de tema falhando, ou a versão velha do script
   (que era o caso de 14 das 17 folhas). ⚠️ A repetição `:root:root` não é engano de
   digitação: é peso de seletor, e é de propósito. ⛔ NÃO simplificar para `:root`.
   ⛔ NÃO baixar para `html` (0,0,1) — foi o bug de 2026-08-15, o rosa já venceu uma vez.
   ⚠️ O bloco do `@media` abaixo cobre o MESMO caso no escuro: sem ele o azul do cinto
      (que é o CLARO) apareceria sobre fundo escuro. */
:root:root{--accent:#007AFF;--accent-strong:#0060DF;--accent-bg:color-mix(in oklch,#007AFF 12%,transparent);--mp-blue:#007AFF}
:root.theme-dark{--accent:#0A84FF;--accent-strong:#409CFF;--accent-bg:color-mix(in oklch,#0A84FF 20%,transparent);--mp-blue:#0A84FF}
@media(prefers-color-scheme:dark){html:not(.theme-light):root{--accent:#0A84FF;--accent-strong:#409CFF;--accent-bg:color-mix(in oklch,#0A84FF 20%,transparent);--mp-blue:#0A84FF}}
/* o diagrama precisa de azul MAIS CLARO que o texto: traço de 2px com opacidade .3 sobre
   fundo escuro desaparece — no claro o mesmo valor lia bem. */
html.theme-dark .mp-map{--mp-blue:#4DA3FF}
/* 📐 O DIAGRAMA CONCEITUAL — vocabulário compartilhado do manual (subiu para cá em 31/08).
   ⚠️ Nasceu inline no capítulo da fita; o capítulo do X-DOC é a SEGUNDA folha a usá-lo, e é a
      segunda vez que justifica componente (a primeira justifica um bloco local). ⛔ NÃO
      recopiar estas regras para o `<style>` de uma folha: duas cópias divergem no 1º ajuste.
   ⚠️ A COR VEM DE FORA por `--mp-dg-a`: cada capítulo desenha no PRÓPRIO acento (a fita em
      azul, o X-DOC no ouro) sem um segundo bloco de CSS. Sem a variável, cai no azul do manual.
   ⚠️ `max-width:420px` e nada de `height`: os desenhos são de 360 de largura (#MobileFirst) e
      na gaveta renderizam 1:1. ⛔ NÃO esticar esquema a 780px — vira cartaz vazio. */
.mp-dg{margin:22px 0 0;padding:18px 14px 14px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);color:var(--mp-dg-a,var(--mp-blue))}
.mp-dg svg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.mp-dg-t{margin:0 0 14px;font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
figure.mp-dgf{margin:0}
figure.mp-dgf figcaption{margin:10px 2px 0;font-size:12px;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
/* 💎 A LISTA DE ARGUMENTOS — um por linha, nome em negrito, filete no acento do capítulo.
   ⚠️ Subiu para cá em 31/08 junto com o `.mp-dg`, pelo mesmo motivo: o capítulo do X-DOC virou
      a 2ª folha a usá-la. 🐞 E foi um bug real — as seções novas do X-DOC saíram com marcador de
      bala e sem filete, porque as regras viviam no `<style>` da fita.
   ⚠️ Regra geral desta sessão: **componente que serve dois capítulos mora no manual.css**, e a
      cor vem de `--mp-dg-a`. ⛔ NÃO recopiar para o `<style>` de uma folha.
   ⛔ NÃO virar tabela de features: o leitor compra a consequência, não o mecanismo. */
.mp-adv{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.mp-adv li{padding:0 0 0 14px;border-left:2px solid color-mix(in oklab,var(--mp-dg-a,var(--mp-blue)) 38%,transparent);font-size:.92rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.mp-adv b{color:var(--text);font-weight:650}
/* 🗂 O CATÁLOGO — número mono + nome + uma linha. A ficha completa mora na fonte da verdade;
   aqui é vitrine. ⛔ NÃO listar item que ainda não existe: vitrine que promete futuro vira
   lista de desculpas. */
.mp-cat{margin:20px 0 0;display:flex;flex-direction:column;gap:0;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);overflow:hidden}
.mp-cat>div{display:flex;gap:12px;padding:13px 15px;border-top:1px solid var(--border-soft);align-items:baseline}
.mp-cat>div:first-child{border-top:0}
.mp-cat i{font-style:normal;font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;color:var(--mp-dg-a,var(--mp-blue));flex:none;padding-top:1px}
.mp-cat b{font-size:.9rem;color:var(--text);font-weight:650}
.mp-cat span{font-size:.85rem;line-height:1.5;color:var(--text-mute);text-wrap:pretty}
.mp-cat .mp-cat-tx{display:flex;flex-direction:column;gap:2px}
html.theme-dark .mp-map-sc svg{stroke-opacity:1}

/* 🎯 O SALTO DE ÂNCORA PARA DEBAIXO DA BARRA (Tony, 21/09: *"quando eu clico no índice deve pegar
   nessa altura — atualmente está cortando o título"*).
   🐞 A `.mw-bar` é `sticky; top:0`, e o salto nativo de âncora ⛔ não sabe disso: o alvo para com o
      topo colado em y=0, **debaixo da barra**, e o título fica cortado. ⚠️ Valia em **TODOS** os
      capítulos — a barra é desta folha compartilhada, e ⛔ nenhum alvo tinha `scroll-margin`
      (medido: 0px).
   🔑 Por isso o conserto é AQUI, ⛔ não na folha do capítulo: uma regra, 17 folhas. E o seletor é
      **cego** (`.mp [id]`) — pega o `h2` de seção, a fileira de rótulo do cap. 06 e qualquer alvo
      que nascer amanhã, ⛔ sem ninguém editar lista (R1).
   ⚠️ A barra tem **53px** no largo e **64px** no estreito (o rótulo quebra em duas linhas): o valor
      cobre o pior caso + respiro, e é o mesmo compasso dos **64px** que a gaveta já usa no
      `frSeek` do `wallet.jsx` para este mesmo problema. ⛔ NÃO descer de 64 — abaixo disso a barra
      volta a morder o alvo no telefone.
   ⛔ E ⛔ NÃO resolver com `padding-top` no alvo: mudaria o desenho da página para consertar o
      scroll. `scroll-margin-top` ⛔ não pinta nada — só move onde a rolagem para. */
.mp [id]{scroll-margin-top:78px}
/* 🔍 MAS DENTRO DA GAVETA A BARRA ⛔ NÃO EXISTE — e compensar barra ausente **mostra o fim da seção
   anterior** (Tony, 21/09: *"está deixando uma pontinha do anterior"*).
   🐞 Em hiperfoco a `.mw-bar` é `display:none` (regra do `html.hf`, algumas centenas de linhas
      abaixo), então os 78px viram 78px de **conteúdo velho** acima do título. A régua estava
      certa e o CONTEXTO é que mudou.
   🔑 A regra: offset de âncora compensa **o que cobre o alvo**. Sem barra, o offset é só respiro —
      ⛔ não se herda o número de um chrome que ⛔ não está lá.
   ⚠️ Vale para o salto nativo (o sumário funciona dentro da gaveta: o seletor cego do `hf` poupa
      `href^="#"`) **e** para o `frSeek` do `wallet.jsx`, que rola por JS — os dois usam 18. */
html.hf .mp [id]{scroll-margin-top:18px}
/* ── a barra do produto: o que faz a página parecer a mesma casa ────────────────────── */
.mw-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;padding:11px 20px;background:color-mix(in oklab,var(--bg-base) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border-soft)}
.mw-bar-m{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--accent);color:#fff}
.mw-bar-m svg{width:13px;height:13px}
.mw-bar-t{font-size:.86rem;font-weight:650;letter-spacing:-.01em}
.mw-bar-t b{font-weight:650}
.mw-bar-t i{font-style:normal;color:var(--text-dim);font-weight:400}
/* 🌗 o trocador de tema: mesma família dos botões da barra, sem rótulo — o ícone diz. */
.mw-bar-th{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border:1px solid var(--border-soft);border-radius:9px;background:transparent;color:var(--text-dim);cursor:pointer;transition:color .14s,border-color .14s}
.mw-bar-th:hover{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
html.theme-dark .mw-bar-th-sun,html:not(.theme-dark) .mw-bar-th-moon{display:none}
.mw-bar-go{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border-soft);border-radius:999px;background:var(--bg-elev);color:var(--accent);font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.mw-bar-go:hover{border-color:var(--accent);color:var(--accent-strong)}
@media(max-width:520px){.mw-bar{padding:9px 14px}.mw-bar-go span{display:none}}

/* ── a hero com o arquétipo ────────────────────────────────────────────────────────────
   ⚠️ A ILUSTRAÇÃO ENTRA POR `background-image` DE PROPÓSITO: enquanto o .webp não existe,
      um `<img>` quebrado mostraria o ícone de imagem faltando; o fundo apenas não aparece
      e sobra o gradiente com o raio, que já é uma hero legítima. ⛔ NÃO trocar por `<img>`
      antes de o arquivo existir. */
.mw-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border-soft);background:radial-gradient(120% 140% at 12% 0%,color-mix(in oklab,var(--accent) 16%,transparent) 0%,transparent 62%),var(--bg-base)}
/* ⚠️ SEM FOTO NA HERO (2026-08-15, Tony: "nenhuma delas ficou boa"). Três ilustrações
   cinematográficas foram tentadas e cortadas; a hero volta ao gradiente da carteira com o
   RAIO em marca-d'água — que é o mesmo tratamento do cartão de saldo, e por isso lê como
   produto, não como banco de imagem. ⛔ NÃO reintroduzir foto de hero sem o Tony pedir.
   ⚠️ As regras de `.mw-hero-img`/scrim de foto foram REMOVIDAS junto: CSS de peça que não
   existe é armadilha para quem vier depois. */
/* ⚡ O RAIO COMO MARCA-D'ÁGUA, igual ao cartão de saldo da carteira.
   ⚠️ SE MEDE PELA ALTURA, não pela largura (bug já corrigido uma vez): amarrado na largura
   ele saía maior que a hero e era cortado nas duas pontas — sobrava a barriga da forma, que
   não lê como raio.
   ⚠️ Esta regra foi APAGADA POR ACIDENTE num corte por fatia de texto (2026-08-15) e o SVG
   passou a renderizar EM FLUXO: 907px de largura → 1270px de altura, quase preto, tomando as
   três páginas. ⛔ NÃO remover `position:absolute`, `height` e `opacity`: sem os três o
   elemento não é marca-d'água, é um triângulo gigante. */
.mw-bolt{position:absolute;right:2%;top:50%;transform:translateY(-50%);height:min(72%,300px);width:auto;color:var(--accent);opacity:.13;pointer-events:none}
.mw-hero-in{position:relative;width:100%;max-width:900px;margin:0 auto;padding:44px 20px 36px;text-shadow:0 1px 14px var(--bg-base)}
/* ⚠️ NO TEMA CLARO O VÉU TAMBÉM CLAREIA (é `--bg-base`), mas as duas ilustrações são ESCURAS:
   sem reforço, o texto escuro cairia sobre foto escura na borda do gradiente. O véu claro
   sobe de força e a sombra do texto virá branca — mesma peça, contraste garantido nos dois
   modos. ⛔ NÃO clarear a foto: ela é o arquétipo, não textura. */
.mw-hero .mp-hd{border-bottom:0;padding:0}
.mw-hero .mw-meta{border-bottom-color:color-mix(in oklab,var(--text) 14%,transparent)}
@media(min-width:1080px){.mw-hero-in{padding:56px 24px 48px}}

/* ── os capítulos como cartões da carteira ─────────────────────────────────────────── */
html.theme-dark .mw-ch a,html.theme-dark .mw-ch>span{background:var(--bg-elev);border-color:var(--border-soft)}
html.theme-dark .mw-ch a:hover{border-color:color-mix(in oklab,var(--accent) 55%,transparent);background:color-mix(in oklab,var(--accent) 7%,var(--bg-elev))}

/* ── o pé do capítulo: os vizinhos ──────────────────────────────────────────────────── */
/* ⚠️ Cartões da carteira, como os do índice — mesma família, não um rodapé de blog.
   ⛔ NÃO pôr o índice dos 8 aqui: ele seria editado em 9 arquivos. */
.mw-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:52px 0 0;padding:26px 0 0;border-top:1px solid var(--border-soft)}
.mw-next-a{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);text-decoration:none;transition:border-color .16s,background .16s}
.mw-next-a:hover{border-color:color-mix(in oklab,var(--accent) 55%,transparent);background:color-mix(in oklab,var(--accent) 7%,var(--bg-elev))}
.mw-next-a i{font-family:var(--font-mono,ui-monospace,monospace);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--text-dim)}
.mw-next-a b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.24rem;letter-spacing:-.01em;color:var(--accent)}
.mw-next-a.next{text-align:right}
.mw-next-a.prev:only-child,.mw-next-a.next:only-child{max-width:340px}
.mw-next-a.next:only-child{margin-left:auto}


/* ═══ COMPONENTES DE CAPÍTULO · ilustração, duas colunas, causas, conta ═══════════════
   ⚠️ VIERAM DO `<style>` INLINE do manual-prova.html em 2026-08-29. Nasceram lá e ficaram lá
      por um turno — e o cabeçalho desta folha diz o contrário: "⛔ NÃO criar folha por capítulo:
      a cara do manual é uma só". O próximo capítulo que quisesse um slot ilustrado teria de
      COPIAR o CSS, e duas cópias divergem no primeiro conserto (a lição do take-prose.css).
   ⚠️ O que fica no inline de cada capítulo é só o que é da PÁGINA: a barra de rolagem, as
      regras de `html.hf` e o `--accent` do capítulo. ⛔ Componente, nunca. */

/* 🖼 A FIGURA DO CAPÍTULO — imagem + legenda explicativa.
   ⚠️ **A LEGENDA É ARGUMENTO, NÃO RÓTULO**: ela diz o que a figura ENSINA, e por isso tem corpo
      de leitura, não de nota de pé. ⛔ NÃO reduzir a "Figura 4" — quem lê em varredura lê só as
      legendas, e legenda que só numera desperdiça a única linha garantida de atenção.
   ⚠️ Fundo próprio e sem borda tracejada: a arte tem o mesmo azul-escuro do tema escuro, então
      no tema CLARO ela precisa de uma chapa própria — senão a imagem flutua sem limite na página.
   ⚠️ `width`/`height` vêm no HTML de cada `<img>` (evita salto de layout); aqui só a proporção
      responsiva. ⛔ NÃO pôr altura fixa em CSS. */
.mp-ill{margin:30px 0 0}
.mp-ill img{display:block;width:100%;height:auto;border-radius:16px;background:oklch(0.16 0.03 255);border:1px solid color-mix(in oklab,var(--accent) 22%,transparent)}
.mp-ill figcaption{margin:11px 2px 0;font-size:.84rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
.mp-ill.hero{margin:34px 0 6px}
/* ⚠️ a legenda da ABERTURA é mais discreta: na hero o texto acima já fez a promessa, e legenda
   com o mesmo peso ali competiria com o subtítulo do capítulo. */
.mp-ill.hero figcaption{font-size:.8rem;color:var(--text-dim)}

/* 📊 DUAS COLUNAS lado a lado — para pares que se confundem (Local × Global).
   ⚠️ A comparação É o conteúdo: os dois números visíveis ao mesmo tempo é o que ensina que são
      escalas diferentes. ⛔ NÃO empilhar em abas: aba esconde metade do argumento. */
.mp-two{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:30px 0 0;border:1px solid var(--border-soft);border-radius:16px;background:var(--border-soft);overflow:hidden}
@media(max-width:680px){.mp-two{grid-template-columns:1fr}}
.mp-two>div{padding:20px 22px;background:var(--bg-base)}
.mp-two h3{margin:0 0 3px;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.35rem;letter-spacing:-.01em;color:var(--accent)}
.mp-two-n{display:block;margin:0 0 12px;font-family:var(--font-mono,ui-monospace,monospace);font-size:1.5rem;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text)}
.mp-two dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 12px}
.mp-two dt{font-family:var(--font-mono,ui-monospace,monospace);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);padding-top:3px}
.mp-two dd{margin:0;font-size:.86rem;line-height:1.5;color:var(--text-mute)}
.mp-two dd b{color:var(--text);font-weight:650}

/* 🩺 LISTA DE CAUSAS — uma linha por causa, com a gravidade à esquerda.
   ⚠️ A gravidade é da CAUSA, não da lista: por isso ela é um rótulo por linha, e não a cor do
      bloco inteiro. ⛔ Vermelho em causa banal ensina a ignorar o vermelho. */
.mp-why{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--border-soft)}
.mp-why li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:0 16px;padding:15px 4px;border-bottom:1px solid var(--border-soft)}
@media(max-width:600px){.mp-why li{grid-template-columns:1fr;gap:6px}}
.mp-why-g{display:inline-block;align-self:start;padding:3px 8px;border-radius:6px;font-family:var(--font-mono,ui-monospace,monospace);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);background:color-mix(in oklab,var(--text) 8%,transparent);margin-top:3px}
.mp-why-g.ok{color:oklch(0.62 0.15 148);background:color-mix(in oklab,oklch(0.62 0.15 148) 14%,transparent)}
html.theme-dark .mp-why-g.ok{color:oklch(0.78 0.15 150)}
.mp-why-g.mid{color:oklch(0.62 0.14 70);background:color-mix(in oklab,oklch(0.7 0.15 75) 15%,transparent)}
html.theme-dark .mp-why-g.mid{color:oklch(0.82 0.14 80)}
.mp-why-g.bad{color:oklch(0.56 0.2 25);background:color-mix(in oklab,oklch(0.62 0.2 25) 15%,transparent)}
html.theme-dark .mp-why-g.bad{color:oklch(0.78 0.17 25)}
/* ⚠️ O NEGRITO DO TÍTULO É `li > div > b`, NÃO `.mp-why b` (achado em 29/08 na folha ES).
   🐞 O seletor descendente pegava TODO `<b>` sob a lista — inclusive os inline DENTRO do
      `<p>` da causa. A causa 5 é a única cujo corpo tem negrito no meio da frase, e por isso
      era a única a expor o vazamento: a frase saía quebrada em quatro blocos empilhados, cada
      um numa linha de 680px, e o negrito ainda pulava de 13,8px para 15,2px no meio da oração.
   ⚠️ A regra que isto revela vale para a folha inteira: **seletor descendente com tag genérica
      (`b`, `i`, `em`) dentro de um bloco que contém PROSA vaza por definição** — não é questão
      de cuidado, é questão de tempo até alguém escrever um negrito no lugar certo. Onde há
      prosa, o alvo é o filho direto (ou uma classe própria).
   ⛔ NÃO voltar para `.mp-why b`: as três folhas do capítulo (pt · en · es) dependem desta
      linha, e o defeito reaparece na primeira causa nova que tiver ênfase no corpo. */
.mp-why li>div>b{display:block;margin:0 0 3px;font-size:.95rem;font-weight:650}
.mp-why p{margin:0;font-size:.86rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}

/* 🔢 A CONCLUSÃO NUMERADA — o fecho de capítulo que promete "três" e mostra os três.
   ⚠️ O número em SERIFA grande, na cor de acento: mesma família dos títulos da folha. ⛔ NÃO usar
      o mono dos rótulos técnicos — mono é a voz do CAMPO, e aqui a voz é a da conclusão.
   ⚠️ `counter` + `::before`, não marcador nativo: o `::marker` não aceita tipografia em todo
      navegador, e este número É tipografia. ⛔ NÃO trocar por `list-style`.
   ⚠️ Alinhado ao ALTO da primeira linha (`grid` + `align-items:start`): número centralizado
      verticalmente flutua quando o item tem três linhas, e o fecho tem itens de tamanhos bem
      diferentes. */
.mp-take{counter-reset:tk;list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.mp-take li{counter-increment:tk;padding-left:40px;font-size:.95rem;line-height:1.62;color:var(--text-mute);text-wrap:pretty}
.mp-take li::before{content:counter(tk);display:inline-block;width:40px;margin-left:-40px;font-family:var(--font-mono,ui-monospace,monospace);font-size:1em;font-weight:700;font-variant-numeric:tabular-nums;line-height:inherit;color:var(--accent)}
.mp-take b{color:var(--text);font-weight:650}
@media(max-width:600px){.mp-take li{padding-left:30px}.mp-take li::before{width:30px;margin-left:-30px}}

/* 🧮 O QUADRO DA CONTA — números que a pessoa pode refazer com uma calculadora.
   ⚠️ Mono e alinhado: é para CONFERIR, não para impressionar. ⛔ NÃO escrever total sem as
      parcelas: número sem a conta é alegação. */
.mp-calc{margin:26px 0 0;padding:18px 20px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);font-family:var(--font-mono,ui-monospace,monospace);font-size:.82rem;line-height:1.9;color:var(--text-mute)}
.mp-calc b{color:var(--text);font-weight:650}
.mp-calc i{font-style:normal;color:var(--text-dim)}

/* ══ OS ANÉIS DO SUMÁRIO — a assinatura visual das folhas de X-DOC ════════════════════
   🌀 UMA CÓPIA, AQUI (04/09/2026, Tony: "aqui não tem aquelas ilustrações nas laterais").
   🐞 Eram QUATRO cópias idênticas — `manual-xdoc-aberto.css`, `-lacrado.css`, `-anonimos.css`
      e `-assinado.css`, uma por folha — e o capítulo-pai não tinha nenhuma. Pôr a quinta era
      o espelho solto que o CLAUDE.md §5 proíbe; então as quatro saíram e esta ficou.
   🔑 POR QUE AQUI e não numa folha de X-DOC: o `manual.css` é a única folha que TODAS as
      páginas do manual carregam. E o escopo `.xd-toc-w` faz o resto — essa classe só existe
      em folha de X-DOC (o capítulo-pai e as quatro operações), então a regra é INERTE nos
      capítulos da fita, da carteira, dos recados e da prova. ⛔ NÃO trocar o escopo por
      `.mw-toc` puro: os anéis passariam a nascer em capítulo que não é X-DOC.
   ⚠️ `--xd-gold` com FALLBACK: quem usa `.xd-toc-w` define o ouro (as 4 folhas e o
      `manual-xdoc-index.css`), mas folha nova pode esquecer — e anel invisível é pior que
      anel errado, porque ninguém percebe que faltou. ⛔ NÃO inventar um segundo dourado: é o
      MESMO ouro do X-DOC no app.
   🐞 E veio uma CHAVE ÓRFÃ de brinde: `-aberto.css` e `-lacrado.css` tinham um `}` solto
      depois deste bloco, sem nada para fechar — o CSS descarta em silêncio, e foi assim que
      ela sobreviveu duas vezes. As outras duas folhas não tinham. ⛔ NÃO recopiar. */
/* 🌀 O SUMÁRIO NÃO FLUTUA NO VAZIO (2026-08-19, Tony: "prefiro sumário centralizado com arte
   de cada lado"). A caixa recebe 900px da folha compartilhada e a lista mede ~280px — o vazio
   é INTERNO. Então a lista se centraliza e o guillochê ocupa os dois lados dela, sangrando
   nas bordas: o MESMO motivo que é chão dos painéis e da capa, relevo de selo seco.
   ⚠️ Zero KB: gradiente, não imagem.
   ⚠️ `@container`, nunca `@media` (CLAUDE.md 5b): dentro da gaveta o viewport mente — só a
      largura real da caixa sabe se cabe arte. Abaixo de 720px a arte NÃO EXISTE (o Tony viu
      cortada no telefone), e na coluna lateral de ≥1080px a caixa tem 214px, então o
      `overflow:hidden` também nunca liga ali — o que preserva o `sticky` dela.
   ⚠️ O CORTE VAI NA CAIXA, NÃO NO ENVELOPE (medido 2026-08-19): dentro de `@container`, uma
      regra no PRÓPRIO elemento-contêiner não vale — a consulta olha um contêiner ANCESTRAL.
      Pôr `overflow:hidden` no `.xd-toc-w` ali era regra morta (medido: `overflow:visible`, e
      38px de barra horizontal na página). Quem corta é o `.mw-toc`, que é DESCENDENTE.
   ⚠️ E por isso o desenho tem 232px, não 330px: cortado pela própria caixa (171px de alto),
      o degradê precisa chegar a zero dentro de 85px do centro.
   ⚠️ `closest-side` NÃO É DECORAÇÃO — é o que faz a conta fechar (2026-08-19, 2ª vez que
      esse corte reapareceu). Sem palavra de tamanho, `radial-gradient` assume
      **farthest-corner**: os 100% passam a ser a meia-DIAGONAL (116·√2 = 164px), então o
      `transparent 72%` só zera a 118px e a caixa cortava o anel a 85px, em alpha 0.47 —
      duas linhas retas atravessando o padrão. Com `closest-side` os 100% são a
      meia-LARGURA (116px) e o degradê fecha em 83,5px, com folga de 2px.
      ⛔ NÃO tirar `closest-side` nem aumentar o tamanho sem refazer essa conta.
   ⚠️ E por isso a arte só existe com o sumário ABERTO (`[open]`): a folga de 2px é contra
      a altura de 171px do estado aberto, e o alcance do degradê vem da LARGURA da caixa —
      recolhido, a caixa cai para 35px de alto e o mesmo desenho seria cortado a 17px do
      centro, ou seja em alpha 1.0: duas faixas de opacidade cheia com aresta reta. Não dá
      para amarrar o tamanho à altura (não existe container query de altura) — e nem
      precisa: tira de 35px não tem vazio para preencher.
      ⛔ NÃO tirar o `[open]` dos seletores.
   ⛔ NÃO redesenhar o glifo aqui como marca d'água (contrato). */
.xd-toc-w{position:relative;container-type:inline-size}
.xd-toc-w>.mw-toc{position:relative;z-index:1}
@container (min-width:720px){
  .xd-toc-w>.mw-toc{overflow:hidden}
  .xd-toc-w>.mw-toc>summary,.xd-toc-w>.mw-toc>ol{max-width:320px;margin-inline:auto}
  .xd-toc-w>.mw-toc[open]::before,.xd-toc-w>.mw-toc[open]::after{content:"";position:absolute;top:50%;width:232px;height:232px;margin-top:-116px;z-index:-1;pointer-events:none;
    background:repeating-radial-gradient(circle at 50% 50%,transparent 0 8.4px,color-mix(in oklab,var(--xd-gold,oklch(0.62 0.11 78)) 30%,transparent) 8.4px 9.4px);
    -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 0,#000 30%,transparent 72%);
    mask-image:radial-gradient(circle closest-side at 50% 50%,#000 0,#000 30%,transparent 72%)}
  .xd-toc-w>.mw-toc[open]::before{left:-30px}
  .xd-toc-w>.mw-toc[open]::after{right:-30px}
}

/* ══ O SELETOR DE CAPÍTULOS — injetado pelo manual-chapters.js ═══════════════════════
   🔑 A VESTE VIVE AQUI, ⛔ NÃO no JS (04/09/2026): o `manual.css` é a folha que TODAS as
      páginas do manual carregam, então a aparência do seletor é uma só. Estilo em string
      dentro do JS seria a 2ª fonte de aparência do manual — e a primeira a divergir.
   ⛔ NÃO transformar isto em menu lateral: acima de 1080px a lateral é do `.mw-toc` (o
      índice das SEÇÕES). Duas colunas de navegação é duas portas para a mesma decisão.
   ⚠️ `html.hf` ESCONDE — é a 2ª camada da regra do Tony: dentro da carteira o manual abre
      UM capítulo como ajuda daquela tela, e o único caminho é o "‹ Voltar". O JS já faz
      `return` em hiperfoco; esta regra cobre o caso de a classe `hf` chegar DEPOIS dele.
      ⛔ NÃO remover nenhuma das duas: a CSS é a que não depende de ordem de execução. */
html.hf .mw-chsel{display:none}
/* 🎯 DENTRO DA CARTEIRA, O CHROME DA WEB SAI — a 3ª camada da regra do §5b (05/09/2026, Tony com
   print: "dentro da carteira não deve carregar o mesmo cabeçalho no manual quando acessado pela
   web"). A gaveta já desenha o SEU cabeçalho — "‹ Minhas assinaturas · Manual" e o ✕ — então a
   barra da web logo abaixo repetia a mesma função com outras palavras: dois títulos, dois modos
   de sair, R9 em cima da dobra.
   🔑 O que sai é o que é CAMINHO ou DUPLICATA, ⛔ nunca conteúdo:
      · `.mw-bar` — o título "Carteira PING · O cofre", o botão de tema e "ABRIR A CARTEIRA". Os
        três são chrome do site: o título a gaveta já diz, o tema o host já controla (o `?theme=`
        vem dele), e "abrir a carteira" é absurdo dentro da carteira.
      · `.mw-meta` — a migalha "MANUAL · PING WALLET · O COFRE" e a pílula de idioma. Migalha é
        caminho (o §5b já mata o link); idioma é preferência do usuário, e trocá-la aqui mudaria
        só a moldura, não a carteira em volta.
   ⚠️ O `h1` FICA. É o assunto da folha, não navegação — e sem ele o capítulo abriria sem nome
      quando o painel rolasse.
   ⛔ NÃO esconder por `?hf=1` no JS: a classe `hf` já cobre iframe E querystring (camada 1), e
      CSS não depende de ordem de execução. ⛔ NÃO usar `visibility`: tem de sair do fluxo, senão
      sobra o vão que aparece no print.
   ⚠️ Vale para as ~20 folhas do manual, ⛔ não só esta: a regra é do vocabulário, não da folha. */
/* ═══ HIPERFOCO: A REGRA É UMA, E VIVE AQUI (05/09/2026) ═══════════════════════════════
   🐞 Estava INLINE em 28 folhas, com listas DIFERENTES: a fita escondia `.mw-lang`, os recados
      escondiam `.mn-all` e só os LINKS do pé (`.mp-foot a`), as assinaturas não tinham nada. 28
      cópias de uma decisão que é do vocabulário — R5 em escala, e cada folha nova nascia com a
      lista de quem foi copiada. Agora é uma regra, na folha que TODAS carregam.
   🔑 A regra do Tony (05/09, dois prints): "dentro da carteira o usuário deve receber apenas os
      dados do capítulo". Então sai TUDO que é caminho ou moldura, ⛔ nunca o teor:
      · `.mw-bar` + `.mw-meta` — a barra da web, o tema, "abrir a carteira", a migalha, a pílula
        de idioma. A gaveta já desenha o cabeçalho dela.
      · `.mp-foot` + `.mw-next` + `.mn-all` — o pé INTEIRO. ⚠️ ⛔ NÃO `.mp-foot a` (era o que os
        recados faziam): sem os links sobra "Manual da PING Wallet · O cofre de assinaturas", que
        é o mesmo título que a gaveta já mostra no alto — duplicata, não informação.
      · `.mp-store` — o cartão da loja. É uma IMAGEM 21:9 de um caminho que ali não existe;
        degradar para texto não faz sentido nela, então ela SOME.
      · `.mw-chsel` — o seletor de tópicos (a regra já estava acima, mantida por clareza).
   ⚠️ A CAMADA 2 do §5b fica: o seletor CEGO degrada para TEXTO todo link restante em prosa —
      cobre o que ninguém lembrou de listar, inclusive link escrito amanhã. ⛔ NÃO trocar a lista
      nominal pelo seletor cego nem o contrário: a lista tira o BLOCO, o cego neutraliza o LINK.
   ⛔ NÃO recriar nenhuma dessas linhas inline numa folha. Se um vocabulário novo precisar sair
      em hiperfoco, ele entra AQUI. */
html.hf .mw-bar,html.hf .mw-meta,html.hf .mp-foot,html.hf .mw-next,html.hf .mn-all,html.hf .mp-store,html.hf .mw-lang{display:none}
html.hf a[href]:not([href^="#"]){pointer-events:none;color:inherit;text-decoration:none;cursor:default}
html.hf .mw-hero{padding-top:26px}
html.hf .mp-sec:last-of-type{padding-bottom:34px}
.mw-chsel{position:relative;flex:none}
/* 🎯 AFFORDANCE, ⛔ NÃO DECORAÇÃO (Tony, 04/09/2026: "por que quando eu estou em PT não tem
   seletor?" — ele estava lá, e não PARECIA um).
   🐞 A pílula usava `--bg-elev` + `--border-soft`: sobre a hero escura isso fica a ~0,05 de
      luminosidade do fundo, e o controle lê como texto. Um seletor que ninguém identifica como
      clicável não existe — é pior que não ter, porque ocupa o lugar do que teria.
   🔑 A cura é o ACENTO, não um número: a borda e o chevron passam a carregar `--accent`, que é
      a cor que este produto usa para dizer "isto responde ao toque". ⛔ NÃO voltar a vestir o
      seletor só com os tokens neutros de superfície. */
.mw-chsel>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;padding:3px 9px 3px 10px;border:1px solid color-mix(in oklab,var(--accent) 34%,var(--border-soft));border-radius:999px;font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text);background:color-mix(in oklab,var(--accent) 9%,var(--bg-elev));transition:color .14s,border-color .14s,background .14s}
/* ⚠️ O NOME DO TÓPICO NÃO QUEBRA LINHA (T05, 05/09/2026): "O cofre de assinaturas" dobrava e
   empurrava a migalha. Uma linha + reticências; a largura máxima segue o viewport. 🐞 A 1ª
   tentativa colou este comentário no TOPO do arquivo sem regra nenhuma (o `indexOf` deu -1 e o
   `replace('')` prependeu) — comentário que afirma conserto que não existe é o pior drift. */
.mw-chsel-t{display:inline-block;max-width:min(52vw,260px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.mw-chsel>summary svg{color:var(--accent)}
.mw-chsel>summary::-webkit-details-marker{display:none}
.mw-chsel>summary:hover{color:var(--accent);border-color:var(--accent);background:color-mix(in oklab,var(--accent) 16%,var(--bg-elev))}
.mw-chsel[open]>summary{color:var(--accent);border-color:var(--accent);background:color-mix(in oklab,var(--accent) 16%,var(--bg-elev))}
.mw-chsel[open]>summary svg{transform:rotate(180deg)}
.mw-chsel>summary svg{transition:transform .16s ease}
.mw-chsel>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ⚠️ o painel é ABSOLUTO e ancorado à esquerda do rótulo: em fluxo ele empurraria a linha da
   migalha e a página pularia ao abrir. `max-height`+`overflow` para o telefone deitado. */
.mw-chsel>ol{position:absolute;z-index:40;top:calc(100% + 7px);left:0;min-width:262px;max-height:min(70vh,420px);overflow:auto;margin:0;padding:6px;list-style:none;counter-reset:none;background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:12px;box-shadow:0 16px 40px -18px oklch(0.2 0.02 270 / .38),0 2px 8px -4px oklch(0.2 0.02 270 / .2)}
.theme-dark .mw-chsel>ol{box-shadow:0 18px 44px -18px oklch(0 0 0 / .6)}
.mw-chsel>ol li{margin:0}
.mw-chsel>ol a,.mw-chsel>ol li.soon{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:baseline;gap:9px;padding:7px 9px;border-radius:8px;font-size:.83rem;line-height:1.3;text-decoration:none;color:var(--text)}
.mw-chsel>ol a:hover{background:var(--bg-elev-2,var(--bg-base));color:var(--accent)}
.mw-chsel-n{font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--text-dim)}
.mw-chsel>ol a:hover .mw-chsel-n{color:var(--accent)}
.mw-chsel>ol em{font-style:normal;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
/* o capítulo atual não é link nem parece um: ele é ONDE VOCÊ ESTÁ. */
.mw-chsel>ol li.on a{background:color-mix(in oklab,var(--accent) 10%,transparent);color:var(--accent);font-weight:600}
.mw-chsel>ol li.soon{color:var(--text-mute);cursor:default}
@media(max-width:560px){.mw-chsel>ol{min-width:min(84vw,262px)}}
/* 🌐 O IDIOMA QUE CAI NO SUMÁRIO se declara: itálico discreto + `title` (04/09/2026). Quando o
   tópico não existe naquele idioma, a pílula leva ao ÍNDICE do manual naquela língua — destino
   real, ⛔ nunca um 404 e ⛔ nunca uma opção morta. ⚠️ A marca é sutil de propósito: ela avisa
   sem transformar a ausência de tradução em alarme. ⛔ NÃO esconder o idioma que falta: quem lê
   inglês prefere o sumário em inglês a um botão que não existe. */
.mw-lang a.alt{opacity:.62;font-style:italic}
.mw-lang a.alt:hover{opacity:1;font-style:normal}
/* 🏷 A ETIQUETA DE IDIOMA NO PÉ — o destino ainda não tem tradução, e o link DIZ isso (04/09/2026).
   ⚠️ Mesmo vocabulário do `mn-tag` dos índices, só menor: aqui ela é 3ª informação de um cartão,
   ⛔ não rótulo de linha. ⛔ NÃO pintar de vermelho/alerta: ler em pt é oferta, não erro. */
.mw-next-a .mw-next-lang{display:block;margin:3px 0 0;font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-dim)}

/* ══ O CARTÃO DA LOJA — UMA CÓPIA, AQUI (04/09/2026) ══════════════════════════════════
   🔑 A veste nasceu page-local nas 3 folhas de recados, com a razão escrita: "é regra de uma
      página só, e a folha compartilhada custaria bump de token em ~40 páginas". ⚠️ **A premissa
      caiu**: o Tony pediu o cartão na fita ("falta o banner mandando para o pacote
      comunicação"), e uma 4ª cópia é o espelho solto que o CLAUDE.md §5 proíbe. Regra de uma
      página fica na página; regra de quatro vem para cá.
   ⚠️ O cartão serve QUALQUER capítulo cujo assunto tenha assento num pacote da X-Hub — o texto
      é que muda por folha, ⛔ nunca a veste.
   ⛔ NÃO devolver isto para dentro de uma folha: seriam 4 cópias de novo, e a próxima correção
      de contraste (que já custou um defeito de AA aqui) conserta uma e deixa três.
   ⚠️ Os comentários abaixo são o histórico dos defeitos que cada número resolve — ⛔ não
      resumir: cada um deles já foi um bug real. */
/* 🏪 CARTÃO DA LOJA — o pé do capítulo aponta para o Pacote Comunicação (Tony, 31/08).
   ⚠️ A ARTE É A DA LOJA (`assets/suites/comunicacao-v3.jpg`, a mesma que a X-Hub usa na capa
      do pacote) e por isso ela cabe AQUI e não como capa do capítulo: ela mostra pássaro + sino
      + cassete — Recado, Lembrete e Fita, os TRÊS assentos do pacote. Como capa prometeria três
      assuntos e entregaria um; como cartão de link ela está dizendo a verdade: é o pacote que
      está do outro lado. ⛔ NÃO promovê-la a capa do capítulo.
   ⚠️ **O VÉU E A COLUNA SAEM DA MESMA VARIÁVEL** (`--vw`). 🐞 Foram escritos como números
      independentes na 1ª versão (coluna 62%, véu já em .28 de alpha aos 58%) e o fim da 1ª linha
      da descrição caiu praticamente sem véu sobre o envelope branco: **3.02:1**, abaixo do AA.
      Agora o gradiente fica opaco até `--vw` e só desvanece DEPOIS dela — a coluna nunca
      ultrapassa o véu porque as duas leem o mesmo número.
      ⛔ NÃO alargar `.mp-store-tx` sem mexer no `--vw`, e ⛔ não cravar stop solto no gradiente.
   ⚠️ A descrição é opaca de propósito: alpha .76 puxava o texto na direção do fundo e sozinha
      já custava ~0.7 de contraste. Hierarquia se faz com TOM, não com transparência, quando o
      que está atrás é uma imagem.
   ⚠️ A ROTA É `?suite=` — query param, NUNCA hash. É o formato canônico do projeto (`ping-ledger-*`,
      `data.jsx`, `bio-login.jsx`, `x-id-signup.jsx` e o `SVC_STORE` do `wallet.jsx`), e
      `hub-portal.jsx` confirma: `?suite=id` → produção `/hub/:id`. 🐞 Escrevi
      `#suite/comunicacao` na 1ª versão: `hub-home.html` não tem roteamento por hash nenhum, então
      o clique caía na vitrine geral. ⛔ NÃO inventar formato de rota: procure um consumidor que
      já funciona e copie.
   ⚠️ E a folha carrega `hub-focus.js` por causa deste cartão: FORA da gaveta o link faria
      navegação de página cheia e tiraria a pessoa do manual; com ele, `?suite=` abre em pop-up
      com "Voltar", que é o padrão universal do site.
      🐞 ⛔ `hub-focus.js` NÃO resolve o caso da GAVETA — escrevi isso aqui na 1ª versão e estava
         errado. Ele só troca "navegar o iframe" por "empilhar a loja inteira num overlay dentro
         do painel de ~550px", e o §5b diz que ali o único caminho é VOLTAR. Quem resolve a
         gaveta é o hiperfoco (busque `html.hf` no alto): o cartão some, porque ele é um CAMINHO
         que não existe lá dentro. */
.mp-store{--vw:56%;container-type:inline-size;display:block;position:relative;margin:34px 0 0;border:1px solid var(--border-soft);border-radius:16px;overflow:hidden;text-decoration:none;background:var(--bg-elev);isolation:isolate}
/* ⚠️ `height:auto` é OBRIGATÓRIO aqui: os atributos `width`/`height` do <img> (que existem para
   reservar espaço e evitar salto de layout) contam como dimensão definida, e `aspect-ratio` só
   preenche dimensão que FALTA — sem isto o card renderiza com 821px de altura, quadrado.
   ⛔ NÃO remover os atributos para "resolver": eles é que evitam o reflow no carregamento. */
.mp-store img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:78% 50%}
.mp-store::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,14,32,.95) 0%,rgba(6,14,32,.9) calc(var(--vw) - 14%),rgba(6,14,32,.82) var(--vw),rgba(6,14,32,.34) calc(var(--vw) + 12%),rgba(6,14,32,0) calc(var(--vw) + 26%))}
.mp-store-tx{position:absolute;z-index:1;left:0;top:0;bottom:0;width:var(--vw);padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.mp-store-k{font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7FB4FF}
.mp-store-n{font-size:1.06rem;font-weight:680;color:#F2F6FF;line-height:1.2}
.mp-store-d{font-size:.82rem;line-height:1.5;color:#C8D8F2;text-wrap:pretty}
.mp-store-go{margin-top:3px;font-size:.8rem;font-weight:600;color:#7FB4FF}
@container (max-width:420px){
  /* 📱 CARTÃO ESTREITO EMPILHA — arte inteira em cima, texto embaixo, no fluxo.
     🐞 O overlay NÃO sobrevive ao recorte: a caixa mobile é mais alta que a fonte 2.33:1, então
        o `cover` descarta ~30% da largura — e o que ele descarta é exatamente o VAZIO DA
        ESQUERDA que o texto sobreposto ocupava. Com o vazio fora, a camada de 70% cai em cima do
        pássaro: sobrava uma asa, o sino e a cassete sem sujeito.
     ⚠️ NÃO é ajuste de `object-position`: a cabeça está a ~53% da fonte e precisaria estar a
        ≥73% para escapar do texto — qualquer valor que a jogue para fora corta o pássaro e
        deixa só a cassete. O problema é de COMPOSIÇÃO, e a resposta é parar de sobrepor.
     ⛔ NÃO reintroduzir overlay no cartão estreito; ⛔ não mexer no número achando que resolve.
     ⚠️ `@container`, NÃO `@media` (§5b): a consulta tem de medir o CARTÃO, não o viewport — e
        `container-type` mora no `.mp-store`, que é o pai de tudo que a consulta ajusta (um
        contêiner não consulta a si mesmo, só descendentes). */
  .mp-store img{aspect-ratio:2/1;object-position:70% 50%}
  /* 🎨 EMPILHADO = OUTRA SUPERFÍCIE, OUTRAS CORES.
     🐞 As cores fixas e claras (#F2F6FF etc.) existem para o texto SOBRE A ARTE ESCURA, onde o
        fundo é a imagem e não tem tema. Empilhado, o texto senta em `var(--bg-elev)` — que
        SEGUE O TEMA — e no claro virava branco sobre branco (contraste 1.03:1, ilegível).
     ⚠️ A regra: mudou a superfície debaixo do texto, mudou de onde vem a cor dele. Cor fixa só
        se sustenta sobre fundo fixo. ⛔ NÃO levar as cores fixas para o estado empilhado.
     🐞 E o `::after` está ancorado ao pé do CARTÃO, não da imagem: empilhado, ele caía sobre os
        últimos 56px do TEXTO em vez de velar a arte. Sem overlay não há o que velar — desliga. */
  .mp-store::after{display:none}
  .mp-store-tx{position:static;width:auto;padding:14px 16px 16px;gap:4px}
  /* ⚠️ `--accent-strong`, não `--accent`: empilhado o texto senta na superfície do card, e ali
     `--accent` dá 3.62:1 no tema claro (AA pede 4.5 para texto pequeno). `--accent-strong` — o
     mesmo tom que a folha já usa em `a:hover` — dá 5.06 no claro e 6.35 no escuro.
     ⛔ NÃO trocar por `--accent` "para ficar igual ao resto": aqui o texto é 10–13px. */
  .mp-store-k{color:var(--accent-strong)}
  .mp-store-n{font-size:.98rem;color:var(--text)}
  .mp-store-d{font-size:.78rem;color:var(--text-mute)}
  .mp-store-go{color:var(--accent-strong)}
}

/* 📮 A LINHA DE REMISSÃO (V08, 04/09/2026): uma frase que aponta para OUTRO capítulo, no lugar de
   um bloco que ali não era dono. Veste de prosa de hero — cor rebaixada como a `.mp-lead`,
   ⛔ não de cartão: é remissão, não destaque. */
.mw-hero-in .mw-xref{margin:14px 0 0;font-size:.92rem;line-height:1.55;color:var(--text-dim);text-wrap:pretty}
.mw-hero-in .mw-xref a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.mw-hero-in .mw-xref a:hover{color:var(--accent-strong)}