/* Leitor do livro traduzido.
   Barras que somem ao rolar (topo: voltar, seção atual, Aa, busca, marcador;
   base: sumário, progresso, marcações), linha de progresso de 2px, menu lateral
   de títulos a partir de 80rem, painéis (folha de baixo no celular, coluna à
   esquerda acima de 40rem), pílula de seleção junto do trecho, destaques,
   notas, arquivos e marcadores.
   Ajustes (o leitor.js grava em localStorage "leitor-ajustes"; o <head> de cada
   página aplica antes de desenhar): data-tema (sem = do sistema, original,
   papel, noite), data-fonte, data-justificar, data-notas-termos e as variáveis
   --escala, --entrelinha, --esp-letra, --esp-palavra e --margem. */

:root {
  --fundo: #f7f8fa; --texto: #1c2230; --suave: #5b6475; --linha: #d5dae3; --acento: #2c4f86;
  --def-fundo: #eceff5; --def-borda: #2c4f86; --def-cab: #2c4f86;
  --teo-fundo: #eceff5; --teo-borda: #2c4f86; --teo-cab: #2c4f86;
  --ex-fundo: transparent; --ex-borda: transparent; --ex-cab: #2c4f86;
  --duvida: #b4472f;
  --figura-filtro: none;
  --painel: #ffffff; --painel-borda: rgba(28, 34, 48, .12); --sombra: 0 18px 48px rgba(20, 26, 40, .22);
  --pilula: #1f2430; --pilula-texto: #f3f5f9;
  --hl-amarelo: #f7e08a; --hl-verde: #bfe6b5; --hl-azul: #bcd7f5; --hl-rosa: #f5c2d4; --hl-sub: #d2452f;
  --f-texto: "Literata", Georgia, "Times New Roman", serif;
  --f-titulo: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --base: 17px; --largura: 45.6rem; --toque: 44px;
  --escala: 1; --entrelinha: 1.7; --esp-letra: 0em; --esp-palavra: 0em; --margem: 1;
  --topo: calc(52px + env(safe-area-inset-top, 0px));
  --alto-base: calc(53px + env(safe-area-inset-bottom, 0px));
  color-scheme: light;
}
/* tema: sem data-tema segue o sistema; Original é o claro; Noite, o escuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --fundo: #14171e; --texto: #dfe3ea; --suave: #98a1b2; --linha: #2d3442; --acento: #8fb0e6;
    --def-fundo: #1c212b; --def-borda: #8fb0e6; --def-cab: #8fb0e6;
    --teo-fundo: #1c212b; --teo-borda: #8fb0e6; --teo-cab: #8fb0e6;
    --ex-cab: #8fb0e6; --duvida: #e58a73;
    --figura-filtro: invert(.9) hue-rotate(180deg);
    --painel: #1d222c; --painel-borda: rgba(255, 255, 255, .1); --sombra: 0 18px 48px rgba(0, 0, 0, .55);
    --pilula: #2b313d; --hl-amarelo: #6b5a17; --hl-verde: #2f5a2a; --hl-azul: #234a73; --hl-rosa: #6a2f45; --hl-sub: #ef8a73;
    color-scheme: dark;
  }
}
:root[data-tema="noite"] {
  --fundo: #14171e; --texto: #dfe3ea; --suave: #98a1b2; --linha: #2d3442; --acento: #8fb0e6;
  --def-fundo: #1c212b; --def-borda: #8fb0e6; --def-cab: #8fb0e6;
  --teo-fundo: #1c212b; --teo-borda: #8fb0e6; --teo-cab: #8fb0e6;
  --ex-cab: #8fb0e6; --duvida: #e58a73;
  --figura-filtro: invert(.9) hue-rotate(180deg);
  --painel: #1d222c; --painel-borda: rgba(255, 255, 255, .1); --sombra: 0 18px 48px rgba(0, 0, 0, .55);
  --pilula: #2b313d; --hl-amarelo: #6b5a17; --hl-verde: #2f5a2a; --hl-azul: #234a73; --hl-rosa: #6a2f45; --hl-sub: #ef8a73;
  color-scheme: dark;
}
:root[data-tema="papel"] {
  --fundo: #f4ecdf; --texto: #3a2f22; --suave: #7a6a55; --linha: #ddd0bb; --acento: #8a4b1f;
  --painel: #fbf6ee; --painel-borda: rgba(58, 47, 34, .14);
  --def-fundo: #ece2d0; --def-borda: #8a4b1f; --def-cab: #8a4b1f; --teo-fundo: #ece2d0; --teo-borda: #8a4b1f; --teo-cab: #8a4b1f; --ex-cab: #8a4b1f;
}
:root[data-fonte="source"] { --f-texto: "Source Serif 4", Georgia, serif; }
:root[data-fonte="crimson"] { --f-texto: "Crimson Pro", Georgia, serif; }
:root[data-fonte="atkinson"] { --f-texto: "Atkinson Hyperlegible", Verdana, sans-serif; }

/* ---------- página ---------- */
* { box-sizing: border-box; }
html { scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--f-texto); font-size: calc(var(--base) * var(--escala)); line-height: var(--entrelinha);
  font-variant-numeric: lining-nums;
}
/* faixa da área segura do iPhone, por trás da barra do topo quando ela some */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--fundo); }
a { color: var(--acento); }
/* endereço longo (ex.: no aviso da capa) quebra em vez de alargar a página no celular */
.corpo a { overflow-wrap: anywhere; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- coluna de texto ---------- */
.corpo {
  margin: 0 auto; box-sizing: content-box;
  font-size: calc(var(--base) * var(--escala)); line-height: var(--entrelinha);
  letter-spacing: var(--esp-letra); word-spacing: var(--esp-palavra);
  max-width: calc(50rem - var(--margem) * 3.5rem);
  padding: calc(var(--topo) + 1.5rem) calc(max(16px, env(safe-area-inset-right, 0px)) + var(--margem) * 8px) 9rem calc(max(16px, env(safe-area-inset-left, 0px)) + var(--margem) * 8px);
}
:root[data-fonte="atkinson"] .corpo { font-size: calc(16px * var(--escala)); }
:root[data-justificar="sim"] .corpo p { text-align: justify; }
.corpo mjx-container { letter-spacing: 0; word-spacing: 0; }
/* desktop: a coluna padrão tem 45.6rem de texto e 16px de folga; o ajuste de
   margens estreita ou alarga a partir dela */
@media (min-width: 48rem) {
  :root { --col: calc(var(--largura) - (var(--margem) - 1) * 3.5rem); }
  .corpo {
    max-width: var(--col);
    padding-left: calc(max(16px, env(safe-area-inset-left, 0px)) + max(0px, (var(--margem) - 1) * 8px));
    padding-right: calc(max(16px, env(safe-area-inset-right, 0px)) + max(0px, (var(--margem) - 1) * 8px));
  }
}
/* com o menu lateral de títulos (páginas com seções), a coluna sai do caminho dele */
@media (min-width: 80rem) {
  .sumario ~ .corpo { margin-left: max(19rem, calc((100vw - var(--col)) / 2)); }
}
.corpo p { margin: 0 0 .85em; hyphens: auto; -webkit-hyphens: auto; }
.corpo p + p { text-indent: 0; }

/* ---------- títulos (desktop: número na mesma linha; a seção com traço) ---------- */
h1, h2, h3, h4 { font-family: var(--f-titulo); line-height: 1.2; text-wrap: balance; }
h1 { margin: 1rem 0 2rem; display: grid; gap: .3rem; }
h1 .n { font-size: .95rem; font-weight: 600; color: var(--acento); letter-spacing: .06em; text-transform: uppercase; }
h1 .t { font-size: 1.9em; font-weight: 600; }
h2 { font-size: 1.55em; font-weight: 600; margin: 3rem 0 1rem; display: flex; gap: .55em; align-items: baseline; }
h2 .n { color: var(--acento); padding-right: .55em; border-right: 3px solid var(--linha); }
h3 { font-size: 1.2em; font-weight: 600; margin: 2.2rem 0 .8rem; }
h3 .n { color: var(--acento); margin-right: .35em; }
h4 { font-size: .85em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin: 2.2rem 0 .8rem; }
h4.intertitulo { font-size: 1.05em; letter-spacing: 0; text-transform: none; color: var(--texto); margin: 1.8rem 0 .6rem; }
pre.codigo { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .82em; line-height: 1.45; background: color-mix(in srgb, var(--texto) 5%, var(--fundo)); border: 1px solid var(--linha); border-radius: 6px; padding: .7rem .9rem; overflow-x: auto; white-space: pre; }
em { font-style: italic; }
.sc { font-variant: small-caps; letter-spacing: .03em; }

/* ---------- fórmulas ---------- */
.eq { display: block; overflow-x: auto; overflow-y: hidden; margin: .8em 0 1em; text-align: center; }
mjx-container[display="true"] { margin: 0 !important; }
mjx-container { color: inherit; }
/* fórmula larga: o MathJax quebra em linhas; o que não quebra rola com sombra na borda */
.eq, .corpo mjx-container.larga {
  --cobre: var(--fundo);
  background:
    linear-gradient(to right, var(--cobre) 40%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--cobre) 40%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--texto) 22%, transparent), transparent) left / .7rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--texto) 22%, transparent), transparent) right / .7rem 100% no-repeat scroll;
}
.def .eq, .def mjx-container.larga { --cobre: var(--def-fundo); }
.teo .eq, .teo mjx-container.larga { --cobre: var(--teo-fundo); }
/* fórmula em linha sem ponto de quebra maior que a coluna: rola de lado sozinha
   em vez de alargar a página (classe posta pelo leitor.js) */
