/* ============================================================================
   ajuda.css — a sobreposição do MANUAL (ajuda.js), mobile e desktop.

   O overlay inteiro é montado por JS (document.createElement), e por isso o
   desenho dele morava em `style.cssText` — quatro strings longas que nenhuma
   ferramenta conferia e que não apareciam para quem procurasse "onde mudo a
   barra âmbar da ajuda". Aqui vira folha: os elementos têm id próprio desde
   sempre, então a regra é por id e ganha de qualquer coisa da casca.

   O que NÃO saiu do JS: o `display`. Ele é ESTADO — abrir() e exibirFrame()
   viram a barra para flex, o iframe para block e o painel de falha para flex, e
   o próprio ajuda.js LÊ `overlay.style.display !== "none"` para saber se já está
   aberto (Esc, guarda de histórico do mobile). Trocá-lo por classe mudaria
   comportamento, não estilo. As propriedades de flex ficam aqui e só entram em
   vigor quando o JS liga o display — é inerte até lá, de propósito.

   Cor = SEMPRE token do theme.css; nunca literal.
   ========================================================================= */

#ajudaOverlay{position:fixed;inset:0;z-index:9999;background:var(--bg)}

/* iframe do manual: começa abaixo da barra âmbar (46px) e ocupa o resto. */
#ajudaFrame{position:absolute;left:0;top:46px;width:100%;height:calc(100% - 46px);border:0;background:var(--bg)}

/* barra âmbar DO APP — título à esquerda, Fechar à direita. É a única barra:
   o manual entra no iframe só como conteúdo. */
#ajudaBar{position:absolute;top:0;left:0;right:0;height:46px;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;background:var(--ajuda-bar-bg);border-bottom:2px solid var(--ajuda-bar-line);z-index:3}
#ajudaTitulo{color:var(--warn-fg);font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ajudaFechar{background:rgba(var(--warn-rgb),.14);border:1px solid var(--ajuda-bar-line);color:var(--warn-fg);border-radius:8px;padding:5px 12px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}

/* painel de CARREGANDO/FALHA — cobre o iframe e sempre traz um jeito de voltar */
#ajudaFalha{position:absolute;top:46px;left:0;right:0;bottom:0;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px;text-align:center;background:var(--bg);z-index:2}
#ajudaFalhaIco{font-size:44px;line-height:1;color:var(--acc)}
#ajudaFalhaMsg{color:var(--txt);font-size:15px;max-width:440px;line-height:1.55}
#ajudaFalhaFechar{background:var(--acc);border:0;color:var(--on-acc);border-radius:999px;padding:10px 22px;font-size:14px;font-weight:700;cursor:pointer}

/* botão "?" injetado nas topbars do mobile. O tamanho é o mesmo nos dois lugares
   onde ele nasce — era isso que o novoBtn() recebia como string de estilo. */
.btn-ajuda{padding:6px 12px;font-size:19px;line-height:1}
/* variante do LOGIN: ali não há topbar, então o "?" se ancora no canto do card.
   O `position:relative` do #loginView existe POR CAUSA deste botão (era escrito
   por ajuda.js em tempo de injeção) — por isso a regra do pai mora aqui, junto
   de quem a exige, e não perdida na folha da casca. */
#loginView{position:relative}
.btn-ajuda.canto{position:absolute;top:12px;right:12px}