/* Hermes — estilos do esboço web (complementam theme.css).
   Sem cor solta: toda tinta, superfície e borda vem de token do theme.css.
   A paleta e as razões de contraste estão em docs/GUIA_VISUAL.md. */

.flash { border-radius: 10px; padding: 10px 14px; margin-bottom: var(--space-lg); font-size: 14px; }
.flash.success { background: var(--oliva-claro); border: 1px solid var(--oliva-borda); color: var(--oliva); }
.flash.erro { background: var(--terracota-claro); border: 1px solid var(--terracota-borda); color: var(--terracota); }
/* O caminho de uma ação de FORA do aplicativo (hoje: recarregar créditos, ADR-048). Herda a cor
   do aviso para continuar sendo um texto só, e o sublinhado diz que é clicável. */
.flash__link { color: inherit; font-weight: 700; text-decoration: underline; margin-left: 6px; }
.flash__link:hover { text-decoration-thickness: 2px; }

.barra-leitura {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); flex-wrap: wrap; margin: 20px 0 var(--space-md);
}
.fonte-ctrl, .zoom-ctrl { display: inline-flex; align-items: center; gap: var(--space-sm); }
/* O zoom é ajuste de LEITURA, não ação da etapa: os controles ficam discretos e compactos para
   não disputar atenção com o texto e para devolver largura à folha do PDF. */
.zoom-ctrl { gap: 4px; }
.zoom-ctrl .hint { font-size: 11px; }
.zoom-ctrl .btn {
  padding: 2px 8px; min-width: 0; border-radius: 7px;
  font-size: 13px; line-height: 1.25;
}
.zoom-ctrl .badge { padding: 2px 7px; font-size: 11px; }

textarea.leitura {
  width: 100%; min-height: 150px; background: var(--superficie-leitura);
  border: 1px solid var(--linha-controle); border-radius: 10px; padding: var(--space-lg);
  font-family: var(--serif-leitura); line-height: var(--leitura-entrelinha); color: var(--tinta-leitura);
  resize: none; overflow: hidden;
}
textarea.leitura:focus { border-color: var(--foco); box-shadow: var(--foco-halo); }
/* O anel de foco do teclado vem da regra universal; aqui só se limpa o do ponteiro. */
textarea.leitura:focus:not(:focus-visible) { outline: none; }

.form-motivo { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); align-items: center; }
.form-motivo input { flex: 1; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
details > summary { cursor: pointer; font-size: 13px; color: var(--accent-dark); font-weight: 600; margin-top: 6px; }

.pagina-painel {
  margin-top: 28px; border: 1px solid var(--linha-linho-forte); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow); padding: var(--space-lg);
}
.pagina-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: var(--space-md); flex-wrap: wrap;
}
.pagina-scroll {
  max-height: 520px; overflow: auto; border: 1px solid var(--linha-linho-forte);
  border-radius: 8px; background: var(--canvas-fundo); padding: var(--space-md);
}
.pagina-scroll img { display: block; margin: 0 auto; max-width: none; box-shadow: 0 8px 26px rgba(60, 42, 20, .3); }
/* `hidden` tem de vencer o `display: block` acima: a troca de folha do Bloco 1 esconde a imagem
   quando a página não tem arquivo no disco. */
.pagina-scroll img[hidden],
.pagina-scroll .vazio-de-pagina[hidden] { display: none; }

/* HTMX: sinal visual enquanto a requisição acontece */
.htmx-request { opacity: .55; transition: opacity .12s; }

/* ---------- O INDICADOR GLOBAL DO HTMX (Sessão H18) ----------
   O DEFEITO: as telas que falam com o banco demoram (medir a estimativa lê o texto inteiro,
   aprovar a fonte grava um portão, a fila busca o próximo parágrafo). Sem sinal, o clique parecia
   não ter funcionado e a pessoa clicava de novo — duas ações para uma decisão.

   O REMÉDIO usa o padrão NATIVO do HTMX: um elemento com a classe `.htmx-indicator` nasce escondido
   e aparece sozinho enquanto estiver no ar o pedido do elemento que o nomeia em `hx-indicator`.
   Não há JavaScript novo; logo, não há um segundo estado para manter em dia.

   Esta é a ÚNICA definição da classe neste arquivo. A linha `.htmx-request` acima é anterior a
   esta sessão e continua valendo para o que já a usava. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-flex; }

/* O botão que está trabalhando ganha o giro e um texto curto ao lado: a opacidade diz "ocupado",
   o giro diz "em curso". */
.btn.htmx-request { opacity: .8; cursor: progress; }
.btn .htmx-indicator { align-items: center; gap: 6px; }
.btn .htmx-indicator .spinner { width: 12px; height: 12px; border-width: 2px; }
.htmx-indicator__texto { font-size: 12px; font-weight: 600; letter-spacing: .01em; }

/* Fora do botão (ao lado de um bloco de texto), o indicador é a linha "salvando" da tela. */
.htmx-indicator__linha { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.htmx-indicator__linha .spinner { margin-right: 6px; vertical-align: -2px; }

/* Abas internas do Editor (mesa × conferir a fonte) */
.subnav { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--linha-linho-forte); }
.subnav a {
  padding: var(--space-sm) 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a.on { color: var(--accent-dark); border-bottom-color: var(--accent); }
.subnav a:hover { color: var(--tinta-titulo); }

/* ---------- Mesa de fonte: os trechos fluem como um livro ----------
   TEXTO LIMPO (refinamento do Bloco 1): a linha do trecho NÃO tem coluna de número nem etiqueta de
   tipo. O que era "12 PARÁGRAFO" na lateral virou ruído de TI no meio da leitura — e a conferência
   da fonte é LEITURA. O que é especial se apresenta pelo tipo (`--titulo`, `--citacao`, `--nota`),
   e o risco aparece numa linha discreta acima do texto. O campo CRESCE com o conteúdo (sem barra
   interna); quem rola é a página. */
.segmentos {
  border: 1px solid var(--linha-linho-forte); border-radius: var(--radius); overflow: hidden;
  background: var(--superficie); box-shadow: var(--shadow);
}
.segmento { border-bottom: 1px solid var(--linha-linho); }
/* A última linha da ÚLTIMA página não leva fio: o box já fecha embaixo. Cada página do texto é
   um grupo (`.pagina-do-texto`), então o `:last-child` sozinho deixaria um fio sobrando no meio. */
.segmentos > .pagina-do-texto:last-child > .segmento:last-child { border-bottom: 0; }
.segmento.com-risco { background: var(--terracota-veu); }
.segmento .corpo { padding: 10px var(--space-lg) 14px; }

/* ---------- O MENU ⋮ DO TRECHO (validação da fonte, Sessão F) ----------
   Cada trecho tem as ações de ESTRUTURA: excluir, mesclar com o anterior e trocar o tipo
   (Corpo/Título/Citação). Antes isso era feito esvaziando o campo, e o banco recusava ("o texto do
   trecho não pode ficar vazio") — a exclusão era impossível.

   O gatilho vive na MARGEM DIREITA, e o texto ganha um respiro do mesmo tamanho: controle flutuante
   em cima da leitura é o que a política anti-poluição proíbe — e um ⋮ por cima da última palavra da
   linha atrapalharia justamente a conferência. Ele fica discreto em repouso e acende no hover/foco
   (teclado incluído, via `:focus-within` do `<details>`). */
.segmento { position: relative; padding-right: 2.4rem; }
.bloco-menu { position: absolute; top: 6px; right: 4px; z-index: 6; }
.bloco-menu__gatilho {
  list-style: none;                 /* esconde o triângulo nativo do <summary> */
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 8px;
  color: var(--tinta-secundaria); cursor: pointer;
  opacity: .45; transition: opacity .12s, border-color .12s;
}
.bloco-menu__gatilho::-webkit-details-marker { display: none; }
.bloco-menu__gatilho:hover,
.bloco-menu[open] > .bloco-menu__gatilho {
  opacity: 1; border-color: var(--linha-controle); background: var(--superficie);
}
.segmento:hover .bloco-menu__gatilho,
.segmento:focus-within .bloco-menu__gatilho { opacity: 1; }
.bloco-menu__acoes {
  position: absolute; right: 0; top: 100%;
  z-index: 7;
  min-width: 220px;
  margin-top: 6px;
  padding: var(--space-sm);
  border: 1px solid var(--linha-linho-forte); border-radius: 10px;
  background: var(--superficie);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.bloco-menu__titulo {
  padding: 2px var(--space-sm) 6px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-secundaria);
}
.bloco-menu__acao {
  display: block; width: 100%;
  padding: 7px var(--space-sm);
  border: 0; border-radius: 7px;
  background: none; color: var(--tinta-leitura);
  font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.bloco-menu__acao:hover:not(:disabled) { background: var(--superficie-2); }
.bloco-menu__acao.is-atual { color: var(--tinta-secundaria); font-weight: 600; }
.bloco-menu__acao:disabled { opacity: .5; cursor: default; }
.bloco-menu__acao--perigo { color: var(--terracota); }
.bloco-menu__divisor {
  margin: 4px 0; border: 0; border-top: 1px solid var(--linha-linho);
}

/* O RISCO E O MOTIVO, por exceção: uma linha fina acima do texto — o parágrafo em si continua
   texto, sem moldura em volta. */
.segmento__aviso {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding: 10px var(--space-lg) 0;
}
.segmento__aviso .motivo { margin: 0; font-size: 12.5px; color: var(--tinta-secundaria); }
/* O único rótulo que sobrou: a nota de rodapé (sem ele uma nota é indistinguível do corpo). */
.segmento__tipo {
  padding: 10px var(--space-lg) 0;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-secundaria);
}

/* ---------- O TRECHO SEMÂNTICO: o tipo se apresenta pelo desenho ----------
   As classes são as MESMAS da mesa de revisão humana (`mesa__linha--titulo`, `mesa__linha--citacao`),
   e o respiro vertical delas (definido na seção 8) vale aqui sem uma linha a mais. O que se
   acrescenta é a tipografia de cada tipo — sempre relativa a `--fonte-texto`, que é a variável do
   A−/A＋: o tipo acompanha o tamanho escolhido para a leitura. */
.segmento.mesa__linha--titulo .editor-texto,
.segmento.mesa__linha--titulo .texto-leitura-bloco {
  font-family: var(--serif); font-weight: 600; line-height: 1.3;
  font-size: calc(var(--fonte-texto, 18px) * 1.12);
}
.segmento.mesa__linha--citacao .editor-texto,
.segmento.mesa__linha--citacao .texto-leitura-bloco {
  font-style: italic;
  border-left: 3px solid var(--bronze-borda); border-radius: 0 8px 8px 0;
  padding-left: var(--space-md);
}
.segmento.mesa__linha--nota .editor-texto,
.segmento.mesa__linha--nota .texto-leitura-bloco {
  font-size: calc(var(--fonte-texto, 18px) - 1.5px);
  color: var(--ink-soft);
}

/* o campo cresce com o texto; nenhuma rolagem interna */
.editor-texto {
  width: 100%; border: 1px solid var(--linha-linho-suave); background: var(--superficie-leitura);
  border-radius: 8px; padding: var(--space-sm) 10px; resize: none;
  /* O TEXTO NUNCA FICA INALCANÇÁVEL (bug relatado: "o texto traduzido está cortado").
     O crescimento depende de `field-sizing` (Chromium) E do `app.js` (`ajustarAltura`). Quando um
     dos dois não vale — navegador sem `field-sizing`, JS que não rodou, fonte que chegou depois da
     medida —, `overflow: hidden` escondia as linhas de baixo SEM barra de rolagem: o parágrafo
     existia e ninguém conseguia lê-lo. Com `overflow-y: auto` e uma altura mínima de duas linhas,
     o pior caso é uma caixa com rolagem: o texto continua acessível, e o `app.js` continua
     entregando a caixa inteira crescida no caso normal. */
  overflow-y: auto;
  /* Duas linhas do próprio campo (`1.7` de entrelinha × 2): é a altura que o `<textarea>` já tem
     por padrão com `rows=2`, agora garantida em CSS mesmo quando o tipo da caixa é reescrito. */
  min-height: 3.4em;
  font-family: var(--serif-leitura); line-height: var(--leitura-entrelinha); color: var(--tinta-leitura);
  field-sizing: content;
}
.editor-texto:hover { border-color: var(--linha-controle); }
.editor-texto:focus {
  border-color: var(--foco); background: var(--superficie-leitura);
  box-shadow: var(--foco-halo);
}
.editor-texto:focus:not(:focus-visible) { outline: none; }

.pagina-bloco { margin-top: 30px; }
.pagina-bloco .titulo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }

/* ---------- Conferir a fonte: o ORIGINAL à esquerda e o texto à direita (Bloco 1) ----------
   Sentido ocidental de leitura: a fonte da verdade vem antes. As duas colunas dividem a largura
   em partes iguais — é leitura comparada, não uma coluna de apoio. No aperto, a página passa para
   CIMA (o texto continua logo abaixo, na ordem do documento) em vez de espremer as duas. */
.leitura-dupla {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; align-items: start; margin-top: 14px;
}
/* A coluna do TEXTO não tinha regra nenhuma em produção — ela existia só no mockup. Sem
   `min-width: 0`, o item de grid não encolhe abaixo do próprio conteúdo e a coluna estoura a
   largura da tela com um parágrafo longo. */
.coluna-texto { min-width: 0; }
/* O painel do PDF fica FIXO abaixo da barra de decisão, que também é fixa: o desconto da altura
   dela vem do app.js (`--altura-barra-macro`), porque a barra quebra linha em tela estreita. */
.coluna-original {
  position: sticky;
  top: calc(var(--topo-fino) + var(--altura-barra-macro, 0px) + 14px);
  /* ALTURA ÚTIL MÁXIMA (refinamento do Bloco 1): a coluna ocupa TUDO o que sobra da janela depois
     do que fica fixo acima dela — o topo fino e a barra de decisão (cuja altura o app.js publica
     em `--altura-barra-macro`). O painel do PDF, dentro, é uma coluna flex, e é a caixa da folha
     que fica com o resto: assim a folha aproveita a área vertical inteira e NÃO passa por baixo da
     dobra, sem nenhuma constante mágica somando pedaços da janela. */
  height: calc(100vh - var(--topo-fino) - var(--altura-barra-macro, 64px) - 14px - var(--space-sm));
  display: flex;
  min-width: 0;
}
.coluna-original .pagina-painel {
  /* A folha ocupa ~95% da coluna útil: o resto é respiro, não moldura. As margens internas
     também encolhem — eram elas que deixavam o PDF pequeno dentro de uma coluna já estreita. */
  margin-top: 0; width: 95%; max-width: 95%; margin-inline: auto;
  display: flex; flex-direction: column; padding: var(--space-md);
}
.coluna-original .pagina-barra { margin-bottom: 8px; gap: 8px; }
.coluna-original .pagina-scroll {
  /* Rolagem INTERNA nos dois eixos: com o zoom, quem navega pela folha é a caixa dela, e a coluna
     do texto ao lado não se mexe nem perde o alinhamento com a página. */
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: auto;
  padding: var(--space-sm);
  /* A JANELA DO PDF ESTAVA PEQUENA (bug relatado no teste de ponta a ponta). A regra geral
     `.pagina-scroll` limita a caixa a `520px` — um teto herdado da leitura em página inteira —,
     e ele vencia o `flex: 1` da coluna: a folha ocupava no máximo 520px de uma coluna que já tem
     a altura da janela. Aqui o teto SAI: quem mede é o `flex` dentro de `.coluna-original`, que
     o `app.js` calcula a partir da altura real do cabeçalho (`--altura-barra-macro`). */
  max-height: none;
}

@media (max-width: 1180px) {
  .leitura-dupla { grid-template-columns: minmax(0, 1fr); }
  /* Empilhado (tela estreita): a coluna volta ao fluxo e a caixa retoma a altura própria. */
  .coluna-original { position: static; height: auto; display: block; }
  /* Empilhado não há coluna com altura calculada para segurar a folha: aqui o teto volta, pela
     altura da janela (e não pelos 520px fixos que valiam para todas as larguras). */
  .coluna-original .pagina-scroll { max-height: 72vh; }
}

/* ---------- O texto corrido por página (Bloco 1) ----------
   Cada página do livro é um grupo com o seu divisor. O divisor é o gancho que o app.js observa
   para trocar a folha do PDF; o aviso de parágrafo partido abre a página em que a segunda metade
   do parágrafo começa — é onde a costura entre as duas folhas acontece. */
.pagina-do-texto[hidden] { display: none; }
.separador-pagina {
  padding: 10px var(--space-lg);
  background: var(--canvas-linho);
  border-top: 1px solid var(--linha-linho);
  border-bottom: 1px solid var(--linha-linho);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-secundaria); text-align: center;
  scroll-margin-top: 120px;
}
.segmentos > .pagina-do-texto:first-child > .separador-pagina { border-top: 0; }
.aviso-partido {
  padding: 8px var(--space-lg);
  background: var(--terracota-claro);
  border-bottom: 1px solid var(--terracota-borda);
  font-size: 13px; color: var(--terracota);
}
.vazio-de-pagina { padding: 14px var(--space-lg); margin: 0; }
/* O filtro é de LEITURA e vive no navegador: esconde a linha, nunca o contexto da página. */
.coluna-texto.is-so-risco .segmento:not(.com-risco) { display: none; }
/* O tamanho do texto é uma variável: A−/A＋ mudam no navegador, sem ida ao servidor. */
.coluna-texto .editor-texto,
.coluna-texto .texto-leitura-bloco { font-size: var(--fonte-texto, 18px); }

/* O seletor de leitura: (●) todos os trechos / ( ) só com risco.
   O RÁDIO É NATIVO: o `input` global (theme.css §formulário) dá caixa de texto a TODO campo, e o
   rádio herdava borda/fundo/preenchimento — parecia um botão desativado. Aqui ele volta a ser um
   círculo nativo, com o acento do tema; e o rótulo aceso mostra qual leitura está valendo. */
