.grade-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: 1rem;
  color: var(--grade-mute);
}
.grade-empty p { margin: 0; }

.btn .silk,
.nav-link .silk,
.input-group-text .silk,
.modal-title .silk,
.page-link .silk {
  vertical-align: -2px;
}

.grade-watch { background: #000; color: #eee; }
/* O cabeçalho não encolhe: no celular, com três linhas, a coluna da janela o apertava, e a última passava por baixo do
   vídeo. */
.grade-watch .modal-header {
  flex-shrink: 0;
  padding: .3rem .55rem;
  gap: .5rem;
  align-items: center;
  min-height: 0;
  background: #111;
  border-color: #2a2a2a;
}
.grade-watch .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #000;
}
.grade-watch .modal-title {
  font-size: .95rem;
  font-weight: 650;
  margin: 0;
  max-width: min(80vw, 36rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#stream-modal,
#atalhos-modal { z-index: 1100; }

.atalhos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem .85rem;
}
.atalhos-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 1.75rem;
}
.atalhos-row kbd {
  flex: 0 0 4.25rem;
  text-align: center;
  font-size: .75rem;
}
@media (max-width: 575.98px) {
  .atalhos-grid { grid-template-columns: 1fr; }
}

.grade-seo-main { flex: 1 0 auto; padding: 1rem 1.25rem 2rem; }
.grade-seo-main > p,
.grade-seo-main > ol,
.grade-seo-main > ul,
.grade-seo-main > h2 { max-width: 42rem; }
.grade-seo-main .channel-grid { border-left: 1px solid var(--grade-rule); margin-top: .75rem; }

