/* ═══════════════════════════════════════════════════════════════════════════
   A pele VOLUME — o que é do Codex, e só isso.

   Papel, tinta, forma, elevação, foco e motion vêm do `nucleo.css`, que é
   cópia somente-leitura do Scriptorium. Editar a cópia é perder a edição no
   próximo `sincronizar.sh`; para mudar a fundação, muda-se lá.

   ── A metáfora: PAPEL, não mesa ──────────────────────────────────────────

   O Tabula tem uma mesa sobre a qual post-its pousam, e por isso usa
   `--tela`. Aqui a folha É a tela. Não há superfície de fundo separada,
   porque a tela mais frequente deste app é a que ainda não tem texto nenhum,
   e uma moldura ao redor do vazio sugere que já existe algo lá dentro.

   Por isso, também, não há sombra em lugar nenhum do fólio. Elevação serve a
   objetos que se empilham; uma folha não se empilha sobre si mesma.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── O ACENTO É A BRASA, a mesma do Leitor  (2026-09-26) ──────────────────
   De 01/09 a 26/09 o acento do Codex foi o índigo da tinta (#2a3c8a, e
   #9fb0f0 no escuro): o estudo de marca dos irmãos dera a cada app uma cor
   para SER. Yuri não se deu com o azul. Numa página de amostras
   (`C02 Claude/Output/codex-leonardo-amostras.html`) vieram três terras de
   Leonardo; a preferida foi a Sanguínea, e ela caía tão perto da brasa do
   Leitor que a decisão foi a outra: os dois apps falam a MESMA cor. O que
   distingue um do outro passa a ser o desenho do ícone (a pena × a fogueira),
   não a matiz.

   Por isso os três pares abaixo são os VALORES da pele do Leitor
   (`Leitor/web/assets/estilo.css`), copiados, e não uma brasa parecida. Se o
   Leitor mudar a brasa, muda-se aqui também — o núcleo não a carrega, porque
   `--acento` é token de pele.

   Como o Codex pinta TEXTO com `--foco` (`.md-ligacao`, `.md-tag`,
   `.aviso-marcador`, o sinal de meta atingida…), acento e foco são a mesma
   cor, e os dois tokens saem do mesmo par. Declarados na pele, e não no
   núcleo, pela razão que o README do Scriptorium registra: mover `--foco` lá
   alcançaria os outros apps.

   Medidas (piso 4,5:1, texto):
     claro   #832f0d sobre --papel #faf8f4 → 8,33:1
     sépia   #7c2c0b sobre --papel #f3e8da → 7,82:1
     escuro  #f39d7a sobre --papel #16171a → 8,46:1
     branco sobre #832f0d (o que escreve por cima do acento) → 8,83:1
   `marca.test.mjs` mede a cascata inteira (núcleo + pele) sobre as três
   superfícies de papel dos três temas. */
[data-tema="claro"]  { --acento: #832f0d; --sobre-acento: #ffffff; --foco: #832f0d; }
[data-tema="sepia"]  { --acento: #7c2c0b; --sobre-acento: #ffffff; --foco: #7c2c0b; }
[data-tema="escuro"] { --acento: #f39d7a; --sobre-acento: #16171a; --foco: #f39d7a; }

/* ── O acento SOBRE O CROMO é o `--cromo-acento` do núcleo  (26/09) ────────
   A regra da casa é «o acento do tema ESCURO, em qualquer tema»: o acento do
   claro some no grafite (o índigo media 1,42:1 ali, e foi assim que o glifo
   da pena desapareceu do topo em 07/09). Enquanto o Codex foi azul, o valor
   era dele (#9fb0f0); com a brasa, é o mesmo #f39d7a do `--cromo-acento`
   do núcleo. Escrito em hex, e não como `var(--cromo-acento)`, porque o
   `material.test.mjs` mede este token contra o grafite lendo o valor
   literal.

   Declarado com os temas e não em `:root` porque a paleta do `:root` é do
   núcleo, e `nucleo.test.mjs` cobra essa fronteira. */
[data-tema="claro"],
[data-tema="sepia"],
[data-tema="escuro"] { --acento-cromo: #f39d7a; }

/* ── A superfície LEVANTADA dentro do cromo  (11/09) ───────────────────────
   Um controle dentro da faixa escura precisa se distinguir dela sem virar uma
   pastilha de papel — foi a pastilha clara que fez o painel da conversa
   parecer remendado nos temas claros. Branco a 6% sobe meio degrau sobre as
   duas pontas do gradiente e não tem cor própria, então serve aos três temas.

   Declarado com os temas pela mesma razão do `--acento-cromo`: a paleta do
   `:root` é do núcleo, e `nucleo.test.mjs` cobra essa fronteira. */
[data-tema="claro"],
[data-tema="sepia"],
[data-tema="escuro"] { --cromo-superficie: rgba(255, 255, 255, .06); }

html,
body {
  height: 100%;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

/* ── A ÁREA SEGURA SE SOMA, NÃO SE ESCOLHE ──────────────────────────────────
   Estava `max(env(safe-area-inset-top), 1.25rem)`, e `max` devolve o MAIOR
   dos dois: no iPhone a área segura é ~59px, maior que os 20px, então o
   resultado era exatamente 59px — o cabeçalho colado na borda de baixo da
   barra de status, com folga zero. Os 20px de respiro que eu queria dar eram
   engolidos pelo próprio `max`.

   No Mac e no iPad a área segura é pequena, o `max` devolvia os 20px, e ficava
   certo. É um defeito que só existe onde há entalhe.

   `calc(env + fixo)` põe o respiro DEPOIS da área segura, que é o que se quer:
   a área segura diz onde o conteúdo pode começar, e o respiro é o quanto ele
   se afasta dali. */
main {
  min-height: 100%;
  padding-block-start: calc(env(safe-area-inset-top, 0px) + 1.5rem);
  padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 2rem);
  padding-inline: calc(env(safe-area-inset-left, 0px) + 1.25rem)
                  calc(env(safe-area-inset-right, 0px) + 1.25rem);
}

/* ── `hidden` PRECISA DESTA LINHA ──────────────────────────────────────────
   O atributo `hidden` é `display: none` vindo da folha do NAVEGADOR, e
   qualquer `display` declarado pelo autor o vence — a regra do autor tem mais
   peso na cascata que a do agente do usuário. Então `.regua { display: flex }`
   e `.ajustes-painel { display: grid }` tornavam `hidden` decorativo: o
   `elemento.hidden = true` do JavaScript rodava e não escondia nada.

   O sintoma foi exatamente esse: o painel de ajustes abria sozinho, não
   fechava ao tocar fora, e a régua de formatação ficava permanentemente na
   frente do texto durante a escrita.

   `!important` aqui não é preguiça: `hidden` é uma declaração de INTENÇÃO no
   markup, e nada na pele deveria poder contradizê-la. É a única ocorrência no
   arquivo, de propósito.

   Nota de manutenção: por isso as quatro telas NÃO usam `hidden` — elas
   trocam por `data-tela`, logo abaixo, e um `hidden` esquecido nelas seria
   agora irreversível pelo CSS. */
[hidden] { display: none !important; }

/* As quatro telas trocam por `data-tela` na raiz.

   A regra é escrita ao contrário — esconde TUDO e mostra a corrente — porque
   assim acrescentar uma quinta tela é uma linha, e não quatro. */
#entrada, #volume, #folio, #divergencia, #publica, #relatorios,
#caderno { display: none; }

[data-tela="entrada"] #entrada { display: flex; }
[data-tela="publica"] #publica { display: block; }
[data-tela="relatorios"] #relatorios { display: block; }
[data-tela="volume"] #volume { display: block; }
[data-tela="folio"] #folio { display: flex; }
[data-tela="divergencia"] #divergencia { display: block; }
[data-tela="caderno"] #caderno { display: block; }

/* ── O apagar da interface ──────────────────────────────────────────────────
   Tudo o que não é texto carrega `.cromo`. Dois segundos digitando e some;
   um movimento do ponteiro, ou Escape, traz de volta.

   `visibility` acompanha a opacidade para que o que está apagado também saia
   da ordem de foco do teclado — uma barra invisível que ainda recebe Tab é
   pior do que uma barra visível. */
.cromo {
  transition: opacity var(--dur-lenta) var(--curva),
              visibility var(--dur-lenta) var(--curva);
}

[data-foco="adormecido"] .cromo {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cromo { transition: none; }
}

/* ── O MATERIAL — a folha é clara, a ferramenta é grafite  (C-53, 07/09) ────
   «Uma aparência um pouco mais moderna, igual ao leitor. Um painel grafite da
   mesma cor, os menus também na mesma cor.»

   É a decisão que o Leitor tomou em 02/09 e estendeu às cápsulas em 04/09,
   aplicada aqui inteira: **a barra flutuante não é página, é ferramenta, e
   ferramenta se distingue da página pelo material, não por um filete.** O
   Codex vinha pintando tudo de `--papel-elev` sobre `--papel` — uma pastilha
   clara sobre a folha clara, separada dela por um fio de 1px.

   Os tokens já estavam no `nucleo.css`, depositados pelo Scriptorium, e sem
   um único uso neste app. Nada aqui é cor nova.

   ── O NOME, e por que não é «cromo» ──────────────────────────────────────
   No Codex `.cromo` já significa outra coisa — a classe do que adormece
   enquanto se escreve, logo acima. Reusar a palavra faria duas coisas
   diferentes responderem ao mesmo seletor, e as duas se aplicam às MESMAS
   peças (a barra é `.cromo .material`: some ao escrever E é de grafite).

   ── A ordem no arquivo é requisito ───────────────────────────────────────
   Declarado ANTES de todas as superfícies que o vestem. `@media` não empresta
   peso na cascata, e na rodada do Leitor uma regra genérica escrita depois no
   arquivo venceu a da lateral três vezes na mesma tarde. `material.test.mjs`
   guarda esta ordem. */
.material {
  background: linear-gradient(180deg, var(--cromo-1), var(--cromo-2));

  /* ── O MATERIAL REESCOPA OS TOKENS DE TINTA  (07/09, tarde) ─────────────
     A primeira versão pintava os filhos por seletor: uma lista de
     `.material button`, `.material .rodape-item`, `.material .data`… Yuri
     abriu o app e o glifo da pena tinha SUMIDO do topo — `.marca .glifo` usa
     `var(--acento)`, que no tema claro era o índigo `#2a3c8a` e media **1,42:1** sobre o
     grafite. A regra específica vencia a genérica, e a lista não a continha.

     Caçar seletor por seletor conserta a instância e deixa a classe: toda
     regra NOVA escrita dentro de uma barra nasceria com a tinta de papel
     claro, e o defeito voltaria na próxima feature. Redeclarar os TOKENS aqui
     conserta a classe — o que estiver dentro do material herda a tinta do
     material, sem saber que está dentro dele.

     `--acento` e `--foco` viram `--acento-cromo`, que é o acento do tema
     ESCURO (#f39d7a, a brasa clara, a mesma do Leitor desde 26/09): o que a
     regra da casa exige é o acento CLARO o bastante para o campo escuro. */
  --acento: var(--acento-cromo);
  --foco: var(--acento-cromo);

  border-color: var(--cromo-borda);
  color: var(--cromo-tinta-2);
}

/* As tintas de dentro. Por SELETOR e não por token porque `--tinta`,
   `--tenue` e os papéis são do NÚCLEO, e a pele não os redeclara em lugar
   nenhum — a fronteira do Scriptorium, que `nucleo.test.mjs` cobra. O que se
   reescopa acima são os dois tokens que a pele possui: `--acento` e `--foco`.

   É por isso que esta lista existe e o `material.test.mjs` mede cada item
   dela contra as duas pontas do gradiente: uma regra nova escrita aqui dentro
   NÃO herda a tinta certa sozinha, e o teste é o que lembra. */
.material button,
.material .rodape-item,
.material .regua-botao,
.material .ilha-item,
.material .voltar,
.material .marca,
.material .marca-folio {
  color: var(--cromo-tinta-2);
}

.material button:hover,
.material .rodape-item:hover,
.material .regua-botao:hover,
.material .ilha-item:hover,
.material .voltar:hover {
  color: var(--cromo-tinta);
  background: color-mix(in srgb, var(--cromo-tinta) 8%, transparent);
}

.material .marca,
.material .marca-folio { color: var(--cromo-tinta); }

.material .rodape-contador,
.material .data,
.material .estado,
.material .ajustes,
.material .apagar-folio,
.material .busca-estado {
  color: var(--cromo-tenue);
}

.material .ajustes:hover,
.material .apagar-folio:hover { color: var(--cromo-tinta-2); }

.material .rodape-fio,
.material hr {
  background: var(--cromo-borda);
}

/* ═══ O VOLUME — os dias encadernados ═══════════════════════════════════════ */

/* ── A largura vale nas DUAS telas ──────────────────────────────────────────
   O volume é um degrau mais largo que o fólio, e não a mesma medida: a linha
   de cada dia carrega a data numa ponta e a contagem na outra, e apertá-la à
   medida da prosa espremeria as duas. O resumo, porém, É prosa — duas linhas
   do próprio diário —, e por isso a preferência precisa alcançá-lo.

   A alternativa, deixar o volume fixo, foi o desenho original e estava errada:
   uma preferência que governa uma tela e não a outra se lê como defeito, não
   como decisão. Quem escolhe «estreita» está pedindo um app estreito. */
#volume {
  max-width: var(--medida-lista, 44rem);
  font-size: var(--corpo, 1.0625rem);
  margin-inline: auto;
}

/* ── Os dois topos viram BARRA  (C-53, 07/09) ──────────────────────────────
   Mudança de layout, não de cor, e ela é obrigatória: `.topo` e `.topo-folio`
   eram cabeçalhos no FLUXO, com a largura da folha e sem fundo. Pintá-los de
   grafite onde estavam criaria uma tarja escura rolando junto com o texto —
   que não é o que o Leitor faz, e não é o que foi pedido.

   Chumbados no alto, eles viram o que a barra de baixo já é. A regra que o
   Leitor pagou fica satisfeita nas duas pontas: **peça que muda de material
   com a largura da tela é duas peças** — aqui a mesma peça é o mesmo material
   em qualquer largura. */
.topo {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* O conteúdo respeita a medida do volume, mas o CAMPO vai de ponta a ponta:
     uma barra que termina antes da borda é uma pastilha, e pastilha é o que
     esta rodada está desfazendo. */
  padding: .375rem max(1rem, calc((100% - var(--medida-lista, 44rem)) / 2 + 1rem));
  padding-block-start: calc(env(safe-area-inset-top, 0px) + .375rem);
  border-block-end: 1px solid var(--cromo-borda);
}

.marca {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0;
}

/* O glifo da pena ao lado do nome, na cor do acento. `inline-flex` para o
   SVG assentar na linha de base do nome e não flutuar acima dela. */
.marca .glifo {
  display: inline-flex; align-items: center; vertical-align: -.12em;
  margin-inline-end: .45rem; color: var(--acento);
}
.marca .glifo svg { width: 20px; height: 20px; display: block; }

/* No fólio a marca é menor que no volume (0,9375rem contra 1,375rem), e o
   glifo acompanha: a 20px ele ficaria maior que o próprio nome ao lado. */
.marca-folio .glifo svg { width: 15px; height: 15px; }
.marca-folio .glifo { margin-inline-end: .3rem; vertical-align: -.14em; }

/* O único botão da tela, e ele nunca pergunta nada. */
/* No acento desde a rodada de design dos irmãos: é o destino ativo do volume,
   o único gesto que leva à escrita. O leito a 9% no hover é a prancha 1c do
   Leitor (o destino corrente da barra), no único botão que o Codex tem. */
.hoje {
  font: inherit;
  font-size: .875rem;
  color: var(--acento);
  background: none;
  border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--borda-controle));
  border-radius: var(--raio-p);
  padding: .5rem .875rem;
  min-height: var(--alvo);
  cursor: pointer;
  transition: color var(--dur) var(--curva), border-color var(--dur) var(--curva);
}

/* ── O topo do volume no telefone (26/09) ─────────────────────────────────
   «No iPhone a faixa de cima quebrou; o "hoje" nem aparece.» ☰, a marca,
   cinco ícones de 44 px e o «✎ hoje» pedem ~480 px numa linha, e o telefone
   tem 375–440: o «hoje» saía da tela pela direita e a pena subia por cima do
   nome. No telefone a faixa vira DUAS linhas — em cima o que orienta e leva a
   escrever (☰, a marca, «✎ hoje»); embaixo os ícones, espalhados. No resto,
   as ações vão à direita pela margem automática e o «hoje» cola nelas, como
   antes: o `.hoje` saiu do `.topo-acoes` no HTML para poder subir sozinho. */
#volume .topo-acoes { margin-inline-start: auto; }
#volume .topo > .hoje { margin-inline-start: -.5rem; }
.marca { white-space: nowrap; }
@media (max-width: 40rem) {
  #volume .topo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: .5rem;
    row-gap: 0;
  }
  #volume .topo-acoes {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-inline-start: 0;
    justify-content: space-between;
  }
  #volume .topo > .hoje { margin-inline-start: 0; }
}
.hoje:hover, .hoje:focus-visible {
  color: var(--acento);
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 9%, transparent);
}

/* ── Os ajustes ─────────────────────────────────────────────────────────────
   Vivem no volume, nunca no fólio: a folha é a única tela cujo valor inteiro
   é o silêncio, e um botão de configuração ali seria a primeira coisa a olhar
   antes de escrever a primeira frase. */

.topo-acoes {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ajustes {
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--tenue);
  background: none;
  border: 0;
  padding: .5rem;
  min-width: var(--alvo);
  min-height: var(--alvo);
  cursor: pointer;
}

.ajustes:hover { color: var(--tinta-2); }

/* ── A folha de ajustes — o molde do Leitor ─────────────────────────────────
   Fixa embaixo, sobe quando chamada, e os botões DEMONSTRAM em vez de dizer:
   cada fonte escrita na própria letra, o tema na cor real do tema, a
   entrelinha desenhada, e o tamanho em sete posições `A− ●●●○○○○ A+`. A
   primeira versão era um balão de linhas apertadas com três degraus de corpo,
   reprovada em uso real contra o painel do Leitor (31/08). */

.ajustes-folha {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 5;
  border-block-start: 1px solid var(--cromo-borda);
  box-shadow: var(--sombra-erguida);
  padding: 1.25rem calc(env(safe-area-inset-right, 0px) + 1.25rem)
           calc(env(safe-area-inset-bottom, 0px) + 1.25rem)
           calc(env(safe-area-inset-left, 0px) + 1.25rem);
  transform: translateY(105%);
  transition: transform var(--dur) var(--curva);
  /* Nunca maior que a janela (14/09): com os modelos de IA dentro, a folha
     tinha 795 px e passava do topo em 1024×768 (−27 px) e em 390×844
     (−257 px) — o que ficava lá em cima era inalcançável. Agora ela para
     abaixo da faixa segura do topo e ROLA POR DENTRO; `contain` impede que o
     fim da rolagem dela arraste o fólio de trás. `100vh` antes, para o
     WebKit que não conhece `dvh`. */
  /* O recuo é `--alvo` + folga, e não os .75rem de antes (20/09): a folha
     CABIA em 390×844 — 832 px de 844 — e mesmo assim prendia, porque os
     12 px que sobravam ficam debaixo da barra de status e nenhum polegar
     alcança. «Tocar fora fecha» só é saída se o lado de fora existir do
     tamanho de um dedo; é o mesmo motivo do `60vh` do sumário do Leitor. */
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - var(--alvo) - .75rem);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--alvo) - .75rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ajustes-folha[data-aberto="sim"] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ajustes-folha { transition: none; }
}

/* O sheet é a tela inteira; o CONTEÚDO para na medida e centra. */
.ajustes-grade {
  max-width: 44rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.5rem;
  align-items: start;
}

/* A fonte pede a fileira inteira: quatro amostras lado a lado. Ela pede pelo
   `.aj-grupo-largo` que já existe, e não por `:first-child` — o primeiro
   filho da grade passou a ser a cabeça em 20/09, e uma regra ancorada na
   POSIÇÃO troca de dono em silêncio quando o DOM cresce. */

@media (max-width: 40rem) {
  .ajustes-grade { grid-template-columns: 1fr; gap: .875rem; }
}

.aj-rotulo {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-block-end: .375rem;
}

.aj-fileira {
  display: flex;
  align-items: stretch;
  gap: .25rem;
  flex-wrap: wrap;
}

.aj-opcao {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .25rem;
  min-width: 3.25rem;
  min-height: var(--alvo);
  font: inherit;
  color: var(--tinta-2);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  padding: .375rem .5rem;
  cursor: pointer;
}

.aj-opcao:hover { color: var(--tinta); }

.aj-opcao[aria-pressed="true"],
.aj-chave[aria-checked="true"] {
  color: var(--tinta);
  border-color: var(--borda-controle);
  background: var(--papel);
}

.aj-nome {
  font-size: .6875rem;
  color: var(--tenue);
}

.aj-opcao[aria-pressed="true"] .aj-nome { color: var(--tinta-2); }

/* ── As amostras ── */

/* Cada fonte escrita na própria letra — o rótulo mais curto que existe. */
.am-fonte { font-size: 1.125rem; line-height: 1.2; }
.am-fonte[data-f="literata"] { font-family: var(--serif); }
.am-fonte[data-f="source-serif"] { font-family: var(--serif-leitura); }
.am-fonte[data-f="inter"] { font-family: var(--sans); }
.am-fonte[data-f="mono"] { font-family: "iA Writer Mono", var(--mono); }