.filtro-trechos { display: inline-flex; align-items: center; gap: var(--space-lg); }
.filtro-trechos__opcao {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; font-size: 13px; font-weight: 600; color: var(--tinta-secundaria); cursor: pointer;
}
.filtro-trechos__opcao input {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.filtro-trechos__opcao:hover { color: var(--tinta-titulo); }
.filtro-trechos__opcao:has(input:checked) { color: var(--tinta-titulo); }

/* Aprovação: o texto à esquerda e a ação à direita, onde o olho volta depois de conferir. */
.aprovacao { display: flex; gap: var(--space-xl); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.aprovacao > div { flex: 1 1 320px; }
.aprovacao-acao { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Glossário: um cartão por termo, com os campos de edição ----------
   Antes a tela era só leitura: o Diretor via o termo e não tinha onde corrigi-lo. */
.termo-cabeca {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  flex-wrap: wrap; margin-bottom: var(--space-md);
}
.termo-original {
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--tinta-titulo);
  margin-left: var(--space-sm);
}
.termo-marcas { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.termo-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.termo-campos label:last-child { grid-column: 1 / -1; }
.termo-campos label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-secundaria);
}
.termo-campos input, .termo-campos textarea { text-transform: none; letter-spacing: 0; font-size: 15px; }

@media (max-width: 820px) {
  .termo-campos { grid-template-columns: minmax(0, 1fr); }
}

/* aviso de rascunho (sugestão aplicada, ainda não salva) */
.rascunho {
  border-left: 4px solid var(--gold); background: var(--bronze-claro); color: var(--bronze-escuro);
  border-radius: 6px; padding: 9px 13px; font-size: 13.5px; margin-bottom: 14px;
}

.credito-imagem { font-size: 11.5px; color: var(--tinta-secundaria); margin-top: 10px; }
.credito-imagem a { color: var(--tinta-secundaria); }

/* Editor guiado: progresso da etapa */
.progresso { display: flex; align-items: center; gap: var(--space-md); margin: 2px 0 18px; }
.progresso .barra { flex: 1; height: 8px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.progresso .barra > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--amber)); }
.progresso .conta { font-size: 12px; color: var(--tinta-secundaria); white-space: nowrap; }

/* Fila da revisão: onde estou, o que falta e o que tem apontamento */
.fila { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 18px; }
.ficha {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--linha-controle);
  background: var(--canvas-linho); color: var(--ink-soft); font-weight: 600; font-size: 13px;
  cursor: pointer; font-variant-numeric: tabular-nums; position: relative;
  font-family: var(--sans); padding: 0;
}
.ficha:hover { border-color: var(--accent); }
.ficha.com-alerta { border-color: var(--bronze-borda); background: var(--bronze-claro); color: var(--bronze); }
.ficha.atual {
  background: linear-gradient(180deg, var(--accent-alto), var(--accent-dark)); color: var(--tinta-sobre-profundo);
  border-color: var(--accent-dark); box-shadow: var(--sombra-acento-media);
}
.ficha .ponto {
  position: absolute; top: var(--space-xs); right: var(--space-xs); width: 6px; height: 6px;
  border-radius: 50%; background: var(--terracota);
}
.ficha.atual .ponto { background: var(--ficha-ponto-aceso); }

/* fichas também servem de atalho (âncora) para o trecho com risco */
a.ficha { display: inline-grid; place-items: center; text-decoration: none; }
.ficha.risco-alto { border-color: var(--terracota-borda); background: var(--terracota-claro); color: var(--terracota); }
.ficha.risco-medio { border-color: var(--bronze-borda); background: var(--bronze-claro); color: var(--bronze); }
.ficha.risco-baixo { border-color: var(--linha-controle); }
.segmento { scroll-margin-top: 92px; }

/* ---------- Revisão final: leitura corrida do livro traduzido ----------
   Uma coluna só, na largura de leitura (como um Word em página estreita), cada trecho editável
   no lugar. O objetivo é olhar o livro inteiro sem trocar de tela a cada parágrafo. */
.resumo-final { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-xs) 0 14px; }
.rolagem-final { max-width: 78ch; }
.trecho-final {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  border-bottom: 1px solid var(--linha-linho-suave); padding: 6px 0 10px;
}
.trecho-final .marca {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: var(--space-sm) 10px 0 0;
}
.trecho-final .marca .num {
  font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tinta-secundaria);
}
.trecho-final .marca .tag { font-size: 10px; letter-spacing: .08em; color: var(--tinta-secundaria); }
.trecho-final .corpo-final { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.trecho-final .corpo-final .btn { opacity: .25; transition: opacity .12s; }
.trecho-final .corpo-final:focus-within .btn { opacity: 1; }
.trecho-final.titulo-1 .editor-texto {
  font-size: 21px !important; font-weight: 700; background: transparent; border-color: transparent;
}
.trecho-final.titulo-1 .editor-texto:hover { border-color: var(--linha-linho-forte); background: var(--superficie-leitura); }
.trecho-final.titulo-2 .editor-texto { font-weight: 600; }

@media (max-width: 820px) {
  .trecho-final { grid-template-columns: minmax(0, 1fr); }
  .trecho-final .marca { flex-direction: row; gap: var(--space-sm); padding: 0 0 var(--space-xs); }
}

/* ---------- Biblioteca: cabeçalho do acervo ----------
   O herói do acervo é a primeira coisa que a Sangha vê: moldura de iluminura
   (fio duplo de bronze em `theme.css`) e a serifa grande no título. */
.acervo-cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-xl);
}
.acervo-cabecalho h1 { margin: var(--space-xs) 0 var(--space-sm); }
.acervo-cabecalho .lead { margin: 0; max-width: 62ch; }
.acervo-nota { margin-bottom: var(--space-lg); }
.acervo-vazio { max-width: 720px; }
.acervo-vazio h2 { margin-top: var(--space-sm); }
.acervo-vazio p { margin-top: 0; }

/* A moldura do herói: fundo de pergaminho para o fio de bronze pegar nele. */
.acervo-iluminura {
  display: block;
  margin-bottom: var(--space-xl);
  padding: clamp(var(--space-xl), 3vw, 42px);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow);
}
.acervo-iluminura .eyebrow { margin-bottom: var(--space-xs); }
.acervo-iluminura h1 {
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -.006em;
  margin: var(--space-xs) 0 var(--space-sm);
}
.acervo-iluminura .lead {
  font-size: 17px;
  color: var(--tinta-leitura);
  max-width: 68ch;
  margin: 0;
}

/* ---------- Biblioteca: Estação de Envio de Nova Obra ----------
   O envio é a PORTA do sistema: um cartão de destaque com zona de arrastar e
   soltar. A ação primária é um envio REAL — o formulário é o mesmo
   `POST /enviar` (multipart, campo `arquivo`) usado pelo editor. O texto fica à
   esquerda, a ficha da obra à direita; em tela estreita, um embaixo do outro. */
.envio-estacao {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-xl), 3vw, 44px);
  align-items: start;
  margin-bottom: var(--space-xl);
  padding: clamp(var(--space-xl), 3vw, 40px);
  background:
    radial-gradient(760px 320px at 88% -20%, var(--veu-bronze), transparent 62%),
    linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow);
}
/* O texto acompanha a altura da ficha: sem isso, ele encolhe para o topo e o
   cartão fica com um vazio embaixo. */
.envio-estacao__texto { display: flex; flex-direction: column; align-items: flex-start; }
/* A ficha é mais alta que o texto e o cartão não estica junto: sem grudar, a
   explicação fica boiando num vazio. Colada, ela acompanha a rolagem da ficha. */
.envio-estacao__texto > .envio-estacao__gruda { position: sticky; top: var(--space-md); }
.envio-estacao__texto h2 {
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.16;
  margin: 0 0 var(--space-md);
}
.envio-estacao__texto p { margin: 0 0 var(--space-md); line-height: 1.65; }
.envio-estacao__acoes {
  display: flex; align-items: center; gap: var(--space-md) var(--space-lg); flex-wrap: wrap;
  margin-top: auto;                     /* empurra a ação para o pé da coluna */
  padding-top: var(--space-md);
}
a.envio-estacao__atalho {
  font-size: 13px; color: var(--accent-dark); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Em tela estreita a estação empilha: o texto primeiro, a ficha da obra depois
   — e a filigrana sai de cena, que em pouco espaço vira ruído. */
@media (max-width: 1024px) {
  .envio-estacao { grid-template-columns: minmax(0, 1fr); }
  .envio-estacao__texto { min-height: 0; }
  .borda-iluminura--ornada::after { display: none; }
}


/* A zona de soltar. A moldura artesanal é a mesma iluminura, em versão
   compacta — e é ela que recebe o realce quando o arquivo passa por cima. */
.envio-soltar {
  display: block;
  margin: 0;
  cursor: pointer;
  text-align: center;
  background: var(--superficie-leitura);
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.envio-soltar__icone { color: var(--bronze); display: block; margin-bottom: var(--space-md); }
.envio-soltar__icone svg { width: 58px; height: 58px; display: block; margin: 0 auto; }
.envio-soltar__titulo {
  font-family: var(--serif); font-size: 17.5px; font-weight: 600;
  color: var(--tinta-titulo); display: block; margin-bottom: var(--space-xs);
}
.envio-soltar__texto { display: block; font-size: 14px; color: var(--tinta-secundaria); }
.envio-soltar__limite { display: block; font-size: 12.5px; color: var(--tinta-secundaria); margin-top: var(--space-sm); }
.envio-soltar__arquivo {
  display: block; margin-top: var(--space-md); font-family: var(--serif);
  font-size: 14px; color: var(--oliva);
}
.envio-soltar__arquivo:empty { display: none; }
/* Aviso do arquivo recusado no próprio cartão (ex.: passa do limite). */
.envio-soltar__aviso:not([hidden]) {
  display: block; margin-top: var(--space-sm); font-size: 13px; font-weight: 600;
  color: var(--terracota);
}
.envio-soltar__aviso[hidden] { display: none; }
/* Sobre ou arrastando: linho aquecido de verdade, com o fio de bronze aceso. */
.envio-soltar:hover,
.envio-soltar:focus-within {
  background: var(--canvas-linho);      /* linho cru */
  box-shadow: var(--shadow);
}
.envio-soltar:hover::before,
.envio-soltar:focus-within::before { border-color: var(--bronze); }
.envio-soltar.is-sobre {
  background: var(--bronze-claro);      /* pergaminho aquecido */
  box-shadow: var(--shadow), var(--foco-halo);
  transform: translateY(-1px);
}
.envio-soltar.is-sobre::before { border-color: var(--bronze); border-style: solid; }
/* O anel de foco do teclado é o universal, no campo de arquivo escondido; aqui
   o `label` mostra que está em foco pelo fio aceso e pelo sublinhado. */
.envio-soltar:focus-within .envio-soltar__titulo { text-decoration: underline; text-underline-offset: 3px; }

/* Título da obra na própria estação: fica à vista antes de enviar, porque é
   dele que sai o "slug" com que o worker acha o PDF. */
.ficha-campo { display: block; margin: 0 0 var(--space-lg); }
.ficha-campo > label { margin-top: 0; }
.ficha-campo .hint { display: block; margin-top: var(--space-xs); }

/* O botão de envio só existe DEPOIS de haver arquivo escolhido (o app.js revela
   este bloco). Fica abaixo da moldura, alinhado com ela, e não dentro: clicar no
   botão não pode abrir de novo a janela de arquivos do `label`. */
.envio-soltar__confirmar {
  display: flex; align-items: center; gap: var(--space-md) var(--space-lg); flex-wrap: wrap;
}
.envio-soltar__confirmar[hidden] { display: none; }
.envio-soltar__confirmar .hint { flex: 1 1 220px; min-width: 0; }

/* A ficha que ENTRA NO LUGAR da caixa depois do upload: mesma coluna, mesma
   largura, para a estação não pular de tamanho na troca de estado. */
.envio-ficha { min-width: 0; }
.envio-ficha > p.hint { line-height: 1.6; }
.envio-ficha__arquivo {
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--superficie-leitura);
  border-left: 2px solid var(--bronze);
  font-size: 13.5px;
  overflow-wrap: anywhere;              /* nome de arquivo longo não estoura a coluna */
}

/* A pergunta do livro repetido: ocupa o lugar da ficha, com a mesma largura, e
   oferece as três decisões uma embaixo da outra (o texto de cada uma importa). */
.envio-conflito { min-width: 0; }
.envio-conflito h3 { font-size: 19px; line-height: 1.3; margin: var(--space-xs) 0 var(--space-md); }
.envio-conflito__achado { font-size: 14px; line-height: 1.6; margin: 0 0 var(--space-sm); }
.envio-conflito__achado code { font-size: 12.5px; overflow-wrap: anywhere; }
.envio-conflito__opcoes {
  list-style: none; margin: var(--space-md) 0 0; padding: 0;
  display: grid; gap: var(--space-md);
}
.envio-conflito__opcoes li { display: grid; gap: var(--space-xs); justify-items: start; }
.envio-conflito__opcoes .hint { line-height: 1.55; }
/* O recado neutro do cancelamento: informa, não alerta. */
.alert-card--nota {
  border-left-color: var(--bronze); background: var(--bronze-claro); color: var(--tinta-leitura);
}

/* ---------- Biblioteca: lista de obras ---------- */
.acervo-lista { list-style: none; margin: 0; padding: 0; }
.book-card__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.book-card .meta { color: var(--tinta-secundaria); }
.book-card .foot { flex-wrap: wrap; }
.book-card .foot .btn { white-space: nowrap; }
.custo { margin-left: auto; }

/* Em tela estreita a estação empilha: o texto primeiro, a zona de soltar
   depois — e o ornamento lateral sai de cena, que em pouco espaço vira ruído. */
/* Estado sutil de processamento em segundo plano (o worker roda fora da página). */
.processando {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: 12.5px; font-weight: 600; color: var(--bronze);
}
.processando__ponto {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; animation: pulsar 1.4s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* Ação primária em verde-oliva nobre (--oliva). */
.btn.oliva { background: var(--oliva); border-color: var(--oliva); color: var(--tinta-sobre-acento); }
.btn.oliva:hover { filter: brightness(.94); }

/* Crédito da imagem no rodapé de apoio. */
.rodape__creditos { font-size: 11.5px; color: var(--tinta-secundaria); margin: 0; max-width: 90ch; }
.rodape__creditos a { color: var(--tinta-secundaria); }

/* ===========================================================================
   CASCO DO EDITOR (Fase 2): trilho de 6 blocos, cabeçalho tipográfico e carimbos.
   Vem do `preview/fluxo/mockup.css` APROVADO pelo Diretor, sem reescrever o que já existia
   acima — só as regras que os componentes novos pedem. Nenhuma cor nova: todas as
   tintas são tokens do `theme.css` (§9 do GUIA_VISUAL).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. O TRILHO DOS 6 BLOCOS
   --------------------------------------------------------------------------- */
.trilho {
  list-style: none;
  display: flex;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding: 0;
  /* Se a largura não couber os 6 blocos, o trilho ROLA em vez de virar uma pilha: "sempre
     visível" é a decisão do Diretor, e uma fileira única mantém a leitura de onde se está no
     fluxo. O desvanecer à direita diz que há mais blocos ali. */
  overflow-x: auto;
  scrollbar-width: thin;
  padding-inline: var(--space-xs);
  margin-inline: calc(-1 * var(--space-xs));
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.bloco {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1 0 auto;
  max-width: 300px;
  /* Altura única para os seis: o bloco atual não fica mais alto por causa de uma linha a mais. */
  min-height: 62px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: var(--canvas-linho);
  color: var(--tinta-secundaria);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

/* O número do bloco é o mesmo desenho do `.step .n` do passo a passo. */
.bloco__numero {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--canvas);
  color: var(--tinta-secundaria);
  border: 1px solid var(--linha-controle);
}

.bloco__nome { min-width: 0; }

/* Concluído: verde-oliva e o número vira um visto (o clique em leitura entra no passo 8). */
.bloco--concluido {
  background: var(--oliva-claro);
  border-color: var(--oliva-borda);
  color: var(--oliva);
}
.bloco--concluido .bloco__numero {
  background: var(--oliva);
  border-color: var(--oliva);
  color: var(--tinta-sobre-acento);
}
a.bloco--concluido:hover {
  border-color: var(--oliva);
  box-shadow: var(--shadow);
}

/* Atual: oliva nobre e barra de estado à esquerda — a mesma linguagem do `.nav-item.active`
   aposentado, sem o gradiente de acento. */
.bloco--atual {
  background: var(--superficie);
  border-color: var(--oliva);
  color: var(--tinta-titulo);
  box-shadow: inset 3px 0 0 var(--oliva), var(--shadow);
}
.bloco--atual .bloco__numero {
  background: var(--oliva);
  border-color: var(--oliva);
  color: var(--tinta-sobre-acento);
}

/* Futuro: atenuado e INERTE. Não é um botão desabilitado — não existe clique a oferecer: quem
   libera a ação é o banco, não o trilho. */
.bloco--futuro { cursor: default; }
.bloco--futuro .bloco__nome { color: var(--tinta-secundaria); }
.bloco--futuro .bloco__numero { border-color: var(--linha-linho-forte); }

/* ---------------------------------------------------------------------------
   2. CABEÇALHO TIPOGRÁFICO DA ETAPA

   Sem a faixa da foto do monge: a foto fica só na Biblioteca. Aqui manda a tipografia — o
   Diretor abre a obra e sabe, em uma linha, onde está.
   --------------------------------------------------------------------------- */
/* O TÍTULO DA OBRA É O DONO DO CABEÇALHO (Sessão H17). Ele é o ÚNICO lugar onde o nome da obra
   aparece (o topo global deixou de repeti-lo) e por isso vem CENTRADO e em NEGRITO, maior que o
   resto da faixa: quem abre a tela vê de imediato de que livro se trata e em que etapa está. O
   `eyebrow` (bloco e etapa) e a linha do autor o acompanham na mesma coluna central. */
.cabecalho-etapa { margin-bottom: var(--space-lg); text-align: center; }
.cabecalho-etapa h1 {
  margin: var(--space-xs) 0 var(--space-sm);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--tinta-titulo);
  text-wrap: balance;
}
.cabecalho-etapa__sub {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--tinta-secundaria);
}
.cabecalho-etapa__passo {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
}

/* ---------------------------------------------------------------------------
   3. LINHA DE CARIMBOS — quem aprovou e quando (leitura nova, sem migração)

   `workflow_approvals.decided_by` / `decided_at` já existem no banco desde a migração
   `mvp_workflow`. Aqui a decisão humana deixa de ser o selo solto "Já aprovado: X" e vira
   registro com autor e data.
   --------------------------------------------------------------------------- */
.carimbos {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--space-lg);
  font-size: 13px;
  color: var(--tinta-secundaria);
}
.carimbo__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 3px var(--space-md);
  border: 1px solid var(--oliva-borda);
  border-radius: 999px;
  background: var(--oliva-claro);
  color: var(--oliva);
  font-weight: 600;
}
.carimbo__selo .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------------------------------------------------------
   4. O PORTÃO — DOIS PADRÕES, NÃO DOIS DESENHOS

   Os nomes são os do PADRAO_INTERFACE_HERMES §3: `.gate` com as duas variantes `.gate-cost`
   e `.gate-approval`. Toda tela usa a variante; nenhuma tela inventa o próprio popup. O
   `<dialog>` é nativo, e o `app.js` abre e fecha (devolvendo o foco ao gatilho).
   --------------------------------------------------------------------------- */
.gate {
  width: min(620px, calc(100vw - 2 * var(--space-xl)));
  padding: 0;
  border: 1px solid var(--linha-linho-forte);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  color: var(--tinta-titulo);
  box-shadow: var(--shadow-lg);
}
.gate::backdrop { background: rgba(38, 32, 29, .52); }

/* A iluminura compacta é o marco do popup: fio duplo de bronze, enfeite. */
.gate__corpo {
  padding: var(--space-xl);
  max-height: min(72vh, 640px);
  overflow: auto;
}

