/* ============================================================================
   roo3.co/artigos | modo leitura.

   Três coisas, todas sem custo nenhum de servidor ou de IA: barra de progresso,
   controle de tamanho de fonte e modo foco.

   CARREGA DEPOIS DE artigos.css DE PROPÓSITO. As regras de tamanho de texto
   abaixo repetem os mesmos seletores de lá com a mesma especificidade, então
   quem vence é a ordem do <link>. Trocar a ordem quebra a escala de fonte sem
   dar erro nenhum, que é o pior tipo de quebra.

   O QUE O MODO FOCO ESCONDE, E O QUE ELE NÃO ESCONDE: some com a barra de
   navegação, que é a única coisa que fica por cima do texto enquanto se lê.
   O CTA e o "Continue lendo" continuam onde estavam, porque vêm DEPOIS da
   leitura e não atrapalham ninguém: esconder o caminho de contato para deixar
   a tela bonita seria trocar lead por estética.
   ========================================================================= */

:root { --lt-esc: 1; }

/* ---------- barra de progresso ---------- */
.lt-progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 101;                       /* acima da navbar (100), risco no topo dela */
  pointer-events: none; background: transparent;
}
.lt-progresso span {
  display: block; height: 100%; width: 0;
  background: var(--pg-neon);
  box-shadow: 0 0 10px rgba(163, 255, 71, .55);
  transition: width .12s linear;
}

/* ---------- barra de ferramentas ---------- */
.lt-barra {
  position: fixed; z-index: 98;
  right: 24px; bottom: 24px;
  display: flex; align-items: center; gap: 4px;
  padding: 7px 8px;
  background: rgba(16, 16, 16, .93);
  border: 1px solid var(--pg-border);
  border-radius: 100px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
@supports (backdrop-filter: blur(14px)) {
  .lt-barra { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.lt-barra.lt-vis { opacity: 1; transform: none; pointer-events: auto; }

.lt-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--pg-white);
  font-family: var(--pg-font-head), system-ui, sans-serif;
  font-size: .92rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.lt-btn:hover:not(:disabled) { background: rgba(163, 255, 71, .14); color: var(--pg-neon); }
.lt-btn:focus-visible { outline: 2px solid var(--pg-neon); outline-offset: 2px; }
.lt-btn:disabled { opacity: .3; cursor: default; }
.lt-btn[aria-pressed="true"] { background: rgba(163, 255, 71, .16); color: var(--pg-neon); }
.lt-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lt-btn--a1 { font-size: .78rem; }
.lt-btn--a2 { font-size: 1.02rem; }

.lt-sep { width: 1px; height: 20px; background: var(--pg-border); margin: 0 3px; flex: none; }

.lt-restante {
  font-size: .76rem; color: var(--pg-dim);
  padding: 0 10px 0 6px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- escala de fonte (vence artigos.css pela ordem do link) ---------- */
.ar-corpo p            { font-size: calc(1.02rem * var(--lt-esc)); }
.ar-corpo ul li        { font-size: calc(1.01rem * var(--lt-esc)); }
/* O h2 escala CADA LIMITE do clamp, e não o resultado dele. As duas formas dão
   o mesmo valor nos navegadores atuais (conferido no DOM: 26,352px nas duas);
   esta evita aninhar função matemática dentro de calc, que é suporte mais novo.
   Cuidado ao medir isto: `.ar-corpo h2` casa PRIMEIRO com o título do bloco
   "O que você leva", que tem font-size !important em artigos.css e não escala
   nunca. Para conferir a escala, meça um h2 de seção (#s1). */
.ar-corpo h2           { font-size: clamp(calc(1.35rem * var(--lt-esc)), calc(2.6vw * var(--lt-esc)), calc(1.72rem * var(--lt-esc))); }
.ar-corpo h3           { font-size: calc(1.1rem  * var(--lt-esc)); }
.ar-corpo blockquote   { font-size: calc(1.16rem * var(--lt-esc)); }
.ar-resposta p         { font-size: calc(1.03rem * var(--lt-esc)); }
.ar-faq summary        { font-size: calc(1rem    * var(--lt-esc)); }
.ar-faq details p      { font-size: calc(.96rem  * var(--lt-esc)); }
.ar-chaves ul li       { font-size: calc(1.01rem * var(--lt-esc)); }

/* ---------- modo foco ---------- */
html.lt-foco #navbar,
html.lt-foco .nav-mobile { display: none; }
html.lt-foco .ar-hero { padding-top: 56px; }
html.lt-foco .pg-crumbs { opacity: .45; }

/* ---------- telas estreitas ---------- */
@media (max-width: 640px) {
  .lt-barra {
    right: 12px; left: 12px; bottom: 14px;
    justify-content: center;
    border-radius: 16px;
    padding: 6px 8px;
  }
  /* 44px é o alvo de toque mínimo recomendado. No desktop 34px basta porque
     o ponteiro do mouse acerta; no dedo, não. */
  .lt-btn { width: 44px; height: 44px; }
  .lt-restante { padding-right: 4px; }
}

/* ---------- respeitos ---------- */
@media (prefers-reduced-motion: reduce) {
  .lt-barra, .lt-progresso span { transition: none; }
}
@media print {
  .lt-barra, .lt-progresso { display: none !important; }
}

/* ---------- ouvir o artigo ---------- */
.lt-btn--play {
  background: var(--pg-neon); color: var(--pg-black);
}
.lt-btn--play:hover:not(:disabled) { background: var(--pg-neon); color: var(--pg-black); filter: brightness(1.08); }
.lt-btn--play svg { width: 15px; height: 15px; }
.lt-btn--vel { font-size: .74rem; letter-spacing: -.01em; width: 38px; }

/* A seção que está sendo narrada agora. Marca discreta na margem: sublinhar ou
   pintar o fundo competiria com a leitura de quem está lendo junto. */
.ar-corpo h2.lt-narrando { position: relative; }
.ar-corpo h2.lt-narrando::before {
  content: '';
  position: absolute; left: -18px; top: .32em;
  width: 4px; height: 1.05em;
  border-radius: 2px;
  background: var(--pg-neon);
  box-shadow: 0 0 10px rgba(163, 255, 71, .5);
}
@media (max-width: 700px) {
  .ar-corpo h2.lt-narrando::before { left: -12px; width: 3px; }
}

/* Enquanto toca, a barra de progresso do topo passa a contar o áudio. O tom
   mais quente avisa que aquele número mudou de assunto, sem precisar de rótulo. */
html.lt-tocando .lt-progresso span { background: #d8ff8a; }