/* =============================================================
   O GUIA — o conteúdo, igual no app e no site  (ST-16, ADR-0377)
   =============================================================
   A marcação sai do `guide.js` e é a MESMA nos dois lugares: o diálogo do
   app e a página `/guide/` do site. Por isso a folha também é uma só, e o
   site a recebe por cópia, como o `tokens.css` (ADR-0239 D1). Não declara
   cor: tudo vem dos tokens.

   O que é do DIÁLOGO (largura, altura fixa do corpo) fica no `table.css`;
   o que é da PÁGINA, no `site.css`.

   TAMANHO EM `em`, relativo ao CONTÊINER: o diálogo fixa 12px (a escala
   do app) e a página fixa 15px (a do site). Em `px` a página saía com a
   letra do diálogo, menor que o resto do site — visto na captura.
   ============================================================= */
.guide__sector + .guide__sector { margin-top: var(--sp-5); }
.guide__title {
  margin: 0 0 var(--sp-1);
  color: var(--fg-dim);
  font-size: 0.92em;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.guide__intro {
  margin: 0 0 var(--sp-2);
  color: var(--fg-muted);
  font-size: 1em;
  line-height: 1.45;
}
.guide__entry {
  display: block;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
/* O FILTRO esconde por `hidden`, e `hidden` perde para qualquer `display`
   de autor (ADR-0316): sem estas linhas a busca acenderia o "nada
   encontrado" com todas as entradas ainda na tela. */
.guide__entry[hidden],
.guide__sector[hidden],
.guide__empty[hidden] { display: none; }
.guide__head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.guide__name { color: var(--fg); font-size: 1.08em; font-weight: 600; }
.guide__desc,
.guide__where {
  margin: 2px 0 0;
  color: var(--fg-muted);
  font-size: 1em;
  line-height: 1.45;
}
.guide__where { color: var(--fg-dim); }
/* A explicação de um comando é a DICA dele quando há (a mesma do menu), e
   a dica do menu é fragmento em minúscula ("desvira as SUAS cartas…"). No
   Guia ela abre parágrafo — a maiúscula é de apresentação, e por isso mora
   aqui e não numa segunda cópia da frase. */
.guide__desc::first-letter { text-transform: uppercase; }
.guide__icon { display: inline-grid; place-items: center; width: 1.34em; height: 1.34em; vertical-align: -0.25em; }
.guide__icon svg { width: 1.34em; height: 1.34em; }
.guide__keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  padding: 2px 6px;
  background: var(--bg-surface-3);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  font: inherit;
  font-size: 0.92em;
  font-weight: 650;
}
.guide__empty {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  color: var(--fg-muted);
  font-size: 1.08em;
}
.guide__empty p { margin: 0; }