.corpo mjx-container.larga { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; }

/* ---------- caixas ---------- */
.def, .teo { background: var(--def-fundo); border: 1px solid var(--linha); border-left: 4px solid var(--def-borda); padding: .9em 1.1em .2em; margin: 1.4em 0; border-radius: 3px; }
.teo { background: var(--teo-fundo); border-left-color: var(--teo-borda); }
.def .cab, .teo .cab { margin-bottom: .3em; }
.def .rot, .teo .rot, .ex .rot, .dem .rot { font-family: var(--f-titulo); font-weight: 600; }
.def .rot { color: var(--def-cab); }
.teo .rot { color: var(--teo-cab); }
.teo .nome, .def .nome { font-style: italic; }
.ex { margin: 1.6em 0; background: var(--ex-fundo); border: 1px solid var(--ex-borda); border-radius: 3px; }
.ex .cab { margin-bottom: .25em; }
.ex .rot { color: var(--ex-cab); letter-spacing: .06em; text-transform: uppercase; font-size: .85em; }
.ex .nome { font-style: italic; margin-left: .3em; }
.fim > :last-child::after { content: "\25A0"; color: var(--acento); font-size: .7em; margin-left: .45em; }
.dem { margin: 1em 0 1.4em; }
.dem .rot { font-style: italic; font-weight: 400; font-family: var(--f-texto); }
.demonstracaode .cab { margin-bottom: .4em; }
.demonstracaode .rot { font-family: var(--f-titulo); font-style: normal; font-weight: 600; }
.dem > p:first-of-type { display: inline; }
.obs { margin: 1em 0 1.4em; }
.obs .rot { font-family: var(--f-titulo); font-weight: 600; margin-right: .4em; }
.obs > p:first-of-type { display: inline; }

