/* Grupo Dls/ - o mostruário de módulos (/lab)
   =============================================================
   ESTA FOLHA É PEQUENA DE PROPÓSITO, e o tamanho dela é a garantia
   principal da página.

   Um mostruário com estilo próprio mente sobre o que mostra. Os
   dezessete módulos abaixo do cabeçalho não recebem UMA regra daqui:
   eles são desenhados por `partials/modulos.php` e pintados por
   `case.css`, exatamente como numa página de case. O que esta folha
   estiliza é só o cabeçalho da página e a moldura que ancora a
   etiqueta de cada módulo.

   A etiqueta em si - `.cs__tag-lab` - mora em `case.css`, pela mesma
   razão: ela já existia lá, escrita para a bancada estática, e trazer
   uma cópia para cá criaria duas etiquetas que podem divergir.
   ============================================================= */

.lab-topo {
  padding: var(--sp-8) 0 var(--sp-7);
  border-bottom: 1px solid var(--line);
}

.lab-topo h1 {
  font-weight: 300;
  font-size: var(--fs-display-m);
  letter-spacing: var(--tr-display);
  line-height: 1.06;
}

.lab-topo p {
  margin-top: var(--sp-4);
  max-width: 68ch;
  color: var(--fg-muted);
}

.lab-topo p + p {
  margin-top: var(--sp-3);
}

.lab-topo code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
}

/* A ÂNCORA DA ETIQUETA, e nada além disso.

   `.cs__tag-lab` é `position: absolute; top: 0`, e na bancada estática
   ela ficava DENTRO da `<section class="cs">`, que é `position:
   relative`. Aqui a etiqueta não pode entrar na seção: quem desenha a
   seção é `partials/modulos.php`, o partial de produção, e ele não vai
   ganhar um parâmetro para servir a uma página de referência.

   Então a seção vem embrulhada, e o embrulho é quem ancora. `display:
   block` sem mais nada: qualquer propriedade de layout aqui - um
   `padding`, um `overflow`, um `contain` - passaria a valer para os
   módulos e a página deixaria de dizer a verdade sobre eles. */
.lab-modulo {
  position: relative;
  display: block;
}

/* O AVISO DE MÓDULO SEM EXEMPLO.

   Ele aparece quando `site.json` declara um módulo para o qual
   `page-lab.php` não escreveu exemplo - o que acontece no dia em que
   alguém adiciona um módulo novo e esquece desta página. O aviso é
   feio de propósito: um mostruário incompleto que se anuncia é útil;
   um que se cala vira a lista errada de módulos disponíveis. */
.lab-vazio {
  margin: var(--sp-7) 0;
  padding: var(--sp-5);
  border: 1px dashed #c0392b;
  border-radius: 8px;
  color: #c0392b;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-small);
}