/* Paleta literal do DESIGN.md (frontmatter > colors) — nomes batem com os
   tokens de lá de propósito, pra nunca mais inventar cor "parecida". */
:root {
  --color-surface: #fcf9f3;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f6f3ed;
  --color-surface-container: #f0eee8;
  --color-surface-container-high: #ebe8e2;
  --color-surface-container-highest: #e5e2dc;
  --color-on-surface: #1c1c18;
  --color-on-surface-variant: #4d4540;
  --color-outline: #7e756f;
  --color-outline-variant: #cfc4bd;
  --color-primary: #181512;
  --color-on-primary: #ffffff;
  --color-secondary: #755940;
  --color-background: #fcf9f3;
  --color-error: #ba1a1a;
  /* Seleção de texto (DESIGN.md > Elevation > Active Focus & Selection):
     "warm wash... dry highlighter on porous paper", nunca o azul padrão do navegador. */
  --color-selecao: #efebe4;

  --fonte-serif: "Newsreader", Georgia, serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, monospace;

  --raio-sm: 0.125rem;
  --raio: 0.25rem;
  --raio-md: 0.375rem;
  --raio-lg: 0.5rem;
  --raio-xl: 0.75rem;
  --raio-full: 9999px;

  --gutter: 1.5rem;
  --gutter-mobile: 1rem;
  --margem: 3rem;
  --margem-mobile: 1.25rem;
  --espaco-xs: 0.25rem;
  --espaco-sm: 0.5rem;
  --espaco-md: 1rem;
  --espaco-lg: 1.75rem;
  --espaco-xl: 3rem;

  --medida-leitura: 680px;

  /* "Physical Sheet Elevation" (DESIGN.md > Elevation): nunca blur, só um
     offset seco de 2px — usado em qualquer controle "flutuante". */
  --sombra-seca: 0 2px 0 0 var(--color-surface-container-high);

  /* Multiplicador do Aa+ — fica em 1 em todo o site; só os containers
     escopados (.folha__leitura/.folha__sidebar com data-tamanho="grande")
     sobrescrevem isso. Ver regra logo abaixo. */
  --escala-texto: 1;
}

/* Fonte (Serif/Mono) e tamanho (Aa/Aa+): escopados só à PARTE DE LEITURA
   da Folha (.folha__leitura = título/subtítulo/autoria/corpo;
   .folha__sidebar = anotações/seções) — nunca ao <html>/<body>, e nunca
   no comentário ("Las Cartas") ou na barra de metadados/controles.
   Persistidos no localStorage: seguem o leitor de folha em folha. */
.folha__leitura[data-fonte="mono"],
.folha__sidebar[data-fonte="mono"] {
  --fonte-serif: var(--fonte-mono);
}

.folha__leitura[data-tamanho="grande"],
.folha__sidebar[data-tamanho="grande"] {
  --escala-texto: 1.125;
}

/* Tom (claro/sépia/escuro): escopado à Folha INTEIRA — <article class="folha">,
   então inclui a barra de metadados, a sidebar, o corpo e o comentário
   ("Las Cartas" também muda). Ainda assim não é o <html>/<body>, então
   Arquivo/Assinar/Eu nunca são afetados. De propósito, NÃO é persistido
   no localStorage — ao trocar de página (mesmo pra outra folha), volta
   pro padrão; é um estado só daquela visita àquela página, por enquanto. */
.folha[data-tema="sepia"] {
  --color-surface: #f3ece1;
  --color-background: #f3ece1;
  --color-surface-container-low: #ece3d4;
  --color-surface-container: #e6dcc9;
  --color-surface-container-high: #ded2bc;
  --color-surface-container-highest: #d4c6ab;
  --color-selecao: #e6dcc9;
}

/* Tom "Noturno" — escuro de verdade. Reaproveita os tokens "inverse-*" e
   "*-fixed-dim" que o próprio DESIGN.md já definia pra esse exato cenário
   (inverse-on-surface/inverse-primary descrevem como texto/primary ficam
   sobre uma superfície invertida; secondary-fixed-dim é o par pensado pra
   destacar em fundo escuro) — não são números inventados. O resto da
   escada de superfícies foi derivado a partir do #201D1A do protótipo.
   Ver docs/ARQUITETURA.md. */
.folha[data-tema="escuro"] {
  --color-surface: #201d1a;
  --color-background: #201d1a;
  --color-surface-container-lowest: #171512;
  --color-surface-container-low: #28241f;
  --color-surface-container: #2c2822;
  --color-surface-container-high: #373129;
  --color-surface-container-highest: #423b32;
  --color-on-surface: #f3f0ea; /* DESIGN.md: inverse-on-surface */
  --color-on-surface-variant: #cbc0b4;
  --color-outline: #948b80;
  --color-outline-variant: #4b443b;
  --color-primary: #cdc5c0; /* DESIGN.md: inverse-primary */
  --color-on-primary: #2d2926; /* DESIGN.md: primary-container */
  --color-secondary: #e5bfa1; /* DESIGN.md: secondary-fixed-dim */
  --color-error: #ffb4ab;
  --color-selecao: #4b443b;
}