/* O eyebrow é o MESMO em todas as janelas do tipo — por isso é classe, e não texto solto em
   cada tela (a microcopy aprovada está em `_portao.html`). */
.gate__etiqueta {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.gate-approval .gate__etiqueta { color: var(--oliva); }

.gate__acao {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--tinta-titulo);
  margin: var(--space-xs) 0 0;
}

.gate__valor {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--tinta-titulo);
  margin: var(--space-md) 0 0;
  font-variant-numeric: tabular-nums;
}

/* O saldo do provedor logo abaixo do valor (ADR-048): a mesma linha que o Confirmar confere.
   Discreta quando cobre a etapa; na cor de erro quando não cobre, com o link da recarga. */
.gate__saldo {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
}
.gate__saldo.ok { color: var(--oliva); }
.gate__saldo.erro { color: var(--terracota); font-weight: 600; }
.gate__saldo a { color: inherit; font-weight: 700; text-decoration: underline; }

/* A consequência da decisão: uma frase, no lugar onde o custo fica no outro padrão. */
.gate__consequencia {
  margin: var(--space-sm) 0 0;
  font-size: 14.5px;
  color: var(--tinta-leitura);
  max-width: 60ch;
}

/* A caixa interna de métricas: só o que se processa e com que modelo.
   Nada de texto solto entre o valor e a caixa. */
.gate__metricas {
  margin-top: var(--space-lg);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: var(--canvas-linho);
  padding: var(--space-md) var(--space-lg);
}
.gate__metricas ul { list-style: none; margin: 0; padding: 0; }
.gate__metricas li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--linha-linho);
  font-size: 14px;
  color: var(--tinta-leitura);
}
.gate__metricas li:last-child { border-bottom: 0; }
.gate__metricas .k { color: var(--tinta-secundaria); }
.gate__metricas .v { font-weight: 600; color: var(--tinta-titulo); text-align: right; }

/* A MESMA caixa, com outro conteúdo: no cartão da página ela guarda o TEXTO CONTEXTUAL da etapa;
   a caixa técnica (volume e modelo) fica só no popup — nunca o mesmo dado nos dois lugares. */
.gate__metricas--contexto { color: var(--tinta-leitura); font-size: 14.5px; }
.gate__metricas--contexto p { margin: 0 0 var(--space-sm); }
.gate__metricas--contexto p:last-child { margin-bottom: 0; }

.gate__acoes {
  display: flex;
  gap: var(--space-lg);            /* o anel de foco (3px + 2px de vão) não encosta no vizinho */
  flex-wrap: wrap;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--linha-linho-forte);
  background: var(--canvas-linho);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------------------------------------------------------------------------
   4a-bis. A ESCOLHA DO NÍVEL DE IA (ADR-045): cartões com rádio, dentro do cartão do portão

   Nasceu com o pedido de dois portões independentes: na Tradução e na Revisão o Diretor escolhe
   com que modelo gastar, e o valor do cartão é recalculado a cada troca (HTMX, sem reload).

   REGRAS DO DESENHO
     * o rádio é REAL (`<input type="radio">`), só visualmente discreto: teclado, leitor de tela e
       o agrupamento do formulário continuam funcionando;
     * a marcação do escolhido tem DUAS camadas: `input:checked` pinta na hora (resposta imediata
       ao clique) e `.escolha-do-modelo--atual`, vinda do servidor, mantém o estado depois do
       recálculo e no primeiro desenho da tela;
     * o anel de foco é do `:focus-within`, não do rádio escondido — quem navega por teclado
       precisa VER onde está;
     * cores só por variável do tema: nenhum valor literal aqui.
   --------------------------------------------------------------------------- */
.escolhas-do-modelo__titulo {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinta-secundaria);
}

.escolhas-do-modelo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  border: 0;
}

.escolha-do-modelo {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

/* O rádio de verdade, mas fora do caminho do olho (nunca `display:none`: perderia o foco). */
.escolha-do-modelo__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.escolha-do-modelo__corpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: var(--space-md);
  border: 1px solid var(--linha-linho);
  border-radius: 10px;
  background: var(--superficie);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.escolha-do-modelo:hover .escolha-do-modelo__corpo { border-color: var(--linha-linho-forte); }
.escolha-do-modelo__radio:checked + .escolha-do-modelo__corpo,
.escolha-do-modelo--atual .escolha-do-modelo__corpo {
  border-color: var(--accent);
  background: var(--canvas-linho);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.escolha-do-modelo__radio:focus-visible + .escolha-do-modelo__corpo {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.escolha-do-modelo__nome {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta-titulo);
}
.escolha-do-modelo__glifo { font-size: 14px; }
.escolha-do-modelo__selo {
  font-family: var(--sans, inherit);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--oliva);
  border: 1px solid var(--oliva-borda);
  background: var(--oliva-claro);
  border-radius: 999px;
  padding: 1px 7px;
}

.escolha-do-modelo__modelo {
  font-size: 11.5px;
  color: var(--tinta-secundaria);
  word-break: break-word;
}

.escolha-do-modelo__preco {
  margin-top: auto;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--tinta-titulo);
  font-variant-numeric: tabular-nums;
}

.escolha-do-modelo__nota { font-size: 11px; color: var(--tinta-secundaria); }

/* ---------------------------------------------------------------------------
   4b. A CONFERÊNCIA DA FONTE: barra de decisão FIXA e edição em linha (PADRAO §3.4)

   A barra fica logo abaixo do cabeçalho e segue a rolagem: o botão "Aprovar a fonte" tem de estar
   à mão depois de ler 300 parágrafos, e não só no topo da página.
   --------------------------------------------------------------------------- */
.workspace-split__barra {
  position: sticky;
  top: var(--topo-fino);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  /* Barra FINA e discreta: ela acompanha a leitura por centenas de parágrafos e não pode roubar
     altura do texto. O padding caiu de 12/16px para 6/12px; o botão continua à mão. */
  margin: 0 0 var(--space-md);
  padding: 6px var(--space-md);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 8px;
  background: var(--vidro-canvas);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}
.workspace-split__barra__texto { flex: 1 1 260px; }
.workspace-split__barra__texto b { font-family: var(--serif); }
.workspace-split__barra .hint { font-size: 12px; line-height: 1.35; margin-top: 2px; }

/* Dica discreta da edição em linha: aparece quando o campo recebe o foco. */
.dica-edicao {
  font-size: 12px;
  color: var(--tinta-secundaria);
  margin-top: var(--space-xs);
  text-align: right;
  opacity: 0;
  transition: opacity .12s;
}
.segmento:focus-within .dica-edicao { opacity: 1; }
/* A CONFIRMAÇÃO do salvamento vale mesmo sem o foco no campo: quem apertou Enter ou saiu do campo
   (blur) precisa saber que gravou. Sem esta regra, a resposta do salvamento não seria lida. */
.dica-edicao--salvo { opacity: 1; }

/* ---------------------------------------------------------------------------
   5. TABELA DO GLOSSÁRIO (PADRAO §3.5)

   O Diretor trocou os cartões por tabela: um termo por linha, cada campo na sua coluna, e a
   lixeira no fim. O cabeçalho em versalete e o risco entre linhas vêm do `theme.css`; aqui ficam
   as larguras das colunas e o comportamento dos campos.
   --------------------------------------------------------------------------- */
.table-glossary td { vertical-align: top; padding: var(--space-sm) var(--space-md); }
.table-glossary th:first-child, .table-glossary td:first-child { width: 20%; }
.table-glossary th:nth-child(2), .table-glossary td:nth-child(2) { width: 19%; }
.table-glossary th:nth-child(3), .table-glossary td:nth-child(3) { width: 30%; }
.table-glossary th:nth-child(4), .table-glossary td:nth-child(4) { width: 23%; }
.table-glossary th:last-child, .table-glossary td:last-child { width: 8%; text-align: center; }

.table-glossary .termo-original {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta-titulo);
  margin: 0;
}
.table-glossary .tag {
  display: block;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
  margin-bottom: 2px;
}
/* Campo de tabela: mais baixo que o `input` do formulário, para a linha não virar um cartão.
   O contorno continua sendo `--linha-controle` (3:1). */
.table-glossary input,
.table-glossary textarea {
  padding: var(--space-sm) 10px;
  font-size: 14px;
  border-radius: 8px;
  width: 100%;
}
/* O campo de significado pode passar de uma linha: sem tirar a rolagem interna do `textarea` a
   segunda linha fica escondida, e o valor que a tela mostra deixaria de ser o valor gravado. */
.table-glossary textarea {
  resize: none;
  overflow: hidden;
  height: auto;
  min-height: calc(2 * 1.6 * 14px + 2 * var(--space-sm) + 2px);
  field-sizing: content;
}

/* A lixeira é CONTROLE, não enfeite: contorno de 3:1 e alvo de 34×34. */
.btn-lixeira {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--linha-controle);
  border-radius: 8px;
  background: var(--canvas-linho);
  color: var(--terracota);
  cursor: pointer;
}
.btn-lixeira:hover { border-color: var(--terracota); background: var(--terracota-claro); }
.btn-lixeira svg { width: 16px; height: 16px; display: block; }

.table-glossary__rodape {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* ---------------------------------------------------------------------------
   6. ETAPA PAGA RODANDO — o cartão do trabalho em andamento (PADRAO §3.3)

   Título em gerúndio, barra, contador e TRÊS fichas: tempo decorrido, tentativa e previsão de
   término. POLÍTICA DE CUSTO: custo NÃO aparece aqui — só no portão que autoriza e em Custo das
   Obras. A ficha "Custo medido até aqui" que existia nesta tela saiu e não volta.
   --------------------------------------------------------------------------- */
.screen-running {
  border: 1px solid var(--linha-linho-forte);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow);
  padding: 22px;
  margin-top: var(--space-xl);
}
.screen-running__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.screen-running__titulo {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--tinta-titulo);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   8f. O SINAL DE VIDA DA ETAPA PAGA (Sessão H3)

   O PROBLEMA: entre autorizar e a etapa terminar, a única coisa que se mexia era a barra. No
   cartão PARADO (fila longa, heartbeat vencido) nada se movia — e aí "esperando o worker" e "tela
   travada" ficavam idênticos para quem olha. O giro + a frase dizem as duas coisas de uma vez:
   há trabalho vivo aqui, e o que ele está fazendo.

   O indicador é do TEMA (bronze de "atenção"), não uma cor nova; e o giro é a única animação —
   com `prefers-reduced-motion` ele para, e a frase continua dizendo tudo.
   --------------------------------------------------------------------------- */
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar-sinal .9s linear infinite;
  flex: 0 0 auto;
}
@keyframes girar-sinal {
  to { transform: rotate(360deg); }
}

.worker-vivo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--bronze);
  border-radius: 0 8px 8px 0;
  background: var(--paper-2);
  color: var(--tinta-secundaria);
  font-size: 13px;
  line-height: 1.45;
}
.worker-vivo b { color: var(--tinta-titulo); font-weight: 600; }

/* O miolo do cartão parado: o selo da verificação é a prova de que a tela continua viva. */
.screen-running__parado {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-secundaria);
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-right-color: currentColor; opacity: .7; }
}

.screen-running__progresso {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.screen-running__progresso__barra {
  flex: 1;
  height: 8px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.screen-running__progresso__barra > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--amber));
}
.screen-running__progresso__conta {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-secundaria);
  white-space: nowrap;
}

.screen-running__metricas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.medida {
  flex: 1 1 150px;
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: var(--canvas-linho);
  padding: var(--space-md) var(--space-lg);
}
.medida .k {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
}
.medida .v {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--tinta-titulo);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.medida .d { font-size: 12px; color: var(--tinta-secundaria); margin-top: 2px; }
/* A previsão de término é o dado que o Diretor pediu para ver primeiro: ela se destaca sem
   inventar cor nova — o mesmo bronze do "atenção". */
.screen-running__metricas .medida--eta .v { color: var(--bronze); }

/* Lista das páginas que falharam: retomada explícita, sem promessa vaga. */
.paginas-falhas {
  list-style: none;
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: var(--space-md) 0 0;
  padding: 0;
}
/* ---------------------------------------------------------------------------
   7. BLOCO CONCLUÍDO REVISITADO (PADRAO §3.6)

   Leitura por padrão: o bloco aprovado abre como TEXTO. Corrigir é um clique consciente, com o
   aviso do que ele invalida — e ele passa por um portão de decisão, como tudo o mais.
   --------------------------------------------------------------------------- */
.screen-readonly__carimbo {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin: var(--space-md) 0 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--oliva);
  border-radius: 6px;
  background: var(--oliva-claro);
  color: var(--oliva);
  font-size: 14px;
}
.screen-readonly__carimbo b { font-family: var(--serif); }

/* No modo leitura as caixas continuam sendo caixas: só deixam de ser campo. */
.texto-leitura-bloco {
  margin: 0;
  padding: var(--space-sm) 10px;
  border: 1px solid var(--linha-linho);
  border-radius: 8px;
  background: var(--superficie-leitura);
  color: var(--tinta-leitura);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.paginas-falhas li {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--terracota-borda);
  background: var(--terracota-claro);
  color: var(--terracota);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gate[open] .gate__corpo { animation: gate-surgir .14s ease-out; }
@keyframes gate-surgir {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* Movimento é enfeite: quem pediu menos animação (PADRAO §8, caso 12) não recebe nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .gate[open] .gate__corpo { animation: none; }
}

/* ============================================================================
   8. FASE 3 — O FIM DO FLUXO (telas 13 a 17)

   Os componentes que o fim do fluxo pede: a MESA de revisão humana (original ×
   tradução, linha a linha), o sumário ancorado, a régua radar, o selo de entrega
   do arquivo no Acervo e as fichas dos formatos que ainda não existem.

   Nasceu em `preview/fluxo/mockup.css` (§9), aprovado pelo Diretor em
   2026-10-15, e subiu para cá sem reescrever nada: nenhuma cor solta, nenhum
   token novo — e nada aqui é a única indicação de um estado (o texto sempre
   acompanha a cor).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   8a. A MESA DE REVISÃO HUMANA (tela 16)

   O desenho definitivo, em DOIS NÍVEIS:

     * MACRO — `.mesa-topo`, o cabeçalho fixo: o desfecho da obra (concluir e
       exportar) sozinho à direita e, na faixa de baixo, a coordenada, o stepper
       de capítulos e a navegação entre sugestões. Botão de trecho não mora aqui;
     * MICRO — a linha do trecho: original à esquerda, tradução à direita, e a
       gaveta da sugestão ABAIXO do campo a que ela se refere, fechada por padrão.

   TRÊS COMPROMISSOS, e cada um tem uma regra aqui:

   1. ALINHAMENTO DO INGLÊS COM O PORTUGUÊS. As duas colunas começam na mesma
      altura porque `.mesa .source-block` e `.mesa .editor-texto` recebem a MESMA
      caixa: mesma fonte, mesmo tamanho, mesma entrelinha, mesmo preenchimento e
      a mesma borda de 1px — transparente nos dois em repouso, visível no campo
      quando a linha está ativa.
   2. TEXTO LISO. Não há número de parágrafo, distintivo nem moldura em repouso:
      o campo de tradução é texto, como o original. A moldura de edição só nasce
      na linha ativa (`--atual`) ou no foco do teclado. A coordenada do revisor
      vive na sub-barra, e só nela.
   3. RITMO PELA ESCALA. Parágrafo respira `--space-xs`; título de capítulo e
      citação respiram `calc(--space-xl + --space-sm)` (32px). Nenhum pixel solto.
   --------------------------------------------------------------------------- */

/* ---------- Nível macro: o cabeçalho SLIM ---------- */
.mesa-topo {
  position: sticky;
  top: var(--topo-fino);
  z-index: 10;
  margin: 0 0 var(--space-lg);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: var(--vidro-canvas);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}
/* A BARRA SLIM: UMA linha. O grid distribui as cinco peças e a coluna do capítulo é a única
   flexível — o título longo ellipsa em vez de empurrar a barra para uma segunda linha. É o que
   devolve altura à janela de leitura (o pedido do Diretor). */
.mesa-topo__barra {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 5px var(--space-md);
}
/* Em tela estreita o grid vira uma coluna: melhor empilhar do que espremer. O corte é baixo (900px)
   de propósito: no monitor do Diretor a barra fica SEMPRE numa linha, mesmo com zoom. */
@media (max-width: 900px) {
  .mesa-topo__barra { grid-template-columns: 1fr; }
}
.mesa-topo__desfecho { justify-self: end; }
.mesa-coordenada { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Os controles da barra são COMPACTOS: o mesmo `.btn` do resto da tela, com menos preenchimento. */
.mesa-topo .btn { padding: 3px 8px; font-size: 12px; line-height: 1.3; min-height: 0; white-space: nowrap; }
.mesa-topo .hint { font-size: 12px; }

/* O FILTRO de leitura é o MESMO componente da conferência da fonte (`.filtro-trechos`, definido
   acima): rádios de verdade. Aqui só se aperta o respiro para caber na barra slim. */
.mesa-topo .filtro-trechos { gap: var(--space-md); }
.mesa-topo .filtro-trechos__opcao { font-size: 12px; }


/* O stepper de capítulos: as setas deslizam para o começo do capítulo anterior
   e do seguinte; o título abre o sumário. O TÍTULO ellipsa (a coluna é a flexível). */
.mesa-cap { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: nowrap; }
.mesa-cap__atual { min-width: 0; }
.mesa-cap__titulo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--tinta-titulo);
  cursor: pointer;
}
.mesa-cap__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mesa-cap__titulo:hover { border-color: var(--linha-controle); background: var(--superficie); }
.mesa-cap__seta { color: var(--tinta-secundaria); flex: 0 0 auto; }

.mesa-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ---------- A grade dos trechos ---------- */
.mesa { border-top: 1px solid var(--linha-linho-forte); }

.mesa__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-2xl);
  /* O preenchimento lateral é IGUAL em todas as linhas: é ele que mantém as duas
     colunas na mesma vertical de uma linha para a outra. O vertical é o RITMO:
     4px de respiro entre parágrafos. */
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--linha-linho);
  /* Âncora da régua do apontamento (`::before`), que não pode alterar o fluxo da grade. */
  position: relative;
  /* A NAVEGAÇÃO ATERRISSA AQUI. O desconto é a altura do topo fino mais a barra slim (medida pelo
     app.js em `--altura-barra-mesa`): sem ele a linha para debaixo do cabeçalho fixo e o clique
     parece não ter feito nada. */
  scroll-margin-top: calc(var(--topo-fino) + var(--altura-barra-mesa, 60px) + 8px);
}
/* O filtro "Só trechos com alertas" esconde a linha (não a remove do documento): a leitura é
   gesto do navegador, e o texto continua na tela quando o filtro volta. */
.mesa__linha--oculta { display: none; }
/* Título de capítulo e citação respiram nobremente: 32px de cada lado
   (`--space-xl` + `--space-sm`, soma pela escala, sem pixel solto). */
