/* ============================================================
   Trading$yphers · ts-mobile-pages.css v1 — as páginas interiores
   (Movement IV do plano mobile premium, 2026-08-14)
   ------------------------------------------------------------
   O mínimo compartilhável para as 8 páginas do wing (tensao,
   movimento, direcao, whitepaper, sinais, solucoes, app, mesa)
   caberem num 375px com alvos de 44px — SEM importar a camada
   do hub. Tudo em @media (max-width:720px); desktop intocado.
   Carregado por último — em empate de especificidade, vence.
   ============================================================ */
@media (max-width: 720px) {

  /* ---------- o chrome cabe em 375px ----------
     Em sinais/solucoes/app/mesa o rail de 4 itens estourava
     ~90px: home ≈135 + rail ≈250 + PT|EN ≈59 > 355 úteis. */
  .chrome { padding: 10px 8px; }
  .chrome a { font-size: 11px; letter-spacing: 0.04em; padding: 8px 4px; }
  .chrome-mid { gap: 2px; }
  .chrome-home { white-space: nowrap; }

  /* alvo de toque ≥44px nos controles do chrome (essay.css não
     tinha; as demais páginas já seguiam a convenção) */
  .chrome a, .lang-toggle button {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .lang-toggle { gap: 2px; }

  /* ---------- direcao: a cena sticky em dvh ----------
     100vh + barra dinâmica do iOS = o salto clássico do sticky. */
  .s5sticky { height: 100vh; height: 100dvh; }

  /* ---------- whitepaper (e páginas .paper) ----------
     corpo 19px não tem degrau nas larguras estreitas; o TOC em
     2 colunas custava uma tela antes do primeiro parágrafo. */
  .paper { font-size: 17px; }
  .toc { columns: auto; }
}

/* O fold do TOC (whitepaper): fechado no mobile, aberto no
   desktop — o estado inicial é decidido por 1 linha inline no
   próprio whitepaper.html. Fora de media query: o summary
   precisa de estilo nos dois mundos. */
.toc-fold > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-fold > summary::-webkit-details-marker { display: none; }
.toc-fold > summary::after {
  content: "▾";
  font-size: 11px;
  opacity: 0.55;
  transition: transform 200ms ease;
}
.toc-fold[open] > summary::after { transform: rotate(180deg); }
@media (min-width: 721px) {
  /* no desktop o fold é decorativo — a seta some */
  .toc-fold > summary::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toc-fold > summary::after { transition: none; }
}