/* ============================================================
   FONTE ÚNICA — layout estrutural das telas do app.
   Incluída por:
     - site/index.html  (mockup de celular da landing — classes .app-*)
     - site/app.html    (app web real            — classes sem prefixo)

   As duas páginas usam nomes de classe diferentes, então cada regra
   cobre os dois esquemas via :is(.x, .app-x). Tudo é escopado a
   :where(#app, .phone-screen) para NÃO vazar no resto da landing e
   NÃO depender de cores/variáveis (que diferem por tema entre as páginas).

   >>> Regras de LAYOUT (flex/overflow) da tela Explorar vivem SÓ aqui. <<<
   O que é puramente visual (padding, cor, fonte, tamanho) continua no
   <style> de cada página, porque é intencionalmente diferente.
   ============================================================ */

/* Faixa de categorias (chips).
   flex:0 0 auto é essencial: como a faixa tem overflow-x:auto, o
   min-height automático do item flex vira 0 e, dentro de uma tela em
   column com card alto, ela colapsa para uma fresta. Travar o shrink
   mantém a altura do conteúdo. */
:where(#app, .phone-screen) :is(.chips, .app-chips) {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 18px;
  padding-inline: 18px;
}
:where(#app, .phone-screen) :is(.chips, .app-chips)::-webkit-scrollbar {
  display: none;
}

/* Cada chip nunca encolhe nem quebra linha. */
:where(#app, .phone-screen) :is(.chip, .app-chip) {
  flex: 0 0 auto;
  white-space: nowrap;
}