/* A Folha precisa da própria cor de fundo/texto — como a troca de tema
   não é mais no <body>, nada repinta sozinho sem isso. */
.folha {
  background: var(--color-background);
  color: var(--color-on-surface);
  transition: background-color 0.15s ease, color 0.15s ease;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-on-surface);
  font-family: var(--fonte-serif);
  font-size: 1.125rem;
  line-height: 1.6;
}

a {
  color: inherit;
}

::selection {
  background: var(--color-selecao);
  color: var(--color-on-surface);
}
::-moz-selection {
  background: var(--color-selecao);
  color: var(--color-on-surface);
}

img {
  max-width: 100%;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
}

/* Escala tipográfica (ver DESIGN.md > typography) — em rem multiplicados
   por var(--escala-texto) (padrão 1 em todo o site). Isso deixa o Aa+
   escalar só dentro de .folha__leitura/.folha__sidebar sem afetar o resto
   do site, já que fora dali a variável nunca é sobrescrita. Rótulos/
   metadados (label-md, label-sm) ficam em px, de fora do escalonamento. */
.display-lg {
  font-weight: 400;
  font-size: calc(2.125rem * var(--escala-texto));
  line-height: calc(2.625rem * var(--escala-texto));
  letter-spacing: -0.01em;
  margin: 0;
}
@media (min-width: 900px) {
  .display-lg {
    font-size: calc(3rem * var(--escala-texto));
    line-height: calc(3.5rem * var(--escala-texto));
    letter-spacing: -0.02em;
  }
}
.headline-lg {
  font-weight: 400;
  font-size: calc(2rem * var(--escala-texto));
  line-height: calc(2.5rem * var(--escala-texto));
  letter-spacing: -0.015em;
  margin: 0;
}
.headline-md {
  font-weight: 400;
  font-size: calc(1.625rem * var(--escala-texto));
  line-height: calc(2.125rem * var(--escala-texto));
  letter-spacing: -0.01em;
  margin: 0;
}
.headline-sm {
  font-weight: 500;
  font-size: calc(1.3125rem * var(--escala-texto));
  line-height: calc(1.75rem * var(--escala-texto));
  margin: 0;
}
.body-lg {
  font-size: calc(1.25rem * var(--escala-texto));
  line-height: calc(2.125rem * var(--escala-texto));
  letter-spacing: 0.005em;
}
.body-sm {
  font-size: calc(0.9375rem * var(--escala-texto));
  line-height: calc(1.5rem * var(--escala-texto));
}
.quote-lg {
  font-style: italic;
  font-size: calc(1.375rem * var(--escala-texto));
  line-height: calc(2rem * var(--escala-texto));
  letter-spacing: -0.005em;
  color: var(--color-on-surface-variant);
}
.label-md {
  font-family: var(--fonte-mono);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.label-sm {
  font-family: var(--fonte-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  color: var(--color-on-surface-variant);
}

/* Masthead */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--espaco-md) var(--margem);
  border-bottom: 1px solid var(--color-surface-container-high);
}
.masthead__identidade {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}
.masthead__titulo {
  font-family: var(--fonte-serif);
  font-size: 22px;
  text-decoration: none;
  color: var(--color-on-surface);
}
.masthead__datahora {
  font-family: var(--fonte-mono);
  text-transform: uppercase;
}
.masthead__nav {
  display: flex;
  gap: var(--espaco-lg);
  font-family: var(--fonte-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding-top: var(--espaco-xs);
}
.masthead__nav a {
  text-decoration: none;
  color: var(--color-on-surface-variant);
  padding: var(--espaco-xs) var(--espaco-sm);
  border-radius: var(--raio);
}
.masthead__nav .nav-link--ativo {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

main {
  max-width: 1440px;
  margin: 0 auto;
}

/* Folha (leitura) */
.folha {
  padding: var(--espaco-lg) var(--margem) var(--espaco-xl);
}

.folha__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-xl);
}
/* Item de grid tem min-width:auto por padrão, ou seja, nunca encolhe além
   do conteúdo mais largo lá dentro (ex. o iframe acima) — isso estoura a
   coluna pro lado mesmo com grid-template-columns:1fr. min-width:0 deixa
   o conteúdo (não a coluna) ser o responsável por lidar com o overflow. */
.folha__layout > * {
  min-width: 0;
}
@media (min-width: 1100px) {
  .folha__layout {
    grid-template-columns: 287px 1fr;
    align-items: start;
  }
  .folha__sidebar {
    position: sticky;
    top: var(--espaco-xl);
    order: -1;
  }
}