.mesa__linha--titulo,
.mesa__linha--citacao {
  padding-top: calc(var(--space-xl) + var(--space-sm));
  padding-bottom: calc(var(--space-xl) + var(--space-sm));
}

/* O trecho ativo: moldura de ANEL (box-shadow, não borda — a borda mudaria a
   largura e desalinharia as colunas) e fundo claro. */
.mesa__linha--atual {
  border-bottom-color: transparent;
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linha-linho-forte), var(--shadow);
}

/* O trecho com apontamento ABERTO: uma régua âmbar na borda esquerda das DUAS caixas de texto.
   É o marcador de LINHA — a garantia de que o apontamento aparece dos dois lados, mesmo quando o
   termo citado não existe no português (a omissão, a maiúscula reverente). O grifo do termo é o
   refinamento, não a condição de existência da marcação.
   `box-shadow` (e não `border`) para não deslocar a grade: as duas colunas continuam alinhadas.
   Nas caixas ENVOLÓRIAS, não no `<textarea>`: o `:focus` do campo já usa `box-shadow`, e uma
   regra de mesma especificidade apagaria o halo de foco. */
.mesa__linha--apontada .mesa__original,
.mesa__linha--apontada .mesa__campo {
  box-shadow: inset 2px 0 0 var(--marca-linha);
}

.mesa__original { min-width: 0; }
.mesa__traducao { display: flex; flex-direction: column; min-width: 0; }

/* ---------- O ALINHAMENTO SAGRADO ----------
   Uma caixa só, para os dois lados: mesma fonte, mesmo tamanho, mesma
   entrelinha, mesmo preenchimento e mesma borda de 1px. */
.mesa .source-block,
.mesa .editor-texto,
.mesa .mesa__realce {
  /* `display: block` no campo não é enfeite: o `<textarea>` nasce `inline-block`,
     e o espaço de linha que isso cria dentro da célula empurra a caixa alguns
     pixels para baixo — o português começava abaixo do inglês. Em bloco, as duas
     caixas começam na mesma linha de base do topo. */
  display: block;
  margin: 0;
  padding: 10px var(--space-md);
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--serif-leitura);
  font-size: var(--leitura-tamanho);
  line-height: var(--leitura-entrelinha);
}
/* TEXTO LISO EM REPOUSO: o original é leitura e o campo também — nenhum dos dois
   tem moldura ou fundo até a linha ficar ativa. A TINTA é regra de cada um: a
   camada de realce é a única que NÃO pinta texto (só o fundo do grifo), e uma
   `color` aqui, com esta especificidade, apagaria o `transparent` dela — foi o
   que fez o português aparecer duplicado por cima do campo. */
.mesa .source-block { background: none; color: var(--tinta-leitura); }
.mesa .editor-texto { background: none; border-color: transparent; color: var(--tinta-leitura); }
/* A moldura de edição, só na linha ativa (e o foco do teclado traz a dele). */
.mesa__linha--atual .editor-texto {
  border-color: var(--linha-linho-suave);
  background: var(--superficie-leitura);
}

/* ---------- O destaque duplo ---------- */
.mesa .termo-destaque {
  background: rgba(214, 168, 74, .38);
  color: var(--bronze-escuro);
  padding: 1px var(--space-xs);
  border-radius: 3px;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--marca-linha);
}
/* O termo que a IA já aplicou sai do âmbar e vira oliva: resolvido. */
.mesa .termo-destaque--aplicado {
  background: var(--oliva-claro);
  color: var(--oliva);
  box-shadow: inset 0 -2px 0 var(--oliva-borda);
}

/* O campo e a camada de realce ocupam a MESMA caixa; a camada vai por cima, com
   o texto invisível e só o grifo à mostra. O clique ATRAVESSA a camada inteira —
   inclusive por cima do termo grifado: editar o trecho é clicar no texto e digitar. */
.mesa__campo { position: relative; }
.mesa__realce {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  background: none;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.mesa .mesa__realce .termo-destaque { color: transparent; }

/* ---------- O GRIFO DO PORTUGUÊS APARECE (Sessão H17) ----------
   A camada de realce existe para MOSTRAR, sobre o campo da tradução, o grifo do termo apontado —
   e ela não aparecia: dois defeitos somados, um de conteúdo e um de CSS.

   1. CONTEÚDO: a camada saía só quando o trecho apontado também existia no português, e a aba 2
      lia um campo que ninguém preenchia. Agora ela é desenhada sempre que o parágrafo tem alerta,
      com o texto da tradução como ele está no campo (o mesmo dado do grifo da aba 1).
   2. CSS: a camada era `position: absolute; inset: 0`, com a altura da CAIXA. Como o campo cresce
      com o texto, o grifo e o texto saíam de sincronia e a marca caía na linha errada. Aqui a
      camada recebe a altura do CAMPO (que o `app.js` mede), e as duas crescem juntas.

   A TINTA continua transparente: só o FUNDO do grifo se vê. Pintar texto aqui duplicaria o
   parágrafo por cima do campo — a armadilha que o comentário do alinhamento documenta. */
.trecho-final--apontado .mesa__campo { position: relative; }
.trecho-final--apontado .mesa__realce {
  display: block;
  height: var(--altura-do-campo, auto);
  overflow: hidden;
}
.trecho-final--apontado .mesa__realce .termo-destaque { border-radius: 3px; }

.mesa__traducao .editor-texto { width: 100%; }

/* ---------- A GAVETA DA JUSTIFICATIVA — VISÍVEL EM TODO TRECHO APONTADO ----------
   Não é mais um painel que abre no clique: a justificativa da IA fica aberta abaixo do campo, e
   cada alerta é uma caixa. O "Descartar" resolve aquele alerta e a caixa sai no re-render. */
.mesa__gaveta { margin-top: var(--space-sm); }
.mesa__sugestao + .mesa__sugestao { margin-top: var(--space-sm); }
.mesa__gaveta:not([hidden]) { animation: gaveta-surgir .16s ease-out; }
@keyframes gaveta-surgir {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.mesa__sugestao {
  border: 1px solid var(--bronze-borda);
  border-radius: 8px;
  background: var(--bronze-claro);
  color: var(--bronze-escuro);
  padding: var(--space-sm) var(--space-md);
}
.mesa__sugestao-texto { margin: 0; font-size: 13px; line-height: 1.55; }

/* O estado APLICADO da sugestão: o bronze de "atenção" sai e entra o oliva de
   "resolvido" — a mesma linguagem das etapas concluídas. */
.mesa__sugestao--aplicada {
  border-color: var(--oliva-borda);
  background: var(--oliva-claro);
  color: var(--oliva);
}
.mesa__sugestao-texto--ok { font-weight: 600; }
.mesa__sugestao-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.mesa__sugestao-acoes .btn { padding: 5px var(--space-md); font-size: 13px; }
/* `hidden` vence qualquer `display` que uma regra futura ponha nas caixas: sem
   isto, o estado escondido voltaria a aparecer no fluxo da página. */
.mesa__gaveta[hidden],
.mesa__sugestao[hidden],
.mesa__realce[hidden] { display: none; }

/* A dica de edição em linha nasceu presa ao `.segmento` da conferência da fonte:
   aqui quem a acende é o foco dentro da LINHA (campo e dica são irmãos). O mesmo
   vale para o `.trecho-final` da leitura corrida. */
.mesa__linha:focus-within .dica-edicao,
.trecho-final:focus-within .dica-edicao { opacity: 1; }

/* Movimento é enfeite: quem pediu menos animação não recebe nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .mesa__gaveta:not([hidden]) { animation: none; }
}

/* Em tela estreita a linha empilha: o original primeiro, a tradução depois. */
@media (max-width: 820px) {
  .mesa__linha { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   8a-bis. O SUMÁRIO — DROPDOWN ANCORADO NO PRÓPRIO BOTÃO

   Numeral romano e nome do capítulo, em serifa pura — sem porcentagem de leitura
   e sem contador. Ele não é gaveta lateral: abre logo abaixo do título do
   capítulo (`top: 100%; left: 0`), porque quem clica no centro da barra não deve
   ter de cruzar a janela com o cursor para ler a lista. Fecha com Esc ou com um
   clique fora.
   --------------------------------------------------------------------------- */
.mesa-cap__atual { position: relative; }

.sumario-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  width: min(320px, 82vw);
  /* O MENU DE CAPÍTULOS NÃO PODE SER CORTADO (bug do teste de ponta a ponta): numa obra de 20+
     capítulos a lista passava da dobra e os últimos capítulos ficavam inalcançáveis — o dropdown
     era desenhado, mas o rodapé dele caía fora da janela. `75vh` deixa a lista rolar POR DENTRO,
     com o botão do capítulo sempre à vista; `overscroll-behavior` impede que a rolagem do menu
     "vaze" para a página quando ela chega ao fim. */
  max-height: 75vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: var(--space-xs);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) var(--space-lg);
}
.sumario-dropdown[hidden] { display: none; }
.sumario-dropdown__lista { list-style: none; margin: 0; padding: 0; }
.sumario-dropdown__lista li { border-bottom: 1px solid var(--linha-linho); }
.sumario-dropdown__lista li:last-child { border-bottom: 0; }
.sumario-dropdown__lista a {
  display: block;
  padding: var(--space-sm) 0;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--tinta-leitura);
  text-decoration: none;
}
.sumario-dropdown__lista a:hover { color: var(--accent-dark); }
.sumario-dropdown__lista a[aria-current="true"] { color: var(--accent-dark); font-weight: 600; }

/* O ATALHO É INDICADOR, NÃO RÓTULO: a tecla aparece ao lado dos botões, discreta,
   e o botão diz o que faz (a seta), com o nome no `title`/`aria-label`. */
.atalhos { display: inline-flex; align-items: center; gap: var(--space-xs); }
.atalho-tecla {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  padding: 1px var(--space-xs);
  border: 1px solid var(--linha-controle);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--canvas-linho);
  color: var(--tinta-secundaria);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   8a-ter. A RÉGUA RADAR (borda direita)

   A linha visual é ultrafina (6px) e presa na viewport: mostra onde estão, no
   livro inteiro, os trechos com sugestão da IA. O ponto é ouro (8px); o do
   trecho em que se está, no acento.

   O ALVO DE CLIQUE NÃO É A LINHA. Uma régua de 6px é quase impossível de acertar
   com o mouse: cada ponto tem um alvo transparente de 28px de largura por 24px
   de altura (guia §6), que invade a margem da página sem cobrir texto — o
   marcador visível continua pequeno, quem cresce é a área que recebe o clique.
   --------------------------------------------------------------------------- */
.mesa-radar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: 6px;
  height: 100vh;
  background: var(--linha-linho-suave);
}
.mesa-radar__ponto {
  position: absolute;
  right: 0;
  width: 28px;
  height: 24px;
}
.mesa-radar__ponto::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 14px;
  border-radius: 3px 0 0 3px;
  background: var(--marca-linha);
}
.mesa-radar__ponto:hover::before,
.mesa-radar__ponto:focus-visible::before { background: var(--bronze); }
.mesa-radar__ponto--atual::before { background: var(--accent); height: 20px; }

/* A GRAVIDADE do que o ponto marca: o risco alto é terracota (o mesmo "olhe aqui" do resto da
   interface) e o médio é bronze. O baixo fica com o ouro do padrão — e nada disso é a ÚNICA
   indicação do estado: o `title` do ponto diz o que é, por extenso. */
.mesa-radar__ponto--alta::before { background: var(--terracota); }
.mesa-radar__ponto--media::before { background: var(--bronze); }

/* ---------------------------------------------------------------------------
   8b. O SELO DE ENTREGA (tela 17)

   O arquivo final e a prova de onde ele já está: a cópia do Acervo no Drive.
   O selo é um estado, não uma decisão — por isso não usa o `.carimbo__selo` das
   aprovações, que é a linguagem dos portões.
   --------------------------------------------------------------------------- */
.entrega {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}
.entrega__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--tinta-secundaria);
}

/* ---------------------------------------------------------------------------
   8c. AS SAÍDAS DA EXPORTAÇÃO (tela 17)

   Uma ficha por formato. Hoje só o .docx existe: as fichas do .epub e do .pdf
   aparecem com o botão DESABILITADO e o distintivo "Em breve" — o desenho diz o
   que ainda não existe em vez de prometer o que o núcleo não faz.
   --------------------------------------------------------------------------- */
.formatos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}
.formato {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--linha-linho-forte);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow);
  padding: var(--space-lg);
}
.formato__nome {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--tinta-titulo);
}
.formato__meta { font-size: 13px; color: var(--tinta-secundaria); line-height: 1.6; }
.formato__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* ---------------------------------------------------------------------------
   8d. Ajustes em componentes JÁ existentes

   O `.segmento .meta` é uma coluna de 92px: o distintivo de risco "risco médio"
   nascia em duas linhas ali dentro (e a bolinha saía por baixo do texto).
   --------------------------------------------------------------------------- */
.segmento .meta .badge { flex-wrap: nowrap; white-space: nowrap; }
.segmento .meta .badge .dot { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   8e. AS OPÇÕES DE GLOSSÁRIO DA EXPORTAÇÃO (ADR-056, tela 17)

   Os quatro modos de glossário, um rádio por modo, dentro do formulário que gera o
   .docx: a escolha e o clique em gerar são a MESMA ação.

   O RÁDIO É NATIVO, pela mesma razão do seletor de leitura (§2 do app.css): o `input`
   global do theme.css §formulário dá caixa de texto e `width:100%` a TODO campo, e o
   rádio herdava borda, fundo e preenchimento — parecia um botão desativado e ainda
   empurrava o texto para a linha de baixo. Aqui ele volta a ser um círculo nativo, com
   o acento do tema; a opção marcada acende o texto e o fundo é só reforço (quem usa
   leitor de tela ouve o `checked` do próprio rádio).
   --------------------------------------------------------------------------- */
.opcoes-do-glossario { display: flex; flex-direction: column; gap: 2px; }
.opcao-do-glossario {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--tinta-secundaria);
  cursor: pointer;
}
.opcao-do-glossario:hover,
.opcao-do-glossario:has(input:checked) { background: var(--canvas-linho); }
.opcao-do-glossario:has(input:checked) { color: var(--tinta-titulo); }
.opcao-do-glossario input {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.opcao-do-glossario input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.opcao-do-glossario__texto { display: block; min-width: 0; }
.opcao-do-glossario__nome { display: block; font-weight: 600; }
.opcao-do-glossario__texto .hint { display: block; margin-top: 2px; }

/* ---------- Revisão humana em duas abas (Sessão H16) ----------
   A tela tem uma FILA de trabalho (aba 1) e a LEITURA CORRIDA do livro (aba 2). O que separa as
   duas é a barra de abas; o resto é o mesmo livro, no mesmo parágrafo ativo
   (`docs_arquitetura/CONTRATO_REVISAO_HUMANA.md`). */

/* A BARRA DE ABAS. Ela é a única coisa sempre visível no topo da mesa: quem está na fila precisa
   saber que existe a leitura, e vice-versa. */
.mesa-abas {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--linha-linho-forte);
  border-radius: 999px;
  background: var(--canvas-linho);
}
.mesa-abas__aba {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mesa-abas__aba:hover { color: var(--tinta-titulo); }
.mesa-abas__aba--acesa {
  background: var(--superficie);
  color: var(--tinta-titulo);
  box-shadow: var(--shadow-suave, 0 1px 2px rgba(0, 0, 0, .08));
}
.mesa-abas__aba:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* O CONTADOR (§2.6): alertas ABERTOS do livro inteiro, não o tamanho da fila. */
.mesa-contador {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A FILA (§2.1, §2.2). Um cartão por PARÁGRAFO, com os alertas dele aninhados abaixo.

   O CARTÃO CRESCE COM O PARÁGRAFO (Sessão H17, decisão do Diretor). A altura mínima comum
   (`--altura-cartao`) continua, para a lista não mudar de geometria a cada dispensa e o clique
   otimista não cair no cartão errado — mas NÃO há mais rolagem dentro do cartão: o texto do
   parágrafo aparece INTEIRO, nos dois lados, e é a página que rola. Antes o corpo tinha altura
   máxima e rolagem própria (`max-height` + `overflow-y`), e o revisor lia o parágrafo por uma
   fresta de 150px. */
:root { --altura-cartao: 260px; }

.fila-de-alertas { display: flex; flex-direction: column; gap: var(--space-md); }

.cartao-alerta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: var(--altura-cartao);
  border: 1px solid var(--linha-linho-forte);
  border-radius: var(--radius);
  background: var(--superficie);
  padding: var(--space-md) var(--space-lg);
  /* Cartão nunca sai do desenho: a fila mede a geometria de cada um a cada dispensa
     (a próxima página entra no lugar do que saiu). */
  scroll-margin-top: 96px;
}
.cartao-alerta--atual { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cartao-alerta__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.cartao-alerta__titulo { margin: 0; font-size: 13px; font-weight: 700; color: var(--tinta-titulo); }
.cartao-alerta__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  /* O CORPO CRESCE (Sessão H17): nenhuma altura máxima, nenhuma rolagem interna. O parágrafo
     longo estica o cartão e a página é que rola — o texto nunca fica por uma fresta. Não há
     `overflow` declarado de propósito: o `clip` que o Bloco 1 põe no `.pagina-scroll` não chega
     aqui, e sem limite a caixa do campo e a camada de grifo medem o texto inteiro. */
}
.cartao-alerta__corpo .source-block { margin: 0; }
.cartao-alerta__alertas {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-top: 1px solid var(--linha-linho-suave);
  padding-top: var(--space-sm);
  margin-top: auto;
}
@media (max-width: 820px) {
  .cartao-alerta__corpo { grid-template-columns: minmax(0, 1fr); }
}

/* UM ALERTA DA IA, COM O SEU "Dispensar" (§2.3). O botão é a ÚNICA ação de cada alerta.

   A CAIXA É DO APONTAMENTO, E ELA APARECE (Sessão H17). O apontamento da IA tem cor própria —
   fundo âmbar claro e fio bronze, a mesma linguagem de "isto pede atenção" do resto da tela —,
   para não se confundir com o texto do parágrafo. Na H16 a caixa perdeu esse fundo e o comentário
   da IA ficou indistinguível do corpo do cartão (o defeito relatado pelo Diretor). */
.alerta-da-ia {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: 13px;
  color: var(--bronze-escuro);
  background: var(--bronze-claro);
  border: 1px solid var(--bronze-borda);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
}
.alerta-da-ia__texto { min-width: 0; }
.alerta-da-ia__categoria {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
}
.alerta-da-ia__comentario { margin: 2px 0 0; }
.alerta-da-ia .btn { flex: 0 0 auto; }

/* A FILA VAZIA (§2.9): o sinal de que o trabalho acabou — com o caminho para concluir. */
.fila-vazia { text-align: center; padding: var(--space-xl) var(--space-lg); }
.fila-vazia h2 { margin: var(--space-sm) 0 var(--space-sm); }
.fila-vazia__acoes {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}




.barra-leitura {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-sm) 0 var(--space-md);
  border-bottom: 1px solid var(--linha-linho-suave);
  margin-bottom: var(--space-md);
}