/* A entrelinha mostra o espaçamento: três linhas que se afastam. */
.am-linhas {
  display: grid;
  gap: var(--vao, 3px);
  padding-block: .25rem;
}
.am-linhas i { width: 1.25rem; height: 1.5px; border-radius: 1px; background: currentColor; }
.am-linhas[data-e="compacta"] { --vao: 2px; }
.am-linhas[data-e="normal"] { --vao: 4px; }
.am-linhas[data-e="arejada"] { --vao: 6px; }

/* A largura mostra a coluna: um traço que cresce. */
.am-largura { display: grid; align-content: center; min-height: 1.25rem; }
.am-largura i { height: 2px; border-radius: 1px; background: currentColor; }
.am-largura[data-l="estreita"] i { width: .75rem; }
.am-largura[data-l="media"] i { width: 1.25rem; }
.am-largura[data-l="larga"] i { width: 1.75rem; }

/* O tema na cor REAL do tema — a amostra existe para mostrar um tema em que
   ainda não se está, então as cores são literais de propósito (os valores de
   `--papel`/`--tinta` de cada um no núcleo). O «auto» é metade claro, metade
   escuro: é o que ele faz. */
.am-tema {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 1.5rem;
  font-size: .8125rem;
  border-radius: calc(var(--raio-p) - 2px);
  border: 1px solid var(--papel-borda);
}
.am-tema[data-t="claro"] { background: #faf8f4; color: #1f1d1a; }
.am-tema[data-t="sepia"] { background: #f3e8da; color: #2a251d; }
.am-tema[data-t="escuro"] { background: #16171a; color: #e6e4df; }
/* O auto é metade claro, metade escuro — e SEM «Aa»: letra alguma é legível
   sobre a divisa, e o nome embaixo já diz tudo. */
.am-tema[data-t="auto"] {
  background: linear-gradient(105deg, #faf8f4 50%, #16171a 50%);
  color: transparent;
}

/* O tamanho: A− ●●●○○○○ A+. */
.aj-tamanho { align-items: center; gap: .625rem; }

.aj-passo {
  font-size: .9375rem;
  min-width: var(--alvo);
}

.aj-passo:disabled {
  opacity: .35;
  cursor: default;
}

.aj-medidor { display: inline-flex; gap: .375rem; }

.aj-medidor i {
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  border: 1px solid var(--tenue);
}

.aj-medidor i.on {
  background: var(--tinta-2);
  border-color: var(--tinta-2);
}

/* O que a opção faz, quando o nome não basta (a máquina de escrever, C-67). */
.aj-nota {
  margin: .375rem 0 0;
  max-width: 22rem;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--tinta-2);
}

/* A chave da máquina de escrever. */
.aj-chave {
  font-size: .8125rem;
  padding-inline: .875rem;
  border-color: var(--borda-controle);
  justify-self: start;
}

/* ── Quem responde: um modelo por papel (spec 11) ─────────────────────────
   O grupo toma a fileira inteira porque o rótulo de um modelo diz o provedor
   e o preço — cortá-lo ao meio seria esconder justamente o que faz a escolha
   ser uma escolha. */
.aj-grupo-largo { grid-column: 1 / -1; }

/* O caminho até a folha dos modelos de IA (14/09): um link discreto no fim
   dos Ajustes, alinhado à direita como um «ver mais» — não um grupo, que
   pediria rótulo e competiria com as opções de leitura. */
.aj-grupo-link { display: flex; justify-content: flex-end; }
.aj-link {
  min-height: var(--alvo);
  padding-inline: .5rem;
  font: inherit;
  font-size: .8125rem;
  color: var(--cromo-tinta-2);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  cursor: pointer;
}

/* ── As letras da folha, na tinta do GRAFITE (14/09) ────────────────────────
   Rótulo, nota, nome da opção e recado pintavam com `--tenue` e `--tinta-2`,
   que são tintas de PAPEL: medido no DOM, 2,0–2,3:1 no claro e 1,5–2,0:1 no
   sépia sobre o grafite — a captura do sépia mostrou a nota dos modelos quase
   apagada. Só no escuro a conta fechava, porque lá a tinta de papel já é
   clara. O nome da opção ESCOLHIDA fica de fora: ela é um cartão de papel
   (`--papel`) e a tinta de papel é a certa sobre ele. */
.ajustes-folha .aj-rotulo,
.ajustes-folha .aj-nome,
.ajustes-folha .aj-ia-recado { color: var(--cromo-tenue); }
.ajustes-folha .aj-nota,
.ajustes-folha .aj-ia-nome,
.ajustes-folha .aj-meta-valor,
.ajustes-folha .aj-abertura,
.ajustes-folha .aj-ia-recado[data-estado="erro"],
.ajustes-folha .aj-ia-recado[data-estado="semRede"] { color: var(--cromo-tinta-2); }
.ajustes-folha .aj-opcao[aria-pressed="true"] .aj-nome { color: var(--tinta-2); }
.ajustes-folha .aj-medidor i { border-color: var(--cromo-tenue); }
.ajustes-folha .aj-medidor i.on { background: var(--cromo-tinta-2); border-color: var(--cromo-tinta-2); }

/* A folha dos modelos de IA: a moldura dos Ajustes, numa coluna só. */
.folha-modelos-ia .ajustes-grade { grid-template-columns: 1fr; max-width: 38rem; }
.aj-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ── A cabeça PRESA no alto  (20/09) ───────────────────────────────────────
   A folha de Ajustes rola por dentro (1.052 px de conteúdo num telefone), e o
   polegar a deixa no fim da lista. Um «fechar» que rola junto com o conteúdo
   é uma saída que some justamente onde se precisa dela.

   O respiro do topo sai da FOLHA e passa para a cabeça, e isso não é capricho
   de escrita — é o que tira a regra do terreno onde as engines divergem. Com
   `padding-block-start` na folha, o `sticky` grudava ABAIXO do padding (vão
   medido de 21 px no Chrome, com meio botão de Entrelinha espiando acima do
   título), e a saída seria um `top` negativo do tamanho exato desse padding:
   um número que só vale enquanto as duas engines concordarem sobre onde o
   scrollport começa. Sem padding não há o que divergir — `top: 0` é o topo, e
   foi medido igual no Chrome e no Safari (vão de 1 px, o da borda).

   O fundo é `--cromo-1` porque é a ponta DE CIMA do gradiente do `.material`:
   no alto da folha a emenda não aparece. */
.folha-ajustes { padding-block-start: 0; }

.aj-cabeca-presa {
  position: sticky;
  top: 0;
  z-index: 1;
  grid-column: 1 / -1;
  margin-inline: -1.25rem;
  margin-block-end: .25rem;
  padding: 1.25rem 1.25rem .75rem;
  background: var(--cromo-1);
  border-block-end: 1px solid var(--cromo-borda);
}
.aj-titulo {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--cromo-tinta);
}
.folha-modelos-ia .aj-nota { max-width: none; margin: 0; }

/* O tempo até a primeira letra (C-66): uma linha de instrumento, em números
   tabulares para a mediana não dançar entre uma abertura e a seguinte. */
.aj-abertura {
  margin: 0;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

/* 14/09: a linha é BOTÃO e se abre nos estágios da última abertura — o
   `title` que os guardava não aparece no iPad. Com a letra de uma linha de
   texto, e o sinal ▸/▾ para dizer que abre; 44 px de alvo. */
button.aj-abertura {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: var(--alvo);
  padding: 0;
  font-family: inherit;
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
}
button.aj-abertura::before { content: "▸"; font-size: .6875rem; }
button.aj-abertura[aria-expanded="true"]::before { content: "▾"; }
button.aj-abertura:disabled { cursor: default; }
button.aj-abertura:disabled::before { content: none; }

.aj-abertura-estagios {
  list-style: none;
  margin: 0 0 .25rem;
  padding: 0;
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1rem;
  row-gap: .125rem;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.aj-abertura-estagios[hidden] { display: none; }
.aj-abertura-estagios li { display: contents; }
.ajustes-folha .aj-estagio-nome { color: var(--cromo-tenue); }
.ajustes-folha .aj-estagio-tempo { color: var(--cromo-tinta); text-align: end; }

.aj-ia {
  display: grid;
  gap: .375rem;
}

.aj-ia-linha {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: .5rem;
}

.aj-ia-nome {
  font-size: .8125rem;
  color: var(--tinta-2);
}

/* `appearance: none` por duas razões, e a segunda é a que se viu na captura:
   o desenho nativo ignora o tema, e a folha é MATERIAL — cromo escuro nos três
   temas. Pintada com `--papel-elev`, a caixa virava um bloco branco dentro da
   ferramenta escura no tema claro; as cores daqui são as do cromo, como manda
   a lista do `material.test.mjs`. */
.aj-select {
  appearance: none;
  width: 100%;
  min-height: var(--alvo);
  font: inherit;
  font-size: .8125rem;
  color: var(--cromo-tinta);
  background: var(--cromo-2);
  border: 1px solid var(--cromo-borda);
  border-radius: var(--raio-p);
  padding: .375rem 2rem .375rem .625rem;
  cursor: pointer;
  /* A seta, desenhada em gradiente para não depender de arquivo nenhum. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - .625rem) 55%;
  background-size: .375rem .375rem, .375rem .375rem;
  background-repeat: no-repeat;
}

.aj-select:disabled { opacity: .55; cursor: default; }

.aj-ia-recado {
  margin: .125rem 0 0;
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--tenue);
}

.aj-ia-recado[data-estado="erro"],
.aj-ia-recado[data-estado="semRede"] { color: var(--tinta-2); }

.aj-ia-tentar { margin-block-start: .25rem; }

@media (max-width: 40rem) {
  .aj-grupo-largo { grid-column: auto; }
  .aj-ia-linha { grid-template-columns: 1fr; gap: .25rem; }
}

.dias {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dia {
  border-block-start: 1px solid var(--regra);
  padding-block: 1.125rem;
  cursor: pointer;
  /* A folha à esquerda, o resto da linha à direita (rodada de design dos
     irmãos, 2026-09-02). Grade e não flex: a folha tem largura fixa e o
     corpo tem de encolher com a miniatura, não competir com ela. */
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: .9rem;
  align-items: start;
}

/* ── A folha: o numeral do dia numa página pequena ──────────────────────────
   A versão do Codex das capas desenhadas do Leitor (prancha 1f): papel do
   tema com uma mancha do acento entrando por um canto sorteado pela data
   (`cantoDaFolha`, em volume.mjs), e o número do dia em serifa. A mancha a
   14% é a mesma força do lençol menos um ponto — numa área de 3rem, 15%
   virava um quadrado colorido, e o que se quer é uma página tocada pela
   tinta, não um chip.

   `[data-hoje]` é a única folha inteira no acento: o dia em que se escreve,
   aceso como o destino ativo. Amanhã ela volta ao papel. */
.dia-folha {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--papel-borda);
  background:
    radial-gradient(70% 70% at var(--cx, 20%) var(--cy, 20%),
      color-mix(in srgb, var(--acento) 14%, transparent), transparent 72%),
    var(--papel-elev);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tinta);
  user-select: none;
}
.dia[data-hoje] .dia-folha {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acento) 25%, transparent);
}
.dia-corpo { min-width: 0; }

.dia:last-child {
  border-block-end: 1px solid var(--regra);
}

.dia-cabeca {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-block-end: .3125rem;
}

.dia-data {
  font-size: .9375rem;
  color: var(--tinta);
}

/* A contagem é empurrada para a direita e o sinal a segue, para que os dois
   fiquem alinhados entre linhas e a data não dance conforme o comprimento
   dela. */
.dia-medida {
  margin-inline-start: auto;
  font-size: .8125rem;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Os três sinais de `02 §1`: `✓` pousou no vault, vazio ainda não, `⚠`
   divergente.
   
   A largura fixa é o ponto: sem ela, a linha sem sinal encolhe e a contagem
   do dia sem marca fica desalinhada das vizinhas.

   E o `⚠` é o único com cor, porque é o único que pede uma decisão — os
   outros dois são informação, e informação não grita. */
.dia-sinal {
  width: 1ch;
  font-size: .8125rem;
  color: var(--tenue);
}

.dia-sinal[data-sinal="divergente"] {
  color: var(--foco);
}

.dia-selo {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--tenue);
  letter-spacing: .02em;
  white-space: nowrap;
}

.dia-apagar {
  font: inherit;
  font-size: .8125rem;
  line-height: 1;
  color: var(--tenue);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  padding: .25rem .375rem;
  margin-inline-start: .25rem;
  cursor: pointer;
  opacity: .5;
  transition: color var(--dur) var(--curva), opacity var(--dur) var(--curva);
}

.dia:hover .dia-apagar,
.dia:focus-within .dia-apagar,
.dia-apagar:focus-visible {
  opacity: 1;
}

.dia-apagar:hover {
  color: var(--foco);
  opacity: 1;
}

.dia-resumo {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dia-vazio .dia-resumo {
  font-style: italic;
  color: var(--tenue);
}

.paginacao {
  margin-block-start: 2rem;
  text-align: center;
}

.mais {
  font: inherit;
  font-size: .875rem;
  color: var(--tenue);
  background: none;
  border: 0;
  padding: .75rem;
  min-height: var(--alvo);
  cursor: pointer;
}

.mais:hover {
  color: var(--tinta-2);
}

/* ═══ O FÓLIO — a folha de hoje ═════════════════════════════════════════════ */

/* `position: relative` porque a barra flutuante da régua se posiciona contra
   este elemento — `barra.mjs` mede com `getBoundingClientRect()` daqui. */
/* SEM `display` aqui — quem mostra e esconde telas é o par de regras do
   `data-tela` lá em cima, e um `display: flex` neste bloco (mais tarde na
   cascata, mesma especificidade) vencia a lista de esconder: o fólio ficava
   visível POR CIMA de qualquer tela nova. Foi a «página vazia» dos
   relatórios (31/08): a tela trocava, o fólio continuava na frente e os
   números nasciam abaixo da dobra. `flex-direction` fica — ela só age
   quando o display de tela ligar o flex. */
#folio {
  position: relative;
  flex-direction: column;
}

.topo-folio {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--corpo, 1.0625rem);
  padding: .375rem max(1rem, calc((100% - var(--medida, 38rem)) / 2 + 1rem));
  padding-block-start: calc(env(safe-area-inset-top, 0px) + .375rem);
  border-block-end: 1px solid var(--cromo-borda);
}

.voltar {
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--tinta-2);
  background: none;
  border: 0;
  padding: .5rem;
  min-width: var(--alvo);
  min-height: var(--alvo);
  cursor: pointer;
}

.apagar-folio {
  font: inherit;
  font-size: .9375rem;
  line-height: 1;
  color: var(--tenue);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  padding: .5rem;
  min-width: var(--alvo);
  min-height: var(--alvo);
  cursor: pointer;
  transition: color var(--dur) var(--curva);
}

.apagar-folio:hover {
  color: var(--foco);
}

.marca-folio {
  font-size: .9375rem;
  font-weight: 500;
}

.data {
  font-size: .875rem;
  color: var(--tinta-2);
}

/* A data cede antes da marca e do estado quando a tela é estreita: saber que
   dia se está escrevendo importa menos que saber se o texto foi salvo. */
.topo-folio .data {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O estado do salvamento é UMA PALAVRA, não um giro. Sem modal, sem
   confirmação, sem celebração. */
.estado {
  margin-inline-start: auto;
  font-size: .8125rem;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

/* A MEDIDA. 34rem e não os 42rem do volume, e a diferença não é capricho: a
   42rem, com Literata a 17px, a linha passa de 85 caracteres. Uma lista de
   dias suporta isso (o olho salta de linha em linha procurando uma data); um
   parágrafo que se lê inteiro, não — o olho perde o começo da linha seguinte.
   34rem dá os ~66 caracteres que a spec pede.

   No iPad em pé isso deixa cerca de 140px de margem de cada lado, e é o que
   faz a folha parecer folha em vez de janela. */
.escrita {
  flex: 1;
  width: 100%;
  /* A medida vem da preferência, e o `font-size` aqui é o que dá base ao
     `em` dela — os textos de dentro têm tamanho próprio em `rem` e não são
     afetados. */
  max-width: var(--medida, 38rem);
  font-size: var(--corpo, 1.0625rem);
  margin-inline: auto;
}

.aviso-marcador {
  max-width: var(--medida, 38rem);
  margin: 1rem auto 0;
  font-size: .8125rem;
  color: var(--foco);
}

/* ── A mídia no fólio (C-30/C-31) ───────────────────────────────────────────
   O widget é decoração do editor: apagar a linha da referência o leva junto.
   A imagem tem teto de altura — uma foto de iPad em resolução cheia tomaria
   três telas, e o fólio é uma folha, não uma galeria. */

.midia-bloco {
  max-width: var(--medida, 38rem);
  /* PADDING, nunca margem vertical: o CodeMirror mede block widgets por
     `offsetHeight`, que NÃO inclui margens — com margem, o mapa de alturas
     fica menor que o layout real e TODO clique abaixo da mídia desloca uma
     linha («a lista parece congelada», 31/08, provado por clique real). */
  margin: 0 auto;
  padding-block: .5rem;
}

.midia-imagem {
  display: block;
  max-width: 100%;
  max-height: 24rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--papel-borda);
}

.midia-audio {
  display: block;
  width: 100%;
}

.midia-falha {
  font-size: .8125rem;
  color: var(--tenue);
  border: 1px dashed var(--papel-borda);
  border-radius: var(--raio-p);
  padding: .5rem .75rem;
}

/* ── A tarefa viva ──────────────────────────────────────────────────────────
   `- [ ]` fora do cursor vira a caixinha; o toque nela alterna o markdown.
   A concluída risca e esmaece — o estado é fato a mostrar, não sintaxe a
   esconder, então a linha feita risca mesmo com o cursor dentro. */

.tarefa-caixa {
  display: inline-grid;
  place-items: center;
  /* O núcleo dá alvo mínimo a TODO botão; aqui ele esticava a caixinha num
     retângulo — o alvo real é a linha inteira da tarefa. */
  min-width: 0;
  min-height: 0;
  width: 1.0625em;
  height: 1.0625em;
  margin-inline-end: .4375em;
  vertical-align: -0.125em;
  font: inherit;
  font-size: .8125em;
  line-height: 1;
  color: transparent;
  background: none;
  border: 1.5px solid var(--tenue);
  border-radius: .28em;
  padding: 0;
  cursor: pointer;
}

.tarefa-caixa:hover { border-color: var(--tinta-2); }

.tarefa-caixa[data-feita="true"] {
  color: var(--papel);
  background: var(--tinta-2);
  border-color: var(--tinta-2);
}

.linha-tarefa-feita {
  color: var(--tenue);
  text-decoration: line-through;
  text-decoration-color: var(--tenue);
  text-decoration-thickness: 1px;
}

/* ── A tabela viva ──────────────────────────────────────────────────────────
   A tabela se desenha quando o cursor está fora dela; tocar nela põe o
   cursor dentro e a abre em markdown para editar. Linhas horizontais
   finas, cabeçalho sem fundo — uma tabela de livro, não de planilha. */

.tabela-viva {
  max-width: var(--medida, 38rem);
  /* Padding, nunca margem vertical — a mesma regra do `.midia-bloco`: block
     widget com margem desloca o mapa de cliques do CodeMirror. */
  margin: 0 auto;
  padding-block: .5rem;
  overflow-x: auto;
  cursor: text;
}

.tabela-viva table {
  border-collapse: collapse;
  min-width: 50%;
  font-size: .9375em;
}

.tabela-viva th,
.tabela-viva td {
  text-align: start;
  padding: .4375rem .875rem .4375rem 0;
  border-block-end: 1px solid var(--papel-borda);
}

.tabela-viva th {
  font-family: var(--sans);
  font-size: .8125em;
  font-weight: 600;
  color: var(--tinta-2);
  border-block-end: 2px solid var(--papel-borda);
}

.tabela-viva tr:last-child td {
  border-block-end: 0;
}

/* O alinhamento do separador (`:---:`, `---:`), C-65. */
.tabela-viva .alinhar-centro { text-align: center; }
.tabela-viva .alinhar-fim { text-align: end; }

.tabela-viva a { color: var(--foco); }

/* O `<mark>` da célula traz `color: black` da folha do navegador — no escuro
   o realce da tabela saía preto sobre grafite (captura de 14/09). */
.tabela-viva mark { color: inherit; }

/* O aviso de trabalho em curso — «enviando imagem…», «transcrevendo…».
   É `cromo` como todo o resto: escrevendo, some; um movimento do ponteiro o
   traz de volta — e quando a transcrição termina, o texto entra na folha,
   que é o aviso de verdade. */
.aviso-midia {
  max-width: var(--medida, 38rem);
  margin: 1rem auto 0;
  font-size: .8125rem;
  color: var(--tenue);
}

.aviso-midia-erro {
  color: var(--foco);
}

/* ── O selo criptográfico ─────────────────────────────────────────────────── */
.selo-folio {
  max-width: var(--medida, 38rem);
  width: 100%;
  margin: 1.5rem auto 0;
  display: flex;
  justify-content: flex-end;
}

.selo-botao {
  font: inherit;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--tenue);
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio-p);
  padding: .375rem .625rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  cursor: pointer;
  transition: color var(--dur) var(--curva), border-color var(--dur) var(--curva);
}

.selo-botao:hover {
  color: var(--tinta-2);
  border-color: var(--borda-controle);
}

.selo-icone {
  font-size: .8125rem;
  line-height: 1;
  color: var(--foco);
}

.selo-rotulo {
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .6875rem;
}

.selo-hash {
  font-family: inherit;
  color: inherit;
}

.selo-aviso {
  font-size: .6875rem;
  color: var(--foco);
  margin-inline-start: .25rem;
}