/* exercícios */
.exerc { margin: 0 0 .6em; }
.exerc .k { font-family: var(--f-titulo); font-weight: 600; color: var(--acento); margin-right: .35em; font-variant-numeric: tabular-nums; }
.parte { display: block; padding-left: 1.6em; text-indent: -1.6em; }
.parte .pl { display: inline-block; min-width: 1.6em; text-indent: 0; }
.resumo, .esboco { margin: 2rem 0; }
.resumo ul, .esboco ul { margin: 0; padding-left: 1.2em; display: grid; gap: .35em; }
.esboco ul { list-style: none; padding-left: 0; }

/* figuras e tabelas */
figure { margin: 1.8em 0; display: grid; justify-items: center; gap: .55em; }
img.figura { max-width: 100%; height: auto; filter: var(--figura-filtro); }
figcaption { font-size: .86em; color: var(--suave); text-align: center; max-width: 34em; line-height: 1.5; }
figcaption .rot { font-family: var(--f-titulo); font-weight: 600; }
.tbl { overflow-x: auto; margin: 1em 0; }
/* figure é grid com justify-items:center: sem isto a .tbl cresce até a largura
   da tabela, o overflow-x:auto nunca age e a página ganha rolagem lateral */
figure > .tbl { justify-self: stretch; min-width: 0; max-width: 100%; }
table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
th, td { padding: .3em .7em; border-bottom: 1px solid var(--linha); text-align: center; }

/* listas com rótulo próprio: (a), (b) ou \item[...] */
ul.rotulada, li.rotulado { list-style: none; }
ul.rotulada { padding-left: 2.2em; }
li.rotulado { position: relative; }
li.rotulado .rotulo-item { position: absolute; left: -2.2em; width: 2em; }

