/* ==============================================================
 *  ajuda.css - A FOLHA DA AJUDA (o texto de ajuda.php)
 * ==============================================================
 *  A MESMA explicação aparece em dois lugares, e por isso o desenho dela
 *  mora aqui, num arquivo só:
 *
 *    · index.php  -> dentro do popup do ícone "i" (#painel-info), que
 *                    rola quando o texto não cabe na tela;
 *    · info.php   -> na página de verdade, para quem está sem JavaScript
 *                    (o ícone é um <a href="info.php"> de verdade).
 *
 *  Todas as regras começam com '.folha' (ou com 'body.pagina-ajuda', que
 *  é a página inteira do info.php). Assim este arquivo pode ser ligado no
 *  index.php sem encostar no CSS da galeria (css/visualizador.css): nada
 *  aqui estiliza o grid, o modal ou a barra de ícones.
 *
 *  O texto em si é o ajuda.php — para mudar uma frase, é lá que se mexe.
 * ============================================================== */

/* A caixa de texto do index.php é uma coluna flex; no info.php é a
   própria página. O box-sizing vale nos dois (o iPad antigo só entende o
   prefixado, veja a regra no fim). */
.folha {
  max-width: 720px;
  margin: 0 auto;
  color: #ddd;
  font-size: 15px;
  line-height: 1.6;
}

.folha h1 {
  font-size: 22px;
  color: #a1e200;
  margin: 0 0 4px;
}

.folha h2 {
  font-size: 16px;
  color: #a1e200;
  margin: 28px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(161, 226, 0, .25);
}

.folha p,
.folha li {
  color: #ddd;
}

.folha ul,
.folha ol {
  padding-left: 22px;
}

.folha li {
  margin-bottom: 6px;
}

.folha code {
  padding: 1px 4px;
  font-size: 13px;
  color: #ffd9a0;
  background: #1b1b22;
  border-radius: 4px;
}

/* A "tecla" (G, ←, →, Esc) é desenhada como na galeria: o visitante
   reconhece o mesmo desenho nos dois lugares. */
.folha .tecla {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  font-size: 13px;
  text-align: center;
  color: #a1e200;
  background: rgba(0, 0, 0, .74);
  border: 1px solid rgba(161, 226, 0, .5);
  border-radius: 6px;
}

/* O aviso do fim da ajuda (a caixa alaranjada). */
.folha .nota {
  margin: 18px 0;
  padding: 12px 14px;
  font-size: 14px;
  color: #ffd9a0;
  background: rgba(255, 120, 100, .1);
  border: 1px solid rgba(255, 120, 100, .3);
  border-radius: 10px;
}

/* [COMPAT-IPAD-ANTIGO] O Safari 5 só entende o box-sizing PREFIXADO; sem
   ele, os paddings somam na largura e o texto sai do lugar. Vale nos dois
   lugares em que esta folha aparece (o popup do index.php e o info.php). */
.folha,
.folha * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* ==============================================================
 *  A PÁGINA info.php (a ajuda para quem está SEM JavaScript)
 * ==============================================================
 *  As regras abaixo começam todas com 'body.pagina-ajuda' de propósito:
 *  este arquivo também é ligado no index.php (pelo popup da ajuda), e
 *  nada daqui pode encostar na galeria — nem o fundo, nem a fonte.
 * ============================================================== */
body.pagina-ajuda {
  margin: 0;
  padding: 0;
  background: #0d0d0f;
  color: #eee;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Na página a folha tem a margem da janela; no popup quem dá o respiro é
   o #info-corpo (veja css/visualizador.css). */
body.pagina-ajuda .folha {
  padding: 24px 20px 56px;
}

/* O caminho de volta para a galeria (em cima e embaixo da ajuda). */
body.pagina-ajuda .voltar {
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #a1e200;
  background: transparent;
  border: 1px solid #a1e200;
  border-radius: 6px;
  text-decoration: none;
}

body.pagina-ajuda .voltar:hover {
  background: rgba(161, 226, 0, .14);
}

body.pagina-ajuda footer {
  margin-top: 34px;
}