/* ==========================================================================
   TopNavSite (.tns) — a barra pública, UMA vez ([H3] peça 1, 21/09/2026)
   Desenho: design_handoff/handoff_pacote_13-09/04-topnavsite

   O PROBLEMA QUE ISTO RESOLVE: quatro cabeçalhos para a mesma marca, com
   tokens duplicados (--bg/--s1/--pr na landing contra --cor-* no app),
   alturas divergentes (64/56 contra 60) e larguras diferentes (1180
   contra 1280). Com um CSS só, divergir volta a exigir trabalho
   deliberado.

   ESTE ARQUIVO É A FONTE ÚNICA, e é importado pelos dois lados:
     landing/index.html ....... <link rel="stylesheet" href="tns.css">
     frontend/src/index.css ... @import "../../landing/tns.css";

   O caminho relativo no `@import` é de propósito: o Vite resolve e
   embute no bundle na hora do build, então NÃO existe uma segunda
   cópia pra sair do lugar. Se alguém mover este arquivo, o build quebra
   na hora — que é exatamente o aviso que se quer.

   SEM JAVASCRIPT. A landing carrega "sem bundle nem bootstrap de auth",
   então a gaveta do celular é <details>/<summary> nativo: abre por
   toque, por teclado e com JS desligado. Nada depende de :hover como
   único caminho, porque no toque não existe hover.

   LÊ SÓ `--cor-*`. A landing declara os apelidos no próprio style.css;
   o app já tem esses nomes. É o que permite um arquivo servir os dois
   sem saber em qual está.
   ========================================================================== */

.tns {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.tns-in {
  max-width: 1280px;          /* a landing usava 1180 */
  margin: 0 auto;
  padding: 0 24px;
  min-height: 64px;           /* 64/56/60 divergiam; 64 é o que cabe o
                                 alvo de 44px da cápsula com folga */
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ---------- Marca ---------- */
.tns-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--cor-texto);
}
/* O SÍMBOLO NÃO TRAZ A IMAGEM, e isso é decisão e não esquecimento: a
   landing pinta um SVG por máscara (`img/marca.svg`, caminho relativo
   ao style.css dela) e o app renderiza o componente <Mascote/>. Um
   caminho de arquivo aqui funcionaria num lado e quebraria no outro.
   O que este arquivo define é a GEOMETRIA, que é o que tinha de parar
   de divergir. */
.tns-marca-simbolo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: currentColor;   /* o guaxinim herda a cor do texto */
}
/* O wordmark é TEXTO, não imagem: o nome da marca vai mudar (marca.py),
   e imagem tornaria a troca um problema de arte em vez de uma linha. */
.tns-marca-nome {
  font: 600 21px/1 var(--fonte-display, Fraunces, Georgia, serif);
  letter-spacing: -.02em;
}

/* ---------- Links ---------- */
.tns-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 14px;
  min-width: 0;
}
.tns-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font: 400 15px var(--fonte-ui, system-ui, sans-serif);
  color: var(--cor-texto-secundario);
  text-decoration: none;
  white-space: nowrap;
}
/* HOVER NUNCA USA O ACCENT: 7% da cor do texto. O accent fica pro
   indicador de ativo e pro anel de foco — assim hover e ativo não
   competem pela mesma leitura. */
.tns-links a:hover {
  color: var(--cor-texto);
  background: color-mix(in oklab, var(--cor-texto) 7%, transparent);
}
/* Ativo: barra de 2px rente à borda inferior, e o texto sai do apagado.
   Mesmo padrão que a TopNav do app já usa, pra os dois não divergirem
   de novo. */
.tns-links a[aria-current="page"] {
  color: var(--cor-texto);
  font-weight: 600;
}
.tns-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--cor-primaria-clara, var(--cor-primaria));
}

/* ---------- Lado direito ---------- */
.tns-dir {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}
/* O endereço do perfil público. Sobrevive truncado: a barra sempre diz
   de quem é o perfil, mesmo quando não cabe inteiro. */
.tns-endereco {
  font: 400 14px var(--fonte-mono, ui-monospace, monospace);
  color: var(--cor-texto-terciario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.tns-entrar,
.tns-criar {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font: 600 14px var(--fonte-ui, system-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
}
.tns-entrar {
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-secundario);
  background: transparent;
}
.tns-entrar:hover { color: var(--cor-texto); }
.tns-criar {
  border: 0;
  background: var(--cor-primaria);
  color: var(--cor-primaria-foreground);
}

/* ---------- Foco ---------- */
/* Anel de 2px com afastamento, em tudo que recebe foco. `:focus-visible`
   e não `:focus`: o anel é pra quem navega por teclado, e aparecer no
   clique de mouse é ruído. */
.tns a:focus-visible,
.tns button:focus-visible,
.tns summary:focus-visible {
  outline: 2px solid var(--cor-primaria-clara, var(--cor-primaria));
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Gaveta do celular (sem JS) ---------- */
.tns-gaveta { display: none; margin-left: auto; position: relative; }
.tns-gaveta > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--cor-texto-secundario);
}
.tns-gaveta > summary::-webkit-details-marker { display: none; }
.tns-gaveta > summary::after {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.tns-gaveta[open] > summary { background: color-mix(in oklab, var(--cor-texto) 7%, transparent); }
.tns-gaveta-painel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-superficie);
  box-shadow: 0 12px 28px rgb(0 0 0 / 22%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tns-gaveta-painel a {
  display: flex;
  align-items: center;
  min-height: 48px;          /* alvo maior dentro da gaveta */
  padding: 0 12px;
  border-radius: 8px;
  font: 400 16px var(--fonte-ui, system-ui, sans-serif);
  color: var(--cor-texto-secundario);
  text-decoration: none;
}
.tns-gaveta-painel a:hover { background: color-mix(in oklab, var(--cor-texto) 7%, transparent); }
/* Na gaveta o ativo é SUBLINHADO, não barra: aqui não há borda inferior
   de onde pendurar, e o sublinhado rima com a barra do desktop. */
.tns-gaveta-painel a[aria-current="page"] {
  color: var(--cor-texto);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--cor-primaria-clara, var(--cor-primaria));
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.tns-gaveta-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cor-regua, var(--cor-borda));
}
.tns-gaveta-acoes .tns-entrar,
.tns-gaveta-acoes .tns-criar { justify-content: center; min-height: 48px; }

/* ---------- Cortes: 1279, 1023 e 700 ---------- */
@media (max-width: 1279px) {
  .tns-in { padding: 0 20px; }
}
/* 1023 é o corte novo: cinco links mais a busca não cabem em 768, então
   os links descem pra gaveta. */
@media (max-width: 1023px) {
  .tns-links { display: none; }
  .tns-gaveta { display: block; }
  .tns-endereco { max-width: 180px; }
}
@media (max-width: 700px) {
  .tns-in { min-height: 56px; padding: 0 16px; gap: 10px; }
  .tns-marca-simbolo { width: 30px; height: 30px; }
  .tns-marca-nome { font-size: 19px; }
  .tns-endereco { max-width: 130px; }
  /* Só a ação primária sobrevive na barra estreita — MAS só quando há
     gaveta, que é onde "Entrar" continua existindo com alvo de 48px.
     A barra do perfil público NÃO tem gaveta, e a primeira versão desta
     regra escondia ali a única porta de entrada que a tela oferecia.
     `:has()` deixa a condição explícita; onde ele não existir, a regra
     é ignorada e os dois botões aparecem — apertado, mas inteiro, que é
     o lado certo pra falhar. */
  .tns-in:has(.tns-gaveta) .tns-dir .tns-entrar { display: none; }
}