.copy-row { display: flex; gap: .4rem; align-items: stretch; }
.copy-row code {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: .3rem .45rem;
  font-size: .7rem;
  word-break: break-all;
  background: var(--grade-cell);
  border: 1px solid var(--grade-rule);
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* O cabeçalho e o rodapé do player (ficha, chips, formato) e a lista de streams. Vieram de `app-cards.css` em
   24/09/2026, quando ele passou do teto de 300 linhas; carregam depois do `app-radio.css` e do `app-player.css`, que
   não têm regra de mesmo peso para estes seletores, menos o logo (`.aparelho-logo`), que é do `app-player.css`.
   No cabeçalho (`cabecalho.jsx`), o nome do canal com a linha dele ao lado (embaixo, quando não cabe) e, à direita, o
   Configure seu aparelho com os logos. Margens, e não `gap`: a TV box roda o Chrome 52. */
.watch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
.watch-head .modal-title { margin-right: .75rem; }
.watch-sub { min-width: 0; flex: 0 1 auto; }
.watch-sub:empty { display: none; }
.watch-sub .watch-ficha { font-size: .72rem; }
.watch-aparelhos { display: inline-flex; align-items: center; }
.watch-aparelhos > * { margin-left: .3rem; }
.watch-tv {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .2rem .6rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--ui-border-radius-pill);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.watch-tv:hover,
.watch-tv:focus-visible { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.watch-tv .grade-ico { margin-right: .35rem; }
.watch-aparelho {
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: var(--ui-border-radius-lg);
  background: none;
  line-height: 1;
}
.watch-aparelho .aparelho-logo { width: 2rem; height: 2rem; font-size: 1.2rem; }
/* O logo da Samsung é a palavra: no quadrado de 32 px, ela não se lia. A placa dela é mais larga, e o desenho cresce
   até a largura dela (a caixa do ícone tem 1,25em); a caixa passa da altura da placa, mas a palavra, baixa, cabe nela.
   No celular, a placa ainda cabe na linha do rótulo com os outros três logos. */
.watch-aparelho .aparelho-logo[data-marca="samsung"] { width: 3.75rem; overflow: hidden; }
.watch-aparelho .aparelho-logo[data-marca="samsung"] .grade-ico { font-size: 2.2em; }
.watch-aparelho:hover .aparelho-logo { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.watch-aparelho:focus-visible { outline: 2px solid #9fd0ff; outline-offset: 2px; }
/* O estado do canal no cabeçalho (`EstadoDoCanal`, `social.jsx`), num grupo: o no ar, as reproduções, quem assiste e o
   alerta. Na falha do player, o grupo começa pelo aviso laranja, "Falha aqui", com o quanto o canal abre. */
.watch-estado { display: inline-flex; flex-wrap: wrap; align-items: center; }
.watch-estado > * { margin: .1rem .3rem .1rem 0; }
.watch-estado .social-alerta { margin-left: 0; }
.watch-estado .social-alerta.is-falha {
  padding: .15rem .5rem;
  border: 1px solid rgba(253, 126, 20, .55);
  border-radius: var(--ui-border-radius-pill);
  background: rgba(253, 126, 20, .18);
  color: #ffc078;
}
.watch-estado .social-alerta.is-falha:hover { background: rgba(253, 126, 20, .3); }
@media (max-width: 575.98px) {
  /* No celular, o cabeçalho tem três linhas: o nome do canal com o fechar; o Configure seu aparelho, com o rótulo e os
     logos; e a linha do canal, na largura toda. Ao lado dos logos, ela ficava espremida e quebrava a palavra no meio
     ("Entert|ainment"). O nome tem base zero: o fechar fica sempre na linha dele, e o nome longo termina em "…". */
  .grade-watch .modal-header { flex-wrap: wrap; row-gap: .35rem; }
  .grade-watch .watch-head,
  .grade-watch .watch-actions { display: contents; }
  .watch-head .modal-title { flex: 1 1 0; min-width: 0; }
  .watch-aparelhos-lugar { order: 2; flex: 1 0 100%; }
  .watch-aparelhos { flex-wrap: wrap; }
  .watch-aparelhos > :first-child { margin-left: 0; }
  .watch-tv { padding: .2rem .5rem; font-size: .8125rem; }
  .watch-sub { order: 3; flex-basis: 100%; }
  /* Os selos e o estado correm soltos na linha do canal: a língua e os números numa linha, e o estado (o no ar, a falha
     ou o alerta) e o site depois, e a guia de agora por último. Em bloco, cada grupo pedia uma linha, e o vídeo descia.
     O `!important` vence o `d-inline-flex` do grupo da SDK (`@mm/ui/selos`), que também é `!important`. Os números
     ficam com o ícone e o valor; o nome deles fica para o leitor de tela. */
  .watch-sub .mm-selos,
  .watch-sub .watch-estado { display: contents !important; }
  .watch-sub .social-n,
  .watch-sub .social-watching { order: 1; }
  .watch-sub .social-medido,
  .watch-sub .social-alerta,
  .watch-sub .watch-site { order: 2; }
  .watch-sub .watch-guia { order: 3; }
  .watch-sub .watch-estado .social-nome {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
.watch-ficha-bar {
  min-width: 0;
}
.watch-ficha-bar[hidden] { display: none; }
/* O pé da janela do player só tem ações (revisão de tela, 09/11/2026): à esquerda, o Chat, o Favoritar e os
   Comentários; à direita, o servidor, o Pasta, o formato e o Gerar URL para player. Os números e o estado do canal moram
   no cabeçalho. Quando não cabe numa linha, o grupo da direita desce inteiro. Margens, e não `gap` (Chrome 52). */
#watch-modal .player-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
#watch-modal .player-foot > * { margin-top: .15rem; margin-bottom: .15rem; }
#watch-modal .player-foot > .watch-ficha-bar { margin-right: .75rem; }
#watch-modal .player-foot > .player-toolbar { margin-left: auto; }
/* No tablet, o pé não cabe numa linha: as duas linhas ficam à esquerda, uma embaixo da outra. Com o grupo da direita
   empurrado para a borda, as linhas ficavam tortas (revisão de tela, 09/11/2026). */
@media (min-width: 576px) and (max-width: 991.98px) {
  #watch-modal .player-foot > .player-toolbar { margin-left: 0; justify-content: flex-start; }
}
/* As ações da comunidade têm a altura dos botões ao lado, e não a dos selos. */
#watch-meta .social-chip {
  min-height: 1.95rem;
  padding: .2rem .55rem;
  border-radius: var(--ui-border-radius);
  font-size: .8rem;
}
/* No toque, elas têm o alvo de 44 px dos botões da SDK (`material/controles.css`), na altura dos botões da direita. */
@media (pointer: coarse) {
  #watch-meta .social-chip { min-height: 44px; }
}
/* O Favoritar e os Comentários correm na linha do Chat. O Chrome 52 da TV box não conhece o `contents` e fica com o
   bloco. */
#watch-meta .channel-social { display: contents; }
/* Na janela, o Pasta e o formato mostram o rótulo em toda largura: o `app-media.css` os deixa só com o ícone abaixo de
   768 px, de quando os números da comunidade ainda dividiam o pé com eles. */
@media (max-width: 767.98px) {
  #watch-modal .watch-add span,
  #watch-modal .watch-fmt .watch-fmt-label { display: inline; }
  #watch-modal .watch-add,
  #watch-modal .watch-fmt { width: auto; padding-left: .5rem; padding-right: .5rem; }
}
/* No celular, o pé é uma grade de botões iguais, dois por linha, cada um com o ícone e o rótulo; o que sobra sozinho
   ocupa a linha. As caixas dos grupos saem do caminho (`contents`), e os botões correm juntos, com o Gerar URL por
   último. */
@media (max-width: 575.98px) {
  #watch-modal .player-foot { padding: .3rem .35rem; }
  #watch-modal .player-foot > .watch-ficha-bar:not([hidden]),
  #watch-modal .player-foot .watch-ficha,
  #watch-modal .player-foot > .player-toolbar,
  #watch-modal .player-foot .watch-grupo { display: contents; }
  #watch-modal .player-foot .social-chip,
  #watch-modal .player-foot .btn,
  #watch-modal .player-foot .player-q {
    flex: 1 1 40%;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 2.6rem;
    margin: .2rem;
    padding: .3rem .5rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--ui-border-radius-lg);
    font-size: .85rem;
  }
  #watch-modal .player-foot .player-status { flex: 1 0 100%; }
}
.watch-ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .3rem;
  min-width: 0;
  font-size: .7rem;
  color: #c8c8c8;
}
/* Os selos da ficha são os da casa (`@mm/ui/selos`); na faixa compacta do player, na letra dela, não 3/4 dela. */
.watch-ficha .badge { font-size: inherit; }
.watch-ficha .channel-cc { width: 14px; height: 10px; }
.watch-sep { opacity: .45; margin: 0 .12rem; }
/* O site do canal é link no chip de ação da ficha (`social-chip`). */
.watch-ficha a.social-chip { text-decoration: none; }
.watch-ficha a.social-chip:hover { text-decoration: underline; }
.watch-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}
/* No pé da janela do player, o formato com o Gerar URL para player (`caixa.jsx`): o grupo quebra a linha inteiro.
   Margem à direita, e não `gap` (Chrome 52); o botão escondido não deixa espaço. */
.watch-grupo {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: -.35rem;
}
.watch-grupo > * { margin-right: .35rem; }
.watch-add,
.watch-fmt {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 1.75rem;
  flex: 0 0 auto;
}
.watch-fmt { max-width: 16rem; }
.watch-fmt-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watch-fmt-n {
  font-variant-numeric: tabular-nums;
  opacity: .75;
}
#stream-list .watch-streams {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#stream-list .watch-streams li { display: block; }
#stream-list .watch-stream {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--grade-rule);
  padding: .45rem .65rem;
  border-radius: .2rem;
  background: var(--grade-cell);
  color: inherit;
  font: inherit;
  text-align: left;
}
#stream-list .watch-stream.is-on {
  font-weight: 650;
  border-color: #555;
}