/* ── O CodeMirror, vestido ──────────────────────────────────────────────────
   O pacote entra sem opinião visual (ver web/vendor/README.md). Tudo o que se
   vê do editor está declarado aqui.

   ── POR QUE TODO SELETOR AQUI É PREFIXADO POR `.escrita` ──────────────────

   Não é organização: é precedência, e custou o primeiro Portão 1.

   O CodeMirror não vem com folha de estilo — ele injeta as regras por
   StyleModule, que cria um `<style>` e o ANEXA À HEAD EM TEMPO DE EXECUÇÃO.
   Isso é depois do `<link>` do estilo.css, que já foi lido na análise do
   documento. Com a mesma especificidade, o último ganha — e o último é sempre
   o CM6.

   O sintoma: `.cm-scroller { font-family: var(--serif) }` era ignorado, o
   `fontFamily:"monospace"` do tema base do CM6 vencia, e o diário inteiro
   saía em fonte de terminal. Nenhum teste via, porque todos passavam.

   `.escrita .cm-scroller` tem uma classe a mais e resolve para sempre. */

.escrita .cm-editor {
  background: transparent;
  color: var(--tinta);
  height: 100%;
}

/* ── SEM ANEL DE FOCO NO TEXTO ──────────────────────────────────────────────
   O cursor de texto JÁ é o indicador de foco, e é um indicador melhor que um
   anel: ele diz onde o foco está, não só que existe. Uma moldura ao redor da
   folha é, além disso, exatamente a moldura que a metáfora recusa.

   Os três seletores são necessários, e cada um cobre um desenhista diferente:

     `.cm-editor.cm-focused`   o invólucro — era o único que eu tinha, e não
                               bastava, porque não é ele quem recebe o foco.
     `.cm-content`             o elemento `contenteditable` de verdade. O
                               SAFARI desenha um anel azul próprio nele, que
                               o Chrome não desenha — e com a rolagem de
                               máquina de escrever a caixa termina bem abaixo
                               da última linha, então só a aresta de baixo
                               aparecia: uma linha azul solta no fim do texto,
                               sem nada que a explicasse.
     `:focus-visible`          a regra do núcleo (`outline: 2px solid
                               var(--foco)`), que alcança `[tabindex]` — e o
                               CodeMirror põe `tabindex` no conteúdo.

   Os controles do `.cromo` continuam com o foco visível do núcleo, que é onde
   ele serve: ali não há cursor dizendo onde se está. */
.escrita .cm-editor.cm-focused,
.escrita .cm-content,
.escrita .cm-content:focus,
.escrita .cm-content:focus-visible {
  outline: none;
}

.escrita .cm-scroller {
  font-family: var(--fonte-corpo, var(--serif));
  font-size: var(--corpo, 1.0625rem);
  line-height: var(--altura-linha, 1.75);
  overflow-y: auto;

  /* ── SEM ROLAGEM HORIZONTAL, E ISSO NÃO ESCONDE NADA ────────────────────
     O `.cm-scroller` do CodeMirror é `display: flex` com `overflow-x: auto`,
     desenhado para o caso em que NÃO há quebra de linha e o texto corre para
     o lado. Aqui há: `EditorView.lineWrapping` faz o pacote aplicar
     `overflow-wrap: anywhere` ao conteúdo, e com isso nem um endereço longo
     colado escapa da coluna. Não existe conteúdo horizontal a alcançar.

     O que sobrava era arredondamento: no Safari, a largura do item flex
     empatava com a do container por uma fração de pixel e ele desenhava a
     barra assim mesmo — uma barra cinza no meio da folha, rolando para lugar
     nenhum. No Chrome não aparecia, e por isso ela sobreviveu a várias
     conferências.

     `hidden` e não `clip`: `clip` também impediria a rolagem programática que
     o CodeMirror faz para manter o cursor à vista. */
  overflow-x: hidden;
}

.escrita .cm-content {
  padding: 0;
  caret-color: var(--tinta);
  /* Item de flex tem `min-width: auto`, que o impede de encolher abaixo da
     própria largura mínima de conteúdo. Zerar é o conserto padrão de «item
     transborda o container», e aqui remove o último caminho pelo qual a
     coluna poderia empurrar a caixa para fora. */
  min-width: 0;
}

.escrita .cm-line {
  padding-inline: 0;
}

.escrita .cm-cursor,
.escrita .cm-dropCursor {
  border-left-color: var(--tinta);
  border-left-width: 2px;
}

/* A seleção. O tema-base do CodeMirror pinta a seleção EM FOCO com
   `&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground`
   — seis classes, lavanda #d7d4f0 — e o editor nunca se declara `dark`, então
   a lavanda valia no escuro também, sob a tinta clara (13/09: texto selecionado
   ilegível). A regra sem foco perdia só com o cursor dentro, que é quando se
   seleciona. O `:root` à frente dá a sétima e desempata sem depender da ordem
   em que o CodeMirror injeta o `<style>` dele. `npm run safari` cobra.

   O tom mistura o acento no papel: o `--papel-elev-2` de antes mal se distingue
   do papel (#26282e sobre #16171a) e não serve para mostrar o que está marcado.
   Mais acento no escuro, onde o papel absorve a mistura. */
[data-tema="claro"]  { --selecao: color-mix(in srgb, var(--acento) 16%, var(--papel)); }
[data-tema="sepia"]  { --selecao: color-mix(in srgb, var(--acento) 16%, var(--papel)); }
[data-tema="escuro"] { --selecao: color-mix(in srgb, var(--acento) 26%, var(--papel)); }

.escrita .cm-selectionBackground,
:root .escrita .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
.escrita .cm-content ::selection {
  background: var(--selecao);
}

/* ── Os quatro eixos de leitura ─────────────────────────────────────────────
   Guardados no aparelho, invisíveis no arquivo. São os MESMOS do Leitor, de
   propósito: ler o próprio diário e ler um artigo são o mesmo gesto, e quem
   ajustou a medida num app espera encontrar o mesmo ajuste no outro.

   Em markdown não existe corpo de fonte — o que existe é nível de título, e
   isso é a régua. Isto aqui é o tamanho PARA OS OLHOS. */

/* Sete posições, como o Leitor — a queixa exata do popover antigo foi «não
   dá para aumentar a fonte»: o teto era 20px. Agora vai a 24. */
[data-tamanho="-3"] { --corpo: .875rem; }
[data-tamanho="-2"] { --corpo: .9375rem; }
[data-tamanho="-1"] { --corpo: 1rem; }
[data-tamanho="0"]  { --corpo: 1.0625rem; }
[data-tamanho="1"]  { --corpo: 1.1875rem; }
[data-tamanho="2"]  { --corpo: 1.3125rem; }
[data-tamanho="3"]  { --corpo: 1.5rem; }

/* Em `rem`, e isso é uma REVERSÃO deliberada (31/08): a medida era em `em`
   pela teoria tipográfica — largura contada em caracteres, constante em
   qualquer corpo. No uso real, aumentar a fonte alargava a coluna junto, e
   Yuri cravou a regra melhor: «se tem um botão de largura, o botão de fonte
   deveria aumentar apenas a fonte». Dois controles, dois efeitos — a coluna
   agora é fixa em pixels e só o botão dela a muda. */
[data-largura="estreita"] { --medida: 32rem; --medida-lista: 36rem; }
[data-largura="media"]    { --medida: 38rem; --medida-lista: 44rem; }
[data-largura="larga"]    { --medida: 45rem; --medida-lista: 51rem; }

[data-entrelinha="compacta"] { --altura-linha: 1.5; }
[data-entrelinha="normal"]   { --altura-linha: 1.75; }
[data-entrelinha="arejada"]  { --altura-linha: 2; }

[data-fonte="literata"]     { --fonte-corpo: var(--serif); }
[data-fonte="source-serif"] { --fonte-corpo: var(--serif-leitura); }
[data-fonte="inter"]        { --fonte-corpo: var(--sans); }
[data-fonte="mono"]         { --fonte-corpo: "iA Writer Mono", var(--mono); }

/* A iA Writer Mono (SIL OFL, © Information Architects / IBM Plex) — pedida
   com o iA Writer aberto do lado. Vendorizada em `fontes/`, com a licença ao
   lado dos arquivos; o `sincronizar.sh` do Scriptorium copia por nome e não
   apaga extras, então ela convive com as três da fundação. */
@font-face {
  font-family: "iA Writer Mono";
  src: url("/fontes/ia-writer-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono";
  src: url("/fontes/ia-writer-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono";
  src: url("/fontes/ia-writer-mono-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono";
  src: url("/fontes/ia-writer-mono-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Rolagem de máquina de escrever: a linha corrente para numa altura
   confortável em vez de descer até a borda de baixo. O respiro embaixo é o
   que permite a última linha subir até lá. */
/* SÓ no fólio, e SÓ ENQUANTO SE ESCREVE (`:focus-within`): o respiro existe
   para a última linha subir à altura confortável durante a digitação — na
   leitura ele era um deserto no fim da entrada (uso real, 31/08). Tirar o
   foco (tocar fora, fechar o teclado) recolhe o vão; voltar a digitar o
   devolve. A página partilhada nunca o teve por herança — outra lição do
   mesmo dia. */
[data-maquina="ligada"] #folio .escrita:focus-within .cm-content {
  padding-block-end: 55vh;
}

/* ── O markdown, pintado ───────────────────────────────────────────────────
   As classes vêm de `js/realce.mjs`, que declara CLASSE e nunca cor. */

/* Três degraus, e não dois: até 01/09 `#` e `##` dividiam a classe `md-t1` e
   saíam do mesmo tamanho na tela. Ver o cabeçalho de `js/realce.mjs`. */

.md-t0 {
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.25;
}

.md-t1 {
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1.3;
}

.md-t2 {
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.35;
}

/* ── A vista de ESCRITA: o minimalismo do iA Writer (C-50) ─────────────────

   Yuri abriu o iA Writer do lado: `# teste`, `## teste` e `### teste` saem os
   TRÊS no tamanho do corpo, só em negrito, com o sustenido à vista e
   pendurado na margem — o texto dos três e o do parágrafo começam na MESMA
   coluna. A hierarquia se lê contando sustenidos, não medindo alturas.

   A escala acima não morre: ela é a vista RENDERIZADO, no balão ¶.

   `1em` e não `1rem`: o corpo do fólio vem da preferência de tamanho, e o
   título tem de acompanhá-la. `600` fica — é o negrito do iA Writer, e é a
   única coisa que ainda separa um título de um parágrafo quando os tamanhos
   se igualam. */

[data-vista="escrita"] .md-t0,
[data-vista="escrita"] .md-t1,
[data-vista="escrita"] .md-t2 {
  font-size: 1em;
  line-height: inherit;
}

/* ── A calha, que é RECUO DE BLOCO e não faixa da folha (07/09) ────────────

   A marca de bloco (`#`, `>`, `-`, `1.`) fica pendurada à esquerda do texto
   que ela abre, para que a coluna das marcas seja reta. Quem escolhe a
   largura de cada linha é `js/vista.mjs`, por classe e não por `style` — a
   CSP do CloudFront é `style-src 'self'`.

   ── O QUE MUDOU, E POR QUE ────────────────────────────────────────────────

   Até hoje a calha era `padding-inline: 4ch` no `.cm-content`: uma faixa
   aberta na folha inteira, aplicada a TODA linha, com marca ou sem. Yuri pôs
   o Codex e o iA Writer lado a lado no iPhone e a diferença que sobrava era
   essa — no iA Writer o parágrafo comum ENCOSTA na margem, na mesma coluna
   do `>` da citação, e é o TEXTO da citação que recua; aqui parágrafo e
   texto da citação alinhavam juntos a 4ch, com a marca sozinha lá atrás.
   Medido nas duas capturas: o parágrafo estava a 12,5% da borda contra 5,7%.

   Agora o recuo é do BLOCO. Uma linha sem marca não recebe nada e pousa na
   margem; uma linha com marca recebe `padding-inline-start` da largura dela
   e devolve a primeira linha com `text-indent` negativo. A caixa não cresce,
   então `max-width` volta a ser a medida limpa (a regra que somava
   `2 × calha` saiu, e com ela o token `--calha`, que nunca foi declarado em
   lugar nenhum — só existia como fallback de si mesmo).

   ── O TÍTULO RECUA JUNTO, e isso revoga metade do C-50 ────────────────────

   Em 01/09 a regra era «o texto dos três títulos e o do parágrafo começam na
   MESMA coluna». Ela cai: o `#` fica na margem e o texto do título recua com
   ele. Não é preferência — é o que cabe. Pendurar o `#` FORA da margem
   exigiria 4ch (~32px em serifa) dentro dos 20px de respiro do `main`, e o
   `.cm-scroller` é `overflow-x: hidden`: o que sai da caixa é CORTADO, e o
   sustenido apareceria pela metade ou não apareceria. Entre um título
   alinhado com o parágrafo e um parágrafo encostado na margem, Yuri escolheu
   o segundo, que é o que o iA Writer faz.

   Padding e não margem negativa, pelo mesmo motivo de sempre: o que sai da
   caixa do scroller não volta.

   A continuação de uma linha que quebra fica dentro do padding e NÃO recebe
   o recuo negativo — é por isso que a segunda linha de um item longo alinha
   com a primeira letra da primeira, o comportamento certo de lista, ganho de
   graça. */

[data-vista="escrita"] #folio .escrita .cm-line.calha-1 { padding-inline-start: 1ch; text-indent: -1ch; }
[data-vista="escrita"] #folio .escrita .cm-line.calha-2 { padding-inline-start: 2ch; text-indent: -2ch; }
[data-vista="escrita"] #folio .escrita .cm-line.calha-3 { padding-inline-start: 3ch; text-indent: -3ch; }
[data-vista="escrita"] #folio .escrita .cm-line.calha-4 { padding-inline-start: 4ch; text-indent: -4ch; }

.md-forte { font-weight: 700; }
.md-enfase { font-style: italic; }
.md-riscado { text-decoration: line-through; color: var(--tenue); }

.md-codigo {
  font-family: var(--mono);
  font-size: .9em;
  color: var(--tinta-2);
}

.md-citacao {
  color: var(--tinta-2);
  font-style: italic;
}

/* ── A citação na ESCRITA (07/09) ──────────────────────────────────────────

   Texto do corpo, como qualquer outro: nem itálico, nem esmaecido. Quem
   distingue a citação aqui é o RECUO do bloco e o `>` pendurado na margem —
   é assim que o iA Writer a marca, e foi a comparação lado a lado no iPhone
   que pediu a mudança: metade da tela de Yuri era um bloco de itálico cinza,
   porque numa conversa com a Psiqué a fala dela é toda citada.

   Simétrico ao que a folha já faz três degraus acima com `.md-t0/1/2`: a
   escrita desfaz o que o RENDERIZADO aplica. O itálico esmaecido não morre —
   ele é a vista do `¶`, que é a de ler, e lá a distinção de voz vale mais
   que a densidade. */
[data-vista="escrita"] .md-citacao {
  color: inherit;
  font-style: normal;
}

.md-ligacao { color: var(--foco); }

/* Os marcadores quando reaparecem, com o cursor na linha. Visíveis o bastante
   para se editar, apagados o bastante para não competir com a frase. */
.md-marca {
  color: var(--tenue);
  font-weight: 400;
}

/* O wikilink. Na ESCRITA os colchetes ficam à vista, porque ali nada se
   esconde. No RENDERIZADO (C-65) eles saem como no Obsidian e fica o nome, ou
   o apelido, pintado de link: o `renderizado-vivo` os esconde.

   Desde 14/09 ele ABRE — o fólio no app, ou a nota no Obsidian — e a roupa de
   link inteira (mão e sublinhado) só vale onde abre: sob `cm-wikilink-vivo`,
   que o `toque-do-wikilink.mjs` põe no editor do fólio. A página partilhada
   não o monta, e ali o nome fica só na cor, sem prometer um toque.

   O link INLINE (`[rótulo](https://…)`) se veste fora do cursor —
   colchetes, parênteses e URL somem e fica só o rótulo colorido — e, no
   renderizado, o toque no rótulo abre a página. */

/* ── O renderizado COMPLETO (C-65, 14/09) ──────────────────────────────────

   «Testei listas e tabelas e não funcionou … tem que renderizar completo.»
   As classes vêm de `js/renderizado-vivo.mjs` e só existem na vista do ¶.

   A mesma regra do mapa de cliques de sempre: nada aqui põe MARGEM numa
   linha ou num widget. Altura de linha vem de padding, que o CodeMirror mede;
   margem ele não mede, e tudo abaixo dela responderia deslocado. Seletores
   com `.cm-editor .cm-line` porque o tema-base do CodeMirror dá padding à
   linha com dois níveis de classe, e o recuo aqui tem de vencê-lo. */

.md-ligacao-viva {
  color: var(--foco);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
  text-decoration-color: color-mix(in srgb, var(--foco) 45%, transparent);
}

.md-wikilink { color: var(--foco); }

.cm-wikilink-vivo .md-wikilink {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
  text-decoration-color: color-mix(in srgb, var(--foco) 45%, transparent);
}

/* Na escrita, com o ⌘ apertado sobre um wikilink: só o ponteiro muda. Nada
   se desenha no texto — o ⌘-clique é o gesto de abrir sem desenhar (C-50). */
.cm-wikilink-comando .cm-content { cursor: pointer; }

/* A lista: o marcador é um widget com a largura do nível, e a linha recua
   com `text-indent` negativo — a continuação de um item longo alinha com a
   primeira letra, o mesmo desenho da calha da escrita. O `text-indent: 0` do
   marcador é porque um inline-block HERDA o recuo negativo da linha.

   O marcador também herda o `overflow-wrap: anywhere` do `lineWrapping`, e na
   mono «3.» mais o respiro passa de 1.6em: o navegador quebrava entre o número
   e o ponto, e o «3» ficava sozinho numa linha (19/09). Por isso `nowrap`, e
   a largura do nível vira MÍNIMO — o «10.» empurra a frase em vez de partir. */
.md-marcador {
  display: inline-block;
  box-sizing: border-box;
  white-space: nowrap;
  overflow-wrap: normal;
  text-indent: 0;
  text-align: end;
  padding-inline-end: .5em;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.md-marcador-0 { min-width: 1.6em; }
.md-marcador-1 { min-width: 3.2em; }
.md-marcador-2 { min-width: 4.8em; }
.md-marcador-3 { min-width: 6.4em; }
.md-marcador-4 { min-width: 8em; }
.md-marcador-5 { min-width: 9.6em; }

.cm-editor .cm-line.md-item-0 { padding-inline-start: 1.6em; text-indent: -1.6em; }
.cm-editor .cm-line.md-item-1 { padding-inline-start: 3.2em; text-indent: -3.2em; }
.cm-editor .cm-line.md-item-2 { padding-inline-start: 4.8em; text-indent: -4.8em; }
.cm-editor .cm-line.md-item-3 { padding-inline-start: 6.4em; text-indent: -6.4em; }
.cm-editor .cm-line.md-item-4 { padding-inline-start: 8em; text-indent: -8em; }
.cm-editor .cm-line.md-item-5 { padding-inline-start: 9.6em; text-indent: -9.6em; }

/* A citação ganha a barra à esquerda; a aninhada, uma barra por nível. As
   barras são sombras internas, e não borda, para não mexer na largura. */
.cm-editor .cm-line.md-citacao-linha {
  padding-inline-start: 1em;
  box-shadow: inset 2px 0 0 var(--papel-borda);
}

.cm-editor .cm-line.md-citacao-2 {
  padding-inline-start: 2em;
  box-shadow:
    inset 2px 0 0 var(--papel-borda),
    inset calc(1em + 2px) 0 0 var(--papel),
    inset calc(1em + 4px) 0 0 var(--papel-borda);
}

.cm-editor .cm-line.md-citacao-3 {
  padding-inline-start: 3em;
  box-shadow:
    inset 2px 0 0 var(--papel-borda),
    inset calc(1em + 2px) 0 0 var(--papel),
    inset calc(1em + 4px) 0 0 var(--papel-borda),
    inset calc(2em + 4px) 0 0 var(--papel),
    inset calc(2em + 6px) 0 0 var(--papel-borda);
}

/* O callout do Obsidian (`> [!note] Título`): uma caixa tingida do acento,
   título em negrito, corpo em texto do corpo — o itálico da citação é voz
   citada, e o callout não é citação. */
.cm-editor .cm-line.md-callout {
  padding-inline: 1em .75em;
  background: color-mix(in srgb, var(--foco) 7%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--foco) 55%, transparent);
}

.cm-editor .cm-line.md-callout-titulo {
  padding-block-start: .375em;
  font-weight: 600;
}

.md-callout .md-citacao {
  font-style: normal;
  color: inherit;
}

.md-callout-rotulo { font-weight: 600; }

/* O código: em linha vira chip; o bloco cercado vira uma caixa de linhas. */
[data-vista="renderizado"] .md-codigo {
  background: var(--papel-elev);
  border-radius: 3px;
  padding-inline: .2em;
}

.cm-editor .cm-line.md-cerca {
  font-family: var(--mono);
  font-size: .875em;
  background: var(--papel-elev);
  padding-inline: .875em;
}

.cm-editor .cm-line.md-cerca-abre {
  padding-block-start: .375em;
  border-start-start-radius: var(--raio-p);
  border-start-end-radius: var(--raio-p);
}

.cm-editor .cm-line.md-cerca-fecha {
  padding-block-end: .375em;
  border-end-start-radius: var(--raio-p);
  border-end-end-radius: var(--raio-p);
}

[data-vista="renderizado"] .md-cerca .md-codigo {
  font-size: inherit;
  background: none;
  padding-inline: 0;
}

/* A régua: o `---` some e a linha vira um fio no meio da própria altura. */
.cm-editor .cm-line.md-regua {
  color: var(--tenue);
  background: linear-gradient(var(--papel-borda), var(--papel-borda)) center / 100% 1px no-repeat;
}

/* A nota de rodapé: a chamada sobe, a definição desce um corpo. */
.md-nota {
  vertical-align: super;
  font-size: .72em;
  line-height: 0;
  color: var(--foco);
}

.cm-editor .cm-line.md-nota-def {
  font-size: .875em;
  color: var(--tinta-2);
}

/* O `![[embed]]` do vault: um chip com o nome, irmão do chip de anexo. */
.md-embed {
  font-size: .875em;
  color: var(--tinta-2);
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: calc(var(--raio-p) - 2px);
  padding: .0625em .5em;
}

/* A imagem externa (`![alt](https://…)`). Sozinha na linha é bloco, como a
   mídia do dia; no meio da frase fica pequena, para não arrombar a linha. */
.md-imagem-bloco .md-imagem {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--raio-p);
}

.md-imagem-linha .md-imagem {
  max-height: 6em;
  max-width: 100%;
  vertical-align: middle;
  border-radius: 3px;
}

/* O HTML de marcação que o Obsidian desenha. Lista fechada no JS. */
.md-html-u { text-decoration: underline; }
.md-html-mark { background: color-mix(in srgb, var(--foco) 22%, transparent); border-radius: 2px; }
.md-html-sub { vertical-align: sub; font-size: .75em; }
.md-html-sup { vertical-align: super; font-size: .75em; }
.md-html-small { font-size: .85em; }
.md-html-b,
.md-html-strong { font-weight: 700; }
.md-html-i,
.md-html-em { font-style: italic; }
.md-html-s { text-decoration: line-through; }
.md-html-kbd {
  font-family: var(--mono);
  font-size: .85em;
  border: 1px solid var(--papel-borda);
  border-radius: 3px;
  padding-inline: .3em;
}

/* ── A miniatura na home (C-38) ────────────────────────────────────────────
   A primeira imagem do dia, pequena, à direita da linha. Enfeite: sem rede
   ela simplesmente não aparece. */

.dia { position: relative; }

.dia-miniatura {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--raio-p);
  border: 1px solid var(--papel-borda);
}

.dia-com-miniatura .dia-cabeca,
.dia-com-miniatura .dia-resumo {
  padding-inline-end: 3.75rem;
}

/* ── A busca (C-39) ────────────────────────────────────────────────────────── */

.busca {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block-end: 1.5rem;
}

.busca-campo {
  flex: 1;
  font: inherit;
  font-size: .9375rem;
  color: var(--tinta);
  background: var(--papel-elev);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-p);
  padding: .5rem .875rem;
  min-height: var(--alvo);
}

.busca-campo:focus-visible { outline-offset: 0; }

.busca-estado {
  font-size: .8125rem;
  color: var(--tenue);
  white-space: nowrap;
}

/* ── O chip do anexo (C-34) ─────────────────────────────────────────────────
   Widget INLINE: nada de margem vertical — a regra do mapa de cliques. */

.anexo-chip {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  font: inherit;
  font-size: .875em;
  color: var(--tinta-2);
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: calc(var(--raio-p) - 2px);
  padding: .0625em .5em;
  cursor: pointer;
  vertical-align: baseline;
}

.anexo-chip:hover {
  color: var(--tinta);
  border-color: var(--borda-controle);
}

/* ── A #tag pintada (C-40) ────────────────────────────────────────────────── */

.md-tag { color: var(--foco); }

/* A LARGURA é do dialog, nunca do corpo: um corpo mais largo que o
   `max-width` do pai vaza para fora do modal — a textarea dos modelos saiu
   pela borda direita na primeira abertura real (31/08). */
.modal-larga {
  max-width: min(38rem, 92vw);
  width: 100%;
}

.modelos-editor {
  font: inherit;
  font-family: var(--mono);
  font-size: .875rem;
  line-height: 1.6;
  width: 100%;
  min-height: 14rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-p);
  padding: .75rem;
  resize: vertical;
  margin-block: .5rem;
}

