/*
 * km-ui.css — regras compartilhadas por todas as páginas.
 *
 * Arquivo único em vez de CSS copiado em 20 HTMLs: cada página deste site tem
 * o estilo inline, e uma regra duplicada 20 vezes fica desatualizada em 19 no
 * primeiro ajuste.
 */

/* ── Alvo de toque (WCAG 2.5.8, nível AA: mínimo 24×24 px) ──────────────────
 *
 * Auditoria de 2026-07-18 encontrou links e botões de 15 a 22px de altura no
 * celular — perto o bastante do mínimo para passar despercebido no olho, e o
 * suficiente para errar o toque. Quem usa o site na rua, com uma mão e o
 * ônibus andando, é a maioria do público daqui.
 *
 * Só no mobile: no desktop o ponteiro é preciso e mexer no layout seria risco
 * sem ganho. Links dentro de frase (Termos, Privacidade, o e-mail de contato)
 * ficam de fora de propósito — a própria WCAG os isenta, e esticá-los quebraria
 * o espaçamento entre linhas do parágrafo.
 */
@media (max-width: 820px) {
  .navlinks a,
  .footrow a,
  .alt,
  .back,          /* "← Back to log in" do reset, "Back to site" do painel */
  .home,          /* "← Home" da pagina legal */
  .msg a,         /* "Go to login →" do painel quando nao ha sessao */
  .kminvite {     /* "Invite a friend →" do buddy-up */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  /* Os .btn já têm padding; faltavam 2–3px para o mínimo. */
  .btn,
  a.btn,
  button.btn {
    min-height: 24px;
  }

  /* "Esqueci a senha" tinha 17px de altura — o menor da auditoria, e logo
     numa tela em que a pessoa já está com dificuldade. */
  .kmforgot {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

/* ── Foco visível ───────────────────────────────────────────────────────────
 * Sem isto, quem navega por teclado não enxerga onde está. O anel só aparece
 * para navegação por teclado (:focus-visible), então não polui o clique de
 * mouse.
 */
:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Respeitar quem pediu menos animação no sistema ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}