.folha__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
  font-family: var(--fonte-serif);
}
.anotacao-margem,
.indice-secoes {
  background: var(--color-surface-container-low);
  border-radius: var(--raio);
  padding: var(--espaco-md);
}
.anotacao-margem .quote-corpo {
  font-style: italic;
  margin: var(--espaco-sm) 0;
}
.indice-secoes ol {
  list-style: none;
  margin: var(--espaco-sm) 0 0;
  padding: 0;
  font-family: var(--fonte-mono);
  font-size: 13px;
}
.indice-secoes li + li {
  margin-top: var(--espaco-sm);
}
.indice-secoes a {
  text-decoration: none;
  color: var(--color-on-surface);
}
.indice-secoes__numero {
  color: var(--color-secondary);
  margin-right: var(--espaco-sm);
}

/* .folha__coluna ocupa a coluna inteira do grid (sem limite) — é só
   .folha__leitura, dentro dela, que respeita a medida de leitura. Assim a
   barra "Folha Nº..." + controles pode esticar até o fim da coluna (mesma
   borda direita do botão Assinar no masthead), enquanto o texto continua
   confortável em 680px. */
.folha__leitura {
  max-width: var(--medida-leitura);
  font-family: var(--fonte-serif);
}

/* Linha "Folha Nº..." + controles do leitor, lado a lado com a sidebar */
.folha__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espaco-sm) var(--espaco-md);
  padding-bottom: var(--espaco-md);
  margin-bottom: var(--espaco-lg);
  border-bottom: 1px solid var(--color-surface-container-high);
}
.folha__meta-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-sm);
}
.folha__meta-texto {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}
.tag-categoria {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface);
  background: var(--color-surface-container-high);
  border-radius: var(--raio);
  padding: 2px var(--espaco-sm);
  text-decoration: none;
}
.tag-categoria:hover {
  background: var(--color-surface-container-highest);
}

/* Controles do leitor */
.controles-leitor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-xs);
}
.controle-grupo {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-surface-container-low);
  border-radius: var(--raio-lg);
  padding: 2px;
  box-shadow: var(--sombra-seca);
}
.controle-btn {
  font-family: var(--fonte-mono);
  font-size: 13px;
  background: none;
  border: none;
  border-radius: var(--raio);
  padding: 2px var(--espaco-xs);
  color: var(--color-on-surface-variant);
  cursor: pointer;
}
.controle-btn:hover {
  color: var(--color-on-surface);
}
.controle-btn--ativo,
.controle-btn--ativo:hover {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--sombra-seca);
}
.controle-grupo--tons {
  gap: 4px;
  padding: 2px 4px;
}
.controle-tom {
  width: 20px;
  height: 20px;
  border-radius: var(--raio-full);
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.controle-tom--ativo {
  box-shadow: var(--sombra-seca);
}
.controle-tom__ponto {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-full);
  background: var(--color-secondary);
  opacity: 0.7;
  display: none;
}
.controle-tom--ativo .controle-tom__ponto {
  display: block;
}
.controle-icone {
  background: none;
  border: none;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  padding: var(--espaco-xs);
  display: flex;
  border-radius: var(--raio);
}
.controle-icone:hover {
  color: var(--color-primary);
}

/* Título / subtítulo */
.folha__subtitulo {
  margin-top: var(--espaco-md);
  color: var(--color-on-surface-variant);
}

/* Autoria */
.autoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
  padding: var(--espaco-md) 0;
  margin: var(--espaco-lg) 0;
  border-top: 1px solid var(--color-surface-container-high);
  border-bottom: 1px solid var(--color-surface-container-high);
}
.autoria__pessoa {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
}
.autoria__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--raio-full);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-mono);
  font-size: 13px;
  flex-shrink: 0;
}
.autoria__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.autoria__nome {
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-on-surface);
}
.autoria__meta {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--color-outline);
}
.autoria__acoes {
  display: flex;
  gap: var(--espaco-xs);
}
.autoria__acoes button {
  background: none;
  border: none;
  border-radius: var(--raio);
  padding: var(--espaco-xs);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  display: flex;
}
.autoria__acoes button:hover {
  color: var(--color-primary);
}

/* Estado "ativo" de curtir/salvar (ligado via interacoes.js) — mesmo ícone,
   só preenchido (eixo FILL da fonte variável) e na cor primary. */
button.acao--ativa {
  color: var(--color-primary);
}
button.acao--ativa .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}

/* Tooltip "Link copiado!" (compartilhar, quando não há Web Share API) */
.autoria__acoes button {
  position: relative;
}
.acao--copiado::after {
  content: "Link copiado!";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--espaco-xs);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--fonte-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--raio);
  white-space: nowrap;
}