.aj-meta-valor {
  min-width: 4.5rem;
  text-align: center;
  font-size: .875rem;
  color: var(--tinta-2);
}

/* ── A régua ────────────────────────────────────────────────────────────────
   Ela não fica na tela. Aparece na seleção (ponteiro fino) ou sobre o teclado
   virtual (ponteiro grosso), e some sozinha. Ver js/barra.mjs. */

.regua {
  display: flex;
  gap: .125rem;
  border: 1px solid var(--cromo-borda);
  border-radius: var(--raio-p);
  padding: .1875rem;
}

.regua-botao {
  font: inherit;
  font-size: .9375rem;
  line-height: 1;
  color: var(--tinta-2);
  background: none;
  border: 0;
  border-radius: calc(var(--raio-p) - 2px);
  padding: .5rem .625rem;
  min-width: 2.25rem;
  cursor: pointer;
}

/* Sem rótulo escrito, então a forma da letra É o rótulo: o B é negrito, o I é
   itálico. Por NOME (`data-comando`), e não por posição: a barra de seleção,
   a fileira e a régua completa ordenam os mesmos botões de jeitos diferentes,
   e um `nth-child` estilizaria o errado. */
[data-comando="negrito"] { font-weight: 700; }
[data-comando="italico"] { font-style: italic; }
[data-comando="riscado"] { text-decoration: line-through; }
[data-comando="link"] { font-size: .875rem; }
[data-comando="titulo"] { font-weight: 600; font-size: 1.0625rem; }
[data-comando="subtitulo"] { font-weight: 600; font-size: .875rem; }
/* Citação e lista são glifos, não letras: sem o aumento eles somem ao lado do
   B e do I, que têm corpo de texto inteiro. */
[data-comando="citacao"] { font-family: var(--serif); font-size: 1.25rem; }
[data-comando="lista"] { font-size: 1.25rem; }
[data-comando="numerada"] { font-weight: 600; font-size: .8125rem; }
[data-comando="tarefa"] { font-size: 1.0625rem; }
[data-comando="codigo"] { font-weight: 600; letter-spacing: -.0625em; }
[data-comando="tabela"] { font-size: 1rem; }
[data-comando="separador"] { font-weight: 600; }

.regua-botao:hover {
  color: var(--tinta);
  background: var(--papel-elev-2);
}

.regua-flutuante {
  position: absolute;
  z-index: 2;
  box-shadow: var(--sombra-erguida);
}

/* A folha NUNCA rola na horizontal. Com lineWrapping não há conteúdo
   horizontal legítimo — o que houve foi rolagem residual clipando as letras
   pela esquerda (uso real, 31/08, não reproduzido em harness; o guarda mata
   a classe inteira). `clip` e não `hidden`: clip também impede a rolagem
   PROGRAMÁTICA. A tabela viva rola por dentro (`overflow-x: auto` próprio). */
.escrita .cm-scroller {
  overflow-x: clip;
}

/* O `cm-announced` é a região que o CodeMirror usa para anunciar mudanças a
   leitores de tela («Selection deleted»). O tema base dele já a tira de vista,
   mas ela apareceu no meio do diário numa carga com arquivos misturados —
   e um texto de acessibilidade visível no meio de uma reflexão é o tipo de
   defeito que ninguém consegue explicar olhando. Fica travado aqui também. */
.escrita .cm-announced {
  position: absolute !important;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A fileira do teclado atravessa a tela toda: no toque, o alvo tem de ser
   generoso, e centralizar seis botões numa largura de iPad deixaria cada um
   pequeno demais para o polegar. */
.regua-fileira {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 2;
  /* Com a régua completa a fileira passou de seis botões a treze: quando não
     couberem, ela ROLA na horizontal. `space-around` cortaria o primeiro
     botão da vista — com overflow, o excedente vaza dos DOIS lados e o
     início fica inalcançável. */
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0;
  border-inline: 0;
  border-block-end: 0;
  /* Sem área segura embaixo: a fileira só existe com o teclado aberto e
     pousa em cima dele, longe da barra de gestos. Até 26/09 era
     `max(env(safe-area-inset-bottom), .375rem)`, com a premissa de que a
     área segura zera com o teclado aberto — no iPad ela NÃO zera (o `env()`
     é constante), e a fileira ganhava ~20 px de vão sob os botões. */
  padding-block: .375rem;
  box-shadow: var(--sombra-aresta);
}

.regua-fileira .regua-botao {
  min-width: var(--alvo);
  min-height: var(--alvo);
  flex-shrink: 0;
}

/* A régua NÃO carrega `.cromo`: ela já aparece só quando chamada, e apagá-la
   por ociosidade a esconderia justamente enquanto se escolhe um botão. */

/* ── A régua completa (C-28) ────────────────────────────────────────────────
   O `+` é o único acréscimo permanente ao fólio, e paga a permanência sendo
   `.cromo`: adormece com o resto quando a escrita começa. O painel que ele
   abre não é cromo — já aparece só quando chamado. */

/* Dia selado não se formata: a barra do rodapé só existe na folha editável.
   E FORA DO FÓLIO ela não existe de jeito nenhum — a lição do `+` que vazou
   para o volume no iPad: um `position: fixed` da tela errada se trava aqui,
   na regra mais explícita que existe. */
#folio[data-editavel="false"] .rodape-regua { display: none; }

:root:not([data-tela="folio"]) .rodape-regua,
:root:not([data-tela="folio"]) .regua-fileira,
:root:not([data-tela="folio"]) .roda-fogo {
  display: none !important;
}

/* Com o teclado virtual aberto, o rodapé fica atrás do teclado (no iOS,
   `position: fixed` ancora na janela de layout, não na visual). Quem o
   substitui é a fileira, que carrega os mesmos comandos e a mesma mídia. */
[data-teclado="aberto"] .rodape-regua { display: none; }

/* ── A barra do rodapé — chumbada, como no iA Writer ───────────────────────
   Textual: Negrito em negrito, Itálico em itálico (as formas vêm das regras
   `data-comando`, partilhadas com a régua). É `.cromo`: escrevendo, some —
   o silêncio da spec continua valendo; um movimento do ponteiro a traz. */

.rodape-regua {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .75rem;
  border-block-start: 1px solid var(--cromo-borda);
  padding: .25rem calc(env(safe-area-inset-right, 0px) + 1rem)
           calc(env(safe-area-inset-bottom, 0px) + .25rem)
           calc(env(safe-area-inset-left, 0px) + 1rem);
}

/* Só a FITA rola; o contador fica fora, sempre à vista. */
.rodape-rolagem {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow-x: auto;
}

/* `margin-inline: auto` na fita centraliza quando cabe e encosta à esquerda
   quando transborda — `justify-content: center` com overflow cortaria o
   começo da barra para fora do alcance. */
.rodape-fita {
  display: flex;
  align-items: center;
  gap: .125rem;
  margin-inline: auto;
}

.rodape-item {
  font: inherit;
  font-size: .8125rem;
  color: var(--tinta-2);
  background: none;
  border: 0;
  border-radius: calc(var(--raio-p) - 2px);
  padding: .5rem .625rem;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.rodape-item:hover {
  color: var(--tinta);
  background: var(--papel-elev);
}

.rodape-fio {
  width: 1px;
  align-self: stretch;
  margin-block: .375rem;
  margin-inline: .5rem;
  background: var(--papel-borda);
  flex-shrink: 0;
}

/* A contagem de palavras na ponta direita, como no iA Writer (C-36). Com a
   meta atingida ela muda de cor — e é só isso: régua, não festa. */
.rodape-contador {
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--tenue);
  white-space: nowrap;
}

.rodape-contador:empty { display: none; }

.rodape-contador[data-meta="atingida"] { color: var(--foco); }

/* A folha respira acima da barra: sem isto a última linha do texto e o selo
   terminariam embaixo dela. */
/* A folha respira ACIMA da barra do topo e ABAIXO da barra do rodapé: as duas
   são fixas agora, e sem os dois respiros a primeira linha nasce embaixo de
   uma e o selo termina embaixo da outra. */
#folio {
  padding-block-start: calc(env(safe-area-inset-top, 0px) + 3.25rem);
  padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 4.5rem);
}

#volume,
#relatorios,
/* O #caderno entra AQUI, e não numa regra própria: `.topo` é `position:
   fixed`, e toda tela que o usa precisa do mesmo respiro. Uma tela nova que
   esquecesse desta linha nasceria com o primeiro item por baixo da barra —
   foi exatamente o que a captura do harness mostrou.

   ── O respiro é MEDIDO (14/09) ──────────────────────────────────────────
   `3.75rem` era a altura do topo do volume, cravada. O topo do caderno
   cresceu até 90 px (título, a linha da meta, EPUB, Leitor) e o fólio 1 do
   «Backlog Apps» passou a começar por baixo dele. `--base-do-topo` é a base
   real do topo, escrita na tela por `js/base-do-topo.mjs`; os 3 px são a
   folga que o volume sempre teve (57 px de topo, 60 de respiro). O número
   antigo fica como PISO: é o que vale na primeira pintura, antes da medida,
   e é o que mantém volume e relatórios exatamente onde estavam. */
#caderno {
  padding-block-start: max(calc(env(safe-area-inset-top, 0px) + 3.75rem),
                           calc(var(--base-do-topo, 0px) + 3px));
}

/* ── O tamanho da tabela — a pergunta do iA Writer ─────────────────────────── */

.tabela-campos {
  display: grid;
  gap: .625rem;
  justify-content: center;
  margin-block: .25rem .5rem;
}

.tabela-campo {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .9375rem;
  color: var(--tinta-2);
}

.tabela-campo input {
  font: inherit;
  width: 4.5rem;
  text-align: center;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-p);
  padding: .375rem .25rem;
}

/* ═══ A ENTRADA ═════════════════════════════════════════════════════════════
   Uma tela que se vê uma vez por aparelho e nunca mais — o refresh token vive
   30 dias e se renova a cada uso. Por isso ela não explica nada: quem chega
   aqui já sabe o que é. */

#entrada {
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
/* ── O lençol  (rodada de design dos irmãos, 2026-09-02) ────────────────────
   Um halo do acento atrás do ícone, a 15% — a mesma prancha 1b do Leitor,
   com a tinta no lugar da brasa. `pointer-events: none` porque ele cobre o
   botão, e um brilho que engole o toque é o defeito mais bobo possível na
   única tela que precisa de um toque só. Não vale para a página pública:
   quem chega por um link partilhado não «entra» no app, só lê. */
#entrada::before {
  content: ""; position: absolute; inset: 0 -30% auto -30%; height: 66%;
  pointer-events: none;
  /* O centro a 46% e não a 30%: com o centro alto, a elipse nascia acima da
     caixa e o gradiente cortava numa borda reta no topo da tela — um lençol
     que termina em régua deixa de ser lençol. A 46% a cauda do gradiente
     (que zera a 70% do raio) morre dentro da caixa nos dois sentidos. */
  background: radial-gradient(60% 60% at 50% 46%,
    color-mix(in srgb, var(--acento) 15%, transparent), transparent 70%);
}
.portao { position: relative; }
/* O ícone do aparelho, com a sombra na cor do acento: é ele que diz de que
   cor o app é, antes de qualquer botão. */
.portao .icone {
  width: 76px; height: 76px; border-radius: 20px; display: block;
  margin-block-end: .4rem;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--acento) 22%, transparent);
}

.portao {
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.marca-grande {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0;
}

.epigrafe {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--tenue);
  margin: 0 0 1rem;
}

/* Botão primário no ACENTO, e não mais em tinta sobre papel: a tinta era o
   botão de um app sem cor própria. 52px de alvo e a cor de cima vinda de
   `--sobre-acento` — nunca `#fff`, que no escuro daria ~2:1 sobre a brasa
   clara. Sombra na cor do acento, como o «Entrar» do Leitor. */
.botao-forte {
  font: inherit;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--sobre-acento);
  background: var(--acento);
  border: 0;
  border-radius: var(--raio);
  padding: 0 2.4rem;
  min-height: 52px;
  min-width: 14rem;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--acento) 25%, transparent);
}

.botao-forte:hover, .botao-forte:focus-visible { filter: brightness(1.08); }

/* ═══ AVISOS ════════════════════════════════════════════════════════════════
   Uma classe para tudo que o app precisa dizer sem interromper. Sem modal,
   sem ícone de alerta, sem cor de perigo: uma linha discreta na cor do foco,
   que se lê ao passar o olho e não exige resposta. */

.aviso {
  font-size: .8125rem;
  color: var(--foco);
  margin: 1rem auto 0;
  max-width: 34rem;
}

.portao-erro { margin-top: .5rem; }

/* A faixa da origem velha (C-90, spec 15 §1). Só no `*.cloudfront.net`, e
   discreta como o `.aviso`: uma linha no papel elevado, pousada no pé da
   tela, sem cor de perigo. O link leva a cor do foco, como os outros. É
   `cromo`: escrevendo, some com o resto da moldura. */
.faixa-origem {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem);
  transform: translateX(-50%);
  z-index: 5;
  box-sizing: border-box;
  width: max-content;
  max-width: min(34rem, calc(100vw - 2rem));
  margin: 0;
  padding: .5rem .875rem;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--tinta-2);
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-pousada);
}

.faixa-origem a {
  color: var(--foco);
}

/* A saída de emergência. Discreta de propósito: ela só aparece depois de algo
   falhar, e não deve competir com o «Entrar» na primeira vez que se vê a
   tela. */
.portao-limpar {
  font: inherit;
  font-size: .8125rem;
  color: var(--tenue);
  background: none;
  border: 0;
  padding: .5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.portao-limpar:hover { color: var(--tinta-2); }

.vazio {
  font-family: var(--serif);
  font-style: italic;
  color: var(--tenue);
  text-align: center;
  padding-block: 3rem;
  margin: 0;
}

/* ═══ O ÓRFÃO DO CONFLITO ═══════════════════════════════════════════════════
   O texto que perdeu a corrida entre dois aparelhos. Ele NÃO é descartado, e
   esta caixa é onde se decide o que fazer com ele. */

.orfao {
  max-width: var(--medida, 38rem);
  font-size: var(--corpo, 1.0625rem);
  margin: 1.5rem auto 0;
  padding: .875rem 1rem;
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio-p);
}

.orfao-texto {
  font-size: .875rem;
  color: var(--tinta-2);
  margin: 0 0 .75rem;
}

.orfao-acoes {
  display: flex;
  gap: .5rem;
}

.orfao-botao {
  font: inherit;
  font-size: .8125rem;
  color: var(--tinta-2);
  background: none;
  border: 1px solid var(--borda-controle);
  border-radius: calc(var(--raio-p) - 2px);
  padding: .4375rem .75rem;
  min-height: 2.25rem;
  cursor: pointer;
}

.orfao-botao:hover { color: var(--tinta); }

/* ═══ A DIVERGÊNCIA ═════════════════════════════════════════════════════════
   Os dois textos, e as duas saídas. Ela não se resolve sozinha de propósito:
   resolver sozinho seria escolher qual texto morre. */

#divergencia { max-width: 46rem; margin-inline: auto; }

.divergencia-titulo {
  font-family: var(--serif);
  font-size: 1.125rem;
  margin: 0 0 .5rem;
}

.divergencia-explicacao {
  font-size: .875rem;
  color: var(--tinta-2);
  margin: 0 0 1.5rem;
}

.divergencia-lados {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.divergencia-lado {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio);
  padding: 1rem;
}

.divergencia-rotulo {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 0;
}

/* `pre` porque é texto do diário e as quebras são do autor. O recorte de
   altura existe para os dois lados caberem lado a lado sem uma página de
   rolagem — o que se quer aqui é COMPARAR, não reler. */
.divergencia-texto {
  font-family: var(--serif);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--tinta);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
}

.divergencia-botao {
  font: inherit;
  font-size: .875rem;
  color: var(--tinta-2);
  background: none;
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-p);
  padding: .5rem;
  min-height: var(--alvo);
  cursor: pointer;
  margin-block-start: auto;
}

.divergencia-botao:hover {
  color: var(--tinta);
  border-color: var(--tinta-2);
}

/* ═══ O MODAL DE CONFIRMAÇÃO ═══════════════════════════════════════════════ */

.modal-confirmacao {
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio);
  color: var(--tinta);
  padding: 1.25rem 1.5rem;
  max-width: 22rem;
  box-shadow: var(--sombra-alta);
  margin: auto;
}

.modal-confirmacao::backdrop {
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
}

.modal-corpo {
  display: grid;
  gap: .875rem;
}

.modal-titulo {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
  color: var(--tinta);
}

.modal-mensagem {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--tinta-2);
  margin: 0;
}

.modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-block-start: .5rem;
}

.modal-botao {
  font: inherit;
  font-size: .8125rem;
  color: var(--tinta-2);
  background: none;
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-p);
  padding: .4375rem .75rem;
  min-height: var(--alvo);
  cursor: pointer;
  transition: color var(--dur) var(--curva), border-color var(--dur) var(--curva);
}

.modal-botao:hover {
  color: var(--tinta);
  border-color: var(--tinta-2);
}

.modal-botao-perigo {
  color: var(--papel);
  background: var(--foco);
  border-color: transparent;
}

.modal-botao-perigo:hover {
  color: var(--papel);
  opacity: .9;
}

/* ── O carimbo de versão ────────────────────────────────────────────────────
   Ele responde «a versão que estou vendo é a que subiu?». Sem opacidade: o que
   o recolhe é o TAMANHO, não a transparência — transparência tira contraste de
   um texto cuja única função é ser conferido. Mesma decisão do Tabula. */
.versao {
  margin-block-start: 1.5rem;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}


/* ── A partilha (C-45) ────────────────────────────────────────────────────── */

.partilha-url {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--tinta-2);
  background: var(--papel);
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio-p);
  padding: .625rem;
  word-break: break-all;
  user-select: all;
}

/* ── A página pública ─────────────────────────────────────────────────────── */

#publica .portao { min-height: 60vh; align-content: center; }

.publica-senha { max-width: 16rem; text-align: center; }

.publica-leitura {
  max-width: var(--medida, 38rem);
  margin-inline: auto;
}

.publica-leitura .data {
  color: var(--tenue);
  font-size: .875rem;
  margin-block-end: 1.5rem;
}

/* ── AS ILHAS — a coluna à direita, em cápsulas  (C-54, 07/09) ─────────────
   Eram seis bolhas brancas soltas, uma embaixo da outra (31/08). Yuri apontou
   o Leitor de novo: «também se transformarem em ilhas em cor grafite
   arrastáveis, como o leitor» — que é a peça inteira, não só a cor.

   Três cápsulas agrupadas por sentido (`familias.mjs`), arrastáveis em bloco
   pela vertical (`ilhas.mjs`). É `.cromo`: escrevendo, some — as ilhas servem
   à pausa, não à digitação.

   `pointer-events: none` na coluna e `auto` nas cápsulas: a coluna é uma faixa
   sobre o texto, e sem isto ela roubaria o toque da prosa nas margens do que
   ela mesma não desenha. */

.ilhas {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 1rem);
  /* `--ilha-y` é onde a BASE da coluna pousa, contada do chão. Sem preferência
     guardada quem manda é este padrão, que centra a coluna na altura da tela;
     `ilhas.mjs` escreve o valor inline no `<body>` quando há arrasto salvo. */
  bottom: var(--ilha-y, calc(50% - var(--ilha-h, 12rem) / 2));
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

/* ── A coluna deitada (C-80a) ───────────────────────────────────────────────
   Quando as cápsulas empilhadas não cabem entre o cabeçalho e o chão visível
   (o iPad com o teclado aberto), `ilhas.mjs` escreve `data-arranjo="linha"` e
   a coluna vira uma fileira: da borda para dentro, na ordem das famílias, com
   as bases alinhadas. Nenhum item muda de tamanho — ver `arranjoDaIlha`. */
.ilhas[data-arranjo="linha"] {
  flex-direction: row-reverse;
  align-items: flex-end;
}

/* ═══ AS ILHAS NO TELEFONE: A BARRA DO RODAPÉ  (14/09) ═══════════════════════
   «A interface no iPhone está muito ruim» — a captura (440×956) mostrava as
   cápsulas por cima do fim das linhas e o ⏱ por cima do texto. 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.

   Abaixo de 40rem (`TELEFONE` em `ilhas.mjs`, que escreve `data-ilhas` na
   raiz), as cápsulas deitam numa fileira de borda a borda, colada em cima da
   barra de formatação, rolável na horizontal, com o ⏱ na ponta esquerda. Os
   treze itens não cabem na largura: os que passam ficam a um arrasto de lado,
   na ordem das famílias. Continua `.cromo` — escrevendo, some com o resto.

   Os seletores começam em `:root[data-ilhas="barra"]` e por isso vencem as
   regras da coluna pela especificidade, não pela posição neste arquivo. */

:root[data-ilhas="barra"] .ilhas {
  left: 0;
  right: 0;
  bottom: var(--ilha-y, 0px);
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  /* A ponta esquerda é do ⏱, que é outra peça pendurada no corpo. */
  padding-inline: calc(env(safe-area-inset-left, 0px) + 3rem)
                  calc(env(safe-area-inset-right, 0px) + .5rem);
  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-block-start: 1px solid var(--cromo-borda);
}

:root[data-ilhas="barra"] .ilhas::-webkit-scrollbar { display: none; }

/* Sem formatação no chão (dia passado), a barra é o chão: respeita o gesto. */
:root[data-ilhas="barra"] .ilhas[data-chao="sim"] {
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

/* Correndo ou recém-feito, o ⏱ vira «⏱ 24:59» / «✓ 25 min» e alarga. */
:root[data-ilhas="barra"]:has(.pomodoro:is([data-estado="correndo"], [data-estado="feito"])) .ilhas {
  padding-inline-start: calc(env(safe-area-inset-left, 0px) + 5.75rem);
}

/* 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. */
:root[data-ilhas="barra"] .capsula {
  flex-direction: row;
  flex-shrink: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  touch-action: pan-x;
}

:root[data-ilhas="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. */
:root[data-ilhas="barra"] .capsula > :not([hidden]) ~ :not([hidden]) {
  border-block-start: 0;
}

/* O ⏱ na ponta esquerda da barra, na tinta do cromo. Só no fólio: nas outras
   telas não há barra, e ele continua no canto de sempre. */
:root[data-ilhas="barra"][data-tela="folio"] .pomodoro {
  left: env(safe-area-inset-left, 0px);
  bottom: var(--ilha-y, 0px);
  z-index: 5;
}

:root[data-ilhas="barra"][data-tela="folio"] .pomodoro-botao {
  min-width: 3rem;
  min-height: 2.75rem;
  /* O tamanho dos vizinhos (`.ilha-item`): com o corpo do botão do canto, o
     ⏱ saía miúdo e apagado ao lado do Aa (captura de 440×956, 14/09). */
  font-size: 1.0625rem;
  color: var(--cromo-tinta-2);
  opacity: 1;
}

/* O fim do texto rola até acima das DUAS barras. */
:root[data-ilhas="barra"] #folio {
  padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 7.75rem);
}

/* Teclado aberto: quem carrega os comandos é a fileira do teclado, e a barra
   ficaria atrás dele (o `fixed` do iOS ancora na janela de layout). */
:root[data-ilhas="barra"][data-teclado="aberto"] .ilhas,
:root[data-ilhas="barra"][data-teclado="aberto"] .pomodoro {
  display: none;
}

.capsula {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--cromo-1), var(--cromo-2));
  border: 1px solid var(--cromo-borda);
  border-radius: 1.375rem;
  box-shadow: var(--sombra-erguida);
  /* É o `overflow: hidden` que faz o raio cortar o primeiro e o último item:
     sem ele, o realce de hover do item do topo escapa pela quina arredondada. */
  overflow: hidden;
  /* Sem isto o Safari decide rolar a página no início do gesto, e o dedo que
     queria mover a ilha rola o fólio 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;
}

/* 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-block-start: 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. É esta regra que recolhe a
   cápsula da IA inteira num dia passado, quando os itens dela somem. */
.capsula:not(:has(> :not([hidden]))) { display: none; }

/* Enquanto a coluna é 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-ilha] { cursor: grabbing; }
body[data-arrastando-ilha] .ilha-item { cursor: grabbing; }

.ilha-item {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--cromo-tinta-2);
  background: none;
  /* Sem raio próprio (a cápsula corta), sem sombra (a cápsula tem a dela) e
     sem fundo (a cápsula É o fundo). */
  border: 0;
  cursor: pointer;
  padding: 0;
  /* Segurar o dedo mostra a etiqueta (14/09). Sem estas duas, o iPad abriria
     antes a lupa de seleção sobre o glifo e o menu de «copiar». */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Os desenhos (19/09, a gramática do Leitor — ver `familias.mjs`). 20 px no
   quadrado de 44: o tamanho da caneta do Leitor, e o que dá ao traço de 1,7 o
   mesmo peso óptico das letras vizinhas (Aa, ¶, ab, §). */
.ilha-item svg { width: 1.25rem; height: 1.25rem; display: block; }
/* O alvo do dedo é o BOTÃO, nunca o traço: sem isto o `elementFromPoint` e o
   `target` do toque são o `<path>`, e quem pergunta «é uma ilha?» pelo alvo
   (a etiqueta, o arraste) ouve «não». */
.ilha-item svg { pointer-events: none; }

/* ── A etiqueta das ilhas (14/09) ───────────────────────────────────────────
   «Versões: onde fica esse painel? Não encontrei.» O nome de cada item, à
   esquerda da cápsula, ao passar o ponteiro (na hora — o `title` nativo leva
   um segundo e meio) e ao segurar o dedo no iPad. Grafite como a cápsula,
   tinta do cromo; `pointer-events: none` para nunca ficar entre o ponteiro e
   o item vizinho. `fixed` e `z-index` acima da coluna: ela pousa por
   coordenadas da janela (`etiqueta-da-ilha.mjs`). */
.ilha-etiqueta {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  padding: .3125rem .625rem;
  font: 500 .8125rem/1.3 var(--sans);
  white-space: nowrap;
  color: var(--cromo-tinta);
  background: var(--cromo-1);
  border: 1px solid var(--cromo-borda);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-erguida);
  font-variant-numeric: tabular-nums;
}

.ilha-item:hover {
  color: var(--cromo-tinta);
  background: color-mix(in srgb, var(--cromo-tinta) 8%, transparent);
}

#balao-ajustes { font-size: .9375rem; font-weight: 600; }

/* ── O item que espera  (06/09, herdado pelo 🖌 em 07/09) ──────────────────
   «Clica e torce pra dar certo.» O 🔊 abre um trabalho que leva minutos, e o
   🖌 outro que leva dezenas de segundos; até 06/09 o único sinal era o aviso
   ao pé da folha, que é `.cromo` e some dois segundos depois de a mão parar.
   Agora o glifo dá lugar ao relógio da espera, contado do `iniciadoEm` do
   SERVIDOR — sair do fólio e voltar reencontra a contagem onde ela estava.

   `tabular-nums` porque o número repinta a cada segundo: sem largura fixa de
   algarismo, «1:19» e «1:11» têm larguras diferentes e o texto pula de lado
   uma vez por segundo. `--cromo-acento` porque o relógio é o ÚNICO sinal da
   espera, e sobre grafite o acento é o do tema escuro em qualquer tema.

   Nenhuma animação: pulsar um glifo parado diz «vivo», pulsar um texto que se
   LÊ atrapalha a leitura dele. Aqui o sinal de vida é o relógio andando. */
.ilha-item[data-estado="gerando"] {
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--cromo-acento);
}

/* O trabalho parou. O motivo inteiro está no `title` e no `aria-label` — num
   quadrado de 2,75rem não cabe frase —, e continua também no aviso ao pé da
   folha, que tem a largura para ela. */
.ilha-item[data-estado="falhou"] {
  font-weight: 700;
  color: var(--cromo-acento);
}

/* ── E enquanto gera, a coluna não dorme ──────────────────────────────────
   DEPOIS de `[data-foco="adormecido"] .cromo` no arquivo, de propósito:
   especificidade parecida, nenhuma `@media` para emprestar peso, quem vence é
   a última — o mesmo modo de falha que o Leitor pagou duas vezes.

   A coluna INTEIRA, e não só o item: `opacity` do pai não se recupera no
   filho, então acender um item dentro de uma coluna a `opacity: 0` só seria
   possível tirando-o da coluna. */
/* O ¶ é um INTERRUPTOR, e tem de parecer um (14/09): «ele deveria ser um
   switch, mostrar ativado ou não». Ligado, a mesma inversão da persona
   escolhida na conversa — a tinta do cromo vira fundo e o glifo fica escuro,
   a marcação mais forte que existe sobre grafite sem inventar cor. Depois do
   `:hover`, com a mesma especificidade: passar o ponteiro não pode apagar o
   estado. Quem escreve o `aria-pressed` é `vestirBalaoDaVista`, no app. */
.ilha-item[aria-pressed="true"],
.ilha-item[aria-pressed="true"]:hover {
  color: var(--cromo-2);
  background: var(--cromo-tinta);
}

:root[data-narrando="sim"] .ilhas {
  opacity: 1;
  visibility: visible;
}

:root:not([data-tela="folio"]) .ilhas { display: none !important; }

/* O passado é só leitura, e uma conversa falada escreve. Isto é a metade
   VISÍVEL da regra; a que protege de verdade é o guarda em `abrirColoquio`,
   porque esconder um botão não impede ninguém de chamá-lo. */
/* Os três que ESCREVEM somem no dia passado: a conversa falada, a pintura e a
   revisão. Metade visível da regra; a que protege é o guarda em cada ação,
   porque esconder um botão não impede ninguém de chamá-lo. O 🖌 entrou nesta
   lista em 07/09, quando saiu da régua — que só existia em dia editável — e
   passou a viver numa ilha que existe sempre. */
#folio[data-editavel="false"] #balao-coloquio,
#folio[data-editavel="false"] #balao-imagem,
#folio[data-editavel="false"] #balao-revisar { display: none; }

/* ── OS REPAROS DA REVISÃO  (C-56, 07/09) ──────────────────────────────────
   «Queria um botão flutuante a mais para revisar a escrita do que escrevi,
   usando IA.»

   Cada reparo é um sublinhado ondulado sob o trecho — a forma que todo
   corretor usa, e que se lê como sugestão e não como erro cometido. O texto
   NÃO muda de cor: ele continua sendo o que se está lendo, e recolorir a
   palavra faria a folha parecer um documento revisado por outra pessoa.

   `text-decoration-skip-ink: none` porque a onda passa sob descendentes de
   `g` e `p` — sem isto ela se parte em pedaços justamente nas palavras
   longas, que são as que mais recebem reparo. */
.reparo {
  text-decoration: underline wavy var(--foco);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-skip-ink: none;
  cursor: pointer;
}

/* A ficha nasce ancorada ao trecho, dentro do fólio (que é `position:
   relative` por causa da régua flutuante). É `.material`: ela é ferramenta,
   não página. */
.reparo-ficha {
  position: absolute;
  z-index: 6;
  max-width: min(22rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border: 1px solid var(--cromo-borda);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-erguida);
  padding: .625rem .75rem;
}

.reparo-par {
  margin: 0;
  font-size: .875rem;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
}

/* O que sai é riscado e apagado; o que entra é a tinta cheia. A direção da
   troca se lê sem depender da seta — que é a parte que some numa tela
   estreita, quando o par quebra em duas linhas. */
.reparo-antes {
  color: var(--cromo-tenue);
  text-decoration: line-through;
}

.reparo-seta { color: var(--cromo-tenue); }

.reparo-depois {
  color: var(--cromo-tinta);
  font-weight: 600;
}

.reparo-acoes {
  display: flex;
  justify-content: flex-end;
  gap: .375rem;
}

.reparo-botao {
  font: inherit;
  font-size: .8125rem;
  color: var(--cromo-tinta-2);
  background: none;
  border: 1px solid var(--cromo-borda);
  border-radius: var(--raio-p);
  padding: .375rem .75rem;
  min-height: var(--alvo);
  cursor: pointer;
  transition: color var(--dur) var(--curva), border-color var(--dur) var(--curva);
}

.reparo-botao:hover {
  color: var(--cromo-tinta);
  border-color: var(--cromo-tinta-2);
}

/* O aceite é o destino do gesto — quem abriu a ficha veio para isto. É o
   acento do tema ESCURO, em qualquer tema, como todo acento sobre grafite. */
.reparo-aceitar {
  color: var(--cromo-acento);
  border-color: color-mix(in srgb, var(--cromo-acento) 45%, var(--cromo-borda));
}

.reparo-aceitar:hover {
  color: var(--cromo-acento);
  border-color: var(--cromo-acento);
  background: color-mix(in srgb, var(--cromo-acento) 12%, transparent);
}

/* ── A LEITURA DE OTHON  (spec 13, 14/09) ───────────────────────────────────
   Notas, não reparos: a marca não pode parecer a onda azul do reparo (que se
   aceita) nem nenhuma das quatro marcas do estilo (que o aparelho conta).
   Sublinhado DUPLO, cor de tijolo — a caneta do professor na margem. O texto
   não muda de cor, pela mesma razão do reparo. Medido no DOM pelo
   `interacao`, ≥ 3:1 sobre o papel nos três temas (marca não textual). */
[data-tema="claro"]  { --nota-othon: #b42318; }
[data-tema="sepia"]  { --nota-othon: #9a1f14; }
[data-tema="escuro"] { --nota-othon: #ff8a7a; }

.nota-othon {
  text-decoration: underline double var(--nota-othon);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .24em;
  text-decoration-skip-ink: none;
  cursor: pointer;
}

/* A ficha da nota: o molde da ficha de reparo, sem par e com um botão só.
   `fixed` porque pousa por coordenadas da janela (`leitura-de-othon.mjs`), e
   depois de `.reparo-ficha` para vencer o `absolute` dela no mesmo peso. */
.nota-ficha {
  position: fixed;
  z-index: 70;
  gap: .375rem;
}

/* O nome da categoria leva, à esquerda, a marca que ele explica — no tijolo
   do tema ESCURO, porque a ficha é grafite em qualquer tema. */
.nota-categoria {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--cromo-tinta-2);
}

.nota-categoria::before {
  content: "ab";
  flex: none;
  text-decoration: underline double #ff8a7a 1.5px;
  text-underline-offset: .2em;
}

.nota-explicacao {
  margin: 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--cromo-tinta);
}

/* O menu do ✍: duas linhas, cada uma dizendo o que devolve. Grafite, como a
   coluna de onde sai; alvo de 44 px por linha. */
.escolha-revisao {
  position: fixed;
  z-index: 70;
  display: grid;
  gap: .125rem;
  width: max-content;
  max-width: min(20rem, calc(100vw - 1rem));
  padding: .25rem;
  border: 1px solid var(--cromo-borda);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-erguida);
}

.escolha-item {
  font: inherit;
  display: grid;
  gap: .125rem;
  text-align: start;
  min-height: var(--alvo);
  padding: .5rem .75rem;
  color: var(--cromo-tinta);
  background: none;
  border: 0;
  border-radius: calc(var(--raio-p) - 2px);
  cursor: pointer;
}

.escolha-item:hover,
.escolha-item:focus-visible {
  background: color-mix(in srgb, var(--cromo-tinta) 10%, transparent);
}

.escolha-rotulo {
  font-size: .875rem;
  font-weight: 600;
}

.escolha-detalhe {
  font-size: .75rem;
  color: var(--cromo-tinta-2);
}

/* ── O menu «Inserir ▾» ───────────────────────────────────────────────────── */

.inserir-menu {
  position: fixed;
  z-index: 5;
  display: grid;
  gap: .125rem;
  min-width: 12rem;
  padding: .25rem;
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-erguida);
}

.inserir-item {
  font: inherit;
  font-size: .875rem;
  text-align: start;
  color: var(--tinta-2);
  background: none;
  border: 0;
  border-radius: calc(var(--raio-p) - 2px);
  padding: .5rem .75rem;
  min-height: var(--alvo);
  cursor: pointer;
  white-space: nowrap;
}

.inserir-item:hover {
  color: var(--tinta);
  background: var(--papel-elev-2);
}

:root:not([data-tela="folio"]) .inserir-menu { display: none !important; }

.publica-vazia {
  color: var(--tenue);
  font-family: var(--serif);
  font-style: italic;
}

/* O ==realce== do Obsidian — marca-texto de verdade, nos três temas pelo
   token de foco com transparência. */
.md-realce {
  background: color-mix(in srgb, var(--foco) 22%, transparent);
  border-radius: 2px;
}

/* A nota para si, `%%…%%` (C-69). Apagada e em itálico, com os `%%` à vista —
   na escrita nada se esconde, e no ¶ ela some fora da linha do cursor (quem
   esconde é o `notas-vivas`). `--tenue` e não `--tinta-2`: a nota é margem,
   não citação, e o `--tenue` já segura 4,5:1 sobre o papel nos três temas
   (medido no DOM pelo `interacao-render`). `.md-nota` já é a nota de RODAPÉ
   do renderizado — daí o nome. */
.md-para-si {
  color: var(--tenue);
  font-style: italic;
}

/* ── Buscar e substituir (C-71) ─────────────────────────────────────────────
   O painel é FERRAMENTA, então é grafite — e os campos são FOLHA, então são
   papel: quem digita o termo digita sobre o mesmo papel em que escreve. Alvo
   de 44px em tudo que se toca (iPad). A cor das ocorrências é o acento com
   transparência, como o ==realce== — e declarada aqui, não no tema-base do
   CodeMirror, que pinta amarelo e laranja de outra paleta. */
.escrita .cm-panels {
  background: none;
  border: 0;
  color: inherit;
  z-index: 5;
}

.busca-painel {
  display: grid;
  gap: .375rem;
  padding: .375rem .5rem;
  background: linear-gradient(180deg, var(--cromo-1), var(--cromo-2));
  color: var(--cromo-tinta-2);
  border-radius: 12px;
  margin-block-end: .5rem;
  font-family: var(--sans, system-ui), system-ui, sans-serif;
  font-size: .9375rem;
}

.busca-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}

/* O campo cede antes dos botões: com 8rem de mínimo o × caía sozinho numa
   segunda linha a 1200px (captura de 14/09). No iPhone a linha ainda quebra,
   e quebrar é melhor que cortar um alvo de toque. */
.busca-campo {
  flex: 1 1 6rem;
  min-width: 6rem;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 .625rem;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--cromo-borda);
  border-radius: 8px;
}

.busca-campo:focus-visible {
  outline: 2px solid var(--cromo-acento);
  outline-offset: 1px;
}

.busca-contagem {
  min-width: 4.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--cromo-tinta-2);
}

