/*
 * O layout da Grade num motor sem CSS grid (WebView Chrome 52 da TV box, 2016). O app é escrito em
 * grid; aqui, e só onde grid não existe, cada grade vira flex — o mesmo desenho, sem `gap` (Chrome 84)
 * e sem `dvh` (Chrome 108). Carrega por último para vencer o empate de especificidade. Motor moderno
 * não lê nada disto: `@supports not (display: grid)` é falso nele.
 */
@supports not (display: grid) {
  .grade-tela {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
  }
  body.grade-seo { min-height: 100vh; }
  .grade-work {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }
  .grade-rail { flex: 0 0 13.75rem; }
  .grade-pane { flex: 1 1 auto; }
  .channel-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .channel-cell {
    flex: 1 1 15rem;
    max-width: 100%;
  }
  .grade-paises,
  .atalhos-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .grade-pais,
  .atalhos-row { flex: 1 1 45%; }
}

/*
 * Os selos, a barra do que falta e o vazio do SDK (@mm/ui/selos, @mm/ui/pendencia, @mm/ui/vazio) espaçam com `gap`
 * em flex. Sem ele (Chrome 52), a margem faz o espaço: a mesma regra da folha da casa (`blocos.css`), que o app da
 * Grade não carrega (12/10/2026).
 */
@supports not (gap: 1px) {
  .mm-selos > * { margin: 0 .5rem .25rem 0; }
  .mm-pendencia i + span, .mm-pendencia > div + div, .mm-vazio > * + * { margin-left: 1rem; }
  .mm-pendencia .btn + .btn { margin-left: .5rem; }
  .mm-vazio strong + * { margin-top: .5rem; }
}