.barra-leitura {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); flex-wrap: wrap; margin: 20px 0 var(--space-md);
}
.fonte-ctrl, .zoom-ctrl { display: inline-flex; align-items: center; gap: var(--space-sm); }
/* O zoom é ajuste de LEITURA, não ação da etapa: os controles ficam discretos e compactos para
   não disputar atenção com o texto e para devolver largura à folha do PDF. */
.zoom-ctrl { gap: 4px; }
.zoom-ctrl .hint { font-size: 11px; }
.zoom-ctrl .btn {
  padding: 2px 8px; min-width: 0; border-radius: 7px;
  font-size: 13px; line-height: 1.25;
}
.zoom-ctrl .badge { padding: 2px 7px; font-size: 11px; }

textarea.leitura {
  width: 100%; min-height: 150px; background: var(--superficie-leitura);
  border: 1px solid var(--linha-controle); border-radius: 10px; padding: var(--space-lg);
  font-family: var(--serif-leitura); line-height: var(--leitura-entrelinha); color: var(--tinta-leitura);
  resize: none; overflow: hidden;
}
textarea.leitura:focus { border-color: var(--foco); box-shadow: var(--foco-halo); }
/* O anel de foco do teclado vem da regra universal; aqui só se limpa o do ponteiro. */
textarea.leitura:focus:not(:focus-visible) { outline: none; }

.form-motivo { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); align-items: center; }
.form-motivo input { flex: 1; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
details > summary { cursor: pointer; font-size: 13px; color: var(--accent-dark); font-weight: 600; margin-top: 6px; }

.pagina-painel {
  margin-top: 28px; border: 1px solid var(--linha-linho-forte); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow); padding: var(--space-lg);
}
.pagina-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: var(--space-md); flex-wrap: wrap;
}
.pagina-scroll {
  max-height: 520px; overflow: auto; border: 1px solid var(--linha-linho-forte);
  border-radius: 8px; background: var(--canvas-fundo); padding: var(--space-md);
}
.pagina-scroll img { display: block; margin: 0 auto; max-width: none; box-shadow: 0 8px 26px rgba(60, 42, 20, .3); }
/* `hidden` tem de vencer o `display: block` acima: a troca de folha do Bloco 1 esconde a imagem
   quando a página não tem arquivo no disco. */
.pagina-scroll img[hidden],
.pagina-scroll .vazio-de-pagina[hidden] { display: none; }

/* HTMX: sinal visual enquanto a requisição acontece */
.htmx-request { opacity: .55; transition: opacity .12s; }

/* Abas internas do Editor (mesa × conferir a fonte) */
.subnav { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--linha-linho-forte); }
.subnav a {
  padding: var(--space-sm) 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a.on { color: var(--accent-dark); border-bottom-color: var(--accent); }
.subnav a:hover { color: var(--tinta-titulo); }

/* ---------- Mesa de fonte: os trechos fluem como um livro ----------
   TEXTO LIMPO (refinamento do Bloco 1): a linha do trecho NÃO tem coluna de número nem etiqueta de
   tipo. O que era "12 PARÁGRAFO" na lateral virou ruído de TI no meio da leitura — e a conferência
   da fonte é LEITURA. O que é especial se apresenta pelo tipo (`--titulo`, `--citacao`, `--nota`),
   e o risco aparece numa linha discreta acima do texto. O campo CRESCE com o conteúdo (sem barra
   interna); quem rola é a página. */
.segmentos {
  border: 1px solid var(--linha-linho-forte); border-radius: var(--radius); overflow: hidden;
  background: var(--superficie); box-shadow: var(--shadow);
}
.segmento { border-bottom: 1px solid var(--linha-linho); }
/* A última linha da ÚLTIMA página não leva fio: o box já fecha embaixo. Cada página do texto é
   um grupo (`.pagina-do-texto`), então o `:last-child` sozinho deixaria um fio sobrando no meio. */
.segmentos > .pagina-do-texto:last-child > .segmento:last-child { border-bottom: 0; }
.segmento.com-risco { background: var(--terracota-veu); }
.segmento .corpo { padding: 10px var(--space-lg) 14px; }

/* ---------- O MENU ⋮ DO TRECHO (validação da fonte, Sessão F) ----------
   Cada trecho tem as ações de ESTRUTURA: excluir, mesclar com o anterior e trocar o tipo
   (Corpo/Título/Citação). Antes isso era feito esvaziando o campo, e o banco recusava ("o texto do
   trecho não pode ficar vazio") — a exclusão era impossível.

   O gatilho vive na MARGEM DIREITA, e o texto ganha um respiro do mesmo tamanho: controle flutuante
   em cima da leitura é o que a política anti-poluição proíbe — e um ⋮ por cima da última palavra da
   linha atrapalharia justamente a conferência. Ele fica discreto em repouso e acende no hover/foco
   (teclado incluído, via `:focus-within` do `<details>`). */
.segmento { position: relative; padding-right: 2.4rem; }
.bloco-menu { position: absolute; top: 6px; right: 4px; z-index: 6; }
.bloco-menu__gatilho {
  list-style: none;                 /* esconde o triângulo nativo do <summary> */
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 8px;
  color: var(--tinta-secundaria); cursor: pointer;
  opacity: .45; transition: opacity .12s, border-color .12s;
}
.bloco-menu__gatilho::-webkit-details-marker { display: none; }
.bloco-menu__gatilho:hover,
.bloco-menu[open] > .bloco-menu__gatilho {
  opacity: 1; border-color: var(--linha-controle); background: var(--superficie);
}
.segmento:hover .bloco-menu__gatilho,
.segmento:focus-within .bloco-menu__gatilho { opacity: 1; }
.bloco-menu__acoes {
  position: absolute; right: 0; top: 100%;
  z-index: 7;
  min-width: 220px;
  margin-top: 6px;
  padding: var(--space-sm);
  border: 1px solid var(--linha-linho-forte); border-radius: 10px;
  background: var(--superficie);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.bloco-menu__titulo {
  padding: 2px var(--space-sm) 6px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-secundaria);
}
.bloco-menu__acao {
  display: block; width: 100%;
  padding: 7px var(--space-sm);
  border: 0; border-radius: 7px;
  background: none; color: var(--tinta-leitura);
  font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.bloco-menu__acao:hover:not(:disabled) { background: var(--superficie-2); }
.bloco-menu__acao.is-atual { color: var(--tinta-secundaria); font-weight: 600; }
.bloco-menu__acao:disabled { opacity: .5; cursor: default; }
.bloco-menu__acao--perigo { color: var(--terracota); }
.bloco-menu__divisor {
  margin: 4px 0; border: 0; border-top: 1px solid var(--linha-linho);
}

/* O RISCO E O MOTIVO, por exceção: uma linha fina acima do texto — o parágrafo em si continua
   texto, sem moldura em volta. */
.segmento__aviso {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding: 10px var(--space-lg) 0;
}
.segmento__aviso .motivo { margin: 0; font-size: 12.5px; color: var(--tinta-secundaria); }
/* O único rótulo que sobrou: a nota de rodapé (sem ele uma nota é indistinguível do corpo). */
.segmento__tipo {
  padding: 10px var(--space-lg) 0;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-secundaria);
}

/* ---------- O TRECHO SEMÂNTICO: o tipo se apresenta pelo desenho ----------
   As classes são as MESMAS da mesa de revisão humana (`mesa__linha--titulo`, `mesa__linha--citacao`),
   e o respiro vertical delas (definido na seção 8) vale aqui sem uma linha a mais. O que se
   acrescenta é a tipografia de cada tipo — sempre relativa a `--fonte-texto`, que é a variável do
   A−/A＋: o tipo acompanha o tamanho escolhido para a leitura. */
.segmento.mesa__linha--titulo .editor-texto,
.segmento.mesa__linha--titulo .texto-leitura-bloco {
  font-family: var(--serif); font-weight: 600; line-height: 1.3;
  font-size: calc(var(--fonte-texto, 18px) * 1.12);
}
.segmento.mesa__linha--citacao .editor-texto,
.segmento.mesa__linha--citacao .texto-leitura-bloco {
  font-style: italic;
  border-left: 3px solid var(--bronze-borda); border-radius: 0 8px 8px 0;
  padding-left: var(--space-md);
}
.segmento.mesa__linha--nota .editor-texto,
.segmento.mesa__linha--nota .texto-leitura-bloco {
  font-size: calc(var(--fonte-texto, 18px) - 1.5px);
  color: var(--ink-soft);
}

/* o campo cresce com o texto; nenhuma rolagem interna */
.editor-texto {
  width: 100%; border: 1px solid var(--linha-linho-suave); background: var(--superficie-leitura);
  border-radius: 8px; padding: var(--space-sm) 10px; resize: none;
  /* O TEXTO NUNCA FICA INALCANÇÁVEL (bug relatado: "o texto traduzido está cortado").
     O crescimento depende de `field-sizing` (Chromium) E do `app.js` (`ajustarAltura`). Quando um
     dos dois não vale — navegador sem `field-sizing`, JS que não rodou, fonte que chegou depois da
     medida —, `overflow: hidden` escondia as linhas de baixo SEM barra de rolagem: o parágrafo
     existia e ninguém conseguia lê-lo. Com `overflow-y: auto` e uma altura mínima de duas linhas,
     o pior caso é uma caixa com rolagem: o texto continua acessível, e o `app.js` continua
     entregando a caixa inteira crescida no caso normal. */
  overflow-y: auto;
  /* Duas linhas do próprio campo (`1.7` de entrelinha × 2): é a altura que o `<textarea>` já tem
     por padrão com `rows=2`, agora garantida em CSS mesmo quando o tipo da caixa é reescrito. */
  min-height: 3.4em;
  font-family: var(--serif-leitura); line-height: var(--leitura-entrelinha); color: var(--tinta-leitura);
  field-sizing: content;
}
.editor-texto:hover { border-color: var(--linha-controle); }
.editor-texto:focus {
  border-color: var(--foco); background: var(--superficie-leitura);
  box-shadow: var(--foco-halo);
}
.editor-texto:focus:not(:focus-visible) { outline: none; }

.pagina-bloco { margin-top: 30px; }
.pagina-bloco .titulo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }

/* ---------- Conferir a fonte: o ORIGINAL à esquerda e o texto à direita (Bloco 1) ----------
   Sentido ocidental de leitura: a fonte da verdade vem antes. As duas colunas dividem a largura
   em partes iguais — é leitura comparada, não uma coluna de apoio. No aperto, a página passa para
   CIMA (o texto continua logo abaixo, na ordem do documento) em vez de espremer as duas. */
.leitura-dupla {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; align-items: start; margin-top: 14px;
}
/* A coluna do TEXTO não tinha regra nenhuma em produção — ela existia só no mockup. Sem
   `min-width: 0`, o item de grid não encolhe abaixo do próprio conteúdo e a coluna estoura a
   largura da tela com um parágrafo longo. */
.coluna-texto { min-width: 0; }
/* O painel do PDF fica FIXO abaixo da barra de decisão, que também é fixa: o desconto da altura
   dela vem do app.js (`--altura-barra-macro`), porque a barra quebra linha em tela estreita. */
.coluna-original {
  position: sticky;
  top: calc(var(--topo-fino) + var(--altura-barra-macro, 0px) + 14px);
  /* ALTURA ÚTIL MÁXIMA (refinamento do Bloco 1): a coluna ocupa TUDO o que sobra da janela depois
     do que fica fixo acima dela — o topo fino e a barra de decisão (cuja altura o app.js publica
     em `--altura-barra-macro`). O painel do PDF, dentro, é uma coluna flex, e é a caixa da folha
     que fica com o resto: assim a folha aproveita a área vertical inteira e NÃO passa por baixo da
     dobra, sem nenhuma constante mágica somando pedaços da janela. */
  height: calc(100vh - var(--topo-fino) - var(--altura-barra-macro, 64px) - 14px - var(--space-sm));
  display: flex;
  min-width: 0;
}
.coluna-original .pagina-painel {
  /* A folha ocupa ~95% da coluna útil: o resto é respiro, não moldura. As margens internas
     também encolhem — eram elas que deixavam o PDF pequeno dentro de uma coluna já estreita. */
  margin-top: 0; width: 95%; max-width: 95%; margin-inline: auto;
  display: flex; flex-direction: column; padding: var(--space-md);
}
.coluna-original .pagina-barra { margin-bottom: 8px; gap: 8px; }
.coluna-original .pagina-scroll {
  /* Rolagem INTERNA nos dois eixos: com o zoom, quem navega pela folha é a caixa dela, e a coluna
     do texto ao lado não se mexe nem perde o alinhamento com a página. */
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: auto;
  padding: var(--space-sm);
  /* A JANELA DO PDF ESTAVA PEQUENA (bug relatado no teste de ponta a ponta). A regra geral
     `.pagina-scroll` limita a caixa a `520px` — um teto herdado da leitura em página inteira —,
     e ele vencia o `flex: 1` da coluna: a folha ocupava no máximo 520px de uma coluna que já tem
     a altura da janela. Aqui o teto SAI: quem mede é o `flex` dentro de `.coluna-original`, que
     o `app.js` calcula a partir da altura real do cabeçalho (`--altura-barra-macro`). */
  max-height: none;
}

@media (max-width: 1180px) {
  .leitura-dupla { grid-template-columns: minmax(0, 1fr); }
  /* Empilhado (tela estreita): a coluna volta ao fluxo e a caixa retoma a altura própria. */
  .coluna-original { position: static; height: auto; display: block; }
  /* Empilhado não há coluna com altura calculada para segurar a folha: aqui o teto volta, pela
     altura da janela (e não pelos 520px fixos que valiam para todas as larguras). */
  .coluna-original .pagina-scroll { max-height: 72vh; }
}

/* ---------- O texto corrido por página (Bloco 1) ----------
   Cada página do livro é um grupo com o seu divisor. O divisor é o gancho que o app.js observa
   para trocar a folha do PDF; o aviso de parágrafo partido abre a página em que a segunda metade
   do parágrafo começa — é onde a costura entre as duas folhas acontece. */
.pagina-do-texto[hidden] { display: none; }
.separador-pagina {
  padding: 10px var(--space-lg);
  background: var(--canvas-linho);
  border-top: 1px solid var(--linha-linho);
  border-bottom: 1px solid var(--linha-linho);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-secundaria); text-align: center;
  scroll-margin-top: 120px;
}
.segmentos > .pagina-do-texto:first-child > .separador-pagina { border-top: 0; }
.aviso-partido {
  padding: 8px var(--space-lg);
  background: var(--terracota-claro);
  border-bottom: 1px solid var(--terracota-borda);
  font-size: 13px; color: var(--terracota);
}
.vazio-de-pagina { padding: 14px var(--space-lg); margin: 0; }
/* O filtro é de LEITURA e vive no navegador: esconde a linha, nunca o contexto da página. */
.coluna-texto.is-so-risco .segmento:not(.com-risco) { display: none; }
/* O tamanho do texto é uma variável: A−/A＋ mudam no navegador, sem ida ao servidor. */
.coluna-texto .editor-texto,
.coluna-texto .texto-leitura-bloco { font-size: var(--fonte-texto, 18px); }

/* O seletor de leitura: (●) todos os trechos / ( ) só com risco.
   O RÁDIO É NATIVO: o `input` global (theme.css §formulário) dá caixa de texto a TODO campo, e o
   rádio herdava borda/fundo/preenchimento — parecia um botão desativado. Aqui ele volta a ser um
   círculo nativo, com o acento do tema; e o rótulo aceso mostra qual leitura está valendo. */
.filtro-trechos { display: inline-flex; align-items: center; gap: var(--space-lg); }
.filtro-trechos__opcao {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; font-size: 13px; font-weight: 600; color: var(--tinta-secundaria); cursor: pointer;
}
.filtro-trechos__opcao input {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.filtro-trechos__opcao:hover { color: var(--tinta-titulo); }
.filtro-trechos__opcao:has(input:checked) { color: var(--tinta-titulo); }

/* Aprovação: o texto à esquerda e a ação à direita, onde o olho volta depois de conferir. */
.aprovacao { display: flex; gap: var(--space-xl); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.aprovacao > div { flex: 1 1 320px; }
.aprovacao-acao { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Glossário: um cartão por termo, com os campos de edição ----------
   Antes a tela era só leitura: o Diretor via o termo e não tinha onde corrigi-lo. */
.termo-cabeca {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  flex-wrap: wrap; margin-bottom: var(--space-md);
}
.termo-original {
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--tinta-titulo);
  margin-left: var(--space-sm);
}
.termo-marcas { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.termo-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.termo-campos label:last-child { grid-column: 1 / -1; }
.termo-campos label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-secundaria);
}
.termo-campos input, .termo-campos textarea { text-transform: none; letter-spacing: 0; font-size: 15px; }

@media (max-width: 820px) {
  .termo-campos { grid-template-columns: minmax(0, 1fr); }
}

/* aviso de rascunho (sugestão aplicada, ainda não salva) */
.rascunho {
  border-left: 4px solid var(--gold); background: var(--bronze-claro); color: var(--bronze-escuro);
  border-radius: 6px; padding: 9px 13px; font-size: 13.5px; margin-bottom: 14px;
}

.credito-imagem { font-size: 11.5px; color: var(--tinta-secundaria); margin-top: 10px; }
.credito-imagem a { color: var(--tinta-secundaria); }

/* Editor guiado: progresso da etapa */
.progresso { display: flex; align-items: center; gap: var(--space-md); margin: 2px 0 18px; }
.progresso .barra { flex: 1; height: 8px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.progresso .barra > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--amber)); }
.progresso .conta { font-size: 12px; color: var(--tinta-secundaria); white-space: nowrap; }

/* Fila da revisão: onde estou, o que falta e o que tem apontamento */
.fila { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 18px; }
.ficha {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--linha-controle);
  background: var(--canvas-linho); color: var(--ink-soft); font-weight: 600; font-size: 13px;
  cursor: pointer; font-variant-numeric: tabular-nums; position: relative;
  font-family: var(--sans); padding: 0;
}
.ficha:hover { border-color: var(--accent); }
.ficha.com-alerta { border-color: var(--bronze-borda); background: var(--bronze-claro); color: var(--bronze); }
.ficha.atual {
  background: linear-gradient(180deg, var(--accent-alto), var(--accent-dark)); color: var(--tinta-sobre-profundo);
  border-color: var(--accent-dark); box-shadow: var(--sombra-acento-media);
}
.ficha .ponto {
  position: absolute; top: var(--space-xs); right: var(--space-xs); width: 6px; height: 6px;
  border-radius: 50%; background: var(--terracota);
}
.ficha.atual .ponto { background: var(--ficha-ponto-aceso); }