.busca-botao {
  min-width: 44px;
  min-height: 44px;
  padding: 0 .625rem;
  font: inherit;
  color: var(--cromo-tinta-2);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.busca-botao:hover {
  color: var(--cromo-tinta);
  background: color-mix(in srgb, var(--cromo-tinta) 8%, transparent);
}

/* O interruptor LIGADO se vê — a lição do ¶. */
.busca-botao[aria-pressed="true"],
.busca-botao[aria-pressed="true"]:hover {
  color: var(--cromo-2);
  background: var(--cromo-tinta);
}

.escrita .cm-searchMatch {
  background: color-mix(in srgb, var(--foco) 20%, transparent);
  border-radius: 2px;
}

.escrita .cm-searchMatch-selected {
  background: color-mix(in srgb, var(--foco) 42%, transparent);
}

/* ── O estilo sem IA (C-70; as regras de Othon, spec 13) ────────────────────
   Uma COR por marca, e a forma também distingue (14/09, retorno do dono: «as
   marcas funcionaram, mas…» — e na captura elas quase não apareciam). As
   primeiras eram `--foco` a 1 px, a mesma cor da onda dos reparos da revisão,
   e a onda de 1 px some na mono do sépia.

     repetição próxima      onda âmbar, 2 px
     intensificador         pontilhado verde, 3 px
     frase labiríntica      fundo violeta
     falta de paralelismo   tracejado fúcsia, 2 px

   Nenhuma é o azul da marca (`--foco`, que é a onda do reparo) nem o tijolo
   da leitura de Othon (sublinhado duplo): estilo e revisão podem estar ligados
   juntos, e o sublinhado de um não pode ser confundido com o do outro. As três
   que vieram das regras de antes guardam cor e forma — a repetição continua
   onda, o intensificador herda o pontilhado do -mente, a labiríntica o fundo
   da frase longa: quem aprendeu a legenda não reaprende. Cada linha segura
   ≥ 3:1 sobre o papel (marca não textual) e o fundo violeta deixa a tinta
   acima de 4,5:1 — medido no DOM pelo `interacao`, nos três temas. */
[data-tema="claro"]  { --estilo-repeticao: #b45309; --estilo-intensificador: #0f766e; --estilo-labirintica: #7c3aed; --estilo-labirintica-fundo: 14%; --estilo-paralelismo: #a21caf; }
[data-tema="sepia"]  { --estilo-repeticao: #a24a05; --estilo-intensificador: #0b6660; --estilo-labirintica: #6d28d9; --estilo-labirintica-fundo: 15%; --estilo-paralelismo: #86198f; }
[data-tema="escuro"] { --estilo-repeticao: #f0a53e; --estilo-intensificador: #4fd1c5; --estilo-labirintica: #b69cf5; --estilo-labirintica-fundo: 24%; --estilo-paralelismo: #f0abfc; }

.escrita .estilo-repeticao {
  text-decoration: underline wavy var(--estilo-repeticao);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: none;
}

.escrita .estilo-intensificador {
  text-decoration: underline dotted var(--estilo-intensificador);
  text-decoration-thickness: 3px;
  text-underline-offset: .22em;
  text-decoration-skip-ink: none;
}

.escrita .estilo-labirintica {
  background: color-mix(in srgb, var(--estilo-labirintica) var(--estilo-labirintica-fundo), transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* O tracejado mora mais longe da letra que a onda (.3em contra .2em): uma
   palavra repetida DENTRO do trecho sem paralelismo leva as duas linhas, e
   coladas elas virariam um borrão só. */
.escrita .estilo-paralelismo {
  text-decoration: underline dashed var(--estilo-paralelismo);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
  text-decoration-skip-ink: none;
}

/* A fichinha do porquê, no molde da ficha de reparo (`.reparo-ficha`), sem
   botão. `fixed` porque pousa por coordenadas da janela (`estilo.mjs`), e
   `pointer-events: none` porque ela nunca pode roubar o toque que ia para o
   texto nem o foco do teclado do iPad. Cada razão leva, à esquerda, a marca
   que ela explica — na cor do tema ESCURO, porque a ficha é grafite em
   qualquer tema. */
.estilo-ficha {
  position: fixed;
  pointer-events: none;
  gap: .25rem;
  z-index: 70;
  --estilo-repeticao: #f0a53e;
  --estilo-intensificador: #4fd1c5;
  --estilo-labirintica: #b69cf5;
  --estilo-paralelismo: #f0abfc;
}

.estilo-razao {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--cromo-tinta);
}

.estilo-razao::before {
  content: "ab";
  flex: none;
  font-size: .75rem;
  color: var(--cromo-tinta-2);
  text-underline-offset: .2em;
}
.estilo-razao[data-tipo="repeticao"]::before { text-decoration: underline wavy var(--estilo-repeticao) 2px; }
.estilo-razao[data-tipo="intensificador"]::before { text-decoration: underline dotted var(--estilo-intensificador) 3px; }
.estilo-razao[data-tipo="paralelismo"]::before { text-decoration: underline dashed var(--estilo-paralelismo) 2px; }
.estilo-razao[data-tipo="labirintica"]::before {
  background: color-mix(in srgb, var(--estilo-labirintica) 38%, transparent);
  border-radius: 2px;
  padding-inline: .125rem;
}

/* ── Os relatórios ──────────────────────────────────────────────────────────
   Contagem, não culpa: números da semana e do mês, tabela de tags, e NADA de
   sequência — a linha da recusa do 06 §4 continua onde estava. */

#relatorios {
  max-width: var(--medida-lista, 44rem);
  margin-inline: auto;
}

.rel-cartoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block-end: 2rem;
}

@media (max-width: 40rem) {
  .rel-cartoes { grid-template-columns: 1fr; }
}

.rel-cartao {
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio);
  padding: 1rem 1.25rem;
}

.rel-rotulo {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-block-end: .75rem;
}

.rel-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

.rel-numero { display: grid; gap: .125rem; }

.rel-numero strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tinta);
}

.rel-numero span {
  font-size: .75rem;
  color: var(--tenue);
}

/* O tracejado mora mais longe da letra que a onda (.3em contra .2em): uma
   palavra repetida DENTRO do trecho sem paralelismo leva as duas linhas, e
   coladas elas virariam um borrão só. */
.escrita .estilo-paralelismo {
  text-decoration: underline dashed var(--estilo-paralelismo);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
  text-decoration-skip-ink: none;
}

.rel-tags {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.rel-tags th {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: start;
  padding: .4375rem .875rem .4375rem 0;
  border-block-end: 2px solid var(--papel-borda);
}

.rel-tags td {
  padding: .4375rem .875rem .4375rem 0;
  border-block-end: 1px solid var(--papel-borda);
}

.rel-tags th:not(:first-child),
.rel-tags td:not(:first-child) {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.rel-tag { color: var(--foco); }

.rel-vazio { color: var(--tenue); font-style: italic; }

/* ── «Neste dia» (C-47) ─────────────────────────────────────────────────────
   O aceno é cromo: escrevendo, some — ele serve à chegada, não à digitação. */

.neste-dia {
  max-width: var(--medida, 38rem);
  width: 100%;
  margin: 0 auto .75rem;
  display: flex;
  align-items: center;
  gap: .375rem;
}

.neste-dia-rotulo { font-size: .75rem; color: var(--tenue); }

.neste-dia-aceno {
  font: inherit;
  font-size: .8125rem;
  color: var(--tinta-2);
  background: none;
  border: 1px solid var(--borda-controle);
  border-radius: 1rem;
  padding: .25rem .75rem;
  cursor: pointer;
}

.neste-dia-aceno:hover { color: var(--tinta); border-color: var(--tinta-2); }

/* ── O volume impresso (C-48) ───────────────────────────────────────────────
   Na tela ele nunca existe; no papel, só ele existe. */

#impressao { display: none; }

/* ══ A roda em volta do fogo — colóquio, conversa, ouvir, ditado, gravador ══
   (26/09 no colóquio, spec 09 §6.2 revogado; 27/09 nos outros quatro)

   «Ficou ótimo. Centralizado, estético, aconchegante, acolhedor. Preciso
   levar isso para o chat com a ia, para a narração e também para o ditado.»
   A cena mora em `js/roda.mjs`, e aqui ela é `.roda-fogo`: cada uso a veste
   com o seu nas seções logo abaixo desta.

   Era um painel BAIXO, pousado na régua de formatação, para não cobrir a
   folha. O Leitor tinha o gêmeo, e o dono o achou «feio, frio, realmente algo
   triste»: a conversa é o momento de PARAR e falar. Lá virou a roda em volta
   do fogo, e aqui é a mesma cena — com a Psiqué do outro lado da fogueira.

   ── A forma ────────────────────────────────────────────────────────────────
   `.roda-fogo` é a NOITE em volta: ocupa a janela, escurece as bordas e deixa o
   miolo mais quente, e NÃO pega toque (`pointer-events: none`) — a folha
   continua visível e rolável atrás. O que se toca é a `.col-roda`, no centro:
   a lareira (canvas da `fogueira.mjs`, que vem do Scriptorium), quem está do
   outro lado, o estado em itálico, as três últimas falas e o pé com «?»,
   «Arrumar» e «Encerrar». Acima da régua e das ilhas, abaixo da gaveta (60).

   ── A cor ──────────────────────────────────────────────────────────────────
   A noite da tela de entrada do Leitor, com os mesmos oito `--entrada-*`
   (grafite + brasa), declarados aqui e não no tema: é uma cena, e a fogueira
   não é a mesma de dia e de noite. Medidos lá contra o pé do céu (#191c20):
   tinta 15,2:1, tinta-2 9,4:1, tênue 6,3:1, brasa 8,1:1. Os tokens do núcleo
   (`--tinta`, `--tenue`, `--borda-controle`…) a pele não redeclara
   (`nucleo.test.mjs`), então os botões de dentro são pintados por SELETOR.

   ── A luz que tremeluz ─────────────────────────────────────────────────────
   `--col-lume` (0–1) chega da fogueira ~12 vezes por segundo, e é a opacidade
   da auréola atrás da lareira: a roda inteira respira com o fogo. */

.roda-fogo {
  --entrada-ceu-alto: #14171a;
  --entrada-ceu-baixo: #191c20;
  --entrada-brasa: #e3a577;
  --entrada-sobre-brasa: #16171a;
  --entrada-tinta: #f7f1e8;
  --entrada-tinta-2: #c4c0b8;
  --entrada-tenue: #a09d96;
  --col-fio: color-mix(in srgb, var(--entrada-brasa) 18%, transparent);
  --acento: var(--entrada-brasa);
  --foco: var(--entrada-brasa);
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(40, 22, 12, .30) 0%, rgba(12, 13, 15, .55) 60%, rgba(8, 9, 10, .78) 100%);
  font-family: var(--sans);
  transition: opacity .45s var(--curva), visibility .45s;
}

/* `visibility`, e não só `opacity`: um painel transparente continua sendo
   parada de teclado e continua sendo lido pelo VoiceOver. */
.roda-fogo[data-aberto="nao"] { opacity: 0; visibility: hidden; }

/* A coluna dos balões recua enquanto a roda está aberta. */
#folio:has(.roda-fogo[data-aberto="sim"]) .ilhas { opacity: .25; }

.roda-fogo .col-roda {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  width: min(30rem, 100%);
  max-height: 100%;
  overflow: hidden auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 0 1.5rem 1.4rem;
  text-align: center;
  color: var(--entrada-tinta);
  background: linear-gradient(180deg, var(--entrada-ceu-alto) 0%, var(--entrada-ceu-baixo) 100%);
  border-radius: 28px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--entrada-brasa) 14%, transparent),
    0 30px 80px rgba(0, 0, 0, .55),
    0 0 140px -30px color-mix(in srgb, var(--entrada-brasa) 45%, transparent);
  transition: transform .5s var(--curva);
}
.roda-fogo[data-aberto="nao"] .col-roda { transform: translateY(1rem) scale(.97); }

/* A auréola: a luz do fogo no ar da roda, mais forte em volta da lareira. */
.roda-fogo .col-roda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(90% 60% at 50% 26%,
      rgba(255, 150, 70, .24) 0%, rgba(230, 110, 50, .08) 50%, transparent 78%);
  opacity: calc(.4 + var(--col-lume, .6) * .6);
}

/* A lareira ocupa a largura inteira da roda, de borda a borda. */
.roda-fogo .col-lareira {
  width: calc(100% + 3rem);
  height: 200px;
  margin: 0 -1.5rem -.4rem;
  flex: 0 0 auto;
}
.roda-fogo .col-fogo { display: block; width: 100%; height: 100%; }

.roda-fogo .col-sobre {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}
.roda-fogo .col-sobre-marca {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--entrada-brasa);
}
.roda-fogo .col-sobre-quem {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--entrada-tinta);
}

.roda-fogo .col-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .45rem;
  color: var(--entrada-tinta-2);
}
/* O fogo é o mostrador agora; a luz fica no DOM (o estado mora nela também)
   mas não se desenha. */
.roda-fogo .col-luz { display: none; }
.roda-fogo .col-quem {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
}
/* Tabular: o relógio anda a cada segundo, e um dígito de largura variável faz
   a linha inteira tremer. */
.roda-fogo .col-tempo {
  font-size: 12px;
  color: var(--entrada-tenue);
  font-variant-numeric: tabular-nums;
}
.roda-fogo .col-tempo::before { content: "·"; margin-right: .45rem; }

/* Três linhas à vista, e não a conversa inteira: isto é conferência — «ela
   entendeu o que eu disse?» —, não histórico. O histórico vai para o dia. Em
   serifa de leitura: é conversa, não cromo. */
.roda-fogo .col-fala {
  width: 100%;
  max-height: 15rem;
  overflow-y: auto;
  margin-top: .25rem;
  padding-top: .8rem;
  /* A fala mais antiga se apaga no alto em vez de ser cortada no fio. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.6rem);
  mask-image: linear-gradient(180deg, transparent 0, #000 1.6rem);
  border-top: 1px solid var(--col-fio);
  text-align: left;
  font-family: var(--serif-leitura);
  font-size: 16px;
  line-height: 1.55;
  color: var(--entrada-tinta);
}

/* A fala da Psiqué é a tinta cheia; a de Yuri, a de repouso. */
.roda-fogo .col-linha { margin: 0 0 .55rem; color: var(--entrada-tinta); }
.roda-fogo .col-linha:last-child { margin-bottom: 0; }
.roda-fogo .col-linha[data-papel="eu"] { color: var(--entrada-tinta-2); }

.roda-fogo .col-papel {
  display: inline-block;
  margin-right: .4rem;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--entrada-brasa);
}
.roda-fogo .col-linha[data-papel="eu"] .col-papel { color: var(--entrada-tenue); }

.roda-fogo .col-vazio {
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--entrada-tinta-2);
}

/* O aviso NÃO se esconde num cinza discreto: ele existe porque alguma coisa
   não aconteceu, e um braço mudo trava quem chamou (lição de 03/09). */
.roda-fogo .col-aviso {
  width: 100%;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
  border-top: 1px solid var(--col-fio);
  padding-top: .6rem;
  color: var(--entrada-brasa);
}
.roda-fogo .col-aviso[data-tom="nota"] { color: var(--entrada-tinta-2); }
.roda-fogo .col-aviso[hidden] { display: none !important; }

/* O pé: «?», «Arrumar» (só na falha) e «Encerrar», em pílulas de brasa. */
.roda-fogo .col-pe {
  margin-top: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.roda-fogo .modal-botao {
  flex: 0 0 auto;
  min-height: var(--alvo);
  padding: 0 1.6rem;
  border-radius: 999px;
  font-size: .9rem;
  letter-spacing: .02em;
  color: var(--entrada-brasa);
  border-color: color-mix(in srgb, var(--entrada-brasa) 45%, transparent);
  transition: background var(--dur) var(--curva), color var(--dur) var(--curva);
}
.roda-fogo .modal-botao:hover,
.roda-fogo .modal-botao:focus-visible {
  background: var(--entrada-brasa);
  color: var(--entrada-sobre-brasa);
  border-color: var(--entrada-brasa);
}
.roda-fogo .modal-botao[hidden] { display: none !important; }
.roda-fogo .ajuda-botao { color: var(--entrada-tenue); }
.roda-fogo .ajuda-botao:hover,
.roda-fogo .ajuda-botao:focus-visible { color: var(--entrada-tinta); }

/* O telefone: a lareira baixa um pouco, e a roda fica com a largura toda. */
@media (max-width: 37rem) {
  .roda-fogo .col-roda { padding: 0 1.1rem 1.1rem; border-radius: 24px; }
  .roda-fogo .col-lareira { width: calc(100% + 2.2rem); margin: 0 -1.1rem -.4rem; height: 160px; }
  .roda-fogo .col-sobre-quem { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .roda-fogo, .roda-fogo .col-roda { transition: none; }
}

/* Sem relógio (a conversa escrita), sem o ponto que o antecede. */
.roda-fogo .col-tempo:empty { display: none; }

/* O pé dobra em vez de cortar: a conversa tem três botões, e no telefone
   estreito eles não cabem numa linha. */
.roda-fogo .col-pe { flex-wrap: wrap; }

/* O botão que existe mas não é o gesto da cena («Recomeçar», «Cancelar»):
   sem o contorno de brasa, até o dedo pousar. */
.roda-fogo .modal-botao.col-discreto {
  color: var(--entrada-tenue);
  border-color: transparent;
}

/* ── A roda apertada: o telefone com o teclado aberto ──────────────────────
   A roda segue a janela visual (`roda.mjs`), e abaixo de 560 px visíveis a
   lareira inteira não deixa lugar para a fala e o campo. O fogo encolhe — o
   mostrador continua lá —, e a marca «À beira do fogo» sai. */
.roda-fogo[data-apertada="sim"] .col-roda { gap: .35rem; padding-bottom: .9rem; }
.roda-fogo[data-apertada="sim"] .col-lareira { height: 72px; }
.roda-fogo[data-apertada="sim"] .col-sobre-marca { display: none; }
.roda-fogo[data-apertada="sim"] .col-pe { margin-top: .2rem; }

/* ── A conversa escrita na roda  (27/09) ───────────────────────────────────
   Sóphron, Álvares, Einstein, Da Vinci, Jobs e a Psiqué do outro lado do
   fogo. Era um cartão à direita com o fio de papel entre faixas grafite
   (11/09); agora é a cena do colóquio, com duas peças a mais: os chips de
   quem responde, logo sob o nome, e o campo de escrever, sobre o pé.

   A roda é mais alta que a do colóquio (o fio inteiro se relê, não só as três
   últimas falas), e a lareira, mais baixa, para ceder a altura ao fio. */
.conversa-folha .col-roda { width: min(34rem, 100%); }
.conversa-folha .col-lareira { height: 150px; }
.conversa-folha .col-fala {
  flex: 1 1 auto;
  min-height: 4rem;
  max-height: min(24rem, 46vh);
}

/* `flex: 0 0 auto`: na roda apertada a fileira rola de lado, e um item de
   flex com `overflow` encolhe até cortar os chips ao meio. */
.roda-fogo .conversa-personas {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  margin: .15rem 0 .1rem;
}
.roda-fogo .conversa-persona {
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .02em;
  min-height: 2.25rem;
  padding: 0 .85rem;
  border-radius: 999px;
  color: var(--entrada-tinta-2);
  background: transparent;
  border: 1px solid var(--col-fio);
  cursor: pointer;
  transition: background var(--dur) var(--curva), color var(--dur) var(--curva), border-color var(--dur) var(--curva);
}
.roda-fogo .conversa-persona:hover,
.roda-fogo .conversa-persona:focus-visible {
  color: var(--entrada-tinta);
  border-color: color-mix(in srgb, var(--entrada-brasa) 45%, transparent);
}
.roda-fogo .conversa-persona[aria-pressed="true"] {
  color: var(--entrada-sobre-brasa);
  background: var(--entrada-brasa);
  border-color: var(--entrada-brasa);
}

/* O texto da persona pode ter quebras (o markdown mínimo as pinta com <br>);
   o de Yuri, também (Shift+Enter). */
.roda-fogo .conversa-texto { white-space: pre-wrap; }

/* C-107: a resposta crescendo enquanto o modelo escreve. O que muda é só o
   cursor em brasa no fim, que diz «ainda escrevendo» sem uma palavra a mais. */
.roda-fogo .conversa-parcial .conversa-texto::after {
  content: "▍";
  margin-inline-start: .125em;
  color: var(--entrada-brasa);
}

/* No apertado, os chips viram UMA fileira que rola de lado: duas linhas de
   chips com o teclado aberto comiam a fala inteira. */
.roda-fogo[data-apertada="sim"] .conversa-personas {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  width: 100%;
  scrollbar-width: none;
}
.roda-fogo[data-apertada="sim"] .conversa-persona { flex: 0 0 auto; }

/* O campo: brasa no cursor e no contorno do foco, a noite por dentro. 16 px
   e não menos — abaixo disso o Safari do iPhone dá zoom no campo ao focar. */
.roda-fogo .col-escrever {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  margin-top: .35rem;
}
.roda-fogo .conversa-campo {
  flex: 1;
  min-width: 0;
  font-family: var(--serif-leitura);
  font-size: 16px;
  line-height: 1.45;
  color: var(--entrada-tinta);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--col-fio);
  border-radius: 18px;
  padding: .6rem .9rem;
  resize: none;
  caret-color: var(--entrada-brasa);
}
.roda-fogo .conversa-campo::placeholder { color: var(--entrada-tenue); font-style: italic; }
.roda-fogo .conversa-campo:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--entrada-brasa) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--entrada-brasa) 16%, transparent);
}
.roda-fogo .col-escrever .conversa-enviar { padding: 0 1.2rem; }

/* ── Ouvir este dia na roda  (27/09) ───────────────────────────────────────
   A voz do aparelho lendo o dia: do outro lado do fogo, o dia; na fala, o
   trecho que se ouve com a palavra acesa em brasa; no relógio, a voz. A
   folha continua seguindo a voz atrás da noite, e rola à vontade. */
.ouvir-roda .col-trecho {
  margin: 0;
  font-family: var(--serif-leitura);
  font-size: 17px;
  line-height: 1.6;
  color: var(--entrada-tinta-2);
}
.ouvir-roda .col-acesa {
  color: var(--entrada-tinta);
  background: color-mix(in srgb, var(--entrada-brasa) 24%, transparent);
  border-radius: 3px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--entrada-brasa) 24%, transparent);
}
/* A narração da Azure (onde não há voz do aparelho) toca aqui dentro. */
.ouvir-roda audio {
  display: block;
  width: 100%;
  color-scheme: dark;
}

/* ── O ditado e o gravador na roda  (27/09) ────────────────────────────────
   O que se diz pousa na folha; na roda, as últimas frases, para conferir. Na
   gravação, o ponto vermelho continua: um microfone aberto se diz sem
   ambiguidade, e o fogo sozinho não diz «gravando». */
.roda-fogo[data-gravando="sim"] .col-tempo::before {
  content: "●";
  color: #e5533d;
  animation: roda-gravando 2s ease-in-out infinite;
}
@keyframes roda-gravando {
  50% { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .roda-fogo[data-gravando="sim"] .col-tempo::before { animation: none; }
}

@media print {
  @page { margin: 0; }

  body > *:not(#impressao) { display: none !important; }

  #impressao {
    display: block;
    font-family: "Literata", Georgia, serif;
    color: #26221c;
    font-size: 12.5pt;
    line-height: 1.75;
  }

  /* ── A capa: papel de guarda ─────────────────────────────────────────── */
  .imp-capa {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #f7f3ec;
    page-break-after: always;
    text-align: center;
  }

  .imp-marca {
    font-size: 10pt;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: #a39a8c;
    margin-block-end: 22pt;
  }

  .imp-titulo {
    font-size: 46pt;
    font-weight: 500;
    font-style: italic;
    margin: 0;
    line-height: 1.1;
  }
  .imp-titulo::first-letter { text-transform: uppercase; }

  .imp-ano {
    font-size: 15pt;
    letter-spacing: .3em;
    color: #6b6357;
    margin-block-start: 6pt;
  }

  .imp-filete {
    width: 40pt;
    border-block-end: 1pt solid #c9c0b2;
    margin-block: 26pt;
  }

  .imp-estatistica {
    font-size: 10.5pt;
    color: #8a8172;
    font-variant-numeric: tabular-nums;
  }

  .imp-autor {
    font-size: 11pt;
    letter-spacing: .12em;
    color: #4d463c;
    margin-block-start: 60pt;
    text-transform: uppercase;
  }

  /* ── O dia: uma abertura de capítulo ─────────────────────────────────── */
  .imp-dia {
    page-break-before: always;
    padding: 20mm 19mm 16mm;
  }

  /* No A4 a mancha respira mais — margens de página grande, medida contida
     para a linha não passar de ~75 caracteres. */
  #impressao[data-papel="a4"] .imp-dia {
    padding: 26mm 30mm 20mm;
  }
  #impressao[data-papel="a4"] {
    font-size: 12pt;
  }
  .imp-dia:first-of-type { page-break-before: avoid; }

  .imp-data {
    display: flex;
    align-items: baseline;
    gap: 10pt;
    border-block-end: .75pt solid #d8d1c4;
    padding-block-end: 8pt;
    margin-block-end: 16pt;
  }

  .imp-num {
    font-size: 34pt;
    font-weight: 600;
    line-height: 1;
    color: #26221c;
  }

  .imp-data-lado { display: inline-flex; flex-direction: column; gap: 1pt; }

  .imp-semana {
    font-size: 11pt;
    font-variant: small-caps;
    letter-spacing: .14em;
    color: #4d463c;
  }

  .imp-mesano {
    font-size: 8.5pt;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #a39a8c;
  }

  /* ── A prosa ─────────────────────────────────────────────────────────── */
  #impressao p { margin: 0 0 9pt; text-align: justify; hyphens: auto; }

  /* A capitular abre o dia — só quando o primeiro bloco É prosa. */
  .imp-data + p::first-letter {
    font-size: 34pt;
    line-height: .85;
    float: left;
    padding: 2pt 5pt 0 0;
    font-weight: 500;
  }

  #impressao h3, #impressao h4, #impressao h5, #impressao h6 {
    font-size: 13.5pt;
    font-weight: 600;
    margin: 14pt 0 6pt;
  }

  #impressao blockquote {
    margin: 10pt 0 10pt 10pt;
    padding-inline-start: 10pt;
    border-inline-start: 1.5pt solid #c9c0b2;
    font-style: italic;
    color: #4d463c;
  }

  #impressao ul { list-style: none; padding-inline-start: 2pt; margin: 6pt 0 10pt; }
  #impressao li { margin-block-end: 3pt; }
  #impressao li::before { content: "—\2002"; color: #a39a8c; }
  #impressao li:has(> :first-child)::before { content: ""; }

  #impressao mark {
    background: #f3e2b3;
    padding-inline: 1pt;
  }

  #impressao code {
    font-family: "iA Writer Mono", ui-monospace, monospace;
    font-size: 10pt;
    background: #f2ede4;
    padding: 0 3pt;
    border-radius: 2pt;
  }

  #impressao hr {
    border: 0;
    text-align: center;
    margin: 14pt 0;
  }
  #impressao hr::after {
    content: "· · ·";
    letter-spacing: .6em;
    color: #a39a8c;
  }

  .imp-imagem {
    display: block;
    max-width: 100%;
    max-height: 105mm;
    margin: 10pt auto;
    border-radius: 2mm;
  }

  .imp-tabela {
    border-collapse: collapse;
    margin: 10pt 0;
    font-size: 10.5pt;
  }
  .imp-tabela th {
    font-variant: small-caps;
    letter-spacing: .08em;
    font-weight: 600;
    text-align: start;
    border-block-end: 1pt solid #26221c;
    padding: 3pt 14pt 3pt 0;
  }
  .imp-tabela td {
    border-block-end: .5pt solid #d8d1c4;
    padding: 3pt 14pt 3pt 0;
  }

  /* O floreio que fecha o dia. */
  .imp-dia::after {
    content: "❦";
    display: block;
    text-align: center;
    color: #c9c0b2;
    font-size: 12pt;
    margin-block-start: 16pt;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   A GAVETA E A ESTANTE  (spec 10 — os cadernos)

   A gaveta é sobreposição, não tela: o app continua abrindo no fólio de hoje,
   e nada aqui participa do `data-tela`.
   ═══════════════════════════════════════════════════════════════════════════ */

.gaveta-abrir {
  appearance: none;
  background: none;
  border: 0;
  color: var(--cromo-tinta-2);
  font-size: 1.05rem;
  line-height: 1;
  /* 44px, como todo botão desta casa. O glifo é pequeno; o alvo não é. */
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: var(--raio-p);
}
.gaveta-abrir:hover { color: var(--cromo-tinta); }
.gaveta-abrir:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.gaveta-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .34);
  opacity: 0;
  transition: opacity .18s ease;
}
[data-gaveta="aberta"] .gaveta-fundo { opacity: 1; }

.gaveta {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 61;
  width: min(19rem, 84vw);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  /* O cromo da casa, e não o papel: a gaveta é ferramenta, e ferramenta é
     grafite. Papel aqui a faria parecer uma segunda folha sobre a folha. */
  background: linear-gradient(180deg, var(--cromo-1), var(--cromo-2));
  border-inline-end: 1px solid var(--cromo-borda);
  padding-block: max(env(safe-area-inset-top), .75rem) max(env(safe-area-inset-bottom), .75rem);
  padding-inline-start: max(env(safe-area-inset-left), .5rem);
  padding-inline-end: .5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform .2s ease;
}
[data-gaveta="aberta"] .gaveta { transform: translateX(0); }

.gaveta-atalhos { list-style: none; margin: 0; padding: 0; }
.gaveta-rodape {
  margin-block-start: auto;
  border-block-start: 1px solid var(--cromo-borda);
  padding-block-start: .35rem;
}

.gaveta-atalho,
.gaveta-caderno {
  appearance: none;
  width: 100%;
  background: none;
  border: 0;
  color: var(--cromo-tinta);
  font: inherit;
  text-align: start;
  padding: .6rem .7rem;
  min-height: 44px;
  border-radius: var(--raio-p);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.gaveta-atalho:hover,
.gaveta-caderno:hover { background: rgba(255, 255, 255, .06); }
.gaveta-atalho:focus-visible,
.gaveta-caderno:focus-visible,
.gaveta-novo:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

.gaveta-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .7rem .2rem;
  margin-block-start: .35rem;
  border-block-start: 1px solid var(--cromo-borda);
}
.gaveta-titulo {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cromo-tenue);
}
.gaveta-novo {
  appearance: none;
  background: none;
  border: 0;
  color: var(--cromo-tinta-2);
  font-size: 1.15rem;
  line-height: 1;
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  border-radius: var(--raio-p);
  cursor: pointer;
}
.gaveta-novo:hover { color: var(--cromo-acento); }

.gaveta-lista { list-style: none; margin: 0; padding: 0; }
.gaveta-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaveta-conta { color: var(--cromo-tenue); font-size: .78rem; flex: none; }
.gaveta-vault { color: var(--cromo-tenue); font-size: .8rem; flex: none; }
.gaveta-recusa { color: var(--cromo-acento); font-size: .85rem; flex: none; }
.gaveta-vazio {
  color: var(--cromo-tenue);
  padding: .6rem .7rem;
  font-size: .86rem;
}

/* ── A tela do caderno ──────────────────────────────────────────────────── */

#caderno {
  max-width: var(--medida-lista, 44rem);
  font-size: var(--corpo, 1.0625rem);
  margin-inline: auto;
}

.caderno-cabeca { min-width: 0; flex: 1; }

/* ── No estreito, os botões descem para a linha de baixo (14/09) ─────────────
   Seis ações (rolo, 🔍, ⋯, EPUB, Leitor, novo fólio) não cabem ao lado do nome
   em 390 px: sem quebra, o flex espremia o cabeçalho a ZERO — o título sumia
   inteiro — e o «novo fólio» saía pela borda. Com quebra, o nome guarda uma
   largura legível e as ações descem; o topo cresce, e é por isso que o
   respiro da tela é medido (`--base-do-topo`) e não cravado. */
#caderno .topo { flex-wrap: wrap; row-gap: 0; }
#caderno .caderno-cabeca { flex-basis: 10rem; }
#caderno .topo-acoes { flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; }
.caderno-titulo {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caderno-subtitulo {
  margin: 0;
  font-size: .74rem;
  color: var(--cromo-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Do caderno para fora: EPUB e Leitor (spec 12 §10) ─────────────────────
   Botões de PALAVRA ao lado dos de glifo: em corpo menor e versal espaçada,
   para «EPUB» e «Leitor» não gritarem mais alto que o 🔍 e o ⋯. O relógio da
   espera usa algarismos tabulares — «0:09» → «0:10» sem o botão pular.
   O estado se vê pela cor do acento, como no balão (`.ilha-item`). */
.caderno-saida {
  font-size: .8125rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.material .caderno-saida[data-estado="gerando"] {
  font-weight: 600;
  color: var(--cromo-acento);
}
.material .caderno-saida[data-estado="falhou"] {
  font-weight: 700;
  color: var(--cromo-acento);
}
.caderno-leitor-marca[data-estado="desatualizado"] {
  color: var(--cromo-acento);
}

.aviso-recusa {
  margin: .75rem var(--respiro, 20px) 0;
  padding: .6rem .75rem;
  border-radius: var(--raio-p);
  border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  background: color-mix(in srgb, var(--acento) 8%, var(--papel-elev));
  color: var(--tinta-2);
  font-size: .84rem;
  line-height: 1.45;
}

.folios { list-style: none; margin: 0; padding: 0; }

.folio-linha {
  border-block-start: 1px solid var(--regra);
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  background: var(--papel);
  /* `relative` porque o arrasto move a linha com `translateY`, e uma linha
     sem contexto de empilhamento passaria POR BAIXO da vizinha. */
  position: relative;
}
.folio-linha:last-child { border-block-end: 1px solid var(--regra); }

/* ── O buraco anda junto com o dedo ────────────────────────────────────────
   A transição é das VIZINHAS, e só delas: elas deslizam para abrir espaço e
   por isso o movimento precisa de tempo para ser lido. A linha arrastada não
   persegue o dedo — ela É o dedo, e qualquer transição nela vira atraso.

   A classe entra na lista só durante o gesto: fora dele, repintar a lista não
   deve animar nada. */
.folios-arrastando .folio-linha {
  transition: transform .12s ease;
}
.folios-arrastando .folio-arrastando {
  transition: none;
}
.folio-arrastando {
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  /* Opaca, e não translúcida: sobre a linha vizinha, .95 deixava o texto de
     baixo aparecer por dentro das letras. */
  background: var(--papel-elev);
  border-radius: var(--raio-p);
}

.folio-alca {
  appearance: none;
  background: none;
  border: 0;
  color: var(--tenue);
  font-size: .95rem;
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  cursor: grab;
  /* Sem isto o gesto de arrastar rola a página no iPad em vez de mover o
     fólio — o navegador ganha o toque antes do `pointermove`. */
  touch-action: none;
  user-select: none;
}
.folio-alca:active { cursor: grabbing; }

.folio-abrir {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  color: var(--tinta);
  text-align: start;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  padding-block: .7rem;
  padding-inline: 0 .5rem;
  min-width: 0;
  cursor: pointer;
}
.folio-numero {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tenue);
  flex: none;
  min-width: 1.4rem;
}
.folio-corpo { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.folio-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio-sem-titulo { color: var(--tenue); font-style: italic; }
.folio-meta { font-size: .76rem; color: var(--tenue); }
.folio-vault { color: var(--tenue); font-size: .8rem; flex: none; }
.folio-divergente { color: var(--acento); font-size: .85rem; flex: none; }

.folio-apagar {
  appearance: none;
  background: none;
  border: 0;
  color: var(--tenue);
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: var(--raio-p);
}
.folio-apagar:hover { color: var(--foco); }
.folio-abrir:focus-visible,
.folio-alca:focus-visible,
.folio-apagar:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

/* O campo largo dos diálogos do caderno: nome e destino ocupam a linha. */
.tabela-campos-coluna { flex-direction: column; align-items: stretch; }
.tabela-campo-largo { width: 100%; }
.tabela-campo-largo input { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .gaveta, .gaveta-fundo { transition: none; }
}

/* ── O POMODORO  (C-81) ──────────────────────────────────────────────────────
   Fora das telas, pendurado no corpo: é o que o mantém à vista ao trocar do
   fólio para o volume ou para um caderno. Sutil de propósito — tinta tênue,
   sem fundo, no canto de baixo à esquerda, acima da barra do rodapé (as ilhas
   e os balões ficam à direita; gravação e narração, no centro). Veste `.cromo`
   e adormece com o resto enquanto se escreve. */
.pomodoro {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 1rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem);
  z-index: 4;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: .5rem;
}

[data-tela="entrada"] .pomodoro,
[data-tela="publica"] .pomodoro { display: none; }

/* Digitando o nome da atividade, a peça não pode adormecer debaixo dos dedos:
   o `vigiarFoco` ouve TODA tecla da raiz. Depois da regra que adormece. */
[data-foco="adormecido"] .pomodoro:focus-within {
  opacity: 1;
  visibility: visible;
}

.pomodoro-botao {
  appearance: none;
  min-height: var(--alvo);
  padding: 0 .5rem;
  font: 400 .8125rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--dur) var(--curva), color var(--dur) var(--curva);
}

.pomodoro-botao:hover,
.pomodoro-botao[aria-expanded="true"],
.pomodoro[data-estado="feito"] .pomodoro-botao { opacity: 1; color: var(--tinta-2); }

.pomodoro[data-estado="correndo"] .pomodoro-botao { opacity: .85; }

.pomodoro-painel {
  width: min(18rem, calc(100vw - 2rem));
  padding: .75rem;
  color: var(--tinta);
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-erguida);
  font: 400 .875rem/1.4 var(--sans);
}

.pomodoro-parado,
.pomodoro-correndo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.pomodoro-linha {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.pomodoro-campo {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 .625rem;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-p);
}

.pomodoro-minutos {
  width: 4.25rem;
  font-variant-numeric: tabular-nums;
}

.pomodoro-unidade {
  margin-inline-end: auto;
  color: var(--tinta-2);
}

.pomodoro-atalho {
  appearance: none;
  min-width: 2.5rem;
  min-height: 2.5rem;
  font: 400 .8125rem/1 var(--mono);
  color: var(--tinta-2);
  background: none;
  border: 1px solid var(--borda-controle);
  border-radius: 999px;
  cursor: pointer;
}

.pomodoro-iniciar {
  appearance: none;
  min-height: var(--alvo);
  font: 600 .875rem/1 var(--sans);
  color: var(--sobre-acento);
  background: var(--acento);
  border: 0;
  border-radius: var(--raio-p);
  cursor: pointer;
}

.pomodoro-recado:empty { display: none; }

.pomodoro-recado {
  margin: 0;
  font-size: .8125rem;
  color: var(--perigo, var(--foco));
}

.pomodoro-atividade {
  margin: 0;
  overflow-wrap: anywhere;
}

.pomodoro-encerrar {
  appearance: none;
  min-height: var(--alvo);
  font: inherit;
  color: var(--tinta-2);
  background: none;
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-p);
  cursor: pointer;
}

/* O alarme (C-82): uma linha discreta quando vai tocar, na cor do recado
   quando NÃO vai — o timer sem alarme não pode parecer um timer com alarme. */
.pomodoro-alarme:empty { display: none; }

.pomodoro-alarme {
  margin: 0;
  font-size: .8125rem;
  color: var(--tinta-2);
}

.pomodoro-alarme[data-alarme="sem"] { color: var(--perigo, var(--foco)); }

.pomodoro :focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* ── O foco de frase ou parágrafo (C-68) ───────────────────────────────────
   Fora do trecho do cursor, a tinta RECUA. A primeira calibração (14/09,
   manhã) usou `--tenue` porque segurava 4,5:1 — e isso derrotava o propósito:
   5,7:1 fora contra 12–15:1 dentro, e no sépia com a mono «Teste.» e «Isso é
   o foc» quase não se distinguiam («quase perde o sentido», o dono, à tarde).
   O foco é baixo contraste DE PROPÓSITO, como o iA Writer que apaga o resto
   para uns 30%: `--fora-do-foco` é a tinta do tema a ~39% sobre o papel,
   assada em hexadecimal por tema, e mede 2,35:1 nos três — acima do piso de
   1,8 em que ainda se relê o que se escreveu, abaixo do teto de 2,8
   (`foco-do-texto-montagem.test.mjs`). O texto fora do foco não é para ser
   LIDO enquanto se escreve; ele volta inteiro quando o editor perde o foco.

   O `*` é o que alcança o que mora DENTRO da marca: o negrito, o link, a #tag
   e o título têm tinta própria, e sem ele a palavra realçada ficaria acesa no
   meio do parágrafo apagado. No fim do arquivo, de propósito: especificidade
   parecida com a das tintas do realce, e quem vence é a última. O contraste
   se mede no DOM (`npm run interacao`, `npm run safari`). */
[data-tema="claro"]  { --fora-do-foco: #a6a4a0; }
[data-tema="sepia"]  { --fora-do-foco: #a2988b; }
[data-tema="escuro"] { --fora-do-foco: #545455; }

.escrita .fora-do-foco,
.escrita .fora-do-foco * {
  color: var(--fora-do-foco);
}

/* A amostra do foco na folha de Ajustes: três linhas, e o que fica aceso. */
.am-foco { display: grid; gap: 3px; width: 1.75rem; }
.am-foco i { display: block; height: 2px; border-radius: 1px; background: currentColor; }
.am-foco[data-f="frase"] i:not(:nth-child(2)),
.am-foco[data-f="paragrafo"] i:last-child { opacity: .3; }

/* ═══ A FOLHA DE VERSÕES (C-73) ══════════════════════════════════════════════
   A moldura da conversa: ferramenta por fora (cabeçalho e rodapé vestem o
   material), papel por dentro — a diferença é prosa que se lê e se copia.

   ── O --perigo ─────────────────────────────────────────────────────────────
   O Codex não tinha cor de perigo: o `--foco` da pele é o acento (índigo até 26/09, brasa desde então), e
   o botão «Excluir» usa ele. O riscado da diferença precisa se distinguir do
   sublinhado (que é o `--acento`), então nasce aqui, por tema. Token que não
   existe falha em SILÊNCIO — o riscado sairia na cor da tinta —, e por isso o
   `versoes-montagem.test.mjs` cobra os três e o harness mede o contraste no DOM. */
[data-tema="claro"]  { --perigo: #a3262a; }
[data-tema="sepia"]  { --perigo: #9a2327; }
[data-tema="escuro"] { --perigo: #f0877e; }

.versoes-folha {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 4.75rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  width: min(26rem, calc(100vw - 7rem));
  height: min(36rem, calc(100vh - 6rem));
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--papel-elev);
  color: var(--tinta);
  border: 1px solid var(--cromo-borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-erguida);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
  /* `visibility` além da opacidade: fechada, a folha não pode deixar os
     botões dela na árvore de foco do teclado do iPad (a lição da gaveta). O
     atraso deixa a saída animar antes de sumir. */
  visibility: hidden;
  transition: transform var(--dur) var(--curva), opacity var(--dur) var(--curva),
              visibility 0s linear var(--dur);
}

.versoes-folha[data-aberto="sim"] {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

@media (max-width: 40rem) {
  .versoes-folha {
    inset-inline: 0;
    bottom: 0;
    width: auto;
    height: min(34rem, 85vh);
    border-radius: var(--raio) var(--raio) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .versoes-folha { transition: none; }
}

/* Uma regra PRÓPRIA, e não mais um item na lista da conversa: a lista é de
   outra peça, e o painel precisa da mesma trava sem reescrevê-la. */
:root:not([data-tela="folio"]) .versoes-folha { display: none !important; }

.versoes-cabecalho {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .5rem;
}

.versoes-titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 600 .875rem/1.3 var(--sans);
  color: var(--cromo-tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.versoes-voltar,
.versoes-fechar {
  min-width: var(--alvo);
  min-height: var(--alvo);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  font-size: 1rem;
  cursor: pointer;
}

.versoes-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .75rem 1rem 1rem;
}

.versoes-estado {
  margin: 0 0 .5rem;
  font: .8125rem/1.45 var(--sans);
  color: var(--tenue);
}

.versoes-estado:empty { display: none; }

.versoes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
}

.versoes-agora {
  display: flex;
  align-items: center;
  min-height: var(--alvo);
  padding-inline: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--tinta);
  border-bottom: 1px solid var(--regra);
}

.versoes-dia {
  margin: .875rem .5rem .125rem;
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* 44px de alvo por linha: é uma lista para o dedo, no iPad. */
.versoes-item {
  display: block;
  width: 100%;
  min-height: var(--alvo);
  padding: 0 .5rem;
  font: inherit;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--tinta);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  cursor: pointer;
}

.versoes-item:hover,
.versoes-item:focus-visible { background: var(--papel-elev-2); }

.versoes-legenda {
  margin: 0 0 .75rem;
  font: .8125rem/1.45 var(--sans);
  color: var(--tinta-2);
}

/* Selecionável DE PROPÓSITO: «copiar um trecho» de uma versão é selecionar e
   copiar, sem botão. Declarado aqui porque o cromo em volta não é texto. */
.versoes-texto {
  font-family: var(--serif-leitura);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}

/* A cor E o traço: o riscado e o sublinhado dizem saiu/entrou a quem não
   distingue vermelho de azul. */
.versao-saiu {
  color: var(--perigo);
  text-decoration: line-through;
  text-decoration-color: var(--perigo);
  text-decoration-thickness: .08em;
}

.versao-entrou {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-underline-offset: .18em;
}

.versoes-rodape {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
}

.versoes-recado {
  flex: 1;
  margin: 0;
  font: .8125rem/1.4 var(--sans);
  color: var(--cromo-tinta-2);
}

/* Dois seletores de peso: `.material button` pinta a tinta dos botões da
   barra, e o primário inverte — tinta do cromo vira fundo (o molde da persona
   escolhida na conversa). */
.versoes-rodape .versoes-restaurar {
  margin-left: auto;
  min-height: var(--alvo);
  padding: 0 1rem;
  font: 600 .875rem var(--sans);
  color: var(--cromo-2);
  background: var(--cromo-tinta);
  border: 1px solid var(--cromo-tinta);
  border-radius: var(--raio-p);
  cursor: pointer;
}

/* ═══ TIPOS E METAS DO CADERNO (C-74b) ═══════════════════════════════════════
   Os botões de tipo nascem do catálogo do servidor (`tipo-do-caderno.mjs`);
   aqui só a forma. A meta atingida muda a COR da legenda — a do contador do
   C-36 — e nada mais: sem barra, sem sequência, sem celebração (§7). Na
   gaveta e no topo do caderno, que vestem o material, o `--foco` já é o
   acento do cromo. */
/* ── O diálogo do caderno, redesenhado (14/09) ─────────────────────────────
   O retorno, com captura: o nome num campo estreito e centralizado (o molde
   do diálogo da TABELA, que pergunta dois números), as pílulas quebrando em
   três linhas com o tipo sem meta sozinho, e «Cancelar» e «Criar» com o mesmo
   peso — «Criar» parecia desabilitado. Agora: o nome em largura total com
   rótulo; os tipos em GRADE de cartões, cada um com a meta padrão em linha
   pequena; a meta alterável logo abaixo, alinhada à esquerda; a ação primária
   preenchida no acento. O MESMO diálogo é a ficha de um caderno existente. */
.modal-caderno {
  width: min(36rem, calc(100vw - 2rem));
  max-width: none;
}

.caderno-campo-rotulo {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* Sem catálogo os cartões ficam escondidos, e o rótulo deles também. */
.caderno-campo-rotulo:has(+ .caderno-tipos[hidden]) { display: none; }

.caderno-campo-nome {
  display: grid;
  gap: .375rem;
}

.caderno-campo-nome input,
.caderno-meta-linha input {
  font: inherit;
  font-size: 1rem;
  min-height: var(--alvo);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-p);
  padding: .5rem .75rem;
  text-align: start;
  box-sizing: border-box;
}
.caderno-campo-nome input { width: 100%; }

.caderno-tipos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-block-start: calc(-.875rem + .375rem);
}
.caderno-tipos[hidden] { display: none; }

@media (min-width: 34rem) {
  .caderno-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.caderno-tipo {
  display: grid;
  align-content: center;
  gap: .125rem;
  min-height: 3.5rem;
  padding: .5rem .75rem;
  font: inherit;
  text-align: start;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-p);
  cursor: pointer;
}

.caderno-tipo[data-sem-meta] { grid-column: 1 / -1; min-height: var(--alvo); }

.caderno-tipo-nome { font-size: .9375rem; font-weight: 500; }
.caderno-tipo-meta { font-size: .75rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.caderno-tipo[data-sem-meta] { grid-template-columns: auto 1fr; align-items: baseline; column-gap: .5rem; }

.caderno-tipo:hover { border-color: var(--tinta-2); }
.caderno-tipo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* O escolhido: a borda no acento, dupla (sombra por dentro, para não mexer no
   tamanho), e um fundo leve do acento. A tinta continua a do papel — medida
   no DOM a ≥ 4,5:1 sobre o fundo misturado. */
.caderno-tipo[aria-pressed="true"] {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
  background: color-mix(in srgb, var(--acento) 9%, var(--papel));
}

.caderno-meta-campo {
  display: grid;
  gap: .375rem;
  justify-items: start;
}
.caderno-meta-campo[hidden] { display: none; }
.caderno-meta-linha {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .9375rem;
  color: var(--tinta-2);
}
.caderno-meta-linha input { width: 8.5rem; font-variant-numeric: tabular-nums; }
.caderno-meta-campo input[aria-invalid="true"] { border-color: var(--perigo); }

.caderno-meta-erro {
  margin: 0;
  font-size: .8125rem;
  color: var(--perigo);
}

/* Os três pesos das ações. A primária é o acento preenchido, com a cor de
   cima pelo token (branco sobre o acento do escuro daria ~2:1); a discreta
   não tem moldura; «Excluir» fica do outro lado, em perigo, só com contorno
   — ninguém exclui por reflexo o que precisa atravessar o diálogo para
   alcançar. */
.modal-botao-primario {
  font-weight: 600;
  padding-inline: 1.25rem;
  color: var(--sobre-acento);
  background: var(--acento);
  border-color: var(--acento);
}
.modal-botao-primario:hover { color: var(--sobre-acento); border-color: var(--acento); filter: brightness(1.08); }

.modal-botao-discreto {
  border-color: transparent;
}
.modal-botao-discreto:hover { border-color: var(--borda-controle); }

.modal-botao-excluir {
  margin-inline-end: auto;
  color: var(--perigo);
  border-color: color-mix(in srgb, var(--perigo) 55%, transparent);
}
.modal-botao-excluir:hover { color: var(--perigo); border-color: var(--perigo); }

.gaveta-conta[data-meta="atingida"],
.caderno-meta[data-meta="atingida"] { color: var(--foco); }

/* ── A régua do topo é a porta da meta (14/09) ──────────────────────────────
   «Como eu defino uma meta para um caderno existente?» A contagem vira botão
   — com a letra da linha, sublinhado pontilhado discreto como convite — e,
   sem meta, «definir meta» em tinta um pouco mais acesa.

   O ALVO: a linha tem 17 px, e 44 px de botão empurrariam o cabeçalho. O
   `padding` vertical de um elemento EM LINHA não ocupa lugar no fluxo mas
   recebe o toque; só que o subtítulo corta o que passa da caixa dele
   (`overflow: hidden`, pelas reticências), e cortaria o toque junto. Por isso
   o subtítulo ganha o mesmo respiro por dentro e o devolve por margem
   negativa — a linha fica onde estava —, e só o botão recebe ponteiro: o
   respiro não rouba o toque do título de cima. */
.caderno-cabeca .caderno-subtitulo:not(.caderno-leitor-marca) {
  padding-block: 13px;
  margin-block: -13px;
  pointer-events: none;
}
.caderno-meta {
  pointer-events: auto;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 13px 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset: .22em;
}
.caderno-meta:hover { color: var(--cromo-tinta-2); }
.caderno-meta:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
.caderno-meta-definir { color: var(--cromo-tinta-2); }


/* ── O ROLO  (spec 12 §8, C-75) ─────────────────────────────────────────────
   A divisória é um block widget: PADDING, nunca margem. A margem fica fora da
   caixa que o CodeMirror mede e desloca o mapa de cliques de tudo o que vem
   abaixo (a lição de 31/08). O nome é botão de 44 px — tocar renomeia. */
.escrita .rolo-divisoria {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: 2rem .75rem;
  font-family: var(--sans);
}

.escrita .cm-content > .rolo-divisoria:first-child { padding-block-start: .5rem; }

.escrita .rolo-divisoria::before,
.escrita .rolo-divisoria::after {
  content: "";
  flex: 1;
  border-block-start: 1px solid var(--regra);
}

.rolo-divisoria-nome {
  min-height: var(--alvo);
  max-width: 70%;
  padding: 0 .875rem;
  font: 600 .8125rem/1.2 var(--sans);
  letter-spacing: .03em;
  color: var(--tinta-2);
  background: none;
  border: 1px solid var(--regra);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.rolo-divisoria-nome:hover,
.rolo-divisoria-nome:focus-visible {
  color: var(--tinta);
  border-color: var(--borda-controle);
}

/* No rolo não há um fólio a excluir nem um selo a mostrar: são de um texto só. */
#folio[data-rolo="sim"] #apagar-folio,
#folio[data-rolo="sim"] #selo-folio,
#folio[data-rolo="sim"] #orfao { display: none; }

.caderno-rolo {
  font-size: .875rem;
  white-space: nowrap;
}

/* ── O SUMÁRIO (C-75) ───────────────────────────────────────────────────────
   A moldura das versões, no mesmo canto: ferramenta por fora, papel por dentro.
   Uma folha fecha a outra, então nunca se sobrepõem. */
.sumario-folha {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 4.75rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  width: min(22rem, calc(100vw - 7rem));
  height: min(36rem, calc(100vh - 6rem));
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--papel-elev);
  color: var(--tinta);
  border: 1px solid var(--cromo-borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-erguida);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--dur) var(--curva), opacity var(--dur) var(--curva),
              visibility 0s linear var(--dur);
}

.sumario-folha[data-aberto="sim"] {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

@media (max-width: 40rem) {
  .sumario-folha {
    inset-inline: 0;
    bottom: 0;
    width: auto;
    height: min(34rem, 85vh);
    border-radius: var(--raio) var(--raio) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sumario-folha { transition: none; }
}

:root:not([data-tela="folio"]) .sumario-folha { display: none !important; }

.sumario-cabecalho {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .5rem .25rem 1rem;
}

.sumario-titulo {
  flex: 1;
  margin: 0;
  font: 600 .875rem/1.3 var(--sans);
  color: var(--cromo-tinta);
}

.sumario-fechar {
  min-width: var(--alvo);
  min-height: var(--alvo);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  font-size: 1rem;
  cursor: pointer;
}

.sumario-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .5rem .5rem 1rem;
}

.sumario-vazio {
  margin: .5rem;
  font: .8125rem/1.45 var(--sans);
  color: var(--tenue);
}

.sumario-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
}

/* 44 px por linha: é uma lista para o dedo. O recuo diz o nível. */
.sumario-item {
  display: block;
  width: 100%;
  min-height: var(--alvo);
  padding: .5rem .5rem .5rem calc(.5rem + var(--recuo, 0rem));
  font: inherit;
  font-size: .875rem;
  line-height: 1.35;
  text-align: left;
  color: var(--tinta);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  cursor: pointer;
}

.sumario-item[data-nivel="2"] { --recuo: 1rem; color: var(--tinta-2); }
.sumario-item[data-nivel="3"] { --recuo: 2rem; color: var(--tinta-2); font-size: .8125rem; }

.sumario-item.sumario-folio {
  margin-block-start: .5rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-block-start: 1px solid var(--regra);
  border-radius: 0;
}

.sumario-lista > li:first-child .sumario-folio { margin-block-start: 0; border-block-start: 0; }

.sumario-item:hover,
.sumario-item:focus-visible { background: var(--papel-elev-2); }


/* ── O [[ COM OS TÍTULOS DO VAULT  (spec 12 §12.2, C-79) ────────────────────
   Grafite, como o painel da busca: é ferramenta sobre o papel. O tema-base do
   CodeMirror pinta a lista em monospace, com 10em de altura, item de 1px de
   respiro e o escolhido em azul #17c — seletores `.ͼN .cm-tooltip
   .cm-tooltip-autocomplete > ul > li[aria-selected]`. Os daqui levam
   `.escrita` e a classe `.wikilinks` na frente e vencem por especificidade,
   sem `!important`. Nome grande, pasta pequena embaixo, 44 px por item. O
   contraste se mede no DOM (`interacao.mjs`, nos três temas). */
.escrita .cm-tooltip.cm-tooltip-autocomplete.wikilinks {
  background: linear-gradient(180deg, var(--cromo-1), var(--cromo-2));
  border: 1px solid var(--cromo-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-erguida);
  padding: .25rem;
  overflow: hidden;
}

.escrita .cm-tooltip.cm-tooltip-autocomplete.wikilinks > ul {
  font-family: var(--sans);
  max-height: min(22rem, 45vh);
  min-width: min(18rem, 90vw);
  max-width: min(32rem, 92vw);
}

.escrita .cm-tooltip.cm-tooltip-autocomplete.wikilinks > ul > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--alvo);
  padding: .25rem .625rem;
  line-height: 1.25;
  border-radius: var(--raio-p);
  color: var(--cromo-tinta);
}

.escrita .cm-tooltip.cm-tooltip-autocomplete.wikilinks > ul > li[aria-selected] {
  background: var(--cromo-tinta);
  color: var(--cromo-2);
}

.escrita .cm-tooltip.cm-tooltip-autocomplete.wikilinks .cm-completionLabel {
  font-size: 1rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.escrita .cm-tooltip.cm-tooltip-autocomplete.wikilinks .cm-completionDetail {
  margin: 0;
  font-style: normal;
  font-size: .75rem;
  color: var(--cromo-tinta-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.escrita .cm-tooltip.cm-tooltip-autocomplete.wikilinks > ul > li[aria-selected] .cm-completionDetail {
  color: var(--cromo-2);
}

/* ═══ A AJUDA DA TELA (C-109) ═══════════════════════════════════════════════
   O «?» é um `.ajustes` como os vizinhos do topo — a mesma tinta tênue, o
   mesmo alvo de toque —, e a folha é o `.modal-confirmacao` de sempre, um
   pouco mais larga para três parágrafos curtos. */
.ajuda-botao svg { display: block; }

.folha-ajuda { max-width: 26rem; }

.folha-ajuda-corpo {
  display: grid;
  gap: .625rem;
}

.folha-ajuda-corpo p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
}

/* Nos painéis: na cabeça dos ajustes, junto do «fechar» (a cabeça distribui
   as pontas, e a margem automática cola o «?» nele); no pomodoro, no canto. */
.aj-cabeca .ajuda-botao { margin-inline-start: auto; }

.pomodoro-painel > .ajuda-botao {
  float: inline-end;
  min-width: 2rem;
  min-height: 2rem;
  padding: .25rem;
  margin: -.25rem -.25rem 0 .25rem;
}

/* ═══ O MAPA (spec 14, C-84 a C-86) ══════════════════════════════════════════
   A folha é uma camada por cima de tudo, com o Excalidraw dentro. O
   `touch-action: none` é a armadilha da caneta e das ilhas (spec 08): sem
   ele, o Safari rola o fólio embaixo enquanto a Pencil desenha. Os botões
   próprios (Fechar, Ramo, Irmão) são do Codex e ficam FORA do Excalidraw. */
.mapa-camada {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--papel);
  touch-action: none;
  overscroll-behavior: contain;
}

.mapa-palco {
  position: absolute;
  inset: 0;
}

.mapa-aviso {
  margin: 30vh auto 0;
  text-align: center;
  font-size: .9375rem;
  color: var(--tenue);
}

/* A interface do Excalidraw que não serve a um mapa do diário e que não
   tem prop que a desligue: a biblioteca (com o link para as bibliotecas
   públicas do excalidraw.com) e a gaveta de «mais ferramentas» (moldura,
   incorporar página, laser e o texto para diagrama). */
.mapa-camada .default-sidebar-trigger,
.mapa-camada .App-toolbar__extra-tools-trigger {
  display: none !important;
}

.mapa-topo {
  position: absolute;
  top: max(.75rem, env(safe-area-inset-top));
  right: max(.75rem, env(safe-area-inset-right));
  z-index: 5;
}

.mapa-ilha {
  position: absolute;
  left: 50%;
  bottom: max(5.25rem, calc(env(safe-area-inset-bottom) + 4.5rem));
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: .5rem;
}

.mapa-botao {
  min-height: var(--alvo);
  min-width: var(--alvo);
  padding: .5rem 1rem;
  border-radius: var(--raio);
  border: 1px solid var(--papel-borda);
  background: var(--papel-elev);
  color: var(--tinta);
  font: 500 .9375rem/1 var(--sans);
  box-shadow: var(--sombra-pousada);
  cursor: pointer;
}

/* A prévia no fólio. Salva sempre clara e sem fundo; no escuro, inverte,
   como o próprio Excalidraw faz no tema escuro dele. */
.midia-bloco-mapa { position: relative; }
.midia-mapa { cursor: pointer; background: transparent; }
[data-tema="escuro"] .midia-mapa { filter: invert(.93) hue-rotate(180deg); }

.mapa-selo {
  display: none;
  position: absolute;
  top: 1rem;
  right: .5rem;
  font-size: .75rem;
  color: var(--foco);
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio-p);
  padding: .125rem .5rem;
}
.mapa-nao-enviado .mapa-selo { display: block; }

/* «Copiar para hoje» (14 §4.4): o mapa de outro dia é só leitura. */
.mapa-oferta {
  position: fixed;
  left: 50%;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  max-width: calc(100vw - 2rem);
  padding: .75rem 1rem;
  border-radius: var(--raio);
  border: 1px solid var(--papel-borda);
  background: var(--papel-elev);
  color: var(--tinta);
  box-shadow: var(--sombra-erguida);
}
.mapa-oferta p { margin: 0 .5rem 0 0; font-size: .9375rem; }

/* A Pencil Pro no mapa (spec 15, C-97): a paleta radial que abre SOB A
   PONTA ao apertar, o destaque do nó sob a ponta que paira, com o rótulo
   escrito à mão (escondido no mapa, mostrado aqui), e a prévia tracejada de
   onde o próximo ramo cai. Só existem dentro do casco. Nada disto recebe
   toque, menos os itens da paleta. */
.mapa-paleta {
  position: absolute;
  z-index: 7;
  width: 0;
  height: 0;
}
.mapa-paleta::before {
  content: "";
  position: absolute;
  left: -.375rem;
  top: -.375rem;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--foco);
  opacity: .55;
}
.mapa-paleta-item {
  position: absolute;
  width: var(--alvo);
  height: var(--alvo);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--papel-borda);
  background: var(--papel-elev);
  color: var(--tinta);
  box-shadow: var(--sombra-erguida);
  cursor: pointer;
  transition: transform .12s ease-out;
}
.mapa-paleta-item.realcado {
  transform: translate(-50%, -50%) scale(1.18);
  border-color: var(--foco);
  color: var(--foco);
}
.mapa-pairar,
.mapa-previa-ramo {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  border-radius: var(--raio-p);
}
.mapa-pairar { background: none; }
/* Sobre o nó selecionado, o Excalidraw já desenha a seleção: nada de segundo
   contorno nem tom — só o rótulo escrito à mão. */
.mapa-pairar.sobre-selecionado { background: none; }
/* A dica de teclado do Excalidraw («Hold Cmd and Arrow key…», metade em
   inglês): no iPad com a Pencil ela só ocupa a tela. */
.mapa-camada .HintViewer { display: none !important; }
.mapa-previa-ramo { border: 2px dashed var(--foco); opacity: .6; }
.mapa-rotulo-mao {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .5rem);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .125rem .5rem;
  border-radius: var(--raio-p);
  background: var(--papel-elev);
  border: 1px solid var(--papel-borda);
  color: var(--tinta);
  font: 500 .875rem/1.4 var(--sans);
}
@media (prefers-reduced-motion: reduce) {
  .mapa-paleta-item { transition: none; }
}

/* «Ouvir» (C-100): a palavra que a voz do aparelho está dizendo. O mesmo
   fundo de marca-texto do ==realce==, mais forte e com a borda de baixo, para
   não se confundir com um grifo do texto: ele anda, o grifo fica. */
.ouvindo {
  background: color-mix(in srgb, var(--foco) 38%, transparent);
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--foco) 70%, transparent);
}