/* CELULAR - regras comuns a todas as telas (22/10 - o dono, logado no celular: "a versão vista pelo celular está
   muito ruim mesmo").
   1) O Android aumenta sozinho as letras de blocos largos (Text Autosizer) e o layout pensado para 14 px sai com 18;
      é isso que empurra botões para fora da borda. A trava abaixo faz a letra ser a que o CSS diz.
   2) O topo da plataforma (Spike 2 e Capa) era fixo na tela e, com os botões em 4 linhas, comia 1/4 a 1/3 do
      celular, com o texto passando por trás. No celular ele rola junto com a página, e cada grupo de botões vira
      UMA linha que desliza para o lado. O "💾 Salvar" (só aparece quando há o que salvar) fica preso no canto. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 600px) {
  body > header:has(.nav-t) { position: static; padding: 10px 12px; gap: 6px 10px; }
  body > header:has(.nav-t) h1 { font-size: 20px; }
  body > header:has(.nav-t) > nav,
  body > header:has(.nav-t) > div {
    flex: 1 1 100%; min-width: 0; max-width: 100%; margin-left: 0 !important;
    flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  body > header:has(.nav-t) > nav::-webkit-scrollbar,
  body > header:has(.nav-t) > div::-webkit-scrollbar { display: none; }
  body > header .nav-t { flex: none; }
  /* a linha que continua para o lado esmaece na borda direita: diz "tem mais, deslize" sem texto (22/10) */
  body > header:has(.nav-t) > nav,
  body > header:has(.nav-t) > div {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    padding-right: 24px;
  }
  /* embaixo, à direita: no alto ele cobria o "como usar" e os títulos (22/10); acima do relógio de geração */
  #top-salvar:not([hidden]) {
    position: fixed; bottom: 86px; right: 12px; z-index: 70; font-size: 15px; padding: 9px 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
  }
}