/* fichas também servem de atalho (âncora) para o trecho com risco */
a.ficha { display: inline-grid; place-items: center; text-decoration: none; }
.ficha.risco-alto { border-color: var(--terracota-borda); background: var(--terracota-claro); color: var(--terracota); }
.ficha.risco-medio { border-color: var(--bronze-borda); background: var(--bronze-claro); color: var(--bronze); }
.ficha.risco-baixo { border-color: var(--linha-controle); }
.segmento { scroll-margin-top: 92px; }

/* ---------- Revisão final: leitura corrida do livro traduzido ----------
   Uma coluna só, na largura de leitura (como um Word em página estreita), cada trecho editável
   no lugar. O objetivo é olhar o livro inteiro sem trocar de tela a cada parágrafo. */
.resumo-final { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-xs) 0 14px; }
.rolagem-final { max-width: 78ch; }
.trecho-final {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  border-bottom: 1px solid var(--linha-linho-suave); padding: 6px 0 10px;
}
.trecho-final .marca {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: var(--space-sm) 10px 0 0;
}
.trecho-final .marca .num {
  font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tinta-secundaria);
}
.trecho-final .marca .tag { font-size: 10px; letter-spacing: .08em; color: var(--tinta-secundaria); }
.trecho-final .corpo-final { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.trecho-final .corpo-final .btn { opacity: .25; transition: opacity .12s; }
.trecho-final .corpo-final:focus-within .btn { opacity: 1; }
.trecho-final.titulo-1 .editor-texto {
  font-size: 21px !important; font-weight: 700; background: transparent; border-color: transparent;
}
.trecho-final.titulo-1 .editor-texto:hover { border-color: var(--linha-linho-forte); background: var(--superficie-leitura); }
.trecho-final.titulo-2 .editor-texto { font-weight: 600; }

@media (max-width: 820px) {
  .trecho-final { grid-template-columns: minmax(0, 1fr); }
  .trecho-final .marca { flex-direction: row; gap: var(--space-sm); padding: 0 0 var(--space-xs); }
}

/* ---------- Biblioteca: cabeçalho do acervo ----------
   O herói do acervo é a primeira coisa que a Sangha vê: moldura de iluminura
   (fio duplo de bronze em `theme.css`) e a serifa grande no título. */
.acervo-cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-xl);
}
.acervo-cabecalho h1 { margin: var(--space-xs) 0 var(--space-sm); }
.acervo-cabecalho .lead { margin: 0; max-width: 62ch; }
.acervo-nota { margin-bottom: var(--space-lg); }
.acervo-vazio { max-width: 720px; }
.acervo-vazio h2 { margin-top: var(--space-sm); }
.acervo-vazio p { margin-top: 0; }

/* A moldura do herói: fundo de pergaminho para o fio de bronze pegar nele. */
.acervo-iluminura {
  display: block;
  margin-bottom: var(--space-xl);
  padding: clamp(var(--space-xl), 3vw, 42px);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow);
}
.acervo-iluminura .eyebrow { margin-bottom: var(--space-xs); }
.acervo-iluminura h1 {
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -.006em;
  margin: var(--space-xs) 0 var(--space-sm);
}
.acervo-iluminura .lead {
  font-size: 17px;
  color: var(--tinta-leitura);
  max-width: 68ch;
  margin: 0;
}

/* ---------- Biblioteca: Estação de Envio de Nova Obra ----------
   O envio é a PORTA do sistema: um cartão de destaque com zona de arrastar e
   soltar. A ação primária é um envio REAL — o formulário é o mesmo
   `POST /enviar` (multipart, campo `arquivo`) usado pelo editor. O texto fica à
   esquerda, a ficha da obra à direita; em tela estreita, um embaixo do outro. */
.envio-estacao {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-xl), 3vw, 44px);
  align-items: start;
  margin-bottom: var(--space-xl);
  padding: clamp(var(--space-xl), 3vw, 40px);
  background:
    radial-gradient(760px 320px at 88% -20%, var(--veu-bronze), transparent 62%),
    linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow);
}
/* O texto acompanha a altura da ficha: sem isso, ele encolhe para o topo e o
   cartão fica com um vazio embaixo. */
.envio-estacao__texto { display: flex; flex-direction: column; align-items: flex-start; }
/* A ficha é mais alta que o texto e o cartão não estica junto: sem grudar, a
   explicação fica boiando num vazio. Colada, ela acompanha a rolagem da ficha. */
.envio-estacao__texto > .envio-estacao__gruda { position: sticky; top: var(--space-md); }
.envio-estacao__texto h2 {
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.16;
  margin: 0 0 var(--space-md);
}
.envio-estacao__texto p { margin: 0 0 var(--space-md); line-height: 1.65; }
.envio-estacao__acoes {
  display: flex; align-items: center; gap: var(--space-md) var(--space-lg); flex-wrap: wrap;
  margin-top: auto;                     /* empurra a ação para o pé da coluna */
  padding-top: var(--space-md);
}
a.envio-estacao__atalho {
  font-size: 13px; color: var(--accent-dark); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Em tela estreita a estação empilha: o texto primeiro, a ficha da obra depois
   — e a filigrana sai de cena, que em pouco espaço vira ruído. */
@media (max-width: 1024px) {
  .envio-estacao { grid-template-columns: minmax(0, 1fr); }
  .envio-estacao__texto { min-height: 0; }
  .borda-iluminura--ornada::after { display: none; }
}


/* A zona de soltar. A moldura artesanal é a mesma iluminura, em versão
   compacta — e é ela que recebe o realce quando o arquivo passa por cima. */
.envio-soltar {
  display: block;
  margin: 0;
  cursor: pointer;
  text-align: center;
  background: var(--superficie-leitura);
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.envio-soltar__icone { color: var(--bronze); display: block; margin-bottom: var(--space-md); }
.envio-soltar__icone svg { width: 58px; height: 58px; display: block; margin: 0 auto; }
.envio-soltar__titulo {
  font-family: var(--serif); font-size: 17.5px; font-weight: 600;
  color: var(--tinta-titulo); display: block; margin-bottom: var(--space-xs);
}
.envio-soltar__texto { display: block; font-size: 14px; color: var(--tinta-secundaria); }
.envio-soltar__limite { display: block; font-size: 12.5px; color: var(--tinta-secundaria); margin-top: var(--space-sm); }
.envio-soltar__arquivo {
  display: block; margin-top: var(--space-md); font-family: var(--serif);
  font-size: 14px; color: var(--oliva);
}
.envio-soltar__arquivo:empty { display: none; }
/* Aviso do arquivo recusado no próprio cartão (ex.: passa do limite). */
.envio-soltar__aviso:not([hidden]) {
  display: block; margin-top: var(--space-sm); font-size: 13px; font-weight: 600;
  color: var(--terracota);
}
.envio-soltar__aviso[hidden] { display: none; }
/* Sobre ou arrastando: linho aquecido de verdade, com o fio de bronze aceso. */
.envio-soltar:hover,
.envio-soltar:focus-within {
  background: var(--canvas-linho);      /* linho cru */
  box-shadow: var(--shadow);
}
.envio-soltar:hover::before,
.envio-soltar:focus-within::before { border-color: var(--bronze); }
.envio-soltar.is-sobre {
  background: var(--bronze-claro);      /* pergaminho aquecido */
  box-shadow: var(--shadow), var(--foco-halo);
  transform: translateY(-1px);
}
.envio-soltar.is-sobre::before { border-color: var(--bronze); border-style: solid; }
/* O anel de foco do teclado é o universal, no campo de arquivo escondido; aqui
   o `label` mostra que está em foco pelo fio aceso e pelo sublinhado. */
.envio-soltar:focus-within .envio-soltar__titulo { text-decoration: underline; text-underline-offset: 3px; }

/* Título da obra na própria estação: fica à vista antes de enviar, porque é
   dele que sai o "slug" com que o worker acha o PDF. */
.ficha-campo { display: block; margin: 0 0 var(--space-lg); }
.ficha-campo > label { margin-top: 0; }
.ficha-campo .hint { display: block; margin-top: var(--space-xs); }

/* O botão de envio só existe DEPOIS de haver arquivo escolhido (o app.js revela
   este bloco). Fica abaixo da moldura, alinhado com ela, e não dentro: clicar no
   botão não pode abrir de novo a janela de arquivos do `label`. */
.envio-soltar__confirmar {
  display: flex; align-items: center; gap: var(--space-md) var(--space-lg); flex-wrap: wrap;
}
.envio-soltar__confirmar[hidden] { display: none; }
.envio-soltar__confirmar .hint { flex: 1 1 220px; min-width: 0; }

/* A ficha que ENTRA NO LUGAR da caixa depois do upload: mesma coluna, mesma
   largura, para a estação não pular de tamanho na troca de estado. */
.envio-ficha { min-width: 0; }
.envio-ficha > p.hint { line-height: 1.6; }
.envio-ficha__arquivo {
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--superficie-leitura);
  border-left: 2px solid var(--bronze);
  font-size: 13.5px;
  overflow-wrap: anywhere;              /* nome de arquivo longo não estoura a coluna */
}

/* A pergunta do livro repetido: ocupa o lugar da ficha, com a mesma largura, e
   oferece as três decisões uma embaixo da outra (o texto de cada uma importa). */
.envio-conflito { min-width: 0; }
.envio-conflito h3 { font-size: 19px; line-height: 1.3; margin: var(--space-xs) 0 var(--space-md); }
.envio-conflito__achado { font-size: 14px; line-height: 1.6; margin: 0 0 var(--space-sm); }
.envio-conflito__achado code { font-size: 12.5px; overflow-wrap: anywhere; }
.envio-conflito__opcoes {
  list-style: none; margin: var(--space-md) 0 0; padding: 0;
  display: grid; gap: var(--space-md);
}
.envio-conflito__opcoes li { display: grid; gap: var(--space-xs); justify-items: start; }
.envio-conflito__opcoes .hint { line-height: 1.55; }
/* O recado neutro do cancelamento: informa, não alerta. */
.alert-card--nota {
  border-left-color: var(--bronze); background: var(--bronze-claro); color: var(--tinta-leitura);
}

/* ---------- Biblioteca: lista de obras ---------- */
.acervo-lista { list-style: none; margin: 0; padding: 0; }
.book-card__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.book-card .meta { color: var(--tinta-secundaria); }
.book-card .foot { flex-wrap: wrap; }
.book-card .foot .btn { white-space: nowrap; }
.custo { margin-left: auto; }

/* Em tela estreita a estação empilha: o texto primeiro, a zona de soltar
   depois — e o ornamento lateral sai de cena, que em pouco espaço vira ruído. */
/* Estado sutil de processamento em segundo plano (o worker roda fora da página). */
.processando {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: 12.5px; font-weight: 600; color: var(--bronze);
}
.processando__ponto {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; animation: pulsar 1.4s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* Ação primária em verde-oliva nobre (--oliva). */
.btn.oliva { background: var(--oliva); border-color: var(--oliva); color: var(--tinta-sobre-acento); }
.btn.oliva:hover { filter: brightness(.94); }

/* Crédito da imagem no rodapé de apoio. */
.rodape__creditos { font-size: 11.5px; color: var(--tinta-secundaria); margin: 0; max-width: 90ch; }
.rodape__creditos a { color: var(--tinta-secundaria); }

/* ===========================================================================
   CASCO DO EDITOR (Fase 2): trilho de 6 blocos, cabeçalho tipográfico e carimbos.
   Vem do `preview/fluxo/mockup.css` APROVADO pelo Diretor, sem reescrever o que já existia
   acima — só as regras que os componentes novos pedem. Nenhuma cor nova: todas as
   tintas são tokens do `theme.css` (§9 do GUIA_VISUAL).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. O TRILHO DOS 6 BLOCOS
   --------------------------------------------------------------------------- */
.trilho {
  list-style: none;
  display: flex;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding: 0;
  /* Se a largura não couber os 6 blocos, o trilho ROLA em vez de virar uma pilha: "sempre
     visível" é a decisão do Diretor, e uma fileira única mantém a leitura de onde se está no
     fluxo. O desvanecer à direita diz que há mais blocos ali. */
  overflow-x: auto;
  scrollbar-width: thin;
  padding-inline: var(--space-xs);
  margin-inline: calc(-1 * var(--space-xs));
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.bloco {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1 0 auto;
  max-width: 300px;
  /* Altura única para os seis: o bloco atual não fica mais alto por causa de uma linha a mais. */
  min-height: 62px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: var(--canvas-linho);
  color: var(--tinta-secundaria);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

/* O número do bloco é o mesmo desenho do `.step .n` do passo a passo. */
.bloco__numero {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--canvas);
  color: var(--tinta-secundaria);
  border: 1px solid var(--linha-controle);
}

.bloco__nome { min-width: 0; }

/* Concluído: verde-oliva e o número vira um visto (o clique em leitura entra no passo 8). */
.bloco--concluido {
  background: var(--oliva-claro);
  border-color: var(--oliva-borda);
  color: var(--oliva);
}
.bloco--concluido .bloco__numero {
  background: var(--oliva);
  border-color: var(--oliva);
  color: var(--tinta-sobre-acento);
}
a.bloco--concluido:hover {
  border-color: var(--oliva);
  box-shadow: var(--shadow);
}

/* Atual: oliva nobre e barra de estado à esquerda — a mesma linguagem do `.nav-item.active`
   aposentado, sem o gradiente de acento. */
.bloco--atual {
  background: var(--superficie);
  border-color: var(--oliva);
  color: var(--tinta-titulo);
  box-shadow: inset 3px 0 0 var(--oliva), var(--shadow);
}
.bloco--atual .bloco__numero {
  background: var(--oliva);
  border-color: var(--oliva);
  color: var(--tinta-sobre-acento);
}

/* Futuro: atenuado e INERTE. Não é um botão desabilitado — não existe clique a oferecer: quem
   libera a ação é o banco, não o trilho. */
.bloco--futuro { cursor: default; }
.bloco--futuro .bloco__nome { color: var(--tinta-secundaria); }
.bloco--futuro .bloco__numero { border-color: var(--linha-linho-forte); }

/* ---------------------------------------------------------------------------
   2. CABEÇALHO TIPOGRÁFICO DA ETAPA

   Sem a faixa da foto do monge: a foto fica só na Biblioteca. Aqui manda a tipografia — o
   Diretor abre a obra e sabe, em uma linha, onde está.
   --------------------------------------------------------------------------- */
/* O TÍTULO DA OBRA É O DONO DO CABEÇALHO (Sessão H17). Ele é o ÚNICO lugar onde o nome da obra
   aparece (o topo global deixou de repeti-lo) e por isso vem CENTRADO e em NEGRITO, maior que o
   resto da faixa: quem abre a tela vê de imediato de que livro se trata e em que etapa está. O
   `eyebrow` (bloco e etapa) e a linha do autor o acompanham na mesma coluna central. */
.cabecalho-etapa { margin-bottom: var(--space-lg); text-align: center; }
.cabecalho-etapa h1 {
  margin: var(--space-xs) 0 var(--space-sm);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--tinta-titulo);
  text-wrap: balance;
}
.cabecalho-etapa__sub {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--tinta-secundaria);
}
.cabecalho-etapa__passo {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
}

/* ---------------------------------------------------------------------------
   3. LINHA DE CARIMBOS — quem aprovou e quando (leitura nova, sem migração)

   `workflow_approvals.decided_by` / `decided_at` já existem no banco desde a migração
   `mvp_workflow`. Aqui a decisão humana deixa de ser o selo solto "Já aprovado: X" e vira
   registro com autor e data.
   --------------------------------------------------------------------------- */
.carimbos {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--space-lg);
  font-size: 13px;
  color: var(--tinta-secundaria);
}
.carimbo__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 3px var(--space-md);
  border: 1px solid var(--oliva-borda);
  border-radius: 999px;
  background: var(--oliva-claro);
  color: var(--oliva);
  font-weight: 600;
}
.carimbo__selo .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------------------------------------------------------
   4. O PORTÃO — DOIS PADRÕES, NÃO DOIS DESENHOS

   Os nomes são os do PADRAO_INTERFACE_HERMES §3: `.gate` com as duas variantes `.gate-cost`
   e `.gate-approval`. Toda tela usa a variante; nenhuma tela inventa o próprio popup. O
   `<dialog>` é nativo, e o `app.js` abre e fecha (devolvendo o foco ao gatilho).
   --------------------------------------------------------------------------- */
.gate {
  width: min(620px, calc(100vw - 2 * var(--space-xl)));
  padding: 0;
  border: 1px solid var(--linha-linho-forte);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  color: var(--tinta-titulo);
  box-shadow: var(--shadow-lg);
}
.gate::backdrop { background: rgba(38, 32, 29, .52); }

/* A iluminura compacta é o marco do popup: fio duplo de bronze, enfeite. */
.gate__corpo {
  padding: var(--space-xl);
  max-height: min(72vh, 640px);
  overflow: auto;
}

/* O eyebrow é o MESMO em todas as janelas do tipo — por isso é classe, e não texto solto em
   cada tela (a microcopy aprovada está em `_portao.html`). */
.gate__etiqueta {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.gate-approval .gate__etiqueta { color: var(--oliva); }

.gate__acao {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--tinta-titulo);
  margin: var(--space-xs) 0 0;
}

.gate__valor {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--tinta-titulo);
  margin: var(--space-md) 0 0;
  font-variant-numeric: tabular-nums;
}

/* O saldo do provedor logo abaixo do valor (ADR-048): a mesma linha que o Confirmar confere.
   Discreta quando cobre a etapa; na cor de erro quando não cobre, com o link da recarga. */
.gate__saldo {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
}
.gate__saldo.ok { color: var(--oliva); }
.gate__saldo.erro { color: var(--terracota); font-weight: 600; }
.gate__saldo a { color: inherit; font-weight: 700; text-decoration: underline; }

/* A consequência da decisão: uma frase, no lugar onde o custo fica no outro padrão. */
.gate__consequencia {
  margin: var(--space-sm) 0 0;
  font-size: 14.5px;
  color: var(--tinta-leitura);
  max-width: 60ch;
}

/* A caixa interna de métricas: só o que se processa e com que modelo.
   Nada de texto solto entre o valor e a caixa. */
.gate__metricas {
  margin-top: var(--space-lg);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: var(--canvas-linho);
  padding: var(--space-md) var(--space-lg);
}
.gate__metricas ul { list-style: none; margin: 0; padding: 0; }
.gate__metricas li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--linha-linho);
  font-size: 14px;
  color: var(--tinta-leitura);
}
.gate__metricas li:last-child { border-bottom: 0; }
.gate__metricas .k { color: var(--tinta-secundaria); }
.gate__metricas .v { font-weight: 600; color: var(--tinta-titulo); text-align: right; }

/* A MESMA caixa, com outro conteúdo: no cartão da página ela guarda o TEXTO CONTEXTUAL da etapa;
   a caixa técnica (volume e modelo) fica só no popup — nunca o mesmo dado nos dois lugares. */