/* ---------- notas numeradas: número no texto, balão, lista no fim ---------- */
.nota-ref { font-family: var(--f-titulo); font-size: .62em; line-height: 0; margin-left: .08em; }
.nota-ref a { text-decoration: none; font-weight: 600; padding: 0 .15em; border-radius: 3px; }
.nota-ref a:hover { background: var(--def-fundo); }
.nota-tradutor a { color: var(--duvida); }
:root[data-notas-termos="nao"] .nota-ref.nota-termo { display: none; }
.balao { position: absolute; z-index: 30; max-width: min(24rem, 90vw); background: var(--fundo); color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; padding: .65rem .85rem; font: 15px/1.5 var(--f-texto); box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
.balao .tipo { display: block; font: 600 11px/1.3 var(--f-titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--suave); margin-bottom: .25rem; }
.balao.nota-tradutor { border-color: var(--duvida); }
.balao p { margin: 0; }
/* setinha ligando o balão ao número; .acima quando não cabe embaixo */
.balao::before { content: ""; position: absolute; left: var(--seta, 1.5rem); top: -6px; width: 10px; height: 10px; background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: translateX(-50%) rotate(45deg); }
.balao.acima::before { top: auto; bottom: -6px; transform: translateX(-50%) rotate(225deg); }
.notas { margin-top: 3.5rem; border-top: 1px solid var(--linha); padding-top: .5rem; font-size: .9em; }
.notas ol { padding-left: 1.8em; display: grid; gap: .45em; }
.notas li::marker { font-family: var(--f-titulo); font-weight: 600; color: var(--acento); }
.notas .tipo { font: 600 .72em var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin-right: .4em; }
.notas .nota-tradutor .tipo { color: var(--duvida); }
.notas .conteudo p { display: inline; }
.notas .voltar { text-decoration: none; margin-left: .3em; }
.notas li:target { background: var(--def-fundo); border-radius: 4px; }

/* anterior e próximo */
.paginacao { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linha); font-family: var(--f-titulo); }
.paginacao a { text-decoration: none; font-weight: 600; }

/* ---------- capa (index.html) ---------- */
.capa { margin: 2rem 0 2.5rem; }
.capa h1 .t { font-size: 2.3em; }
.capa .autores { font-size: 1.15em; margin: 0 0 1rem; }
.capa .nota-capa { color: var(--suave); font-size: .92em; }
.aviso { margin: 0 0 2.5rem; padding: 1rem 1.25rem; background: var(--def-fundo); border-left: 3px solid var(--acento); border-radius: 4px; font-size: .95em; }
.aviso h2, .aviso h3 { font-family: var(--f-titulo); margin: 0 0 .5rem; }
.aviso h2 { font-size: 1.3em; }
.aviso h3 { font-size: 1.1em; margin-top: 1.25rem; }
.continuar { display: inline-block; margin-top: .5rem; font-family: var(--f-titulo); font-weight: 600; text-decoration: none; border: 1px solid var(--acento); border-radius: 6px; padding: .45rem .9rem; }
.indice > ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.indice .cap { font-family: var(--f-titulo); font-size: 1.25em; font-weight: 600; color: var(--texto); text-decoration: none; }
.indice .n { color: var(--acento); margin-right: .4em; font-variant-numeric: tabular-nums; }
.indice ol ol { list-style: none; padding-left: 1.6em; margin: .4em 0 0; display: grid; gap: .15em; }
.indice ol ol a { color: var(--texto); text-decoration: none; }
.indice ol ol a:hover { color: var(--acento); }

/* ---------- celular (abaixo de 48rem): títulos empilhados ----------
   O rótulo (capítulo, seção) vira uma linha pequena acima do título, que fica
   com a linha inteira; o mesmo para o esboço, os cabeçalhos de exemplo e a
   paginação. (Depois das regras de cima, que ele sobrepõe.) */
