/* ───────────────────────────────────────────────────────────────────────────── Tokens e base. (L-44) Vindos do protótipo `l01-pencil.html`, validados no iPad e no Mac nos Blocos A e B — não reinventados aqui. As duas decisões que mais importam: 1. A medida da coluna é em **em**, não em rem. A coluna cresce junto com a fonte, e o número de caracteres por linha fica estável em qualquer tamanho — foi o achado da rodada 1 da L-03, no iPad. 2. As cores de destaque têm variante por tema, calibradas para o texto seguir acima de 4.5:1 **por cima do destaque** (03-destaques §5.1). ───────────────────────────────────────────────────────────────────────── */ /* ── fontes ─────────────────────────────────────────────────────────────── Os três `@font-face` e os tokens de família subiram ao núcleo (Task 9, Scriptorium). O que fica aqui é só o vocabulário de destino: os blocos `[data-fonte=…]` abaixo apontam para `--serif`, `--serif-leitura` e `--sans`, que o `nucleo.css` declara. ───────────────────────────────────────────────────────────────────────── */ :root { --size-base: clamp(1.125rem, 1.02rem + 0.5vw, 1.345rem); --size: calc(var(--size-base) + var(--tamanho, 0) * 0.0625rem); --leading: 1.6; /* Espaço entre a coluna e a beirada da folha. Mora no `:root` desde a L-74: o `main` também precisa dele para reservar a margem da marginália. */ --respiro: clamp(1.5rem, 5vw, 4rem); /* A medida virou DERIVADA com o espaçamento para dislexia (Bloco J2): a largura que o leitor escolhe entra em `--medida-base`, e `--fator-espaco` multiplica. Os dois se separaram porque a compensação de medida precisa valer para as TRÊS larguras, e não só para a padrão — a conta está na nota de `[data-espacamento]`, abaixo. Com o fator em 1, que é o padrão, o valor computado continua sendo o mesmo `34.5em` de sempre. */ --medida-base: 34.5em; --measure: calc(var(--medida-base) * var(--fator-espaco, 1)); --space-para: 0.9em; --space-block: 2.2em; /* Charter (spec 50 §3.6): do sistema da Apple, zero byte no casco. A pilha cai em serifas de desenho parecido onde ela não existe. */ --serif-charter: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; /* ── Duas famílias de cor, e a distinção é o conserto da L-51b ─────────── `--hl-*` é a cor de **marcação**: ela entra POR BAIXO DO TEXTO, e por isso muda com o tema (03 §5.1). `--vivo-*` é a cor de **amostra**: aparece em botão e em bolinha, sobre fundo de cromo, e não muda nunca — a amostra precisa ser reconhecível como "a azul", e uma azul escurecida para o tema escuro deixaria de ser. */ /* 2026-08-21 — os quatro descem meio tom para o registro do pigmento: ouro-ouropigmento, verdete, laca de quermes, azurita. É a mesma família de matiz de sempre, com menos croma de papelaria e mais de manuscrito. **O NOME é contrato de dado, e por isso a matiz se move dentro da família em vez de trocar de família.** `roxo`, `amarelo`, `rosa` e `azul` são valores PERSISTIDOS: a API os valida (`api/leitor-api/lib/destaques.mjs`, `CORES` e as duas mensagens `cor-invalida`), grava `cor` com eles em cada destaque, e `corPadrao` das preferências guarda um deles (`lib/prefs.mjs`). Um `--hl-azul` violeta seria um nome mentindo sobre a cor; mudar o nome exigiria migrar destaque já gravado. Então a azurita continua azul, e a laca de quermes continua rosa. ── O roxo entrou e o verde saiu (2026-08-21) ───────────────────────── O roxo é a cor PADRÃO agora — `motor.mjs` declara `CORES` e `artigo.mjs` faz `corAtiva = CORES[0]`, então a primeira posição é o mecanismo inteiro; não há preferência gravada por trás. **Tirar o verde não custou migração, e isso foi medido, não suposto:** dos 158 destaques gravados, 156 são amarelo e 2 são rosa — verde e azul, zero. Nenhum destaque ficou órfão de token. Se algum verde existisse, ele cairia num `var(--hl-verde)` sem valor e apareceria sem marcação nenhuma; como não existe, o custo é zero. O azul ficou mesmo sem uso porque carrega o rótulo "Estrutural", que é o que conversa com a lente do arquiteto (03 §5.1). O roxo do escuro (`#42305c`) é o par mais apertado do arquivo, e a razão é nova: no tema escuro o ACENTO também é púrpura (`#c19ae6`), e `.prosa a` é destacável — um link roxo pode nascer por cima de uma marcação roxa. Medido em 4,99:1, dentro da faixa dos outros três (4,87–4,90). */ --hl-roxo: #d3bbe8; --hl-amarelo: #eed88a; --hl-rosa: #eeaebd; --hl-azul: #a6c3e4; --vivo-roxo: #d3bbe8; --vivo-amarelo: #eed88a; --vivo-rosa: #eeaebd; --vivo-azul: #a6c3e4; /* `--raio` e `--raio-p` subiram ao núcleo (Task 9) com os mesmos valores — 12px e 8px. A nuance de que dentro do texto não há superfície para arredondar (02 §9; o `4px` da imagem e do bloco de código não usa estes tokens de propósito) continua valendo, só que o token agora vem de fora. */ /* ── Matiz por cluster (02 §3.1) ──────────────────────────────────────── Terceira família de cor deste arquivo, e a distinção contra as outras duas é a mesma de sempre — **camada e função**: | família | onde vive | muda com o tema? | |---|---|---| | `--hl-*` | POR BAIXO do texto do artigo | sim, obrigatoriamente | | `--vivo-*` | amostra em botão e bolinha | nunca | | `--t-*` | identidade de um tema de estudo | só de valor, nunca de matiz | Duas regras governam os valores, e as duas são medidas em graus, não a olho: 1. **O acento tem hue exclusivo.** Nenhum cluster fica a menos de ~50° do azul-noite (hue 216). Foi o que tirou `--t-arq` do azul-aço `#35618c` — 6° do acento, indistinguível numa bolinha de 7px — e o levou à ameixa, a 54°. Se um cluster ocupasse a matiz da marca, o chip ativo e o app diriam a mesma coisa em lugares diferentes, e o reconhecimento por cor (a razão inteira desta fileira existir) se dissolveria. Separações contra o acento: cyber 46°, arquitetura 54°, cristão 174°, cânone 130°, geral 120°. Entre clusters, o par mais próximo é cristão × cânone a 44° — âmbar e bordô, que saturação e brilho separam mesmo com a matiz vizinha. 2. **Nome pela coisa, nunca pelo papel.** `--t-cyber`, e não `--t-1` nem `--t-primario`: um nome de papel deixa dois lados concordarem na palavra e discordarem na coisa. Quem escolhe a matiz de um cluster é `assets/matizes.mjs` — tabela para os conhecidos, hash do slug para o resto. Declarar o token aqui não põe cor em lugar nenhum: quem aplica é o `--t` inline do elemento. */ /* 2026-08-21 — três dos cinco se mexeram, e a regra 1 acima é que mandou. Ela dizia "≥50° do azul-noite (hue 216)" porque o acento era azul nos TRÊS temas. Agora o acento é vermelho no claro (357), carmesim no sépia (344) e púrpura no escuro (271) — a regra continua a mesma, mas a zona proibida virou a UNIÃO de duas: [294°,47°] e [221°,321°]. Sobra a faixa livre [47°,221°], e é dentro dela que os cinco moram agora. Quem tinha de sair, e por quê: - `--t-canone` era bordô (#8c3b4e, hue 347). Ficava a 10° do acento vermelho: o chip do cânone e a marca do app diriam a mesma coisa em lugares diferentes, que é exatamente o que a regra 1 existe para impedir. Foi para o **louro** (hue 120) — a coroa de louro do poeta, que é o emblema do cânone desde antes de haver cânone. - `--t-arq` era ameixa (#6b4a8c, hue 268). Ficava a 3° do acento púrpura do escuro — pior colisão do conjunto, e invisível no claro, onde ninguém a veria acontecer. **Voltou ao azul-aço `#35618c`**, o valor que a rodada de 2026-08-02 tinha rejeitado por estar a 6° do acento de então. A razão que o expulsou era o acento ser azul; o acento deixou de ser azul, e o valor voltou a estar livre. Ajustado de 210° para 216° só para abrir o vão contra `--t-cyber`. - `--t-cristao` era âmbar-terra (#8a5a2b, hue 30), dentro da zona proibida do vermelho por 17°. Subiu para o **ouro** (hue 47), a 50° do acento — o mínimo da regra, cumprido e não raspado. `--t-cyber` (petróleo, 170°) não mudou. `--t-geral` virou **grafite**, e essa é a única mudança que não foi a regra 1 que pediu: com quatro matizes numa faixa de 174°, o quinto hue apertaria todos os vãos. O `geral` é o balde do que não tem tema declarado (`protocolos` cai nele) — dizer isso com um neutro é mais verdadeiro do que com o oliva, e devolve espaço aos quatro que carregam identidade de verdade. Vãos entre as quatro matizes: 73° · 50° · 46°. O par mais próximo era 44° antes desta rodada (cristão × cânone) e passou a 46° (cyber × arq) — a separação melhorou, não piorou. Contra os acentos: ouro a 50° do vermelho, azul-aço a 55° da púrpura. */ /* 2026-09-01 — a brasa, e por que ela devolve quatro das cinco matizes. (Claude Design, «Leitor — rodada 1», prancha 1a.) A rodada acima trabalhou com um acento que **mudava de matiz entre temas** — 357° no claro, 344° no sépia, 271° no escuro. Era isso, e não a regra 1, que apertava tudo: com três acentos, a zona proibida é a UNIÃO de três bandas de ±50°, e sobra um corredor de 174° para caber cinco matizes. Foi o corredor, não o gosto, que expulsou a ameixa e o bordô — e o comentário acima registra as duas saídas medindo contra o acento do ESCURO, que é o detalhe fácil de perder ao reler. A brasa vale 17,3° no claro, 17,5° no sépia e 17,4° no escuro: uma matiz só, que muda de valor e nunca de matiz. A zona proibida volta a ser UMA banda — [327°,67°] — e o corredor livre passa de 174° para **260°**. Não é uma cor mais bonita; é a paleta deixando de precisar ser revalidada tema a tema. Com o corredor aberto, três voltam ao valor que já tinham sido: - `--t-arq` volta à **ameixa** `#6b4a8c` (270°). Ela só era proibida pelo acento púrpura do escuro, que deixou de existir: agora está a 107° da brasa nos três temas. - `--t-canone` volta ao registro do **bordô**, agora magenta `#83306b` (317°), a 59,9° da brasa — o par mais apertado do conjunto, e ainda acima do mínimo de 50° da regra 1. - `--t-cristao` recebe o **azul-noite** `#33538f` (219°), a matiz que era do acento antes de tudo isto. Não foi jogada fora: mudou de posto. `--t-cyber` (petróleo, 170°) não mudou pela segunda rodada seguida. `--t-geral` sai do grafite e vai ao **oliva** `#5c6b52` (96°): o grafite existia para devolver espaço num corredor apertado, e o corredor deixou de ser apertado. Medido, nos TRÊS temas (o que antes só valia num): cyber 153,0° · cristão 158,2° · arq 107,3° · cânone 59,9° · geral 78,7° Pior caso do conjunto: 59,9°, contra 43,2° da rodada anterior. Menor vão entre temas: 47,3° (arq × cânone), contra 6,5° antes — aquele 6,5° não era defeito (o grafite tinha saturação 4,8%, e matiz não governa cinza), mas some junto. */ --t-cyber: #2f6d63; --t-arq: #6b4a8c; --t-cristao: #33538f; --t-canone: #83306b; --t-geral: #5c6b52; /* ── A matiz CHEIA da capa: HISTÓRICO desde 02/09 ──────────────────────── Estes cinco vestiam a capa da estante, e a razão continua verdadeira: os `--t-*` acima trocam de valor por tema porque precisam ser legíveis como ponto e como texto sobre `--papel`, e a capa não é nenhuma das duas coisas — é um CAMPO, com texto claro por cima. Medido na época: `#fdf6ef` sobre as matizes claras dá 5,33–7,54:1; sobre as claras do tema escuro, 2,28. O que mudou é que a capa deixou de ser a única cara do objeto. Com a lombada, o mesmo livro aparece nas duas vistas — de pé na prateleira, deitado na grade —, e **duas cores para o mesmo livro não é coleção, é coincidência**: na grade a capa saía num magenta claro e na prateleira num bordô fundo (relato do Yuri, 02/09, com as duas telas lado a lado). A cor do objeto passou a ser uma só, a `--lombada-*` logo abaixo. Estes ficam declarados como valor de reserva do `var()` da capa — uma obra sem `--lombada` (marcação antiga em cache) cai neles em vez de cair no cinza. */ --t-cheio-cyber: #2f6d63; --t-cheio-arq: #6b4a8c; --t-cheio-cristao: #33538f; --t-cheio-canone: #83306b; --t-cheio-geral: #5c6b52; /* ── A LOMBADA da estante: a mesma matiz, no registro de tinta (02/09) ─── A estante deixou de ser uma grade de capas em campo cheio e passou a ser a lombada de pé numa prateleira — e a capa virou detalhe de foco, uma por tela, na coluna da direita. Cinco tintas fundas (L~20%, croma baixo) nas MESMAS matizes dos `--t-cheio-*` acima: magenta 317°, petróleo 170°, ameixa 270°, azul-noite 219°, oliva 96°. Elas moram no `:root` e não num bloco de tema pela razão que o comentário de cima já fixa e que aqui fica ainda mais literal: um livro na prateleira não muda de cor quando se apaga a luz da sala. Medido, texto sobre as cinco: título `--sobre-lombada` dá 9,88–11,33:1; o autor, que é o mesmo branco esmaecido, foi de 60% para **65%** porque a 60% o pior caso (petróleo) media 4,67:1 — passava o piso de 4.5 e raspava a mira de 4.7 da casa. A 65% o pior caso é 5,15:1. Texto miúdo não afrouxa piso por ser miúdo; ele sobe a opacidade. `--sobre-lombada` é cravado e não vem de `--sobre-acento`: é o papel da lombada, e tem de ser o MESMO sobre as cinco matizes — a mesma razão que o `#fdf6ef` da capa cega já registra dois blocos abaixo. */ --lombada-canone: #4a2038; --lombada-cyber: #1f3d38; --lombada-arq: #3a2a4c; --lombada-cristao: #23304a; --lombada-geral: #333a2c; --sobre-lombada: #f2eae0; /* A sombra da lombada é PRÓPRIA, e não `--sombra-erguida`: aquela é de objeto pairando sobre a mesa (dois degraus, deslocamento negativo em X pela `--luz-x`), e um livro apoiado na tábua não paira — ele encosta. Y positivo, luz alta, uma camada só. */ --sombra-lombada: 3px 8px 16px rgba(34,33,29,.26); /* A tábua da prateleira. Não é `--papel-elev-*`: aquilo é papel, e isto é madeira vista de canto — 9px de altura, o brilho de cima e a sombra projetada logo abaixo. Vive no `:root` pela mesma razão das lombadas. */ --tabua-1: #d3cabb; --tabua-2: #b6ab97; /* ── A tábua MUDA por tema, e a lombada não (visto na captura de 02/09) ── Parece contradizer a regra do parágrafo acima, e não contradiz — separa duas coisas que a palavra «objeto» juntava. O LIVRO é objeto: a série tem de ser reconhecível, e um livro não muda de cor quando se apaga a luz da sala. A tábua é o MÓVEL, e móvel em sala escura está na penumbra. Sem isto, no tema escuro a prateleira vira a coisa mais clara da tela — mais clara que os livros que ela sustenta —, e o olho vai para o suporte em vez de ir para o acervo. Foi o que a captura mostrou, e não havia medição que pegasse: contraste de superfície contra superfície não tem piso, tem juízo. */ /* ── `--perigo`: quinta família de cor, e a razão de nascer é a revisão final medindo `#d1495b` cravado em nove lugares, 3,38–4,29:1 contra o fundo real — hex fixo é invisível para o harness de contraste, que lê TOKEN, não literal (`contraste.mjs:tokens`), então nada aqui tinha como reprovar sozinho antes de chegar ao aparelho. Claro e sépia dividem o mesmo valor — `--papel-elev` e `--regra` dos dois temas são vizinhos de arredondamento (mesma razão do núcleo ter unificado os dois), então a mesma cor passa nos dois com a mesma folga. Escurecido de `#d1495b` (L 55,3%) para `#b42e3f` (L 44,3%), mesmo hue/saturação — é vermelho mais fundo, não vermelho diferente. Isso resolve as quatro superfícies de TEXTO onde a revisão media abaixo de 4.5:1 (`#acoes .perigo` sobre `--papel-elev`: 4,29→6,07:1; `.redondo.excluir:hover` idem; `.aviso-excluir`, texto corrido, idem; `.destaque .x:hover` sobre `--regra`: 3,37→4,77:1) e a pior das duas superfícies "armadas", onde o texto some sobre o próprio fundo tingido de si mesmo (`.redondo.excluir.armado`: 3,58→4,88:1). Mirado ≥4.7:1 em toda superfície, não 4.5 raspado — a mesma folga que o núcleo já usa nos ajustes de `--tenue`. As duas superfícies que são só MARCA (o tingido de fundo de `.armada`/ `.armado`, 14–16% de mix sobre `--papel-elev`) não têm piso próprio — não são a única pista de nada, o texto e a borda ao lado já carregam a informação — e viram token pela mesma razão de qualquer literal: consistência de tema, não uma medição que precisavam passar. 2026-08-21 — o acento entrou no vermelho, e `--perigo` teve de se afastar. **A separação não é de matiz — é de profundidade e croma**, e a escolha foi forçada pela aritmética: `#b42e3f` já media 4,708:1 no pior caso (`.destaque .x:hover` sobre `--regra`), ou seja, já estava no TETO de claridade que o piso de 4.5 permite. Clarear não era uma opção disponível; o que sobrava era croma. `#b81028` mantém a mesma profundidade e sobe a saturação de 59% para 84% (croma 168 contra os 112 do acento). Contra o oxblood do acento — que é fundo, apagado e lido como TINTA — este é claro, quente e lido como ALARME. Os dois vizinhos de matiz, separados por tudo o mais. Efeito colateral, e favorável: toda medição do teste SOBE. `--papel-elev` 6,07→6,58:1 · `--regra` 4,77→5,17:1 · armado 14% 4,71→5,14:1 · armada 16% 4,71→4,95:1. O pior caso saiu de raspar o piso (4,708) para 4,95. */ --perigo: #b81028; } [data-entrelinha="compacta"] { --leading: 1.45; } [data-entrelinha="normal"] { --leading: 1.6; } [data-entrelinha="arejada"] { --leading: 1.75; } [data-largura="estreita"] { --medida-base: 31em; } [data-largura="media"] { --medida-base: 34.5em; } [data-largura="larga"] { --medida-base: 38em; } [data-fonte="literata"] { --corpo: var(--serif); } [data-fonte="source-serif"] { --corpo: var(--serif-leitura); } [data-fonte="inter"] { --corpo: var(--sans); } [data-fonte="charter"] { --corpo: var(--serif-charter); } /* ── Espaçamento para dislexia (Bloco J2, `data-espacamento`) ────────────── Zorzi et al., PNAS 2012: espaço extra entre as letras deu ~20% mais velocidade de leitura e METADE dos erros em crianças disléxicas — sem treino nenhum, só a tipografia mudando debaixo do mesmo texto. É o único ajuste deste arquivo com efeito medido em ensaio clínico, e é exatamente por isso que ele entra como OPÇÃO e não como padrão: o mesmo trabalho não achou ganho em leitor típico, e `normal` tem de continuar sendo byte a byte a tipografia que o Bloco B validou no iPad. Ajuste que ajuda um grupo e custa a todos os outros não vira padrão; vira interruptor. ── Os dois andam JUNTOS, e é aqui que se erra ───────────────────────────── Subir `letter-spacing` sozinho PIORA a leitura, e a razão é estrutural: as letras de duas palavras vizinhas passam a ficar tão distantes entre si quanto as letras de dentro de uma palavra, e a fronteira de palavra — que é o que o olho usa para segmentar a linha — deixa de existir. O que o ensaio mediu foi espaço extra COM a palavra ainda coesa. Daí `word-spacing` crescer 3× o `letter-spacing`, e não o mesmo tanto: manter a razão entre os dois é o ganho; igualá-la seria trocar um problema de leitura por outro. ── A medida da coluna é compensada, e a conta está aqui ──────────────────── A 02 §2.3 fixa 62–72 caracteres por linha, e o protótipo mediu o avanço médio do caractere em **0,486em** (é o que dá as três larguras declaradas acima: 31em≈65ch, 34.5em≈71ch, 38em≈78ch). Espaçar sem mexer na medida encolheria a linha em ~16% de caracteres — 71 viraria 60, ABAIXO do piso —, e o ajuste que existe para facilitar a leitura cobraria de volta em salto de linha o que deu em legibilidade de letra. O avanço por caractere com o espaçamento ligado: 0,486em (base) + 0,06em (letter-spacing, que incide em todo caractere) + 0,18em ÷ 5,96 (word-spacing, diluído pela palavra do português: 4,96 letras + 1 espaço = 5,96 caracteres — contado em 2.990 palavras de prosa da própria spec, não estimado) = 0,576em → fator 1,19 `--fator-espaco` multiplica `--medida-base`, então a compensação alcança as três larguras sem repetir número nenhum, e uma quarta largura que nasça amanhã já nasce compensada. É a diferença entre um invariante e três constantes que por acaso combinam hoje. */ [data-espacamento="arejado"] { --fator-espaco: 1.19; } [data-espacamento="arejado"] .prosa { letter-spacing: .06em; word-spacing: .18em; } /* O bloco de código é a exceção, e não por gosto: dentro de `
` o
   alinhamento de coluna carrega informação (saída de terminal, diff, tabela
   ASCII), e `word-spacing` desalinha tudo o que tem mais de um espaço seguido.
   `` inline fica espaçado junto com a frase em que vive — ali não há
   coluna a preservar, e destoar do texto ao redor é que seria o defeito. */
[data-espacamento="arejado"] .prosa pre { letter-spacing: normal; word-spacing: normal; }

/* ── O acento é RUBRICA · CARMESIM · PÚRPURA  (02 §3, direção Câmara) ───────
   2026-08-21 — o azul-noite saiu. Ele fora fechado em 2026-08-02 contra
   índigo, ametista e verde-petróleo; a ametista `#6a3f86`/`#c294dd` que
   aquela rodada rejeitou é, com dois pontos de diferença, o que hoje veste o
   tema escuro. Os rejeitados de então ficam registrados, agora como
   histórico e não como alternativa viva: índigo `#3f3d8f`/`#9a97e0`,
   petróleo `#2f6d63`/`#6fb3a5`, azul-noite `#26436e`/`#8fb3dd`.

   A cor nova é a do ofício que dá nome à fundação (ver a nota de paleta em
   `nucleo.css`): a **rubrica** do escriba no claro, o **carmesim** de
   quermes no sépia, a **púrpura** do codex purpureus no escuro. O valor é o
   mesmo de `--foco` do núcleo nos três temas — dois tokens, um valor,
   porque no Leitor o anel de foco e o acento do app são a mesma cor da casa
   e sempre foram (antes disto eram `#2b4c85` e `#26436e`, vizinhos de
   arredondamento fingindo ser dois).

   **O acento não colide com o rosa de destaque**, e a razão não é a matiz —
   as duas são avermelhadas. É a função e a saturação: o destaque é um
   pigmento dessaturado que vive POR BAIXO do texto; o acento é um tom fundo
   e saturado que vive no cromo. Nunca aparecem na mesma camada — e há teste
   que mede `--acento` sobre os quatro `--hl-*` justamente porque `.prosa a`
   pode receber marcação por baixo (medido: 4,96–6,43:1 no claro).

   A tensão papel quente × acento fundo continua deliberada: é ela que faz o
   acento parecer tinta sobre papel em vez de interface colorida.

   **`--sobre-acento` não é cosmético — é conserto de defeito.** O botão
   primário escrevia `#fff` sobre `var(--acento)`, e no tema escuro o acento é
   **claro**: dava ~2:1. O token existe para que ninguém volte a assumir
   branco, e há teste que falha se alguém voltar.

   **`--tenue` é informação, não decoração**: ele carrega a linha de crédito
   do item (fonte · minutos · data) e o rótulo da barra de navegação. Por isso
   responde ao 4.5:1 como qualquer outro texto — contra ~6.8:1 do `--tinta-2`.
   Um terceiro cinza "decorativo" a 3:1 é o defeito que a primeira versão dos
   mockups tinha.

   **O valor do escuro diverge do mockup, e a divergência é medida.** Lá o
   `--tenue` era `#83807b`, verificado contra `--papel` — e passava, com 4.56:1.
   Mas neste app ele mora **dentro do cartão**, sobre `--papel-elev`, que no tema
   escuro é MAIS CLARO que o papel: ali o mesmo valor caía para **4.19:1**. O
   mockup não pegou porque a tela onde o crédito do item aparece é a única em
   que o fundo dele não é `--papel`. Corrigido para `#8b8883` (bg 5.08:1, elev
   4.67:1), e há teste que confere as duas superfícies. */
/* ── O acompanhamento da voz saiu do `--acento`  (2026-08-26) ───────────────
   Até aqui as duas regras de `::highlight()` — a faixa da frase e a palavra
   corrente, lá embaixo — pintavam com `var(--acento)`. O empréstimo passou
   despercebido por meses porque o acento era vermelho no claro e no sépia
   enquanto o pigmento padrão do marca-texto é roxo: duas famílias de matiz,
   nenhuma colisão possível. Em 21/08 o acento do escuro virou púrpura, e o
   acompanhamento foi junto — **três coisas na mesma família** naquele tema
   (destaque `#42305c`, faixa de parágrafo e palavra), sem pista de cor para
   separá-las.

   O que fecha a questão é que **contraste nunca foi a pergunta ali**. Púrpura
   clara sobre púrpura escura mede 4,9:1 — passa todos os pisos deste arquivo,
   com folga, e ainda assim confunde. O que colidiu foi a MATIZ, e nenhum
   teste media matiz entre estas duas famílias. Por isso o conserto tem duas
   metades: os tokens abaixo, e um guarda de matiz em `bimodal-css.test.mjs`.

   `--acento` é cor de CROMO — link, botão primário, chip ativo, aba corrente,
   anel de foco, 65 usos neste arquivo. O acompanhamento é cor da CAMADA DE
   LEITURA, e divide superfície com o marca-texto. São perguntas diferentes, e
   um token só não podia responder às duas sem que a resposta de uma amarrasse
   a outra: mexer no acompanhamento do escuro exigiria repintar o app inteiro.

   ── Quem é âncora e quem carrega a identidade do tema ─────────────────────
   A divisão de papéis foi decidida junto, e ela é o que impede a colisão de
   voltar sob outro nome: **o marca-texto é a âncora** — fica na família
   amarela nos três temas, com o valor por tema que ele já tinha
   (`#eed88a` · `#ecd07a` · `#463911`, hue 45–47°, ver `--hl-amarelo`) — e **o
   acompanhamento é o que muda**, uma cor por tema. O padrão voltou a ser o
   amarelo em `motor.mjs` (`CORES[0]`) pela mesma decisão; a nota de lá conta o
   resto.

   ── A voz é ACROMÁTICA, e isso foi validado no olho, não deduzido ──────────
   As três cores foram escolhidas por Yuri numa página de amostras que punha
   nove candidatas sobre o papel de cada tema, com os três níveis na mesma
   frase (`C02 Claude/Output/2026-08-26 — Leitor — acompanhamento de
   leitura`). Havia saturadas na mesa em todos os temas — carmesim, verdete,
   azul-noite —, e as três escolhidas são **neutras**. Vale escrever a regra
   que saiu daí, porque ela é melhor do que a que entrou:

   **A camada de leitura tem uma cor só, e ela é do marca-texto.** O amarelo é
   o único pigmento saturado que a página recebe; a voz passando é um VÉU
   acromático. Isso dá ao olho um critério que não depende de comparar matiz —
   o que tem cor é decisão que fica, o que é cinza é a voz que passa —, e é
   uma distinção mais forte do que "amarelo contra verde", porque sobrevive a
   quem enxerga cor de outro jeito.

   O corolário derrubou a primeira escolha desta rodada, e fica registrado: com
   a âncora amarela, **o acompanhamento não podia ser dourado**. O ouro de
   iluminura `#d8b25a` (hue 41,9°) foi escolhido enquanto a âncora ainda era o
   roxo, e mede 3,4° do ocre `#463911` do escuro — a mesma colisão de hoje,
   trocada de família. Caiu antes de existir.

   Um valor por tema. São três cinzas, e cada um pende para um lado diferente:
   · claro  `#454a52` — ardósia de lápide, 8,41:1 contra o papel, croma 5%.
     Pende para o frio sobre papel quente. Aqui o acento (a rubrica `#8c1c22`)
     já é o vermelho da casa: uma segunda cor saturada brigaria com ele.
   · sépia  `#4a3f52` — ardósia arroxeada, 8,18:1, croma 7,5%. É o cinza que
     pende para a púrpura, e sobre papel rosa-velho ele lê como sombra do
     próprio papel. O carmesim `#8e1233` estava na mesa e foi visto lado a
     lado: perdeu por ser um segundo vermelho numa página que já tem o acento
     em carmesim.
   · escuro `#b0aca2` — cinza-osso, 7,91:1, croma 5,5%. O único que pende para
     o quente, e sobre papel frio é isso que o separa. Atenção para quem for
     medir: a matiz nominal dele é 43°, a **2,4° do ocre** do marca-texto — a
     separação aqui não é de matiz, é de CROMA (5,5% contra 21%) e de valor. O
     guarda em `bimodal-css.test.mjs` sabe disso e mede as duas coisas.

   ── `--leitura-forca`, e a outra metade do "difícil diferenciar" ───────────
   A faixa da frase é a cor da palavra enfraquecida, e a força era **12%
   cravada nos três temas**. Sobre `#16171a` isso dá 1,25:1 de uma cor clara
   sobre fundo quase preto — piso de 1,2:1 raspado, véu nenhum. Era a parte do
   defeito que não tinha nada a ver com matiz: no escuro a faixa mal existia, e
   o que sobrava para o olho eram duas coisas roxas em vez de três níveis.
   **20%** devolve 1,46:1 ali.

   Os temas claros também subiram, e por uma razão que só apareceu ao medir as
   cores escolhidas: com os cinzas, 12% valia 1,209:1 no claro e **1,205:1 no
   sépia** — acima do piso pelo terceiro decimal, que neste projeto conta como
   reprovado (a mesma régua que reprovou o `--tenue` do núcleo por 0,22% de
   margem). **14%** devolve 1,245:1 e 1,253:1, sem tocar em cor nenhuma: a
   folga se compra na força, que é o parâmetro que não foi validado no olho.
   O vermelho antigo tinha 1,232:1 no claro e não sofria disso — cinza a igual
   alpha rende menos contraste que pigmento, e é a conta que a troca de paleta
   trouxe junto.

   Nada disto é novo neste arquivo: `--hl-fantasma` faz o movimento idêntico e
   pela mesma razão (22% no claro e no sépia, 48% no escuro — ver a nota dele
   adiante). A força virou token pelo mesmo motivo pelo qual a cor virou: um
   literal na regra obriga os três temas a concordarem num número que só serve
   a um. */
/* ── `--foco` é declarado AQUI, e essa é uma fronteira nova  (2026-09-01) ────
   O token mora no `nucleo.css`, que é do Scriptorium e vale para os quatro
   apps — e lá ele valia exatamente os hex do acento do Leitor, porque o anel
   de foco e o cromo sempre foram a mesma cor nesta pele.

   Com a brasa isso deixa de ser verdade sozinho: mover `--acento` sem mover
   `--foco` deixaria um anel carmim em volta de um botão brasa. E mover
   `--foco` no núcleo alcançaria Tabula, Codex e Memoria — os dois últimos
   nem declaram acento próprio, eles pintam TEXTO com `--foco`, e o README do
   Scriptorium avisa que trocá-lo olhando só o teste de lá "passa verde e
   quebra dois apps".

   Então a pele redeclara o token para si. O núcleo não se toca, e o piso de
   3:1 como anel que `nucleo.test.mjs` mede continua medido lá — aqui a brasa
   passa com folga nos três temas (8,33 / 7,82 / 8,46 contra o papel). */
[data-tema="claro"]  { --acento:#832f0d; --sobre-acento:#ffffff; --foco:#832f0d;
  /* ── As duas bordas FINAS da rodada «grafite, lombada, prateleira» ────────
     `--papel-borda-fina` é o contorno de uma superfície que já se separa da
     mesa pela SOMBRA — cartão da lista, cartão do destaque, a caixa da busca,
     a cápsula flutuante. Ele não responde ao piso de 3:1 e não deve: o piso é
     para borda que é a ÚNICA pista de controle, e em nenhum destes ela é (a
     sombra é a pista; no cartão, a lombada também).

     `--aro-fino` é o aro do controle secundário — os círculos de ação de 29px
     no cartão e os de 34px na coluna da capa, e o chip de tema em repouso.
     Mesma dispensa e mesma razão: o glifo do círculo é `--tenue` (4,5:1+) e o
     chip carrega ponto colorido e rótulo. Onde a borda for tudo o que há, o
     token continua sendo `--borda-controle`, que é o que tem piso medido. */
  --papel-borda-fina: rgba(34,33,29,.07); --aro-fino: rgba(34,33,29,.15);
  /* ── A pele redeclara o grafite, e por que ela pode  (02/09) ──────────────
     Os `--cromo-*` do núcleo são os valores do tema claro, e é ele quem manda:
     o cromo não muda por tema (a nota no `nucleo.css` diz por quê). Os dois
     ajustes abaixo não desfazem isso — são o mesmo grafite deslocado um ponto,
     e existem por razões locais desta pele.

     Fica em TOKEN e não num `background` literal por dentro da media query
     porque o harness de contraste lê token, nunca literal: um gradiente
     cravado em regra é uma superfície que nenhum teste consegue medir, e a
     bateria de `cromo.test.mjs` precisa dos três temas. Mesmo movimento que
     `--foco` fez em 2026-09-01, e pela mesma razão. */
  --hl-fantasma: 22%;
  --leitura:#454a52; --sobre-leitura:#ffffff; --leitura-forca: 14%;
  --progresso:#26436e; }
[data-tema="sepia"]  { --acento:#7c2c0b; --sobre-acento:#ffffff; --foco:#7c2c0b;
  --papel-borda-fina: rgba(46,37,25,.07); --aro-fino: rgba(46,37,25,.16);
  /* Um ponto mais quente, para o grafite não brigar com o papel rosado. */
  --cromo-1:#2a2b2c; --cromo-2:#1e1d1d;
  /* Um passo mais quente, como o resto do sépia. */
  --tabua-1: #d6c8b2; --tabua-2: #b9a88e;
  --hl-fantasma: 22%;
  --leitura:#4a3f52; --sobre-leitura:#ffffff; --leitura-forca: 14%;
  --progresso:#2b4468;
  /* ── O amarelo do sépia é próprio, e foi o papel quente que obrigou ───────
     O `#f7e08a` que o claro usa ficava a **1.188:1** contra o papel novo
     (`#f8f3e9`) — abaixo do piso de 1.2:1 que a §5.1 registra, e o teste
     reprovou na hora. Não é caso de afrouxar o piso: um destaque que se
     confunde com a página é um destaque que não se acha ao reler, e o piso
     existe porque isso já aconteceu.

     Amarelo sobre papel amarelado é o par mais apertado que existe aqui, e ele
     já era o mais apertado no papel antigo (1.220:1). Esta é a variante por
     tema que a §5.1 sempre previu, aplicada onde a aritmética a exigiu:
     `#f2d36c` dá 1.327:1 contra a página e 11.56:1 de texto por cima.

     As outras três não precisaram: verde 1.41, rosa 1.61, azul 1.57. E
     `--vivo-amarelo` **não** muda — a amostra do botão precisa ser a mesma
     bolinha em todo tema, senão "a amarela" deixa de ser uma coisa só.

     2026-08-21 — reajustado para `#ecd07a` junto com a descida dos quatro ao
     registro do pigmento (ver `:root`): contra o papel do sépia dá 1,31:1,
     e o texto por cima segue em 10,10:1. */
  --hl-amarelo: #ecd07a;
}

/* ── O tema escuro precisa de OUTRA cor, não da mesma esmaecida ────────────
   Um pastel claro por baixo de texto claro é ilegível por construção, e
   esmaecer o `` inteiro só piora: `opacity` no elemento apaga o texto
   junto com o fundo. A saída é a que a §5.1 sempre pediu — **variante por
   tema**: no escuro, a mesma matiz vira um tom fundo e saturado, sobre o qual
   o texto claro do tema segue acima de 4.5:1, medido cor a cor.

   As matizes continuam distinguíveis entre si, que é o que faz a semântica das
   quatro cores (importante / vale citar / suspeito / estrutural) sobreviver. */
[data-tema="escuro"] {
  --acento:#f39d7a;
  /* Aqui o acento é CLARO. Branco por cima dele daria ~2:1 — quem escreve
     sobre o acento pergunta ao token, e o token responde com o papel. */
  --sobre-acento:#16171a;
  /* Mesma razão do bloco claro: a pele redeclara `--foco` para não deixar o
     anel numa cor e o cromo em outra. Ver a nota lá em cima. */
  --foco:#f39d7a;
  --papel-borda-fina: rgba(255,255,255,.06); --aro-fino: rgba(255,255,255,.16);
  /* Aqui a razão NÃO é cosmética: a mesa do escuro é `#14171a`, e o cromo tem
     de ficar um degrau mais CLARO que ela. Uma lateral mais funda que a mesa
     deixa de ser objeto pousado e vira buraco na tela. A borda também sobe um
     ponto, pelo mesmo motivo: sobre fundo escuro, .07 de branco some. */
  --cromo-1:#23282d; --cromo-2:#191c20; --cromo-borda:rgba(255,255,255,.08);
  /* A madeira na penumbra — ver a nota da tábua no `:root`. */
  --tabua-1: #3a3f45; --tabua-2: #262a30;
  /* O tema que obrigou a família a nascer — história e medições na nota
     "── O acompanhamento da voz saiu do `--acento`" acima. O cinza-osso é
     claro como o acento, então quem escreve por cima responde igual: o papel. */
  --leitura:#b0aca2; --sobre-leitura:#16171a; --leitura-forca: 20%;
  --progresso:#8fb3dd;
  /* Escurecidos nesta rodada (Onda 3, §4): o guarda de contraste que só
     testava `--tinta` sobre `--hl-*` ganhou `--acento` (`.prosa a` também
     é destacável — mesmo mecanismo, mesmo risco) e `--acento` claro sobre
     estes quatro fundos escuros dava 3,98–4,24:1, abaixo do piso. O
     conserto é aqui, não em `--acento`: o token do acento é usado em
     dezenas de outras superfícies já medidas e passando (links fora do
     destaque, chips ativos, foco), e mexer nele reabriria toda essa
     medição por um problema que só existe embaixo de quatro cores
     específicas. `--tinta` tinha folga de sobra para ceder (6,7–7,1:1
     antes de escurecer, ver `nucleo.test.mjs`) — escurecer o hl não a
     derruba, só cresce a margem. Mirado ≥4.7:1 contra `--acento`,
     preservando ≥4.5:1 contra `--tinta`: amarelo 3,98→4,82:1 (tinta
     6,69→8,09:1), verde 4,22→4,79:1 (tinta 7,09→8,04:1), rosa 4,16→4,80:1
     (tinta 6,98→8,06:1), azul 4,24→4,72:1 (tinta 7,13→7,92:1).

     2026-08-21 — os quatro descem mais um passo, pela MESMA aritmética e por
     um motivo novo: o acento deixou de ser o azul claro `#8fb3dd` e virou a
     púrpura `#c19ae6`, que é mais clara, e por isso mais apertada por cima
     de um fundo escuro. Com os valores da Onda 3 o par `--acento` × `--hl-*`
     media 4,59–4,70:1 — passava o piso de 4.5 raspando, sem a folga que este
     projeto exige. Escurecidos para mirar ≥4,8:1 contra o acento: amarelo
     4,64→4,87 · verde 4,62→4,82 · rosa 4,70→4,90 · azul 4,59→4,88. O par
     contra `--tinta` só cresce (8,66–8,81:1). */
  --hl-roxo:    #42305c;  --hl-amarelo: #463911;
  --hl-rosa:    #632439;  --hl-azul:    #1f3c5a;
  /* As matizes de cluster trocam de VALOR, nunca de matiz: no escuro elas
     precisam ser claras para continuarem legíveis sobre `--papel`, e continuam
     sendo a mesma cor do mesmo tema de estudo.

     2026-09-01 — refeitas junto com as claras (ver o bloco da brasa em
     `:root`). Cada uma é a matiz NOVA no mesmo registro de L e S que a irmã
     escura tinha antes: a regra deste bloco é "troca de valor, nunca de
     matiz", e mover a matiz em cima sem mover aqui embaixo a quebraria — foi
     exatamente o que o teste «NENHUM CLUSTER OCUPA A MATIZ DO ACENTO» pegou,
     com `--t-cristao` a 25° da brasa no escuro enquanto a versão clara já
     estava a 158°.

     A exceção é `--t-cristao`, que precisou subir de L 56,5% para 67%: no
     azul-noite o valor herdado dava 4,42:1 contra `--papel`, fora do registro
     dos irmãos (6,05–8,89). A 67% dá 6,57:1 e volta para dentro da família.

     Contraste sobre `--papel` (#16171a): cyber 6,06 · arq 6,37 ·
     cristão 6,57 · cânone 6,67 · geral 7,34. */
  --t-cyber: #5fa297;  --t-arq:    #b585e6;  --t-cristao: #7d9dd9;
  --t-canone: #c48db4; --t-geral:  #a1a89d;
  /* O fantasma do ajuste precisa de mais força aqui: 22% de um tom já escuro,
     sobre fundo escuro, some. */
  --hl-fantasma: 48%;
  /* Medido depois de escurecer os quatro `--hl-*` acima (Onda 3, correção):
     o fantasma (48% de mistura sobre `--papel`) não foi remedido junto, e a
     razão contra a página caiu de 1,310–1,351 (hl-* antigo) para
     1,240–1,260 (amarelo 1,253 / verde 1,258 / rosa 1,240 / azul 1,260) —
     ainda acima do piso de 1,2:1 que a 03-destaques §5.1 registra, mas com
     folga de 3–5% em vez dos 9–12% de antes.

     Decisão: não mexer. A diferença para o caso do `--tenue` (nucleo.css,
     onde 0,22–0,7% de folga foi tratado como reprovação) é dupla: 1,2:1 é
     um piso DESTE projeto para a identificabilidade da marcação — não é o
     piso normativo de texto da WCAG que o `--tenue` precisa cumprir sem
     alternativa —, e o fantasma nunca é a ÚNICA pista: `.editando` sempre
     vem com `outline: 1px dashed var(--acento)` ao lado (duas regras
     abaixo), que não depende desta cor nem deste contraste para marcar onde
     o destaque em ajuste começa e termina. O `--tenue` carrega informação
     sozinho, em texto lido a todo momento; o fantasma é um estado
     transitório — só existe enquanto o dedo arrasta uma alça — e tem reforço
     redundante ao lado. A mesma folga apertada que era risco real num é
     folga suficiente no outro. */
  /* --perigo clareia no escuro, mesma lógica de `--acento`: o fundo é que
     ficou escuro, então quem carrega a cor de perigo precisa ficar clara
     para continuar lendo acima do piso — vermelho profundo sobre fundo
     quase preto é a MESMA aritmética que branco sobre acento, invertida.
     `#e08692`, mesmo hue/saturação do claro, L 70,3%. Sobre `--papel-elev`
     escuro dá 6,28:1 (era 3,78); sobre `--regra` escuro (hover do ✕ de
     `.destaque`) 5,10:1 (era 3,07 — o pior caso do tema, por isso decide o
     valor); sobre o próprio fundo "armado" (tingido de si mesmo a 14–16%)
     4,84–5,02:1 (era 3,22–3,30 — correção: o relatório anterior citava
     3,30–3,58, que troca o pior caso do escuro por 3,58, o pior caso do
     CLARO; o par certo do escuro antigo é 3,22–3,30).

     2026-08-21 — `#f27f92`, um passo mais claro e mais saturado, acompanhando
     o `#b81028` do claro. Aqui não havia colisão a resolver (o acento do
     escuro é púrpura), mas a cor de perigo é uma só ideia nos três temas e
     não faria sentido ficar dois passos atrás no escuro. Todas as medições
     sobem: `--papel-elev` 6,28→6,46:1 · `--regra` 5,10→5,25:1 · armado
     14–16% 4,84–5,02→4,97–5,16:1. */
  --perigo: #f27f92;
}

/* O reset (box-sizing, -webkit-text-size-adjust, margin/font-smoothing do
   body) e o `@media (prefers-reduced-motion)` subiram ao núcleo (Task 9). O
   que fica é só o que é do Leitor: papel/tinta vêm do tema, e a tipografia de
   leitura (`--corpo`, `--size`, `--leading`) não existe na fundação.

   ── `--tela`, não `--papel` (Onda 3) ────────────────────────────────────
   O corpo é a MESA, não a folha — é o que faz o claro do Leitor bater com o
   claro do Tabula (os dois são vistas do mesmo mundo: papel sobre
   escrivaninha). A folha ganhou existência própria em `.artigo` (ver
   comentário lá): só a tela de leitura tem folha, então só ela pinta
   `--papel`; toda superfície de serviço (inbox, destaques, busca, entrada)
   fica direto sobre a mesa, como sempre foi visualmente — a diferença é
   que agora a mesa tem um token que é dela, e não emprestado do papel. */
body {
  background: var(--tela); color: var(--tinta);
  font-family: var(--corpo); font-size: var(--size); line-height: var(--leading);
  transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CROMO GLOBAL — cabeçalho que rola, navegação embaixo  (L-66, 02 §4, D1)
   ═══════════════════════════════════════════════════════════════════════════
   O `#topo` fixo de 52px saiu. Duas razões, e a segunda é a que decide:

   1. O alcance do polegar em retrato e do dedo apoiado em paisagem está
      **embaixo**. Uma navegação no alto do iPad é uma navegação que se alcança
      levantando a mão do aparelho.
   2. O alto da tela é onde o olho **começa a ler**. O cabeçalho fixo cobrava
      aquela faixa em toda leitura, com `backdrop-filter` permanente por cima
      do texto — e o blur estava ali para disfarçar o que ele mesmo criava.

   No lugar dele, duas peças com papéis distintos:

   - `.cabeca` — **no fluxo**, rola com o conteúdo e some sozinha. Leva a
     identidade do app e os dois controles que não são navegação (`Aa` e sair).
   - `#barra-nav` — fixa embaixo, em vidro, um destino por alvo de 52px.

   **A barra some pelo mesmo `data-cromo` que escondia o `#topo`** — não por um
   mecanismo novo. É o que mantém vivo o gesto da L-53b (tocar no texto traz o
   cromo de volta): ele mexe num atributo do ``, e continua mexendo no
   mesmo. Inventar um segundo caminho aqui seria criar dois donos para "o cromo
   está visível?", que é como um deles fica para trás. E some **só na tela de
   artigo** — a regra é `body[data-leitura][data-cromo="oculto"]`, ver a
   seção do cromo adiante.
   ─────────────────────────────────────────────────────────────────────────── */

/* Altura reservada embaixo. Um token porque três coisas dependem dela — o
   fim do `main`, o botão da caneta e o aviso de diagnóstico —, e uma altura
   copiada em três lugares é uma altura que desalinha na primeira mudança. */
:root { --barra-h: calc(58px + env(safe-area-inset-bottom)); }

/* ── A base da coluna flutuante  (spec 14 §4.1) ─────────────────────────────
   A pílula do tempo mora ABAIXO da caneta, e abaixo da caneta não havia lugar:
   ela estava a 1rem da barra de navegação, e as duas aparecem no MESMO
   instante — o cromo visível mostra as duas ou esconde as duas. A faixa teve
   de ser aberta.

   `--tempo-h` é reservado SEMPRE, com pílula ou sem. Sem isso a caneta subiria
   e desceria a cada rolagem, e **controle que salta é pior que controle
   deslocado**: o polegar aprende uma posição, não uma fórmula. O custo é uma
   mudança única e permanente de ~28px, e o que a 02 §4 exige da caneta —
   "acima da barra inferior, para o dedo não acertar Destaques" — continua
   valendo com folga. */
/* `--bolha`/`--bolha-folga` (Bloco J4): a coluna nasceu com uma bolha e chegou
   a três, e cada degrau repetia "56px + .7rem" escrito à mão. Um número solto
   num degrau desalinha a coluna inteira em silêncio — nada quebra, os botões
   só deixam de se encaixar. */
:root {
  --tempo-h: 26px; --pilha-base: calc(var(--barra-h) + 1rem);
  /* 48px desde 01/09 (era 56). A coluna voltou a ter as SETE bolhas depois do
     rollback da gaveta, e sete de 56px cobrem o fim de muita linha no iPhone —
     foi o que fez a gaveta parecer necessária. Encolher 8px devolve ~15% da
     coluna sem tirar nada da tela, e 48 continua acima do `--alvo` de 44px que
     o núcleo exige de qualquer toque. Escolha de Yuri vendo as três medidas.

     Quem depende deste número: o `--degrau` abaixo (e portanto as sete
     posições), o recuo do `#velocidade-painel` e do painel de ajustes, e o
     corpo de texto das duas bolhas que carregam TEXTO em vez de glifo — a do
     progresso e a da velocidade, ambas ajustadas junto. */
  --bolha: 48px; --bolha-folga: .7rem;
  /* O DEGRAU da coluna — bolha mais folga, uma vez só. A coluna chegou a cinco
     bolhas no Bloco J7, e a corrente escrita à mão em cada uma já vinha
     repetindo "+ var(--bolha) + var(--bolha-folga)" quatro vezes na mais alta.
     Com o degrau, cada bolha declara a POSIÇÃO dela (`* 2`, `* 3`) em vez de
     recontar a coluna inteira, e mudar o diâmetro continua movendo as cinco
     juntas. */
  --degrau: calc(var(--bolha) + var(--bolha-folga));
  /* O primeiro degrau: acima da barra e da faixa reservada da pílula do tempo.
     Ele é a base de TODAS as bolhas, e por isso tem nome. */
  --pilha-0: calc(var(--pilha-base) + var(--tempo-h) + .5rem);

  /* ── AS DUAS CÁPSULAS  (02/09) ───────────────────────────────────────────
     `--bolha` e `--degrau` continuam vivos acima: eles regiam SETE posições e
     agora regem a base da pilha e a folga da pílula do tempo. Apagá-los
     levaria junto o `#tempo-leitura`, que é o que a nota da spec 14 §4.1
     protege.

     A geometria das cápsulas é declarada, e não somada à mão em cada regra,
     por uma razão concreta: dois painéis se alinham a itens do MEIO da pilha
     (o deslizante da velocidade e o sumário), e uma altura escrita à mão em
     três lugares desalinha na primeira mudança. */
  --capsula-l: 52px;
  --capsula-item: 48px;
  --capsula-anel: 52px;
  --capsula-item-texto: 50px;
  --capsula-gap: 14px;
  --capsula-x: 22px;
  /* A altura do «Seguir» tem nome porque é lida em DOIS lugares: o botão, lá
     embaixo, e a conta que centra a pilha no Mac. Escrita à mão nos dois, a
     primeira mudança desalinha a coluna sem quebrar nada visível. */
  --capsula-seguir-h: calc(var(--capsula-item-texto) + 10px);
}

/* ── A geometria das TRÊS cápsulas mora TODA no `body`  (04/09) ────────────
   Em 03/09 esta seção aprendeu, por um defeito de 128px, que **um `var()` é
   substituído no elemento em que a variável é declarada**: escrita no `:root`,
   uma soma congela os valores do `:root` e desce como número pronto, e a rota
   que redeclara uma das parcelas no `body` chega depois da conta já feita.
   A regra que ficou foi «derivada de token que alguma rota redeclara mora no
   mesmo elemento em que a rota o redeclara» — e a rodada de 04/09 a levou até
   o fim: **as parcelas também**. Altura de cápsula e soma da coluna vivem
   ambas aqui, e a escrivaninha redeclara o que muda sem precisar refazer as
   somas à mão. Um lugar só para errar, em vez de três que têm de concordar.

   Os `+ 2px` de cada altura são os dois FIOS da borda da cápsula (1px em cima
   e embaixo). Sem eles a altura declarada fica 2px menor que a real por
   cápsula, e o centramento do Mac erra por metade da soma.

   `--voz-bloco` é a cápsula da voz **mais o gap acima dela**, e vale zero
   quando ela não existe: um artigo sem narração não tem `⏸`, não tem `1,0×` e
   não tem `⇕`, e a coluna é de duas peças. Quem acende o atributo é
   `ligarOuvir` — ver `artigo.mjs`. */
body {
  --capsula-pagina-h: calc(var(--capsula-anel) + var(--capsula-item) + 2px);
  --capsula-voz-h: calc(var(--capsula-item) * 3 + 2px);
  --capsula-mao-h: calc(var(--capsula-item-texto) * 3 + 2px);
  --voz-bloco: 0px;
  --pilha-h: calc(var(--capsula-pagina-h) + var(--capsula-gap)
    + var(--voz-bloco) + var(--capsula-mao-h));

  /* Onde a BASE da pilha pousa: no modo barra é acima da barra e da pílula do
     tempo, como sempre foi; no Mac ela se centra — e se centra pela base,
     porque é pela base que a coluna é ancorada. Depois do primeiro arrasto
     quem manda é o valor guardado, que `pilha.mjs` escreve inline aqui. */
  --pilha-y: var(--pilha-0);

  /* As alturas a partir da base da pilha, para os dois painéis que nascem de
     um item do meio: o sumário (do anel do progresso) e o deslizante da
     velocidade. O `Aa` é o item de BAIXO da cápsula da página, e o anel está
     um item acima dele; o `1,0×` é o do meio da voz, um item acima da base
     dela. */
  --y-aa: calc(var(--capsula-mao-h) + var(--capsula-gap) + var(--voz-bloco));
  --y-progresso: calc(var(--y-aa) + var(--capsula-item));
  --y-velocidade: calc(var(--capsula-mao-h) + var(--capsula-gap) + var(--capsula-item));
}
body[data-voz] { --voz-bloco: calc(var(--capsula-voz-h) + var(--capsula-gap)); }

@media (min-width: 1100px) and (pointer: fine) {
  body { --pilha-y: calc(50% - var(--pilha-h) / 2); }
}

/* ── O vermelho que se lê SOBRE o cromo  (04/09) ───────────────────────────
   Irmão do `--cromo-acento` do núcleo, e pela mesma razão registrada lá: o
   cromo não muda por tema, então a tinta que escreve sobre ele também não.
   `--perigo` é `#b81028` no claro — vermelho de papel, escuro sobre escuro
   assim que o botão que o usa passou a ter campo grafite. Este é o `--perigo`
   do tema ESCURO, servido nos três.

   Mora na pele e não no `nucleo.css` porque o núcleo é do Scriptorium: editar
   a cópia que vive dentro do app é perder a edição na próxima sincronização. */
:root { --cromo-perigo: #f27f92; }

/* ── A pilha e as três cápsulas ───────────────────────────────────────────
   `pointer-events: none` na coluna e `auto` nas cápsulas: a coluna é uma faixa
   de 52px de largura sobre o texto, e sem isto ela roubaria o toque da prosa
   nas margens do que ela mesma não desenha.

   `overflow: hidden` na cápsula é o que faz o raio de 26px cortar o primeiro e
   o último item — sem ele, o realce de hover do item do topo escapa pela
   quina arredondada.

   ── O CROMO desceu para cá  (04/09) ─────────────────────────────────────
   A cápsula era papel elevado sobre papel: uma pastilha clara sobre a folha
   clara, separada dela por um fio. Passou a ser **o mesmo material da lateral
   e da barra** — o gradiente `--cromo-1 → --cromo-2`, grafite nos três temas.
   É a decisão de 02/09 aplicada ao resto do app: a coluna flutuante não é
   página, é ferramenta, e ferramenta se distingue da página pelo material, não
   por um filete.

   Com o campo escuro vem o resto do pacote daquela decisão: a tinta é
   `--cromo-tinta-2`, o realce é `--cromo-acento` (o acento do tema ESCURO, em
   qualquer tema) e a divisória é `--cromo-borda`. Um acento claro sobre
   grafite reprovaria medido, e a regra da casa é clarear a TINTA, nunca o
   campo. */
#pilha-leitura {
  position: fixed; right: var(--capsula-x); bottom: var(--pilha-y);
  z-index: 46; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--capsula-gap);
}
.capsula {
  pointer-events: auto;
  width: var(--capsula-l); flex: none;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--cromo-1), var(--cromo-2));
  border: 1px solid var(--cromo-borda);
  border-radius: 26px; box-shadow: var(--sombra-erguida); overflow: hidden;
  /* O arrasto da coluna (04/09): sem isto o Safari decide rolar a página no
     início do gesto, e o dedo que queria mover a pilha rola o artigo debaixo
     dela. A mesma armadilha do `touchstart` da caneta, e o mesmo remédio —
     dizer ao motor, ANTES do gesto, que esta superfície não é para rolar. */
  touch-action: none;
}
/* Enquanto a coluna está sendo arrastada, o cursor é o mesmo no documento
   inteiro: o ponteiro sai de cima da cápsula durante um gesto rápido, e um
   cursor que pisca entre a mão fechada e a seta faz o arrasto parecer ter
   terminado quando não terminou. */