/* Menu de baixar (.md / PDF) */
.acao-menu {
  position: relative;
}
.acao-menu__lista {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--espaco-xs);
  background: var(--color-surface-container-low);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-seca);
  padding: var(--espaco-xs);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 10;
}
.acao-menu__lista[hidden] {
  display: none;
}
.acao-menu__lista a,
.acao-menu__lista button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  text-decoration: none;
  color: var(--color-on-surface);
  font-family: var(--fonte-mono);
  font-size: 13px;
  padding: var(--espaco-xs) var(--espaco-sm);
  border-radius: var(--raio);
  cursor: pointer;
}
.acao-menu__lista a:hover,
.acao-menu__lista button:hover {
  background: var(--color-surface-container-high);
}

/* Corpo da folha (markdown renderizado) */
.prose {
  text-align: justify;
}
.prose > * + * {
  margin-top: var(--espaco-md);
}
.prose h2 {
  font-family: var(--fonte-serif);
  font-size: calc(1.625rem * var(--escala-texto));
  margin-top: var(--espaco-xl);
  text-align: left;
}
.prose blockquote {
  margin: var(--espaco-lg) 0;
  padding-left: var(--espaco-lg);
  border-left: 2px solid var(--color-secondary);
  font-style: italic;
  font-size: 22px;
  line-height: 32px;
  color: var(--color-on-surface-variant);
  text-align: left;
}

/* Caixa de nota — `<aside class="nota">` ou `<aside class="nota nota--italico">`
   escrito direto no markdown (ver docs/ARQUITETURA.md). */
.nota {
  background: var(--color-surface-container-high);
  padding: var(--espaco-md);
  margin: var(--espaco-lg) 0;
  border-radius: 0;
  color: var(--color-on-surface-variant);
  text-align: left;
}
.nota--italico {
  font-style: italic;
}

.prose figure {
  margin: var(--espaco-lg) 0;
}
/* Embeds colados direto no markdown (HTML cru — ver ARQUITETURA.md) vêm com
   width/height fixos (ex. o embed padrão do YouTube, 560x315) e sem isso
   estouram a largura da tela no celular, empurrando o site inteiro pro
   modo "zoom out" de desktop. max-width:100%+height:auto preserva a
   proporção usando os atributos width/height como base intrínseca. */
.prose iframe,
.prose video,
.prose embed,
.prose object {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.prose figure img {
  border-radius: 0;
}
.prose img {
  border-radius: 0;
}
.prose figcaption {
  text-align: center;
  margin-top: var(--espaco-sm);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-outline);
}

/* Lista numerada — cada item é um container; a 1ª linha em negrito vira
   "título" do item (cor primary), o resto é o corpo (on-surface-variant). */
.prose ol {
  padding-left: 0;
  list-style: none;
  counter-reset: item;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}
.prose ol li {
  counter-increment: item;
  position: relative;
  background: var(--color-surface-container-low);
  padding: var(--espaco-md);
  padding-right: 3rem;
  border-radius: var(--raio);
  text-align: left;
}
.prose ol li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  top: var(--espaco-xs);
  right: var(--espaco-sm);
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--color-outline);
}
.prose ol li > p:first-child {
  margin: 0;
  color: var(--color-primary);
  font-weight: 600;
}
.prose ol li > p:not(:first-child) {
  margin: var(--espaco-xs) 0 0;
  color: var(--color-on-surface-variant);
}

/* Recomendações ("Glosas Marginais & Livros Citados") */
.recomendacoes {
  margin-top: var(--espaco-xl);
  padding: var(--espaco-lg);
  background: color-mix(in srgb, var(--color-surface-container-low) 70%, transparent);
  border-radius: 0;
}
.recomendacoes__titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  margin: 0 0 var(--espaco-md);
}
.recomendacoes__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espaco-md);
}
.recomendacao {
  background: var(--color-surface);
  box-shadow: var(--sombra-seca);
  padding: var(--espaco-sm) var(--espaco-md);
  border-radius: 0;
}
.recomendacao__ref {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--color-secondary);
}
.recomendacao__nome {
  font-family: var(--fonte-serif);
  font-weight: 500;
  color: var(--color-primary);
  margin: var(--espaco-xs) 0;
}
.recomendacao__corpo {
  margin: 0;
  color: var(--color-on-surface-variant);
  font-size: 14px;
}

/* Navegação entre edições */
.navegacao-edicoes {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-md);
  margin-top: var(--espaco-xl);
  padding-top: var(--espaco-lg);
  border-top: 1px solid var(--color-surface-container-high);
}
.navegacao-edicoes__card {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
  background: var(--color-surface-container-low);
  padding: var(--espaco-md);
  border-radius: 0;
  text-decoration: none;
  color: var(--color-primary);
}
.navegacao-edicoes__card:only-child {
  margin-left: auto;
}
.navegacao-edicoes__card--direita {
  flex-direction: row-reverse;
  text-align: right;
  margin-left: auto;
}
.navegacao-edicoes__card .material-symbols-outlined {
  color: var(--color-secondary);
}
.navegacao-edicoes__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navegacao-edicoes__titulo {
  font-family: var(--fonte-serif);
  font-weight: 500;
}

/* Comentário ("Vem, dê pitaco.") */
.comentario {
  margin-top: var(--espaco-xl);
  padding: var(--espaco-lg);
  background: var(--color-surface-container);
  box-shadow: var(--sombra-seca);
  border-radius: 0;
}
.comentario__titulo {
  margin: var(--espaco-xs) 0;
}
.comentario__descricao {
  margin: 0 0 var(--espaco-md);
  color: var(--color-on-surface-variant);
}
.comentario__form {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}
.comentario__form input,
.comentario__form textarea {
  width: 100%;
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  border: none;
  border-radius: var(--raio-lg);
  padding: var(--espaco-sm);
  font-family: var(--fonte-serif);
  font-size: 15px;
}
.comentario__form textarea {
  resize: vertical;
}
.comentario__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espaco-sm);
}
.comentario__aviso {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  color: var(--color-outline);
  font-family: var(--fonte-mono);
  font-size: 11px;
}
.comentario__form button {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--raio-lg);
  padding: var(--espaco-xs) var(--espaco-md);
  font-family: var(--fonte-mono);
  font-size: 13px;
  cursor: pointer;
}
.comentario__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.comentario__lista {
  list-style: none;
  margin: 0 0 var(--espaco-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}
.comentario__item {
  background: var(--color-surface-container-lowest);
  border-radius: var(--raio-lg);
  padding: var(--espaco-sm) var(--espaco-md);
}
.comentario__item-corpo {
  margin: 0 0 var(--espaco-xs);
}
.comentario__mensagem {
  margin: 0 0 var(--espaco-md);
  padding: var(--espaco-sm) var(--espaco-md);
  background: var(--color-surface-container-high);
  border-radius: var(--raio-lg);
  font-size: 14px;
}
.comentario__mensagem--erro {
  color: var(--color-error);
}

/* Rodapé do site */
.rodape-site {
  background: var(--color-surface-container-low);
  border-top: 1px solid var(--color-surface-container-high);
  padding: var(--espaco-xl) var(--margem);
  font-size: 15px;
}
.rodape-site__interno {
  max-width: 1440px;
  margin: 0 auto;
}
.rodape-site__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-xl);
}
.rodape-site__grade > * {
  min-width: 0; /* ver .folha__layout acima — mesmo motivo */
}
@media (min-width: 900px) {
  .rodape-site__grade {
    /* Proporção exata do Figma (frame 3:2438): colunas de 507/400/293px
       com 28px de gap — não são 1fr iguais, por isso usar fr nessa razão
       em vez de repeat(3, 1fr), que estica tudo igual e abre buracos. */
    grid-template-columns: 507fr 400fr 293fr;
    gap: var(--espaco-lg);
  }
}
.rodape-site h3 {
  font-family: var(--fonte-serif);
  font-size: 22px;
  color: var(--color-on-surface);
  margin-bottom: var(--espaco-sm);
}
.rodape-site h4 {
  font-family: var(--fonte-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-secondary);
  margin-bottom: var(--espaco-sm);
}
.rodape-site__descricao {
  color: var(--color-on-surface-variant);
  max-width: 24rem;
}
.rodape-site__divisor {
  margin-top: 5rem;
  border-top: 1px solid var(--color-surface-container-high);
}
.rodape-site__assinatura {
  padding-top: var(--espaco-md);
}
.rodape-site__perfil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-secondary);
  text-decoration: none;
}
.rodape-site__perfil img {
  display: block;
}
.rodape-site ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rodape-site li + li {
  margin-top: var(--espaco-xs);
}
.form-assinatura {
  display: flex;
  gap: var(--espaco-xs);
  margin-top: var(--espaco-sm);
}
.form-assinatura input {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--raio);
  padding: var(--espaco-sm);
  font-family: inherit;
}
.form-assinatura button {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--raio);
  padding: 0 var(--espaco-md);
  cursor: pointer;
}

/* Arquivo */
.arquivo {
  padding: var(--espaco-lg) var(--margem) var(--espaco-xl);
}
.arquivo-header {
  max-width: var(--medida-leitura);
  margin-bottom: var(--espaco-lg);
}
.arquivo-header h1 {
  margin: 0 0 var(--espaco-sm);
}
.arquivo-header p {
  margin: 0;
  color: var(--color-on-surface-variant);
}

.arquivo-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-xs);
  margin-bottom: var(--espaco-md);
}
.arquivo-filtro {
  font-family: var(--fonte-mono);
  font-size: 13px;
  text-decoration: none;
  color: var(--color-on-surface-variant);
  padding: var(--espaco-xs) var(--espaco-sm);
  border-radius: var(--raio);
}
.arquivo-filtro--ativo {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.arquivo-busca {
  display: flex;
  max-width: var(--medida-leitura);
  margin-bottom: var(--espaco-xl);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.arquivo-busca input {
  flex: 1;
  border: none;
  background: none;
  padding: var(--espaco-sm) var(--espaco-md);
  font-family: var(--fonte-serif);
  font-size: 15px;
  color: var(--color-on-surface);
}
.arquivo-busca button {
  background: none;
  border: none;
  padding: 0 var(--espaco-md);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.arquivo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-xl);
}
.arquivo-layout > * {
  min-width: 0; /* ver .folha__layout acima — mesmo motivo */
}
@media (min-width: 1100px) {
  .arquivo-layout {
    grid-template-columns: 1fr 320px;
    align-items: start;
  }
  .arquivo-sidebar {
    position: sticky;
    top: var(--espaco-xl);
  }
}

.arquivo-ano {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-sm);
  padding-bottom: var(--espaco-sm);
  margin-bottom: var(--espaco-lg);
  border-bottom: 1px solid var(--color-surface-container-high);
}

.arquivo-mes {
  margin-bottom: var(--espaco-xl);
}
.arquivo-mes__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-sm);
}

.arquivo-item {
  padding: var(--espaco-md) 0;
  border-bottom: 1px solid var(--color-surface-container-high);
}
.arquivo-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-sm);
  text-transform: uppercase;
}
.arquivo-item__titulo {
  margin: var(--espaco-xs) 0;
  font-weight: 400;
}
.arquivo-item__titulo a {
  text-decoration: none;
  color: var(--color-on-surface);
}
.arquivo-item__resumo {
  margin: 0 0 var(--espaco-sm);
  color: var(--color-on-surface-variant);
}
.arquivo-item__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arquivo-item__link {
  font-family: var(--fonte-mono);
  font-size: 13px;
  text-decoration: none;
  color: var(--color-secondary);
}
.arquivo-item__salvar {
  background: none;
  border: none;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  display: flex;
}

.arquivo-tomo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
  background: var(--color-surface-container-low);
  padding: var(--espaco-md);
  margin-top: var(--espaco-md);
  border-radius: 0;
  text-decoration: none;
  color: var(--color-primary);
}
.arquivo-tomo__titulo {
  margin: 2px 0 0;
  font-family: var(--fonte-serif);
  font-weight: 500;
}
.arquivo-tomo .material-symbols-outlined {
  color: var(--color-secondary);
}

.arquivo-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
}
.arquivo-destaques,
.arquivo-indice-tematico {
  background: var(--color-surface-container-low);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-seca);
  padding: var(--espaco-lg);
}
.arquivo-destaques > p {
  margin: var(--espaco-sm) 0 0;
  color: var(--color-on-surface-variant);
}

.arquivo-destaques__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}
.arquivo-destaques__cabecalho .material-symbols-outlined {
  color: var(--color-secondary);
}
.arquivo-destaques ul {
  list-style: none;
  margin: var(--espaco-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}
.arquivo-destaques li a {
  display: block;
  text-decoration: none;
  background: var(--color-surface-container-lowest);
  border-radius: var(--raio-lg);
  padding: var(--espaco-sm);
}
.arquivo-destaques li a:hover {
  background: var(--color-surface-container);
}
.arquivo-destaques__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-secondary);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.arquivo-destaques__meta span:last-child {
  color: var(--color-on-surface-variant);
  text-transform: none;
}
.arquivo-destaques__titulo {
  margin: 0;
  font-family: var(--fonte-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.3;
}

.arquivo-indice-tematico__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arquivo-indice-tematico ul {
  list-style: none;
  margin: var(--espaco-sm) 0 0;
  padding: 0;
}
.arquivo-indice-tematico li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  padding: var(--espaco-xs) var(--espaco-sm);
  margin: 0 calc(var(--espaco-sm) * -1);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--color-on-surface);
  font-size: 15px;
}
.arquivo-indice-tematico li a:hover {
  background: var(--color-surface-container-high);
  color: var(--color-primary);
}
.arquivo-indice-tematico__contagem {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--color-on-surface-variant);
  background: var(--color-surface-container);
  border-radius: var(--raio);
  padding: 1px 6px;
}

/* Editor (página de redigir, escondida, RNF-10) */
.editor {
  padding: var(--espaco-lg) var(--margem) var(--espaco-xl);
}
.editor__cabecalho {
  margin-bottom: var(--espaco-xs);
}
.editor__cabecalho h1 {
  margin: 0 0 var(--espaco-xs);
}
.editor__aviso-rascunho {
  display: block;
  background: var(--color-surface-container-high);
  padding: var(--espaco-sm) var(--espaco-md);
  border-radius: var(--raio-lg);
  margin: var(--espaco-md) 0;
}
.editor__aviso-rascunho button {
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.editor__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-xl);
  margin-top: var(--espaco-lg);
}
.editor__layout > * {
  min-width: 0; /* ver .folha__layout acima — mesmo motivo */
}
@media (min-width: 1100px) {
  .editor__layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .editor__preview {
    position: sticky;
    top: var(--espaco-xl);
  }
}

.editor__coluna-form {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
}
.editor__bloco {
  background: var(--color-surface-container-low);
  border-radius: var(--raio-xl);
  padding: var(--espaco-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}
.editor__bloco-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.editor__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-md);
}
.editor__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}
.editor__campo input,
.editor__campo textarea {
  background: var(--color-surface-container-lowest);
  border: none;
  border-radius: var(--raio-lg);
  padding: var(--espaco-sm);
  font-family: var(--fonte-serif);
  font-size: 15px;
  color: var(--color-on-surface);
  width: 100%;
}
.editor__checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  font-size: 14px;
}

.editor__card-linha {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: var(--espaco-xs);
  margin-top: var(--espaco-xs);
}
.editor__card-linha input {
  background: var(--color-surface-container-lowest);
  border: none;
  border-radius: var(--raio);
  padding: var(--espaco-xs) var(--espaco-sm);
  font-family: var(--fonte-serif);
  font-size: 14px;
}
.editor__card-remover {
  background: var(--color-surface-container-high);
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  font-size: 16px;
  color: var(--color-on-surface-variant);
}
.editor__botao-secundario {
  background: var(--color-surface-container-high);
  border: none;
  border-radius: var(--raio);
  padding: var(--espaco-xs) var(--espaco-sm);
  font-family: var(--fonte-mono);
  font-size: 12px;
  cursor: pointer;
}

.editor__blocos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-xs);
}
.editor__blocos button {
  background: var(--color-surface-container-lowest);
  border: none;
  border-radius: var(--raio);
  padding: var(--espaco-xs) var(--espaco-sm);
  font-family: var(--fonte-mono);
  font-size: 12px;
  cursor: pointer;
}
.editor__blocos button:hover {
  background: var(--color-surface-container-high);
}
.editor__textarea-corpo {
  font-family: var(--fonte-mono);
  font-size: 14px;
  line-height: 1.6;
  min-height: 420px;
  resize: vertical;
}

.editor__publicar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
}
.editor__botao-principal {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--raio-lg);
  padding: var(--espaco-sm) var(--espaco-lg);
  font-family: var(--fonte-mono);
  font-size: 14px;
  cursor: pointer;
}

.editor__preview {
  background: var(--color-surface-container-low);
  border-radius: var(--raio-xl);
  padding: var(--espaco-lg);
}
.editor__preview-folha {
  margin-top: var(--espaco-md);
  background: var(--color-surface);
  border-radius: var(--raio-lg);
  padding: var(--espaco-lg);
}
#preview-titulo:empty::before {
  content: "Título da folha";
  opacity: 0.4;
}

/* Moderação de comentários (painel escondido, RNF-10) */
.moderacao {
  padding: var(--espaco-lg) var(--margem) var(--espaco-xl);
  max-width: var(--medida-leitura);
}
.moderacao__lista {
  list-style: none;
  margin: var(--espaco-lg) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}
.moderacao__item {
  background: var(--color-surface-container-low);
  border-radius: var(--raio-lg);
  padding: var(--espaco-md);
}
.moderacao__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espaco-sm);
  margin-bottom: var(--espaco-sm);
}
.moderacao__corpo {
  margin: 0 0 var(--espaco-sm);
}
.moderacao__acoes {
  display: flex;
  gap: var(--espaco-sm);
}
.moderacao__acoes button {
  font-family: var(--fonte-mono);
  font-size: 13px;
  padding: var(--espaco-xs) var(--espaco-md);
  border-radius: var(--raio);
  border: none;
  cursor: pointer;
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.moderacao__rejeitar {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}

/* Página estática (ex.: Eu) */
.pagina {
  padding: var(--espaco-lg) var(--margem) var(--espaco-xl);
}
.pagina__leitura {
  max-width: var(--medida-leitura);
}

/* Assinar */
.assinar {
  padding: var(--espaco-lg) var(--margem) var(--espaco-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-xl);
}
.assinar > * {
  min-width: 0; /* ver .folha__layout acima — mesmo motivo */
}
@media (min-width: 1100px) {
  .assinar {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
}

.assinar-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
}
.assinar-bloco h2 {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  margin: 0 0 var(--espaco-xs);
}
.assinar-bloco p {
  margin: 0;
  color: var(--color-on-surface-variant);
  text-align: justify;
}
.assinar-recentes {
  list-style: none;
  margin: var(--espaco-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}
.assinar-recentes li {
  display: flex;
  gap: var(--espaco-sm);
  font-size: 14px;
}
.assinar-recentes a {
  text-decoration: none;
  color: var(--color-on-surface);
}
.assinar-recentes .label-sm {
  color: var(--color-secondary);
  flex-shrink: 0;
}

.assinar-principal {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xl);
  max-width: 720px;
}

.assinar-card {
  background: var(--color-surface-container-low);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-seca);
  padding: var(--espaco-xl);
}
.assinar-card > .label-md {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}
.assinar-card h1 {
  margin: var(--espaco-sm) 0;
}
.assinar-card > p.body-md {
  margin: 0 0 var(--espaco-md);
  color: var(--color-on-surface-variant);
}