@media (max-width: 47.99rem) {
  .corpo h1 { display: grid; gap: .5rem; margin: .5rem 0 2.2rem; }
  .corpo h1 .n { font: 600 .8rem/1.2 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
  .corpo h1 .t { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.75rem); line-height: 1.1; font-weight: 600; text-wrap: balance; }
  .corpo h2, .corpo h3 { display: grid; gap: .3rem; align-items: start; }
  .corpo h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); line-height: 1.18; margin: 3.2rem 0 1rem; }
  .corpo h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.3rem); line-height: 1.25; margin: 2.4rem 0 .8rem; }
  .corpo h2 .n, .corpo h3 .n { font: 600 .78rem/1.2 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--acento); border: 0; padding: 0; margin: 0; font-variant-numeric: tabular-nums; }
  .corpo h2 .n::before { content: "Seção "; }
  .corpo h2 .t, .corpo h3 .t { text-wrap: balance; }
  /* esboço do capítulo: rótulo em cima */
  .corpo h4 + ul { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .7rem; }
  .corpo h4 + ul li { display: grid; gap: .1rem; }
  .corpo h4 + ul strong { font: 600 .75rem/1.3 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
  /* cabeçalho de exemplo e definição: rótulo numa linha, nome na outra */
  .ex .cab, .def .cab, .teo .cab { display: grid; gap: .15rem; }
  .ex .nome { margin-left: 0; }
  /* anterior e próximo: empilhados, alvos grandes */
  .paginacao { display: grid; gap: .6rem; }
  .paginacao a { display: grid; gap: .1rem; padding: .8rem 1rem; border: 1px solid var(--linha); border-radius: 10px; min-height: var(--toque); }
  .paginacao a::before { font: 500 .72rem var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
  .paginacao .ant::before { content: "Anterior"; }
  .paginacao .prox::before { content: "Próximo"; }
  .paginacao .prox { text-align: right; }
}

/* ---------- carregamento: o texto só aparece com as fórmulas prontas ---------- */
.carga { display: none; }
.carregando .carga { display: grid; justify-items: center; gap: .9rem; position: fixed; inset: 40vh 0 auto; z-index: 15; color: var(--suave); font: 14px var(--f-titulo); letter-spacing: .02em; }
.carga-barra { width: min(14rem, 60vw); height: 3px; border-radius: 3px; background: var(--linha); overflow: hidden; position: relative; }
.carga-barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: var(--acento); animation: carga 1.1s ease-in-out infinite; }
@keyframes carga { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.carregando .corpo { visibility: hidden; }
.corpo { transition: opacity .25s; }
.pronto .corpo { animation: surgir .25s ease-out; }
@keyframes surgir { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .carga-barra::after { animation-duration: 3s; } .pronto .corpo { animation: none; } }

/* ---------- barras que somem ---------- */
.cr-topo, .cr-base { position: fixed; left: 0; right: 0; z-index: 30; background: color-mix(in srgb, var(--fundo) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .28s ease, opacity .28s ease; font-family: var(--f-titulo); line-height: 1.3; }
.cr-topo { top: 0; padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--linha); }
.cr-topo .linha { height: 52px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .25rem; max-width: 60rem; margin: 0 auto; }
.cr-topo .esq { display: flex; min-width: var(--toque); }
.cr-topo .meio { min-width: 0; text-align: center; display: grid; line-height: 1.2; }
.cr-topo .cap { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.cr-topo .sec { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-topo .dir { display: flex; }
.cr-base { bottom: 0; padding: 0 max(12px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(12px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--linha); }
.cr-base .dentro { max-width: 40rem; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "a info b"; align-items: center; gap: 0 .5rem; padding: .25rem 0; }
.cr-base .info { grid-area: info; text-align: center; font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.cr-base [data-acao="sumario"] { grid-area: a; }
.cr-base [data-acao="marcacoes"] { grid-area: b; }
.oculto .cr-topo { transform: translateY(-100%); }
.oculto .cr-base { transform: translateY(100%); }
/* progresso: linha de 2px na borda de baixo da barra do topo; quando a barra
   some, ela sobe junto e fica presa no alto da janela */
.cr-linha { position: fixed; top: calc(var(--topo) - 1px); left: 0; height: 2px; width: 0; background: var(--acento); z-index: 31; pointer-events: none; transition: top .28s ease; }
.oculto .cr-linha { top: env(safe-area-inset-top, 0px); }
.bt { display: inline-grid; place-items: center; gap: 2px; min-width: var(--toque); min-height: var(--toque); padding: 0 .5rem; border: 0; border-radius: 10px; background: transparent; color: var(--texto); font: 600 14px var(--f-titulo); cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.bt:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.bt:focus-visible, .cr :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.bt svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bt[aria-pressed="true"] svg { fill: var(--acento); stroke: var(--acento); }
.bt.rotulado { grid-auto-flow: column; gap: .35rem; }
@media (prefers-reduced-motion: reduce) { .cr-topo, .cr-base, .cr-painel, .cr-menu, .cr-linha, .sumario { transition: none !important; } }

/* ---------- menu lateral de títulos (a partir de 80rem) ----------
   Abaixo disso o sumário abre num painel. O menu acompanha as barras: começa
   embaixo da do topo e termina em cima da de baixo; quando elas somem, ocupa a
   altura toda. */
.sumario { display: none; font-family: var(--f-titulo); font-size: 15px; line-height: 1.35; }
.sumario ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.sumario a { display: block; color: var(--texto); text-decoration: none; padding: .3rem .4rem; border-radius: 4px; }
.sumario a:hover, .sumario a.atual { background: var(--def-fundo); }
.sumario .nivel-3 a { padding-left: 1.4rem; color: var(--suave); font-size: 14px; }
.sumario .n { color: var(--acento); font-variant-numeric: tabular-nums; margin-right: .3rem; }
@media (min-width: 80rem) {
  .sumario { display: block; position: fixed; z-index: 15; left: 0; width: 17rem; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.2rem 2rem max(1.2rem, env(safe-area-inset-left, 0px)); top: var(--topo); bottom: var(--alto-base); transition: top .28s ease, bottom .28s ease; }
  .oculto .sumario { top: calc(2px + env(safe-area-inset-top, 0px)); bottom: 0; }
  .cr-base [data-acao="sumario"] { display: none; }
  /* painel aberto por cima: o menu some (um scroll só) */
  .com-painel .sumario { visibility: hidden; }
}

/* ---------- marcações no texto ---------- */
mark.hl { color: inherit; border-radius: 2px; padding: .05em 0; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.hl.amarelo { background: var(--hl-amarelo); }
mark.hl.verde { background: var(--hl-verde); }
mark.hl.azul { background: var(--hl-azul); }
mark.hl.rosa { background: var(--hl-rosa); }
mark.hl.sub { background: transparent; text-decoration: underline 2px var(--hl-sub); text-underline-offset: .2em; }
mark.hl.realce { outline: 2px solid var(--acento); outline-offset: 2px; }
.cr-nota { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-left: .15em; vertical-align: .15em; border: 0; border-radius: 50% 50% 50% 2px; background: var(--acento); color: var(--fundo); font: 700 .62em/1 var(--f-titulo); cursor: pointer; padding: 0; text-indent: 0; }
[data-marcador] { position: relative; }
[data-marcador]::after { content: ""; position: absolute; top: -.2em; right: calc(-1 * min(14px, var(--margem) * 8px + 12px)); width: 10px; height: 18px; background: #c8372d; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
::highlight(busca) { background: color-mix(in srgb, var(--acento) 35%, transparent); color: inherit; }

/* ---------- seleção: pílula escura junto do trecho ----------
   Acima do trecho no mouse; abaixo no toque, para não colidir com o menu do iOS. */
.cr-menu { position: fixed; z-index: 45; font-family: var(--f-titulo); line-height: 1.3; background: var(--pilula); color: var(--pilula-texto); border-radius: 14px; padding: 6px; box-shadow: var(--sombra); display: grid; gap: 4px; max-width: calc(100vw - 16px); }
.cr-menu .cores { display: flex; align-items: center; gap: .35rem; padding: 4px 6px; }
.cr-menu .cor { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; position: relative; }
.cr-menu .cor::after { content: ""; position: absolute; inset: -7px; }
.cr-menu .cor[data-cor="amarelo"] { background: #f2cf4a; }
.cr-menu .cor[data-cor="verde"] { background: #79c06a; }
.cr-menu .cor[data-cor="azul"] { background: #5e9ce0; }
.cr-menu .cor[data-cor="rosa"] { background: #e57aa0; }
.cr-menu .cor[data-cor="sub"] { background: transparent; border-color: currentColor; display: grid; place-items: center; font: 700 15px var(--f-texto); text-decoration: underline 2px #d2452f; }
.cr-menu .cor[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pilula), 0 0 0 4px currentColor; }
.cr-menu .acoes { display: flex; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 2px; overflow-x: auto; }
.cr-menu .acoes .bt { color: inherit; font-size: 13px; }
.cr-menu .bt:hover { background: rgba(255, 255, 255, .1); }
.cr-menu::after { content: ""; position: absolute; left: var(--seta, 50%); width: 12px; height: 12px; background: var(--pilula); transform: translateX(-50%) rotate(45deg); }
.cr-menu.abaixo::after { top: -5px; }
.cr-menu:not(.abaixo)::after { bottom: -5px; }

/* ---------- painéis ----------
   Celular (até 40rem): folha de baixo, com alça. Acima disso: coluna à
   esquerda, abaixo da barra do topo; a partir de 80rem ela cobre o menu
   lateral de títulos e vai só até a borda da coluna de texto. */
.cr-fundo { position: fixed; inset: 0; z-index: 48; background: rgba(10, 14, 22, .28); }
.cr-painel {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-height: 86dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--painel); color: var(--texto); box-shadow: var(--sombra); border: 1px solid var(--painel-borda); border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); font-family: var(--f-titulo); line-height: 1.3;
  transition: opacity .2s, transform .25s ease;
}
.cr-painel::before { content: ""; width: 38px; height: 5px; border-radius: 3px; background: var(--linha); margin: 8px auto 0; flex: none; }
/* Marcações e Busca: sem escurecer o texto e mais baixas, o texto continua à vista */
.cr-painel.leve { max-height: 72dvh; }
.cr-fundo.leve { background: transparent; }
@media (min-width: 40.01rem) {
  .cr-painel, .cr-painel.leve { top: var(--topo); right: auto; width: min(24rem, calc(100vw - 4rem)); max-height: none; border-radius: 0; border-width: 0 1px 0 0; box-shadow: 12px 0 32px rgba(20, 26, 40, .14); padding-left: env(safe-area-inset-left, 0px); }
  .cr-painel::before { display: none; }
  .cr-fundo { background: transparent; }
}
@media (min-width: 80rem) {
  .cr-painel, .cr-painel.leve { width: clamp(19rem, calc((100vw - var(--largura)) / 2), 24rem); }
}
.cr-painel .cab { display: flex; align-items: center; gap: .5rem; padding: .6rem .6rem .4rem 1.1rem; }
.cr-painel .cab h2 { margin: 0; flex: 1; font-size: 17px; font-weight: 600; display: block; }
.cr-painel .rolar { overflow-y: auto; overscroll-behavior: contain; padding: .2rem 1.1rem 1.1rem; display: grid; gap: 1rem; align-content: start; }
.cr-painel .rotulo { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); font-weight: 600; }

/* abas */
.abas { display: flex; gap: 4px; background: color-mix(in srgb, var(--texto) 7%, transparent); padding: 3px; border-radius: 10px; }
.abas button { flex: 1; min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--suave); font: 600 13px var(--f-titulo); cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--painel); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }

/* ---------- Aa: aparência ---------- */
.temas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.temas button { display: grid; justify-items: center; gap: .3rem; padding: .55rem .2rem .45rem; border-radius: 12px; border: 2px solid var(--linha); cursor: pointer; font: 500 12px var(--f-titulo); }
.temas button .aa { font: 600 22px/1 var(--f-texto); }
.temas button[aria-pressed="true"] { border-color: var(--acento); }
.temas [data-tema="auto"] { background: linear-gradient(135deg, #f7f8fa 50%, #14171e 50%); color: #5b6475; }
.temas [data-tema="auto"] .aa { background: linear-gradient(135deg, #1c2230 50%, #dfe3ea 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.temas [data-tema="original"] { background: #f7f8fa; color: #1c2230; }
.temas [data-tema="papel"] { background: #f4ecdf; color: #3a2f22; }
.temas [data-tema="noite"] { background: #14171e; color: #dfe3ea; }
.fontes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.fontes button { min-height: 44px; border-radius: 10px; border: 1px solid var(--linha); background: transparent; color: var(--texto); cursor: pointer; font-size: 16px; }
.fontes button[aria-pressed="true"] { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.linha-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; font-size: 15px; }
.chave { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px; background: var(--linha); position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.chave:checked { background: #34a853; }
.chave:checked::after { transform: translateX(20px); }
.ajuste { display: grid; gap: .3rem; padding: .45rem .1rem; }
.ajuste .topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.ajuste .valor { color: var(--suave); font-variant-numeric: tabular-nums; font-size: 13px; }
.ajuste .valor.mudou { color: var(--acento); font-weight: 600; }
/* slider: trilho fino, polegar grande; − e + nas pontas e marcas nos passos */
input.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; cursor: pointer; --p: 0%; }
input.slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--acento), var(--acento)) 0 / var(--p) 100% no-repeat, var(--linha); }
input.slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--linha); }
input.slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--acento); }
input.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
input.slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
input.slider:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 8px; }
.ajuste .com-passos { display: grid; grid-template-columns: var(--toque) 1fr var(--toque); align-items: center; }
.ajuste .com-passos .bt { font: 400 22px var(--f-texto); min-height: 40px; }
.ajuste .marcas { display: flex; justify-content: space-between; padding: 0 13px; margin-top: -6px; pointer-events: none; }
.ajuste .marcas i { width: 2px; height: 6px; background: var(--linha); border-radius: 1px; }
.ajuste .marcas i.padrao { background: var(--suave); height: 9px; }
.predefinidos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.predefinidos button { min-height: 64px; border: 1px solid var(--linha); border-radius: 12px; background: transparent; color: var(--texto); cursor: pointer; font: 500 12px var(--f-titulo); display: grid; justify-items: center; align-content: center; gap: .35rem; }
.predefinidos button[aria-pressed="true"] { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.predefinidos .linhas { display: grid; width: 34px; }
.predefinidos .linhas i { height: 2px; background: currentColor; border-radius: 1px; }
.previa { border: 1px dashed var(--linha); border-radius: 12px; padding: .7rem .9rem; margin: 0; font-family: var(--f-texto); font-size: calc(15px * var(--escala)); line-height: var(--entrelinha); letter-spacing: var(--esp-letra); word-spacing: var(--esp-palavra); color: var(--texto); max-height: 7.5rem; overflow: hidden; }
:root[data-justificar="sim"] .previa { text-align: justify; hyphens: auto; }
.restaurar { justify-self: start; color: var(--acento); }

/* ---------- listas (sumário, busca, marcações) ---------- */
.lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lista a, .lista button.item { display: grid; gap: .15rem; width: 100%; text-align: left; padding: .6rem .7rem; border: 0; border-radius: 10px; background: transparent; color: var(--texto); text-decoration: none; font: 15px/1.35 var(--f-titulo); cursor: pointer; }
.lista a:hover, .lista button.item:hover, .lista a.atual { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.lista .nivel-3 a { padding-left: 1.6rem; font-size: 14px; color: var(--suave); }
.lista .n { color: var(--acento); font-variant-numeric: tabular-nums; margin-right: .35rem; }
.lista .contexto { font: 14px/1.45 var(--f-texto); }
.lista .meta { font-size: 12px; color: var(--suave); }
.lista .citacao { font: 15px/1.45 var(--f-texto); border-left: 4px solid var(--cor, var(--linha)); padding-left: .6rem; }
.lista .nota { font-size: 14px; color: var(--texto); }
.lista .citacao.amarelo { --cor: #f2cf4a; } .lista .citacao.verde { --cor: #79c06a; } .lista .citacao.azul { --cor: #5e9ce0; } .lista .citacao.rosa { --cor: #e57aa0; } .lista .citacao.sub { --cor: #d2452f; }
.vazio { color: var(--suave); font: 14px/1.5 var(--f-titulo); margin: .5rem 0; }
.filtros { display: flex; gap: .4rem; flex-wrap: wrap; }
.filtros button { min-height: 32px; padding: 0 .7rem; border-radius: 16px; border: 1px solid var(--linha); background: transparent; color: var(--texto); font: 500 13px var(--f-titulo); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.filtros button[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); }
.filtros i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); }
.campo { width: 100%; min-height: 44px; padding: .5rem .75rem; border-radius: 10px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); font: 16px var(--f-titulo); }
textarea.campo { min-height: 6.5rem; resize: vertical; font: 16px/1.5 var(--f-texto); }
.botoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.botao-p { min-height: 44px; padding: 0 1rem; border-radius: 10px; border: 1px solid var(--linha); background: transparent; color: var(--texto); font: 600 14px var(--f-titulo); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.botao-p.cheio { background: var(--acento); border-color: var(--acento); color: var(--fundo); }
.botao-p.perigo { color: #c0392b; }
.botao-p svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.confirmar { display: grid; gap: .5rem; padding: .8rem; border: 1px solid #c0392b; border-radius: 12px; font-size: 14px; }

/* arquivos anexos */
.anexos { display: flex; flex-wrap: wrap; gap: .5rem; }
.anexo { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; padding: .3rem .4rem .3rem .3rem; border: 1px solid var(--linha); border-radius: 10px; font-size: 13px; color: var(--texto); text-decoration: none; }
.anexo img, .anexo .ext { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.anexo .ext { display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); font: 700 11px var(--f-titulo); text-transform: uppercase; }
.anexo .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.anexo .tirar { border: 0; background: transparent; color: var(--suave); cursor: pointer; min-width: 32px; min-height: 32px; font-size: 18px; }

/* compartilhar */
.cartao-citacao { border-radius: 14px; padding: 1rem 1.1rem; background: var(--fundo); border: 1px solid var(--linha); font: 16px/1.55 var(--f-texto); display: grid; gap: .6rem; }
.cartao-citacao blockquote { margin: 0; }
.cartao-citacao .fonte { font: 12px/1.4 var(--f-titulo); color: var(--suave); }
.destinos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.destinos a, .destinos button { display: grid; justify-items: center; gap: .35rem; padding: .5rem .2rem; border: 0; border-radius: 12px; background: transparent; color: var(--texto); font: 500 12px var(--f-titulo); cursor: pointer; text-decoration: none; }
.destinos a:hover, .destinos button:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.destinos .ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--texto) 8%, transparent); }
.destinos .ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.destinos .zap .ic { background: #25d366; color: #fff; }
.destinos .zap .ic svg { fill: currentColor; stroke: none; }
.dica-pequena { font-size: 12px; color: var(--suave); margin: 0; }

/* aviso rápido */
.cr-toast { position: fixed; left: 50%; bottom: calc(var(--alto-base) + 16px); transform: translateX(-50%); z-index: 60; background: var(--pilula); color: var(--pilula-texto); padding: .65rem 1rem; border-radius: 12px; font: 500 14px var(--f-titulo); box-shadow: var(--sombra); max-width: calc(100vw - 32px); text-align: center; }
/* sem a barra de baixo (capa), o aviso desce */
.sem-base .cr-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }