/* Área externa institucional — a barra de topo das páginas de fora da conta:
 * Sobre, Ajuda, Termos, Privacidade, Isenção, Suporte e Excluir conta.
 *
 * Vive num arquivo só porque tem de servir dois mundos que não partilham
 * cascata: as cinco páginas estáticas de `public/`, que carregam o `legal.css`,
 * e as duas rotas que são a própria aplicação (`/suporte` e `/eliminar-conta`),
 * desenhadas pelo `main.js` dentro do `index.html`.
 *
 * **A palette é da barra, não do documento.** Nenhuma declaração aqui toca no
 * `:root`. Foi essa a razão de não se carregar o `legal.css` inteiro dentro da
 * aplicação: ele define `--ink`, `--cream`, `--line`, `--muted` e uma
 * `font-family` no `:root`, e dois desses tokens já existem na aplicação com
 * outros valores — a barra chegava e repintava a casa toda. Assim a barra é
 * igual em qualquer página por construção, e não por coincidência de tokens.
 *
 * O tema escuro usa o mesmo seletor dos dois lados (a aplicação e as páginas
 * públicas marcam-no da mesma maneira), com `prefers-color-scheme` a cobrir
 * quem chegue antes de o atributo estar escrito. */

.aei-bar {
  --aei-ink: #102a1d;
  --aei-muted: #5f6f66;
  --aei-line: #dfe7e1;
  --aei-fundo: #fbf8ef;
  --aei-ponto: #e65377;

  position: sticky;
  top: 0;
  z-index: 20;
  /* Não depende da classe do APK, e é essa a correção.

     O `--kqtus-apk-safe-top` só existe quando o documento tem
     `.kqtus-native-apk`, e essa classe só é posta se as pontes JavaScript do
     Android estiverem presentes. Onde não estejam — e a barra apareceu por
     cima do relógio do sistema num telefone real —, o valor caía no 0px do
     fallback e a barra não reservava nada.

     O `env()` é o sinal certo: quem o reporta é o sistema, e reporta-o
     precisamente quando a página está a ser desenhada por baixo da barra de
     estado. O `max()` fica com o maior dos dois, e no navegador comum ambos
     são zero. */
  padding-top: max(var(--kqtus-apk-safe-top, 0px), env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--aei-line);
  background: color-mix(in srgb, var(--aei-fundo) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Quando não há barra do navegador por cima, a página encosta ao topo do tela e
   a barra de estado do sistema fica-lhe em cima. É o caso do APK e de uma app
   instalada. Nesses modos garante-se um mínimo, porque há aparelhos onde nem a
   classe do APK é posta nem o `env()` devolve coisa alguma — e aí a barra ficava
   sem reservar nada, que foi exatamente o que se viu num telefone real.

   Fica preso aos modos sem barra de navegador de propósito: num navegador comum
   não há nada por cima da página, e o mínimo seria só espaço desperdiçado. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .aei-bar {
    padding-top: max(var(--kqtus-apk-safe-top, 0px), env(safe-area-inset-top, 0px), 30px);
  }
}

@media (prefers-color-scheme: dark) {
  .aei-bar {
    --aei-ink: #f1f5f2;
    --aei-muted: #b9c4be;
    --aei-line: #36423c;
    --aei-fundo: #101511;
    --aei-ponto: #ff8ca8;
  }
}

:root:is([data-theme="light"], [data-theme="system"]:not([data-resolved-theme="dark"])) .aei-bar {
  --aei-ink: #102a1d;
  --aei-muted: #5f6f66;
  --aei-line: #dfe7e1;
  --aei-fundo: #fbf8ef;
  --aei-ponto: #e65377;
}

:root:is([data-theme="dark"], [data-theme="system"][data-resolved-theme="dark"]) .aei-bar {
  --aei-ink: #f1f5f2;
  --aei-muted: #b9c4be;
  --aei-line: #36423c;
  --aei-fundo: #101511;
  --aei-ponto: #ff8ca8;
}

.aei-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1120px, calc(100% - 32px));
  min-height: 68px;
  margin: 0 auto;
}

.aei-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  color: var(--aei-ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  text-decoration: none;
}
.aei-brand img { display: block; width: 38px; height: 38px; border-radius: 9px; }
.aei-brand b { color: var(--aei-ponto); }

/* O título da página não ocupa espaço na barra: os links já dizem onde a
   pessoa pode ir. A marca, porém, continua visível até a navegação começar a
   rolar para o lado. */
.aei-area { display: none; }
.aei-brand span {
  display: inline-block;
  max-width: 108px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 160ms ease, opacity 120ms ease;
}

.aei-links {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  font-size: 0.88rem;
  font-weight: 650;
}
.aei-links a { color: var(--aei-ink); text-decoration: none; white-space: nowrap; }
.aei-links a:hover { text-decoration: underline; }
.aei-links a.aei-active {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--aei-ponto);
  color: #081f14;
}
.aei-links a.aei-active:hover { text-decoration: none; filter: brightness(1.08); }

/* Os links rolam de lado em vez de quebrarem para uma segunda fila: uma barra
   que muda de altura conforme o número de links é outra forma de não ser a
   mesma barra em todo o lado. */
@media (max-width: 860px) {
  .aei-inner { gap: 10px; }
  .aei-brand { gap: 10px; }
  .aei-brand img { width: 30px; height: 30px; }
  .aei-links {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    gap: 14px;
    padding-left: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .aei-links::-webkit-scrollbar { display: none; }

  /* Ao deslizar os links, fica fixa só a marca amarela. Voltando ao começo da
     faixa, o nome reaparece sem trocar a altura da barra. */
  .aei-bar.aei-links-scrolled .aei-brand { gap: 0; }
  .aei-bar.aei-links-scrolled .aei-brand span { max-width: 0; opacity: 0; }
}