/* Letra da matéria (botões A- e A+): fora do bundle 8cnb7ENR, com os tokens do portal.
   O nível fica em data-text-size no <html> (text-size.js). Sem o atributo, as variáveis caem
   no 1 dos var() de 09-article e 13-animations-responsive: a página fica como no bundle. */

/* O intertítulo cresce menos que o corpo: segue maior que ele e menor que o título. */
[data-text-size="1"] { --article-text-scale: 1.15; --article-heading-scale: 1.09; }
[data-text-size="2"] { --article-text-scale: 1.3; --article-heading-scale: 1.19; }
[data-text-size="3"] { --article-text-scale: 1.5; --article-heading-scale: 1.33; }

/* A legenda dentro do corpo herda o tamanho do texto: a conta desfaz a escala. */
.article-prose figcaption { font-size: calc(1em / var(--article-text-scale, 1)); }

/* Com a letra maior cabem menos palavras por linha: o justificado abriria buracos. */
[data-text-size] .article-prose { text-align: left; }
[data-text-size] .article-prose,
[data-text-size] .article-dek,
[data-text-size] .pn-aisummary__list { overflow-wrap: anywhere; }
/* Tabela e código longos rolam dentro da própria caixa, nunca a página. */
[data-text-size] .article-prose table,
[data-text-size] .article-prose pre {
  max-width: 100%;
  overflow-x: auto;
}
[data-text-size] .article-prose table { display: block; }
[data-text-size] .article-prose th,
[data-text-size] .article-prose td { overflow-wrap: normal; }

.article-text-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.article-text-size__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--fg-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.article-text-size__btn:hover { background: var(--bg-soft); color: var(--fg); }
.article-text-size__btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* aria-disabled em vez de disabled: o botão travado segue com o foco do teclado. */
.article-text-size__btn[aria-disabled="true"] {
  background: none;
  color: var(--fg-soft);
  opacity: 0.45;
  cursor: default;
}
.article-text-size__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 860px), (pointer: coarse) {
  .article-text-size__btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}