/* TF-SHELL CSS (25/07) — mobile-first para as rotas do shell.
   Carregado DEPOIS do <style> inline de cada página, então sobrescreve.
   Objetivos: alvo de toque >=44px, nav rolável sem estourar, safe-area iPhone,
   barra mais alta no mobile e altura de iframe correta com 100dvh. */

:root { --bar: 52px; }

/* barra: respeita o notch/safe-area do iPhone */
.topbar {
  height: calc(var(--bar) + env(safe-area-inset-top, 0px)) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  gap: 10px !important;
  overflow: hidden;
}

/* nav: rolagem horizontal suave, sem barra visível, sem quebrar layout */
.topbar .nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.topbar .nav::-webkit-scrollbar { display: none; }

/* ALVO DE TOQUE: >=44px de altura (era ~29px) */
.topbar .nav a,
.topbar #tf-sair {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 12px !important;
  font-size: 14px !important;
}
.topbar #tf-sair { flex: 0 0 auto; }

/* logo: alvo clicável decente */
.topbar .logo { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }
.topbar .logo img { height: 22px !important; }

/* iframe ocupa a tela real do mobile (100dvh resolve a barra do Safari) */
.frame {
  top: calc(var(--bar) + env(safe-area-inset-top, 0px)) !important;
  height: auto !important;
  bottom: 0 !important;
}

/* nunca rolar horizontal */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 700px) {
  :root { --bar: 56px; }
  .topbar .nav a, .topbar #tf-sair { padding: 10px 10px !important; font-size: 13.5px !important; }
  .topbar .logo img { height: 20px !important; }
}

/* telas bem pequenas (360px): aperta só o texto, mantém o alvo */
@media (max-width: 400px) {
  .topbar .nav a, .topbar #tf-sair { padding: 10px 8px !important; font-size: 13px !important; }
  .topbar { gap: 6px !important; }
}