.gate__metricas--contexto { color: var(--tinta-leitura); font-size: 14.5px; }
.gate__metricas--contexto p { margin: 0 0 var(--space-sm); }
.gate__metricas--contexto p:last-child { margin-bottom: 0; }

.gate__acoes {
  display: flex;
  gap: var(--space-lg);            /* o anel de foco (3px + 2px de vão) não encosta no vizinho */
  flex-wrap: wrap;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--linha-linho-forte);
  background: var(--canvas-linho);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------------------------------------------------------------------------
   4a-bis. A ESCOLHA DO NÍVEL DE IA (ADR-045): cartões com rádio, dentro do cartão do portão

   Nasceu com o pedido de dois portões independentes: na Tradução e na Revisão o Diretor escolhe
   com que modelo gastar, e o valor do cartão é recalculado a cada troca (HTMX, sem reload).

   REGRAS DO DESENHO
     * o rádio é REAL (`<input type="radio">`), só visualmente discreto: teclado, leitor de tela e
       o agrupamento do formulário continuam funcionando;
     * a marcação do escolhido tem DUAS camadas: `input:checked` pinta na hora (resposta imediata
       ao clique) e `.escolha-do-modelo--atual`, vinda do servidor, mantém o estado depois do
       recálculo e no primeiro desenho da tela;
     * o anel de foco é do `:focus-within`, não do rádio escondido — quem navega por teclado
       precisa VER onde está;
     * cores só por variável do tema: nenhum valor literal aqui.
   --------------------------------------------------------------------------- */
.escolhas-do-modelo__titulo {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinta-secundaria);
}

.escolhas-do-modelo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  border: 0;
}

.escolha-do-modelo {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

/* O rádio de verdade, mas fora do caminho do olho (nunca `display:none`: perderia o foco). */
.escolha-do-modelo__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.escolha-do-modelo__corpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: var(--space-md);
  border: 1px solid var(--linha-linho);
  border-radius: 10px;
  background: var(--superficie);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.escolha-do-modelo:hover .escolha-do-modelo__corpo { border-color: var(--linha-linho-forte); }
.escolha-do-modelo__radio:checked + .escolha-do-modelo__corpo,
.escolha-do-modelo--atual .escolha-do-modelo__corpo {
  border-color: var(--accent);
  background: var(--canvas-linho);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.escolha-do-modelo__radio:focus-visible + .escolha-do-modelo__corpo {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.escolha-do-modelo__nome {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta-titulo);
}
.escolha-do-modelo__glifo { font-size: 14px; }
.escolha-do-modelo__selo {
  font-family: var(--sans, inherit);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--oliva);
  border: 1px solid var(--oliva-borda);
  background: var(--oliva-claro);
  border-radius: 999px;
  padding: 1px 7px;
}

.escolha-do-modelo__modelo {
  font-size: 11.5px;
  color: var(--tinta-secundaria);
  word-break: break-word;
}

.escolha-do-modelo__preco {
  margin-top: auto;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--tinta-titulo);
  font-variant-numeric: tabular-nums;
}

.escolha-do-modelo__nota { font-size: 11px; color: var(--tinta-secundaria); }

/* ---------------------------------------------------------------------------
   4b. A CONFERÊNCIA DA FONTE: barra de decisão FIXA e edição em linha (PADRAO §3.4)

   A barra fica logo abaixo do cabeçalho e segue a rolagem: o botão "Aprovar a fonte" tem de estar
   à mão depois de ler 300 parágrafos, e não só no topo da página.
   --------------------------------------------------------------------------- */
.workspace-split__barra {
  position: sticky;
  top: var(--topo-fino);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  /* Barra FINA e discreta: ela acompanha a leitura por centenas de parágrafos e não pode roubar
     altura do texto. O padding caiu de 12/16px para 6/12px; o botão continua à mão. */
  margin: 0 0 var(--space-md);
  padding: 6px var(--space-md);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 8px;
  background: var(--vidro-canvas);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}
.workspace-split__barra__texto { flex: 1 1 260px; }
.workspace-split__barra__texto b { font-family: var(--serif); }
.workspace-split__barra .hint { font-size: 12px; line-height: 1.35; margin-top: 2px; }

/* Dica discreta da edição em linha: aparece quando o campo recebe o foco. */
.dica-edicao {
  font-size: 12px;
  color: var(--tinta-secundaria);
  margin-top: var(--space-xs);
  text-align: right;
  opacity: 0;
  transition: opacity .12s;
}
.segmento:focus-within .dica-edicao { opacity: 1; }
/* A CONFIRMAÇÃO do salvamento vale mesmo sem o foco no campo: quem apertou Enter ou saiu do campo
   (blur) precisa saber que gravou. Sem esta regra, a resposta do salvamento não seria lida. */
.dica-edicao--salvo { opacity: 1; }

/* ---------------------------------------------------------------------------
   5. TABELA DO GLOSSÁRIO (PADRAO §3.5)

   O Diretor trocou os cartões por tabela: um termo por linha, cada campo na sua coluna, e a
   lixeira no fim. O cabeçalho em versalete e o risco entre linhas vêm do `theme.css`; aqui ficam
   as larguras das colunas e o comportamento dos campos.
   --------------------------------------------------------------------------- */
.table-glossary td { vertical-align: top; padding: var(--space-sm) var(--space-md); }
.table-glossary th:first-child, .table-glossary td:first-child { width: 20%; }
.table-glossary th:nth-child(2), .table-glossary td:nth-child(2) { width: 19%; }
.table-glossary th:nth-child(3), .table-glossary td:nth-child(3) { width: 30%; }
.table-glossary th:nth-child(4), .table-glossary td:nth-child(4) { width: 23%; }
.table-glossary th:last-child, .table-glossary td:last-child { width: 8%; text-align: center; }

.table-glossary .termo-original {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta-titulo);
  margin: 0;
}
.table-glossary .tag {
  display: block;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
  margin-bottom: 2px;
}
/* Campo de tabela: mais baixo que o `input` do formulário, para a linha não virar um cartão.
   O contorno continua sendo `--linha-controle` (3:1). */
.table-glossary input,
.table-glossary textarea {
  padding: var(--space-sm) 10px;
  font-size: 14px;
  border-radius: 8px;
  width: 100%;
}
/* O campo de significado pode passar de uma linha: sem tirar a rolagem interna do `textarea` a
   segunda linha fica escondida, e o valor que a tela mostra deixaria de ser o valor gravado. */
.table-glossary textarea {
  resize: none;
  overflow: hidden;
  height: auto;
  min-height: calc(2 * 1.6 * 14px + 2 * var(--space-sm) + 2px);
  field-sizing: content;
}

/* A lixeira é CONTROLE, não enfeite: contorno de 3:1 e alvo de 34×34. */
.btn-lixeira {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--linha-controle);
  border-radius: 8px;
  background: var(--canvas-linho);
  color: var(--terracota);
  cursor: pointer;
}
.btn-lixeira:hover { border-color: var(--terracota); background: var(--terracota-claro); }
.btn-lixeira svg { width: 16px; height: 16px; display: block; }

.table-glossary__rodape {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* ---------------------------------------------------------------------------
   6. ETAPA PAGA RODANDO — o cartão do trabalho em andamento (PADRAO §3.3)

   Título em gerúndio, barra, contador e TRÊS fichas: tempo decorrido, tentativa e previsão de
   término. POLÍTICA DE CUSTO: custo NÃO aparece aqui — só no portão que autoriza e em Custo das
   Obras. A ficha "Custo medido até aqui" que existia nesta tela saiu e não volta.
   --------------------------------------------------------------------------- */
.screen-running {
  border: 1px solid var(--linha-linho-forte);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow);
  padding: 22px;
  margin-top: var(--space-xl);
}
.screen-running__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.screen-running__titulo {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--tinta-titulo);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   8f. O SINAL DE VIDA DA ETAPA PAGA (Sessão H3)

   O PROBLEMA: entre autorizar e a etapa terminar, a única coisa que se mexia era a barra. No
   cartão PARADO (fila longa, heartbeat vencido) nada se movia — e aí "esperando o worker" e "tela
   travada" ficavam idênticos para quem olha. O giro + a frase dizem as duas coisas de uma vez:
   há trabalho vivo aqui, e o que ele está fazendo.

   O indicador é do TEMA (bronze de "atenção"), não uma cor nova; e o giro é a única animação —
   com `prefers-reduced-motion` ele para, e a frase continua dizendo tudo.
   --------------------------------------------------------------------------- */
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar-sinal .9s linear infinite;
  flex: 0 0 auto;
}
@keyframes girar-sinal {
  to { transform: rotate(360deg); }
}

.worker-vivo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--bronze);
  border-radius: 0 8px 8px 0;
  background: var(--paper-2);
  color: var(--tinta-secundaria);
  font-size: 13px;
  line-height: 1.45;
}
.worker-vivo b { color: var(--tinta-titulo); font-weight: 600; }

/* O miolo do cartão parado: o selo da verificação é a prova de que a tela continua viva. */
.screen-running__parado {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-secundaria);
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-right-color: currentColor; opacity: .7; }
}

.screen-running__progresso {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.screen-running__progresso__barra {
  flex: 1;
  height: 8px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.screen-running__progresso__barra > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--amber));
}
.screen-running__progresso__conta {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-secundaria);
  white-space: nowrap;
}

.screen-running__metricas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.medida {
  flex: 1 1 150px;
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: var(--canvas-linho);
  padding: var(--space-md) var(--space-lg);
}
.medida .k {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
}
.medida .v {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--tinta-titulo);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.medida .d { font-size: 12px; color: var(--tinta-secundaria); margin-top: 2px; }
/* A previsão de término é o dado que o Diretor pediu para ver primeiro: ela se destaca sem
   inventar cor nova — o mesmo bronze do "atenção". */
.screen-running__metricas .medida--eta .v { color: var(--bronze); }

/* Lista das páginas que falharam: retomada explícita, sem promessa vaga. */
.paginas-falhas {
  list-style: none;
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: var(--space-md) 0 0;
  padding: 0;
}
/* ---------------------------------------------------------------------------
   7. BLOCO CONCLUÍDO REVISITADO (PADRAO §3.6)

   Leitura por padrão: o bloco aprovado abre como TEXTO. Corrigir é um clique consciente, com o
   aviso do que ele invalida — e ele passa por um portão de decisão, como tudo o mais.
   --------------------------------------------------------------------------- */
.screen-readonly__carimbo {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin: var(--space-md) 0 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--oliva);
  border-radius: 6px;
  background: var(--oliva-claro);
  color: var(--oliva);
  font-size: 14px;
}
.screen-readonly__carimbo b { font-family: var(--serif); }

/* No modo leitura as caixas continuam sendo caixas: só deixam de ser campo. */
.texto-leitura-bloco {
  margin: 0;
  padding: var(--space-sm) 10px;
  border: 1px solid var(--linha-linho);
  border-radius: 8px;
  background: var(--superficie-leitura);
  color: var(--tinta-leitura);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.paginas-falhas li {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--terracota-borda);
  background: var(--terracota-claro);
  color: var(--terracota);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gate[open] .gate__corpo { animation: gate-surgir .14s ease-out; }
@keyframes gate-surgir {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* Movimento é enfeite: quem pediu menos animação (PADRAO §8, caso 12) não recebe nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .gate[open] .gate__corpo { animation: none; }
}

/* ============================================================================
   8. FASE 3 — O FIM DO FLUXO (telas 13 a 17)

   Os componentes que o fim do fluxo pede: a MESA de revisão humana (original ×
   tradução, linha a linha), o sumário ancorado, a régua radar, o selo de entrega
   do arquivo no Acervo e as fichas dos formatos que ainda não existem.

   Nasceu em `preview/fluxo/mockup.css` (§9), aprovado pelo Diretor em
   2026-10-15, e subiu para cá sem reescrever nada: nenhuma cor solta, nenhum
   token novo — e nada aqui é a única indicação de um estado (o texto sempre
   acompanha a cor).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   8a. A MESA DE REVISÃO HUMANA (tela 16)

   O desenho definitivo, em DOIS NÍVEIS:

     * MACRO — `.mesa-topo`, o cabeçalho fixo: o desfecho da obra (concluir e
       exportar) sozinho à direita e, na faixa de baixo, a coordenada, o stepper
       de capítulos e a navegação entre sugestões. Botão de trecho não mora aqui;
     * MICRO — a linha do trecho: original à esquerda, tradução à direita, e a
       gaveta da sugestão ABAIXO do campo a que ela se refere, fechada por padrão.

   TRÊS COMPROMISSOS, e cada um tem uma regra aqui:

   1. ALINHAMENTO DO INGLÊS COM O PORTUGUÊS. As duas colunas começam na mesma
      altura porque `.mesa .source-block` e `.mesa .editor-texto` recebem a MESMA
      caixa: mesma fonte, mesmo tamanho, mesma entrelinha, mesmo preenchimento e
      a mesma borda de 1px — transparente nos dois em repouso, visível no campo
      quando a linha está ativa.
   2. TEXTO LISO. Não há número de parágrafo, distintivo nem moldura em repouso:
      o campo de tradução é texto, como o original. A moldura de edição só nasce
      na linha ativa (`--atual`) ou no foco do teclado. A coordenada do revisor
      vive na sub-barra, e só nela.
   3. RITMO PELA ESCALA. Parágrafo respira `--space-xs`; título de capítulo e
      citação respiram `calc(--space-xl + --space-sm)` (32px). Nenhum pixel solto.
   --------------------------------------------------------------------------- */

/* ---------- Nível macro: o cabeçalho SLIM ---------- */
.mesa-topo {
  position: sticky;
  top: var(--topo-fino);
  z-index: 10;
  margin: 0 0 var(--space-lg);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: var(--vidro-canvas);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}
/* A BARRA SLIM: UMA linha. O grid distribui as cinco peças e a coluna do capítulo é a única
   flexível — o título longo ellipsa em vez de empurrar a barra para uma segunda linha. É o que
   devolve altura à janela de leitura (o pedido do Diretor). */
.mesa-topo__barra {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 5px var(--space-md);
}
/* Em tela estreita o grid vira uma coluna: melhor empilhar do que espremer. O corte é baixo (900px)
   de propósito: no monitor do Diretor a barra fica SEMPRE numa linha, mesmo com zoom. */
@media (max-width: 900px) {
  .mesa-topo__barra { grid-template-columns: 1fr; }
}
.mesa-topo__desfecho { justify-self: end; }
.mesa-coordenada { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Os controles da barra são COMPACTOS: o mesmo `.btn` do resto da tela, com menos preenchimento. */
.mesa-topo .btn { padding: 3px 8px; font-size: 12px; line-height: 1.3; min-height: 0; white-space: nowrap; }
.mesa-topo .hint { font-size: 12px; }

/* O FILTRO de leitura é o MESMO componente da conferência da fonte (`.filtro-trechos`, definido
   acima): rádios de verdade. Aqui só se aperta o respiro para caber na barra slim. */
.mesa-topo .filtro-trechos { gap: var(--space-md); }
.mesa-topo .filtro-trechos__opcao { font-size: 12px; }


/* O stepper de capítulos: as setas deslizam para o começo do capítulo anterior
   e do seguinte; o título abre o sumário. O TÍTULO ellipsa (a coluna é a flexível). */
.mesa-cap { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: nowrap; }
.mesa-cap__atual { min-width: 0; }
.mesa-cap__titulo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--tinta-titulo);
  cursor: pointer;
}
.mesa-cap__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mesa-cap__titulo:hover { border-color: var(--linha-controle); background: var(--superficie); }
.mesa-cap__seta { color: var(--tinta-secundaria); flex: 0 0 auto; }

.mesa-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ---------- A grade dos trechos ---------- */
.mesa { border-top: 1px solid var(--linha-linho-forte); }

.mesa__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-2xl);
  /* O preenchimento lateral é IGUAL em todas as linhas: é ele que mantém as duas
     colunas na mesma vertical de uma linha para a outra. O vertical é o RITMO:
     4px de respiro entre parágrafos. */
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--linha-linho);
  /* Âncora da régua do apontamento (`::before`), que não pode alterar o fluxo da grade. */
  position: relative;
  /* A NAVEGAÇÃO ATERRISSA AQUI. O desconto é a altura do topo fino mais a barra slim (medida pelo
     app.js em `--altura-barra-mesa`): sem ele a linha para debaixo do cabeçalho fixo e o clique
     parece não ter feito nada. */
  scroll-margin-top: calc(var(--topo-fino) + var(--altura-barra-mesa, 60px) + 8px);
}
/* O filtro "Só trechos com alertas" esconde a linha (não a remove do documento): a leitura é
   gesto do navegador, e o texto continua na tela quando o filtro volta. */
.mesa__linha--oculta { display: none; }
/* Título de capítulo e citação respiram nobremente: 32px de cada lado
   (`--space-xl` + `--space-sm`, soma pela escala, sem pixel solto). */
.mesa__linha--titulo,
.mesa__linha--citacao {
  padding-top: calc(var(--space-xl) + var(--space-sm));
  padding-bottom: calc(var(--space-xl) + var(--space-sm));
}

/* O trecho ativo: moldura de ANEL (box-shadow, não borda — a borda mudaria a
   largura e desalinharia as colunas) e fundo claro. */
.mesa__linha--atual {
  border-bottom-color: transparent;
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linha-linho-forte), var(--shadow);
}

/* O trecho com apontamento ABERTO: uma régua âmbar na borda esquerda das DUAS caixas de texto.
   É o marcador de LINHA — a garantia de que o apontamento aparece dos dois lados, mesmo quando o
   termo citado não existe no português (a omissão, a maiúscula reverente). O grifo do termo é o
   refinamento, não a condição de existência da marcação.
   `box-shadow` (e não `border`) para não deslocar a grade: as duas colunas continuam alinhadas.
   Nas caixas ENVOLÓRIAS, não no `<textarea>`: o `:focus` do campo já usa `box-shadow`, e uma
   regra de mesma especificidade apagaria o halo de foco. */
.mesa__linha--apontada .mesa__original,
.mesa__linha--apontada .mesa__campo {
  box-shadow: inset 2px 0 0 var(--marca-linha);
}

.mesa__original { min-width: 0; }
.mesa__traducao { display: flex; flex-direction: column; min-width: 0; }

/* ---------- O ALINHAMENTO SAGRADO ----------
   Uma caixa só, para os dois lados: mesma fonte, mesmo tamanho, mesma
   entrelinha, mesmo preenchimento e mesma borda de 1px. */
.mesa .source-block,
.mesa .editor-texto,
.mesa .mesa__realce {
  /* `display: block` no campo não é enfeite: o `<textarea>` nasce `inline-block`,
     e o espaço de linha que isso cria dentro da célula empurra a caixa alguns
     pixels para baixo — o português começava abaixo do inglês. Em bloco, as duas
     caixas começam na mesma linha de base do topo. */
  display: block;
  margin: 0;
  padding: 10px var(--space-md);
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--serif-leitura);
  font-size: var(--leitura-tamanho);
  line-height: var(--leitura-entrelinha);
}
/* TEXTO LISO EM REPOUSO: o original é leitura e o campo também — nenhum dos dois
   tem moldura ou fundo até a linha ficar ativa. A TINTA é regra de cada um: a
   camada de realce é a única que NÃO pinta texto (só o fundo do grifo), e uma
   `color` aqui, com esta especificidade, apagaria o `transparent` dela — foi o
   que fez o português aparecer duplicado por cima do campo. */