.assinar-piada {
  margin: 0 0 var(--espaco-lg);
  padding-left: var(--espaco-lg);
  border-left: 2px solid var(--color-secondary);
}
.assinar-piada cite {
  display: block;
  margin-top: var(--espaco-xs);
  font-style: normal;
}

.assinar-mensagem {
  padding: var(--espaco-sm) var(--espaco-md);
  margin: 0 0 var(--espaco-md);
  background: var(--color-surface-container-high);
  border-radius: var(--raio);
  font-size: 14px;
}
.assinar-mensagem--erro {
  color: var(--color-error);
}

.assinar-form {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}
.assinar-email {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  background: var(--color-surface-container-lowest);
  border-radius: var(--raio-lg);
  padding: var(--espaco-sm) var(--espaco-md);
}
.assinar-email .material-symbols-outlined {
  color: var(--color-on-surface-variant);
}
.assinar-email input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--fonte-serif);
  font-size: 16px;
  color: var(--color-on-surface);
}
.assinar-email input:focus {
  outline: none;
}

.assinar-formato {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}
.assinar-formato legend {
  padding: 0 0 var(--espaco-xs);
}
.assinar-formato__opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-sm);
  background: var(--color-surface-container-lowest);
  border-radius: var(--raio-lg);
  padding: var(--espaco-sm) var(--espaco-md);
  cursor: pointer;
}
.assinar-formato__opcao:has(input:checked) {
  box-shadow: var(--sombra-seca);
}
.assinar-formato__opcao input {
  margin-top: 4px;
  accent-color: var(--color-primary);
}
.assinar-formato__opcao strong {
  display: block;
  font-weight: 500;
  color: var(--color-on-surface);
}
.assinar-formato__opcao small {
  display: block;
  color: var(--color-on-surface-variant);
  font-size: 13px;
  margin-top: 2px;
}

.assinar-form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-xs);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--raio-lg);
  padding: var(--espaco-sm) var(--espaco-md);
  font-family: var(--fonte-mono);
  font-size: 14px;
  cursor: pointer;
}
.assinar-aviso,
.assinar-frequencia {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  margin: 0;
}
.assinar-frequencia {
  margin-top: var(--espaco-md);
}

.amostra-caixa {
  background: var(--color-surface-container-low);
  border-radius: var(--raio-xl);
  padding: var(--espaco-lg);
}
.amostra-caixa__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-md);
}
.amostra-texto-puro {
  background: var(--color-surface-container-lowest);
  border-radius: var(--raio);
  padding: var(--espaco-md);
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--color-on-surface-variant);
  overflow-x: auto;
}
.amostra-editorial-wrap {
  background: var(--color-surface-container-lowest);
  border-radius: var(--raio);
  padding: var(--espaco-lg);
}
.amostra-editorial__rotulo {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-secondary);
  margin: 0;
}
.amostra-editorial__titulo {
  margin: var(--espaco-xs) 0;
  font-weight: 400;
}
.amostra-editorial__subtitulo {
  color: var(--color-on-surface-variant);
  font-style: italic;
  margin: 0 0 var(--espaco-md);
}
.amostra-editorial__corpo {
  color: var(--color-on-surface-variant);
}
.amostra-editorial__corpo > * + * {
  margin-top: var(--espaco-sm);
}

/* Mobile: empilha o que no desktop fica lado a lado */
@media (max-width: 700px) {
  .masthead,
  .folha,
  .arquivo,
  .assinar,
  .rodape-site {
    padding-left: var(--margem-mobile);
    padding-right: var(--margem-mobile);
  }
  .masthead {
    flex-wrap: wrap;
    row-gap: var(--espaco-sm);
  }
  .masthead__nav {
    flex-wrap: wrap;
    gap: var(--espaco-sm);
  }
  .folha__meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .autoria {
    flex-direction: column;
    align-items: flex-start;
  }
  .navegacao-edicoes {
    flex-direction: column;
  }
  .navegacao-edicoes__card,
  .navegacao-edicoes__card--direita,
  .navegacao-edicoes__card:only-child {
    margin-left: 0;
    flex-direction: row;
    text-align: left;
  }
  /* .autoria vira coluna nesse breakpoint, então o menu de baixar pode ficar
     perto da borda esquerda — ancora pela esquerda pra nunca estourar a tela. */
  .acao-menu__lista {
    right: auto;
    left: 0;
  }
}

@media print {
  .masthead,
  .folha__sidebar,
  .controles-leitor,
  .autoria__acoes,
  .navegacao-edicoes,
  .comentario,
  .rodape-site {
    display: none;
  }
}