body[data-arrastando-pilha] { cursor: grabbing; }
body[data-arrastando-pilha] .capsula > button { cursor: grabbing; }
/* A divisória entre itens, e o seletor merece nota: `:not([hidden]) ~
   :not([hidden])` dá a régua a todo item que tenha ALGUM irmão visível antes
   dele — que é exatamente «todos menos o primeiro visível». Com
   `:not(:first-child)` a régua nasceria no topo da cápsula sempre que o
   primeiro item estivesse escondido. */
.capsula > :not([hidden]) ~ :not([hidden]) {
  border-top: 1px solid var(--cromo-borda);
}
/* Uma cápsula sem nenhum item visível não pode desenhar uma pílula vazia.
   `:not(:has(...))` faz isso sem JavaScript, e o Safari o suporta desde 2023
   — se algum dia não suportar, o pior caso é uma pílula vazia, não um app
   quebrado.

   É esta regra que faz a cápsula da VOZ nascer inteira ou não nascer: os três
   itens dela seguem o mesmo sinal («este artigo tem narração?»), e quando ele
   é não, os três estão `hidden` e a peça se recolhe sozinha. */
.capsula:not(:has(> :not([hidden]))) { display: none; }
/* ── E fora da leitura a pilha INTEIRA não existe  (03/09) ─────────────────
   A regra acima testa o ATRIBUTO `hidden`. Só que, fora da leitura, os itens
   somem por `display: none` do CSS (`body:not([data-leitura]) …`), e um
   elemento assim continua casando com `:not([hidden])` — a cápsula
   sobrevivia ao teste e desenhava a si mesma sem nada dentro: uma pílula de
   52 px por 2, pairando sobre a inbox. «o que é essa barrinha branca?»

   Não dá para consertar isso alargando o `:has()`: CSS não pergunta pelo
   `display` computado de um filho. O conserto é dizer a verdade mais simples,
   que é a da rota — fora da leitura não há coluna nenhuma, e por isso ela não
   se desenha. A regra acima continua valendo DENTRO da leitura, onde a
   cápsula pode esvaziar por atributo. */
body:not([data-leitura]) #pilha-leitura { display: none; }
/* Os itens: mesma forma, alturas do desenho. Sem `border-radius` próprio (a
   cápsula corta), sem sombra (a cápsula tem a dela) e sem fundo (a cápsula é
   a superfície). É o que os faz parecer UMA peça em vez de três coladas. */
.capsula > button {
  width: var(--capsula-l); height: var(--capsula-item); min-height: 0;
  flex: none; border: 0; background: none; color: var(--cromo-tinta-2);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  position: relative;
  appearance: none; -webkit-appearance: none;
  font-family: var(--sans); line-height: 1;
}
.capsula > button:hover, .capsula > button:focus-visible { color: var(--cromo-acento); }
#capsula-mao > button { height: var(--capsula-item-texto); }

/* ═══ A COLUNA NO TELEFONE: A BARRA DO RODAPÉ  (14/09) ═══════════════════════
   «Olha o tanto que a interface do Leitor está ruim no iPhone» — a captura
   (440 × 956) mostrava a coluna de três cápsulas em cima da prosa: 56 px de
   cada linha por 428 px de altura, e na tela do estudo, com cinco cápsulas,
   26 das 30 linhas da tela. No telefone não há margem ao lado da prosa para
   uma coluna, e estreitar a prosa para abrir uma seria piorar o que já é
   escasso.

   A forma é a do Codex («Ilhas no telefone», 14/09), de propósito a mesma:
   abaixo de 40rem (`TELEFONE` em `pilha.mjs`, que escreve `data-arranjo` no
   ``), as cápsulas deitam numa fileira de borda a borda, colada em cima
   da barra de abas, no material dela, rolável na horizontal, com a pílula do
   tempo na ponta esquerda. As cápsulas viram GRUPOS — sem moldura própria,
   porque a barra é o fundo — separados por um fio. Nada muda de tamanho além
   do piso: todo item tem o `--alvo` de 44px. Na tela do estudo os itens não
   cabem na largura: os que passam ficam a um arrasto de lado, e a ordem põe
   a leitura primeiro (progresso, Aa, voz, mão), o estudo depois e a bancada
   por último.

   A barra NÃO segue o `data-cromo` — é o que o percentual exige («estou
   sentindo falta do percentual na tela», 01/09). Quando a barra de abas some
   ao rolar, esta desce ao chão com ela e passa a responder pela zona do
   indicador de início.

   Os seletores começam em `body[data-arranjo="barra"]` e por isso vencem as
   regras da coluna pela especificidade, não pela posição neste arquivo. */
body[data-arranjo="barra"] {
  /* A altura da fileira: o alvo mais o fio de cima. É o que a pílula do tempo,
     o fim do fluxo e os painéis ancorados na coluna precisam saber. */
  --fileira-h: calc(var(--alvo) + 1px);
  --pilha-y: calc(var(--barra-h) + var(--fileira-h));
  --pilha-0: calc(var(--pilha-y) + .5rem);
  /* Os painéis nasciam ao lado de itens do MEIO da coluna; deitada, todos os
     itens estão na mesma linha, e a âncora é a base da barra. */
  --y-aa: 0px; --y-progresso: 0px; --y-velocidade: 0px;
}
body[data-arranjo="barra"] #pilha-leitura {
  left: 0; right: 0; bottom: var(--barra-h);
  flex-direction: row; align-items: stretch; gap: 0;
  /* A ponta esquerda é da pílula do tempo, que é outra peça pendurada no
     corpo. */
  padding-inline: calc(env(safe-area-inset-left, 0px) + 3.6rem)
                  calc(env(safe-area-inset-right, 0px) + var(--alvo) + 1rem);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  /* Na coluna a faixa deixava o toque passar para a prosa; na barra não há
     prosa debaixo dela. */
  pointer-events: auto;
  background: linear-gradient(180deg, var(--cromo-1), var(--cromo-2));
  border-top: 1px solid var(--cromo-borda);
  transition: bottom var(--dur) var(--curva), padding-bottom var(--dur) var(--curva);
}
body[data-arranjo="barra"] #pilha-leitura::-webkit-scrollbar { display: none; }
/* A cápsula vira grupo: sem moldura própria (a barra É o fundo) e com
   `pan-x`, porque na coluna o `touch-action: none` existia para o arrasto
   vertical — aqui ele impediria o dedo de rolar a fileira. */
body[data-arranjo="barra"] .capsula {
  flex-direction: row; flex: none; width: auto; height: var(--alvo);
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  touch-action: pan-x;
}
body[data-arranjo="barra"] .capsula ~ .capsula {
  margin-inline-start: .25rem; padding-inline-start: .25rem;
  border-inline-start: 1px solid var(--cromo-borda);
}
/* A régua entre itens era horizontal na coluna; deitada, não há régua. */
body[data-arranjo="barra"] .capsula > :not([hidden]) ~ :not([hidden]) { border-top: 0; }
/* `:is()` e não uma lista de seletores: o teste da bolha do progresso lê o
   PRIMEIRO `#progresso-flutuante {` do arquivo por regex, e uma lista aqui,
   antes da regra dela, seria o que ele encontraria. */
body[data-arranjo="barra"] :is(.capsula > button, #capsula-mao > button, #progresso-flutuante) {
  width: var(--alvo); height: var(--alvo);
}
/* Os dois botões que carregam TEXTO em vez de glifo crescem na largura. */
body[data-arranjo="barra"] #estudo-seguir,
body[data-arranjo="barra"] #bancada-face { width: auto; min-width: var(--alvo); padding: 4px 10px 5px; }
/* A leitura primeiro; o que a tela do estudo acrescenta vem depois, e a
   bancada por último — é o que fica a um arrasto de lado. */
body[data-arranjo="barra"] #capsula-pagina { order: 1; }
body[data-arranjo="barra"] #capsula-voz { order: 2; }
body[data-arranjo="barra"] #capsula-mao { order: 3; }
body[data-arranjo="barra"] #capsula-estudo { order: 4; }
body[data-arranjo="barra"] #capsula-bancada { order: 5; }
/* A pílula do tempo na ponta esquerda da barra, na tinta do cromo, mostrando
   só a sessão: «12 min». O acumulado é secundário por desenho, e na barra
   não há largura para dois números. */
body[data-arranjo="barra"] #tempo-leitura {
  left: calc(env(safe-area-inset-left, 0px) + .5rem); right: auto;
  bottom: var(--barra-h); z-index: 47;
  height: var(--alvo); padding: 0 .3rem;
  background: none; border: 0; box-shadow: none;
  color: var(--cromo-tinta-2); font-size: .72rem; font-weight: 600;
  transition: bottom var(--dur) var(--curva);
}
body[data-arranjo="barra"] #tempo-leitura :is(.sep, .total, .rot) { display: none; }
body[data-arranjo="barra"][data-cromo="oculto"] #tempo-leitura {
  opacity: 1; transform: none; bottom: env(safe-area-inset-bottom, 0px);
}
/* O fim do texto rola até acima das DUAS barras. */
body[data-arranjo="barra"] #versao { padding-bottom: calc(var(--pilha-y) + 1.5rem); }
/* Os painéis que nasciam à esquerda da coluna pousam acima da barra. */
body[data-arranjo="barra"] #velocidade-painel {
  right: .6rem; left: auto; bottom: calc(var(--pilha-y) + .5rem);
  width: min(20rem, calc(100vw - 1.2rem));
}
body[data-arranjo="barra"] #coloquio { right: .6rem; width: min(30rem, calc(100vw - 1.2rem)); }

/* ── UMA BARRA SÓ NO TELEFONE  (spec 63, 19/09) ──────────────────────────────
   «esses menus do leitor no iphone estão muito feios». Lendo, o rodapé tinha
   DUAS barras de grafite empilhadas — esta fileira e as abas —, ~170 px de
   cromo escuro sobre a página creme, com ícones de pesos diferentes e fios
   que não se alinhavam de uma barra para a outra.

   O dono escolheu o modelo do Books: lendo, a fileira toma o lugar das abas,
   que voltam pelo «≡» na ponta direita ou rolando para cima (`data-abas`,
   escrito por `ligarAbas` em `pilha.mjs`). O `data-cromo` deixa de mandar na
   fileira do telefone: ele mostra tudo perto do topo e a cada toque no texto,
   e a barra dupla voltaria justamente na abertura do artigo.

   E a barra veste o material da PÁGINA. Revoga, só no telefone, a regra de
   02/09 («a barra de baixo é o mesmo cromo da lateral»): lá a razão era a
   peça não mudar de material com a largura; aqui o dono pediu, olhando o
   aparelho, que ela deixe de ser um bloco preto sob o texto. O jeito é
   redeclarar os `--cromo-*` com escopo nas peças do rodapé — o anel, os
   ícones, o destino ativo e o ponto do boletim (spec 62) mudam juntos, sem
   uma regra por peça.

   O material é VIDRO: papel a 78% com desfoque, o texto passando borrado por
   baixo. Escolhido pelo dono na Mesa entre três (papel elevado, a cor da mesa
   e este), nos três temas, com capturas do simulador. */
body[data-arranjo="barra"] :is(#pilha-leitura, #barra-nav, #tempo-leitura, #abas-alternar) {
  --barra-fundo: color-mix(in srgb, var(--papel) 78%, transparent);
  --cromo-1: var(--barra-fundo); --cromo-2: var(--barra-fundo);
  /* O fio a 20% da tinta, e não a `--regra` da página: em sépia a régua é
     #e4d9cb sobre #f3e8da (~1,1:1) e no aparelho a barra ficou sem desenho
     nenhum («não tem divisória nem nada?»). Escolhido na Mesa entre a régua,
     20% e 30%, nos três temas. */
  --cromo-borda: color-mix(in srgb, var(--tinta) 20%, transparent);
  --cromo-tinta: var(--tinta); --cromo-tinta-2: var(--tinta-2); --cromo-tenue: var(--tenue);
  --cromo-acento: var(--acento);
}
body[data-arranjo="barra"] :is(#pilha-leitura, #barra-nav, #abas-alternar) {
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
}
/* O véu de branco do destino ativo era para o grafite; sobre papel ele some,
   e o leito volta a ser o tingido de acento. */
body[data-arranjo="barra"] #barra-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--acento) 10%, transparent);
}
/* A barra de abas do telefone mede EXATAMENTE `--barra-h`. Media 62,6 px
   (itens de 52 + a folga da lista + o fio) contra os 58 do token, e a
   fileira, que pousa em `--barra-h`, cobria 4,6 px do topo dela — o fio entre
   as duas sumia ali (medido no simulador, 19/09). Os itens descem ao alvo de
   toque, que é o piso, e a altura passa a ser a do token que todos leem. */
body[data-arranjo="barra"] #barra-nav { box-sizing: border-box; height: var(--barra-h); }
body[data-arranjo="barra"] #barra-nav a { min-height: var(--alvo); padding-block: .3rem; }
/* Os ícones num tamanho só: o `▶` e o `⇕` são texto, o microfone, o `⇧` e
   o `✎` são desenho — e cada um herdava um tamanho de fonte de outra época
   (o microfone ainda a serifa de 1,35rem do antigo `?`). */
body[data-arranjo="barra"] :is(.capsula > button, #abas-alternar) svg { width: 22px; height: 22px; }
body[data-arranjo="barra"] #perguntar-flutuante { font-family: var(--sans); font-size: 1rem; }
body[data-arranjo="barra"] #ouvir-flutuante { font-size: 1.05rem; }

/* Lendo, sem o «≡»: uma barra só, no chão. `--pilha-y` desce junto, e os
   painéis que se ancoram nele (a folha da voz, as caixas, a tarja da versão)
   pousam acima da fileira, não acima de uma barra que não está lá. */
body[data-arranjo="barra"][data-leitura]:not([data-abas]) {
  --pilha-y: calc(var(--fileira-h) + env(safe-area-inset-bottom, 0px));
}
body[data-arranjo="barra"][data-leitura]:not([data-abas]) #barra-nav {
  transform: translateY(100%);
}
body[data-arranjo="barra"][data-leitura]:not([data-abas]) #pilha-leitura {
  bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
}
body[data-arranjo="barra"][data-leitura]:not([data-abas]) #tempo-leitura {
  bottom: env(safe-area-inset-bottom, 0px);
}
/* Com o «≡»: as abas voltam mesmo com o cromo oculto. Três atributos contra
   os dois de `body[data-leitura][data-cromo="oculto"] #barra-nav` — vence pela
   especificidade, não pela posição no arquivo. */
body[data-arranjo="barra"][data-leitura][data-abas] #barra-nav { transform: none; }
body[data-arranjo="barra"][data-leitura][data-abas] #tempo-leitura { bottom: var(--barra-h); }

/* O «≡» na ponta direita da fileira, fora dela (ver o `index.html`). Tem
   fundo próprio porque a fileira rola por baixo dele na tela do estudo. */
#abas-alternar { display: none; }
body[data-arranjo="barra"][data-leitura] #abas-alternar {
  display: grid; place-items: center;
  position: fixed; z-index: 47; right: 0; bottom: var(--barra-h);
  width: calc(var(--alvo) + .75rem + env(safe-area-inset-right, 0px)); height: var(--alvo);
  padding: 0 calc(.35rem + env(safe-area-inset-right, 0px)) 0 .4rem;
  background: var(--cromo-1); border: 0; border-left: 1px solid var(--cromo-borda); border-radius: 0;
  color: var(--cromo-tinta-2); cursor: pointer;
  transition: bottom var(--dur) var(--curva);
}
body[data-arranjo="barra"][data-leitura]:not([data-abas]) #abas-alternar {
  bottom: env(safe-area-inset-bottom, 0px);
}
body[data-arranjo="barra"] #abas-alternar[aria-expanded="true"] { color: var(--cromo-acento); }
body[data-arranjo="barra"] #abas-alternar:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

/* ── A folha da voz  (spec 63) ─────────────────────────────────────────────
   No telefone o bloco de quatro controles no alto do artigo (Ouvir, motor,
   Quem lê, Gerar) empurrava o texto 600 px para baixo e parecia formulário.
   Com a cápsula da voz em cena (`data-voz`), ele sai: o `▶` da fileira toca,
   e o `1,0×` abre esta folha, que já montava o motor, o «Quem lê» e a
   velocidade e agora leva o «Gerar» também. Sem `data-voz` (navegador sem
   fala e sem narração) o bloco fica, porque é o único caminho até a voz. */
body[data-arranjo="barra"][data-voz] .artigo > header :is(.controles-voz, .btn.ouvir) { display: none; }
body[data-arranjo="barra"] #velocidade-painel {
  left: .6rem; right: .6rem; width: auto;
  padding: 1rem 1rem 1.1rem;
  transform: translateY(.5rem);
}
body[data-arranjo="barra"] #velocidade-painel[data-aberto="sim"] { transform: none; }
body[data-arranjo="barra"] #velocidade-painel .controles-voz { gap: 1.1rem; }
body[data-arranjo="barra"] #velocidade-painel .fila-voz { gap: 1rem; }
body[data-arranjo="barra"] #velocidade-painel :is(.motor-voz, .timbre, .timbre select, .gerar-estudio) {
  width: 100%; max-width: none;
}
body[data-arranjo="barra"] #velocidade-painel .motor-voz .segmentado { display: flex; }
body[data-arranjo="barra"] #velocidade-painel .motor-voz .opcao { flex: 1; }
/* O `⇕` desce para a folha no telefone: com o «≡» na ponta, a fileira de
   440 px deixava o `✎` debaixo dele. Ele só age com a voz tocando, e já era
   da família da voz. O interruptor é a mesma pergunta, dita por extenso. */
.rolagem-folha { display: none; }
body[data-arranjo="barra"] #rolagem-flutuante { display: none; }
body[data-arranjo="barra"] #velocidade-painel .rolagem-folha {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: var(--alvo); padding: 0 .1rem;
  background: none; border: 0; border-top: 1px solid var(--regra);
  font: 500 .88rem/1.2 var(--sans); color: var(--tinta); cursor: pointer; text-align: left;
}
body[data-arranjo="barra"] #velocidade-painel .rolagem-folha::after {
  content: ""; flex: none; width: 38px; height: 22px; border-radius: 11px;
  background: radial-gradient(circle 8px at 11px 50%, var(--papel-elev) 97%, transparent) no-repeat,
              var(--borda-controle);
  transition: background-position var(--dur) var(--curva);
}
body[data-arranjo="barra"] #velocidade-painel .rolagem-folha[aria-pressed="true"]::after {
  background: radial-gradient(circle 8px at 27px 50%, var(--sobre-acento) 97%, transparent) no-repeat,
              var(--acento);
}
body[data-arranjo="barra"] #velocidade-painel .rolagem-folha:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ── O topo desce abaixo da barra de status  (16/09) ──────────────────────
   O casco nativo pinta sob a barra de status (`ignoresSafeArea` + inset
   `.never`), e no iPhone os 1.7rem ficavam atrás do relógio e da ilha:
   «aquela barra superior está ficando muito em cima» (Yuri). O `max` deixa
   o Mac e o navegador como estavam (inset zero) e só desce onde há barra. */
.cabeca {
  max-width: var(--measure); margin: 0 auto;
  padding: max(1.7rem, calc(env(safe-area-inset-top, 0px) + .5rem)) max(1.1rem, env(safe-area-inset-left)) 0;
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: .84rem; line-height: 1;
}
/* Glifo e nome são **um link só**, e não dois vizinhos para o mesmo destino:
   dois links com o mesmo `href` lado a lado são duas paradas de teclado e duas
   leituras iguais no VoiceOver para uma única coisa. */
/* Sem min-height explícito de propósito: é `` de verdade — vai
   para a raiz —, alvo de toque real, não rótulo decorativo. Os ~30px do
   glifo dentro são só o ÍCONE; a caixa do link em si já herda os 44px do
   `--alvo` do núcleo (`:where(...,a[href])`) porque nada aqui redeclara
   `min-height` para vencer essa herança, e `.cabeca` (o pai) não tem altura
   fixa que corte a caixa. */
.cabeca .marca {
  display: inline-flex; align-items: center; gap: .7rem;
  font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  color: var(--tinta); text-decoration: none;
}
/* O glifo é a única superfície do app que veste o acento cheio. Ele existe
   para dar à `.cabeca` um ponto de ancoragem visual agora que ela não tem mais
   fundo nem filete — sem ele, o nome do app flutuaria solto no papel.
   Monocromático de propósito: a faixa amarela do ícone de verdade precisaria
   de texto escuro por cima para ser legível, e aqui a cor de cima é
   `--sobre-acento`. Um glifo de 18px não é lugar de resolver isso. */
.cabeca .glifo {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--acento); color: var(--sobre-acento);
  display: grid; place-items: center;
}
.cabeca .glifo svg { width: 17px; height: 17px; display: block; }
.cabeca .fim { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.cabeca #aa {
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  color: var(--tinta-2); background: var(--papel-elev); border: 1px solid var(--regra);
  border-radius: 999px; min-width: 44px; min-height: 36px; padding: 0 .8rem; cursor: pointer;
}
.cabeca #aa:hover, .cabeca #aa:focus-visible { color: var(--acento); border-color: var(--acento); }
/* `inline-flex` + `align-items` (revisão 2026-08-24): o link herda os 44px
   de `--alvo` do núcleo, e sem o flex o texto assentava no TOPO dessa caixa
   — o «Sair» flutuava acima da linha do `Aa` ao lado. */
.cabeca #sair { color: var(--tenue); text-decoration: none; padding: .5rem .2rem;
  display: inline-flex; align-items: center; }
.cabeca #sair:hover, .cabeca #sair:focus-visible { color: var(--acento); }

/* ── A barra de baixo é o MESMO cromo da lateral  (02/09) ──────────────────
   Ela era vidro sobre a mesa: `--tela` a 82% com `backdrop-filter`. Isso fazia
   sentido enquanto o cromo do app inteiro era claro — e deixou de fazer no dia
   em que o Mac ganhou a lateral grafite. «No iPad aquela barra lá embaixo
   deveria ter sido na mesma cor grafite da barra lateral que aparece no
   MacBook» (Yuri, 02/09).

   É a mesma peça em duas diagramações — o mesmo `