/* Govinda · Ajuste de leitura — botão flutuante "Aa" e painel (31/10/2026).
   Marcação: inc/ajuste-leitura.php · comportamento: assets/js/govinda-ajuste-leitura.js.
   Só transform e opacity se movem. As medidas do painel são em px de propósito: ele nunca é escalado pelo próprio recurso. */

.ajl {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 45;
  font-family: var(--f-disciplina, "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif);
}
.ajl[hidden] { display: none; }           /* o JS tira o hidden: sem JavaScript o botão não existe */

.ajl__btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  padding: 0;
  background: var(--tinta, #33261a);
  color: var(--ouro-claro, #d9b26a);
  border: 1px solid var(--ouro, #b98a3d);
  font: 700 18px/1 var(--f-disciplina, "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif);
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: var(--sombra-3, 0 4px 14px rgba(51, 38, 26, .18));
  transition: transform 280ms var(--ease, cubic-bezier(.16, 1, .3, 1)), box-shadow 280ms var(--ease, ease);
}
.ajl__btn:hover, .ajl__btn:focus-visible { transform: translateY(-2px); }
.ajl__btn:focus-visible, .ajl__passo:focus-visible { outline: 2px solid var(--ouro-claro, #d9b26a); outline-offset: 3px; }
.ajl.is-aberto .ajl__btn { transform: scale(.94); }

/* O painel nasce do botão: escala e some pela quina inferior esquerda. */
.ajl__painel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: max-content;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--ouro-claro, #d9b26a);
  border-radius: 18px;
  box-shadow: var(--sombra-3, 0 8px 28px rgba(51, 38, 26, .18));
  transform-origin: 26px 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.82);
  transition: opacity 220ms ease, transform 360ms var(--ease, cubic-bezier(.16, 1, .3, 1)), visibility 0s linear 360ms;
}
.ajl.is-aberto .ajl__painel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.ajl__linha { display: flex; align-items: center; gap: 10px; }
/* o tamanho atual só é lido por leitor de tela */
.ajl__valor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ajl__passo {
  width: 56px; height: 48px;
  border-radius: 14px;
  border: 1px solid var(--ouro-claro, #d9b26a);
  background: var(--superficie, #faf7ef);
  color: var(--tinta, #33261a);
  font: 700 19px/1 var(--f-disciplina, "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif);
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease, background 200ms ease, opacity 200ms ease;
}
.ajl__passo:hover { background: #f3ead2; }
.ajl__passo:active { transform: scale(.95); }
.ajl__passo:disabled { opacity: .35; cursor: default; background: var(--superficie, #faf7ef); transform: none; }

/* Páginas com a barra fixa do celular (o blog): o botão sobe para não ficar por baixo dela. */
@media (max-width: 899px) {
  .ajl--sobe { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ajl__btn, .ajl__painel, .ajl__passo { transition: none; }
}
@media print { .ajl { display: none !important; } }