.mesa .source-block { background: none; color: var(--tinta-leitura); }
.mesa .editor-texto { background: none; border-color: transparent; color: var(--tinta-leitura); }
/* A moldura de edição, só na linha ativa (e o foco do teclado traz a dele). */
.mesa__linha--atual .editor-texto {
  border-color: var(--linha-linho-suave);
  background: var(--superficie-leitura);
}

/* ---------- O destaque duplo ---------- */
.mesa .termo-destaque {
  background: rgba(214, 168, 74, .38);
  color: var(--bronze-escuro);
  padding: 1px var(--space-xs);
  border-radius: 3px;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--marca-linha);
}
/* O termo que a IA já aplicou sai do âmbar e vira oliva: resolvido. */
.mesa .termo-destaque--aplicado {
  background: var(--oliva-claro);
  color: var(--oliva);
  box-shadow: inset 0 -2px 0 var(--oliva-borda);
}

/* O campo e a camada de realce ocupam a MESMA caixa; a camada vai por cima, com
   o texto invisível e só o grifo à mostra. O clique ATRAVESSA a camada inteira —
   inclusive por cima do termo grifado: editar o trecho é clicar no texto e digitar. */
.mesa__campo { position: relative; }
.mesa__realce {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  background: none;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.mesa .mesa__realce .termo-destaque { color: transparent; }

.mesa__traducao .editor-texto { width: 100%; }

/* ---------- A GAVETA DA JUSTIFICATIVA — VISÍVEL EM TODO TRECHO APONTADO ----------
   Não é mais um painel que abre no clique: a justificativa da IA fica aberta abaixo do campo, e
   cada alerta é uma caixa. O "Descartar" resolve aquele alerta e a caixa sai no re-render. */
.mesa__gaveta { margin-top: var(--space-sm); }
.mesa__sugestao + .mesa__sugestao { margin-top: var(--space-sm); }
.mesa__gaveta:not([hidden]) { animation: gaveta-surgir .16s ease-out; }
@keyframes gaveta-surgir {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.mesa__sugestao {
  border: 1px solid var(--bronze-borda);
  border-radius: 8px;
  background: var(--bronze-claro);
  color: var(--bronze-escuro);
  padding: var(--space-sm) var(--space-md);
}
.mesa__sugestao-texto { margin: 0; font-size: 13px; line-height: 1.55; }

/* O estado APLICADO da sugestão: o bronze de "atenção" sai e entra o oliva de
   "resolvido" — a mesma linguagem das etapas concluídas. */
.mesa__sugestao--aplicada {
  border-color: var(--oliva-borda);
  background: var(--oliva-claro);
  color: var(--oliva);
}
.mesa__sugestao-texto--ok { font-weight: 600; }
.mesa__sugestao-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.mesa__sugestao-acoes .btn { padding: 5px var(--space-md); font-size: 13px; }
/* `hidden` vence qualquer `display` que uma regra futura ponha nas caixas: sem
   isto, o estado escondido voltaria a aparecer no fluxo da página. */
.mesa__gaveta[hidden],
.mesa__sugestao[hidden],
.mesa__realce[hidden] { display: none; }

/* A dica de edição em linha nasceu presa ao `.segmento` da conferência da fonte:
   aqui quem a acende é o foco dentro da LINHA (campo e dica são irmãos). O mesmo
   vale para o `.trecho-final` da leitura corrida. */
.mesa__linha:focus-within .dica-edicao,
.trecho-final:focus-within .dica-edicao { opacity: 1; }

/* Movimento é enfeite: quem pediu menos animação não recebe nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .mesa__gaveta:not([hidden]) { animation: none; }
}

/* Em tela estreita a linha empilha: o original primeiro, a tradução depois. */
@media (max-width: 820px) {
  .mesa__linha { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   8a-bis. O SUMÁRIO — DROPDOWN ANCORADO NO PRÓPRIO BOTÃO

   Numeral romano e nome do capítulo, em serifa pura — sem porcentagem de leitura
   e sem contador. Ele não é gaveta lateral: abre logo abaixo do título do
   capítulo (`top: 100%; left: 0`), porque quem clica no centro da barra não deve
   ter de cruzar a janela com o cursor para ler a lista. Fecha com Esc ou com um
   clique fora.
   --------------------------------------------------------------------------- */
.mesa-cap__atual { position: relative; }

.sumario-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  width: min(320px, 82vw);
  /* O MENU DE CAPÍTULOS NÃO PODE SER CORTADO (bug do teste de ponta a ponta): numa obra de 20+
     capítulos a lista passava da dobra e os últimos capítulos ficavam inalcançáveis — o dropdown
     era desenhado, mas o rodapé dele caía fora da janela. `75vh` deixa a lista rolar POR DENTRO,
     com o botão do capítulo sempre à vista; `overscroll-behavior` impede que a rolagem do menu
     "vaze" para a página quando ela chega ao fim. */
  max-height: 75vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: var(--space-xs);
  border: 1px solid var(--linha-linho-forte);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) var(--space-lg);
}
.sumario-dropdown[hidden] { display: none; }
.sumario-dropdown__lista { list-style: none; margin: 0; padding: 0; }
.sumario-dropdown__lista li { border-bottom: 1px solid var(--linha-linho); }
.sumario-dropdown__lista li:last-child { border-bottom: 0; }
.sumario-dropdown__lista a {
  display: block;
  padding: var(--space-sm) 0;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--tinta-leitura);
  text-decoration: none;
}
.sumario-dropdown__lista a:hover { color: var(--accent-dark); }
.sumario-dropdown__lista a[aria-current="true"] { color: var(--accent-dark); font-weight: 600; }

/* O ATALHO É INDICADOR, NÃO RÓTULO: a tecla aparece ao lado dos botões, discreta,
   e o botão diz o que faz (a seta), com o nome no `title`/`aria-label`. */
.atalhos { display: inline-flex; align-items: center; gap: var(--space-xs); }
.atalho-tecla {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  padding: 1px var(--space-xs);
  border: 1px solid var(--linha-controle);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--canvas-linho);
  color: var(--tinta-secundaria);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   8a-ter. A RÉGUA RADAR (borda direita)

   A linha visual é ultrafina (6px) e presa na viewport: mostra onde estão, no
   livro inteiro, os trechos com sugestão da IA. O ponto é ouro (8px); o do
   trecho em que se está, no acento.

   O ALVO DE CLIQUE NÃO É A LINHA. Uma régua de 6px é quase impossível de acertar
   com o mouse: cada ponto tem um alvo transparente de 28px de largura por 24px
   de altura (guia §6), que invade a margem da página sem cobrir texto — o
   marcador visível continua pequeno, quem cresce é a área que recebe o clique.
   --------------------------------------------------------------------------- */
.mesa-radar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: 6px;
  height: 100vh;
  background: var(--linha-linho-suave);
}
.mesa-radar__ponto {
  position: absolute;
  right: 0;
  width: 28px;
  height: 24px;
}
.mesa-radar__ponto::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 14px;
  border-radius: 3px 0 0 3px;
  background: var(--marca-linha);
}
.mesa-radar__ponto:hover::before,
.mesa-radar__ponto:focus-visible::before { background: var(--bronze); }
.mesa-radar__ponto--atual::before { background: var(--accent); height: 20px; }

/* A GRAVIDADE do que o ponto marca: o risco alto é terracota (o mesmo "olhe aqui" do resto da
   interface) e o médio é bronze. O baixo fica com o ouro do padrão — e nada disso é a ÚNICA
   indicação do estado: o `title` do ponto diz o que é, por extenso. */
.mesa-radar__ponto--alta::before { background: var(--terracota); }
.mesa-radar__ponto--media::before { background: var(--bronze); }

/* ---------------------------------------------------------------------------
   8b. O SELO DE ENTREGA (tela 17)

   O arquivo final e a prova de onde ele já está: a cópia do Acervo no Drive.
   O selo é um estado, não uma decisão — por isso não usa o `.carimbo__selo` das
   aprovações, que é a linguagem dos portões.
   --------------------------------------------------------------------------- */
.entrega {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}
.entrega__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--tinta-secundaria);
}

/* ---------------------------------------------------------------------------
   8c. AS SAÍDAS DA EXPORTAÇÃO (tela 17)

   Uma ficha por formato. Hoje só o .docx existe: as fichas do .epub e do .pdf
   aparecem com o botão DESABILITADO e o distintivo "Em breve" — o desenho diz o
   que ainda não existe em vez de prometer o que o núcleo não faz.
   --------------------------------------------------------------------------- */
.formatos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}
.formato {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--linha-linho-forte);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  box-shadow: var(--shadow);
  padding: var(--space-lg);
}
.formato__nome {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--tinta-titulo);
}
.formato__meta { font-size: 13px; color: var(--tinta-secundaria); line-height: 1.6; }
.formato__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* ---------------------------------------------------------------------------
   8d. Ajustes em componentes JÁ existentes

   O `.segmento .meta` é uma coluna de 92px: o distintivo de risco "risco médio"
   nascia em duas linhas ali dentro (e a bolinha saía por baixo do texto).
   --------------------------------------------------------------------------- */
.segmento .meta .badge { flex-wrap: nowrap; white-space: nowrap; }
.segmento .meta .badge .dot { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   8e. AS OPÇÕES DE GLOSSÁRIO DA EXPORTAÇÃO (ADR-056, tela 17)

   Os quatro modos de glossário, um rádio por modo, dentro do formulário que gera o
   .docx: a escolha e o clique em gerar são a MESMA ação.

   O RÁDIO É NATIVO, pela mesma razão do seletor de leitura (§2 do app.css): o `input`
   global do theme.css §formulário dá caixa de texto e `width:100%` a TODO campo, e o
   rádio herdava borda, fundo e preenchimento — parecia um botão desativado e ainda
   empurrava o texto para a linha de baixo. Aqui ele volta a ser um círculo nativo, com
   o acento do tema; a opção marcada acende o texto e o fundo é só reforço (quem usa
   leitor de tela ouve o `checked` do próprio rádio).
   --------------------------------------------------------------------------- */
.opcoes-do-glossario { display: flex; flex-direction: column; gap: 2px; }
.opcao-do-glossario {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--tinta-secundaria);
  cursor: pointer;
}
.opcao-do-glossario:hover,
.opcao-do-glossario:has(input:checked) { background: var(--canvas-linho); }
.opcao-do-glossario:has(input:checked) { color: var(--tinta-titulo); }
.opcao-do-glossario input {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.opcao-do-glossario input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.opcao-do-glossario__texto { display: block; min-width: 0; }
.opcao-do-glossario__nome { display: block; font-weight: 600; }
.opcao-do-glossario__texto .hint { display: block; margin-top: 2px; }

/* ---------- Revisão humana em duas abas (Sessão H16) ----------
   A tela tem uma FILA de trabalho (aba 1) e a LEITURA CORRIDA do livro (aba 2). O que separa as
   duas é a barra de abas; o resto é o mesmo livro, no mesmo parágrafo ativo
   (`docs_arquitetura/CONTRATO_REVISAO_HUMANA.md`). */

/* A BARRA DE ABAS. Ela é a única coisa sempre visível no topo da mesa: quem está na fila precisa
   saber que existe a leitura, e vice-versa. */
.mesa-abas {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--linha-linho-forte);
  border-radius: 999px;
  background: var(--canvas-linho);
}
.mesa-abas__aba {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mesa-abas__aba:hover { color: var(--tinta-titulo); }
.mesa-abas__aba--acesa {
  background: var(--superficie);
  color: var(--tinta-titulo);
  box-shadow: var(--shadow-suave, 0 1px 2px rgba(0, 0, 0, .08));
}
.mesa-abas__aba:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* O CONTADOR (§2.6): alertas ABERTOS do livro inteiro, não o tamanho da fila. */
.mesa-contador {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A FILA (§2.1, §2.2). Um cartão por PARÁGRAFO, com os alertas dele aninhados abaixo.

   O CARTÃO CRESCE COM O PARÁGRAFO (Sessão H17, decisão do Diretor). A altura mínima comum
   (`--altura-cartao`) continua, para a lista não mudar de geometria a cada dispensa e o clique
   otimista não cair no cartão errado — mas NÃO há mais rolagem dentro do cartão: o texto do
   parágrafo aparece INTEIRO, nos dois lados, e é a página que rola. Antes o corpo tinha altura
   máxima e rolagem própria (`max-height` + `overflow-y`), e o revisor lia o parágrafo por uma
   fresta de 150px. */
:root { --altura-cartao: 260px; }

.fila-de-alertas { display: flex; flex-direction: column; gap: var(--space-md); }

.cartao-alerta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: var(--altura-cartao);
  border: 1px solid var(--linha-linho-forte);
  border-radius: var(--radius);
  background: var(--superficie);
  padding: var(--space-md) var(--space-lg);
  /* Cartão nunca sai do desenho: a fila mede a geometria de cada um a cada dispensa
     (a próxima página entra no lugar do que saiu). */
  scroll-margin-top: 96px;
}
.cartao-alerta--atual { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cartao-alerta__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.cartao-alerta__titulo { margin: 0; font-size: 13px; font-weight: 700; color: var(--tinta-titulo); }
.cartao-alerta__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  /* O CORPO CRESCE (Sessão H17): nenhuma altura máxima, nenhuma rolagem interna. O parágrafo
     longo estica o cartão e a página é que rola — o texto nunca fica por uma fresta. Não há
     `overflow` declarado de propósito: o `clip` que o Bloco 1 põe no `.pagina-scroll` não chega
     aqui, e sem limite a caixa do campo e a camada de grifo medem o texto inteiro. */
}
.cartao-alerta__corpo .source-block { margin: 0; }
.cartao-alerta__alertas {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-top: 1px solid var(--linha-linho-suave);
  padding-top: var(--space-sm);
  margin-top: auto;
}
@media (max-width: 820px) {
  .cartao-alerta__corpo { grid-template-columns: minmax(0, 1fr); }
}

/* UM ALERTA DA IA, COM O SEU "Dispensar" (§2.3). O botão é a ÚNICA ação de cada alerta.

   A CAIXA É DO APONTAMENTO, E ELA APARECE (Sessão H17). O apontamento da IA tem cor própria —
   fundo âmbar claro e fio bronze, a mesma linguagem de "isto pede atenção" do resto da tela —,
   para não se confundir com o texto do parágrafo. Na H16 a caixa perdeu esse fundo e o comentário
   da IA ficou indistinguível do corpo do cartão (o defeito relatado pelo Diretor). */
.alerta-da-ia {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: 13px;
  color: var(--bronze-escuro);
  background: var(--bronze-claro);
  border: 1px solid var(--bronze-borda);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
}
.alerta-da-ia__texto { min-width: 0; }
.alerta-da-ia__categoria {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
}
.alerta-da-ia__comentario { margin: 2px 0 0; }
.alerta-da-ia .btn { flex: 0 0 auto; }

/* A FILA VAZIA (§2.9): o sinal de que o trabalho acabou — com o caminho para concluir. */
.fila-vazia { text-align: center; padding: var(--space-xl) var(--space-lg); }
.fila-vazia h2 { margin: var(--space-sm) 0 var(--space-sm); }
.fila-vazia__acoes {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.barra-leitura {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-sm) 0 var(--space-md);
  border-bottom: 1px solid var(--linha-linho-suave);
  margin-bottom: var(--space-md);
}

/* ---------- Aba 2: a leitura corrida, por capítulo ----------
   O CUSTO DE DESENHO É POR CAPÍTULO (§4.9-c): um livro inteiro na página é caro para o navegador,
   e a pessoa lê um capítulo por vez. O `contain-intrinsic-size` declara quanto cada capítulo mede
   para a barra de rolagem não pular quando ele entra no desenho. */
.capitulo-do-texto {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
.capitulo-do-texto__titulo {
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--tinta-secundaria);
  margin: var(--space-lg) 0 var(--space-sm);
}
.capitulo-do-texto--atual > .capitulo-do-texto__titulo { color: var(--tinta-titulo); }

/* O ALERTA REALÇADO NO PRÓPRIO TEXTO (§3.1): marca de fundo no parágrafo apontado, e o parágrafo
   ativo com a barra de destaque — sem transformar a leitura numa lista de cartões. */
.trecho-final--apontado { background: var(--bronze-claro, rgba(180, 140, 60, .10)); }
.trecho-final--atual { box-shadow: inset 3px 0 0 var(--accent); }

/* Os pedaços do cartão da fila e da leitura corrida (Sessão H16). */
.cartao-alerta__ordem { font-weight: 700; color: var(--tinta-titulo); }
.cartao-alerta__selo {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cartao-alerta__selo--revisado { color: var(--oliva, #5b6b3a); }
.cartao-alerta__original,
.cartao-alerta__traducao { min-width: 0; }

/* O CARTÃO DO PARÁGRAFO JÁ REVISADO (§2.5): continua na fila, no lugar dele, com a marca de
   "revisado" — o banco já o deu por pronto, e o cartão não finge que ainda há alerta. */
.cartao-alerta--revisado { border-style: dashed; background: var(--canvas-linho); }
.cartao-alerta--revisado .cartao-alerta__alertas { border-top-color: var(--linha-linho-forte); }

/* O "Dispensar Alerta" de cada apontamento: o alvo do clique da dispensa otimista (§2.3). */
.alerta-da-ia__dispensar { white-space: nowrap; }
.alerta-da-ia__dispensar[disabled] { opacity: .5; cursor: not-allowed; }

/* A LINHA DA LEITURA CORRIDA (aba 2), na anatomia da linha da mesa: original × tradução.

   A GRADE É DESTA LINHA, e não a da `.trecho-final` antiga (Sessão H17). Aquela grade é
   `78px minmax(0, 1fr)` — a coluna estreita era o MARCADOR de número e tipo do parágrafo, que a
   H16 tirou do desenho. Sem esta correção, os dois `<div>` de texto (original e tradução) caíam um
   na coluna de 78px e o outro na larga: o original saía espremido numa tira e a tradução ao lado,
   sem a leitura corrida que a aba promete. Duas colunas iguais, como na fila da aba 1. */
.trecho-final--capitulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  border-bottom: 1px solid var(--linha-linho-suave);
  padding: var(--space-sm) 0;
}
.trecho-final--capitulo .trecho-final__original,
.trecho-final--capitulo .trecho-final__traducao { min-width: 0; }
.trecho-final__original .source-block { margin: 0; color: var(--tinta-secundaria); }
.trecho-final--capitulo .trecho-final__traducao { display: flex; flex-direction: column; }
@media (max-width: 820px) {
  .trecho-final--capitulo { grid-template-columns: minmax(0, 1fr); }
}