.pasta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(22rem, 38%);
  flex: 1 1 auto;
  min-height: 0;
}
.pasta-screen {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #000;
}
.pasta-screen:has(.grade-empty) { background: var(--grade-paper); }
.player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.player-osd {
  position: absolute;
  left: .5rem;
  right: .5rem;
  top: .5rem;
  bottom: auto;
  padding: .45rem .65rem;
  background: color-mix(in srgb, #000 72%, transparent);
  color: #fff;
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s ease;
  z-index: 2;
}
.player-osd.is-off { opacity: 0; }
.player-osd-title {
  font-weight: 650;
  font-size: 1.05rem;
  line-height: 1.25;
}
.player-osd-meta {
  font-size: .8rem;
  color: #ddd;
  margin-top: .1rem;
}
.pasta-screen .player-box,
.grade-watch .player-box {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-box video {
  --qw: 640;
  --qh: 360;
  display: block;
  width: calc(var(--qw) * 1px);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  aspect-ratio: var(--qw) / var(--qh);
  background: #000;
}
/* Rádio: não há quadro. O <video> fica (é ele que toca), invisível; a placa diz o que está tocando. */
.player-box.is-audio video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* A imagem do programa de agora atrás do vídeo (`FundoDoPrograma`, dono, 31/10/2026: "no player principal exibimos ela
   como bg/fundo ao tocar ou se nao funcionar"): desfocada e escura na caixa toda, e o pôster inteiro no meio, com sombra.
   O fundo vem antes do vídeo no documento, e o vídeo fica posicionado e sem cor própria: ele pinta por cima, e antes do
   primeiro quadro, na falha e em volta do quadro vê-se o programa. A sobreposição, o OSD e a barra seguem por cima. */
.player-fundo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none;
}
.player-fundo-desfoque {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2);
  filter: blur(1.5rem) saturate(1.2) brightness(.4);
}
.player-fundo-poster {
  position: relative; height: 78%; width: auto; max-width: 70%; object-fit: contain;
  border-radius: var(--ui-border-radius-lg); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .6);
}
.player-box.tem-fundo video { position: relative; background: transparent; }
.player-radio {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.25rem 3rem;
  color: #fff;
  background: radial-gradient(ellipse at center, #2c2c2c 0%, #0b0b0b 72%);
  pointer-events: none;
}
.player-radio[hidden] { display: none; }
.player-radio-logo {
  max-width: min(42%, 12rem);
  max-height: 46%;
  object-fit: contain;
  padding: .4rem;
  border-radius: .35rem;
  background: #fff;
}
.player-radio-name {
  max-width: 100%;
  font-weight: 650;
  font-size: 1.1rem;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.player-box.is-audio .player-osd,
.player-box.is-audio .player-q,
.player-palco:has(.is-audio) ~ .player-foot .player-q { display: none; }
.player-toolbar {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.85rem;
  background: #111;
}
/* O pé escuro do player mora aqui, e não no app-watch.css: o player legado carrega só esta folha, e sem o fundo
   o texto claro da barra ficava sobre a página clara no tema claro. */
.player-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .35rem .75rem;
  padding: .4rem .65rem;
  background: #111;
  border-top: 1px solid #2a2a2a;
}
.player-foot .player-toolbar {
  background: transparent;
  min-height: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.player-foot .watch-fmt { flex: 0 1 auto; }
.player-status,
#player-status,
#watch-status {
  margin: 0 !important;
  padding: .2rem .5rem;
  font-size: .75rem;
  background: #111;
  color: #cfcfcf;
}
.player-toolbar .player-status,
.player-toolbar #player-status,
.player-toolbar #watch-status { flex: 0 1 auto; min-width: 0; background: transparent; }
.player-streams { display: none; }
.player-q {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex: 0 0 auto;
  padding-right: .45rem;
  color: #cfcfcf;
}
.player-q select {
  min-height: 1.75rem;
  font-size: .75rem;
  color: #eee;
  background: #1c1c1c;
  border: 1px solid #333;
  border-radius: .2rem;
  padding: .1rem .35rem;
}
.pasta-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--grade-rail);
  border-left: 1px solid var(--grade-rule);
}
.pasta-side-head {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  justify-content: space-between;
  padding: .4rem;
  border-bottom: 1px solid var(--grade-rule);
}
.pasta-side-head .nav-pills .nav-link { padding: .25rem .55rem; font-size: .8125rem; }
.pasta-canais { flex: 1 1 auto; min-height: 0; overflow: auto; }
.pasta-canal {
  display: flex;
  align-items: center;
  gap: .4rem;
  border-bottom: 1px solid var(--grade-rule);
  background: var(--grade-cell);
}
.pasta-canal.is-on { background: var(--grade-now); color: var(--grade-now-ink); }
.pasta-canal-play {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: .35rem .45rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.pasta-canal-logo {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grade-logo);
}
.pasta-canal.is-on .pasta-canal-logo { background: #2a2a2a; }
.pasta-canal-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pasta-canal-nome {
  font-size: .8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O selo "Abre aqui" (`@mm/ui/selos`) fica no tamanho dele; quem encolhe é o nome do canal. */
.pasta-canal > .badge { flex: 0 0 auto; }
.pasta-canal .btn { margin-right: .3rem; }
.pasta-feeds {
  border-top: 1px solid var(--grade-rule);
  padding: .4rem .5rem;
  font-size: .75rem;
}
.pasta-feeds summary { cursor: pointer; font-weight: 600; }
/* Os passos do VLC no lugar da frase: ícone e rótulo, um ao lado do outro (margem no lugar de `gap`: Chrome 52). */
.pasta-passos { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: .5rem 0; }
.pasta-passos li { display: inline-flex; align-items: center; margin: 0 .85rem .25rem 0; }
.pasta-passos .grade-ico { margin-right: .3rem; }

/* YouTube (Fase 5): o iframe oficial ocupa a caixa; o <video>, o chrome da TV e o OSD saem de cena. */
.player-box.is-youtube video,
.player-box.is-youtube [data-player-tv],
.player-box.is-youtube .player-osd { display: none; }
.player-youtube {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.watch-youtube { flex: 0 0 auto; }

/* A falha é uma ação do player: contraste legível também no tema claro sobre o palco escuro. */
#player-status[data-player-access],
#watch-status[data-player-access] {
  padding: .5rem;
  border: 1px solid var(--ui-danger-border-subtle);
  border-radius: .25rem;
  background: var(--ui-danger-bg-subtle);
  color: var(--ui-danger-text-emphasis) !important;
}
#player-status[data-player-access="http"],
#watch-status[data-player-access="http"] {
  border-color: var(--ui-warning-border-subtle);
  background: var(--ui-warning-bg-subtle);
  color: var(--ui-warning-text-emphasis) !important;
}

/* Programação: tamanho da identidade e das capas, sem mudar os outros lugares do player. A agenda corre na página, sem
   rolagem própria: a caixa de 65vh virava uma fresta com a letra em 200% (revisão de tela, 30/10/2026). */
.programacao-texto { min-width: 0; overflow-wrap: anywhere; }
/* O nome ao lado da logo ou da capa fica ao lado enquanto tem 9rem; com menos, desce para baixo dela. Com base 0, ele
   encolhia até uma letra por linha com o texto em 200% (30/10/2026: "Prog / rama / ção" e "N / C / I / S"). */
.programacao-identidade,
.programacao-programa-texto { flex: 1 1 9rem; }
.programacao-logo { flex: 0 0 4.5rem; width: 4.5rem; height: 4.5rem; }
.programacao-logo-grande { flex-basis: 6rem; width: 6rem; height: 6rem; }
.programacao-capa { flex: 0 0 7rem; width: 7rem; }
/* O cartão do programa na busca da coleção: a capa na metade dele, e o texto com ao menos 11rem (a letra em 200%); no
   celular, a capa em cima, na largura toda (dono, 31/10/2026: "vamos fazer essa imagem usar metade do card?"). */
.card.programacao-achado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(100%, 11rem), 1fr); }
/* O programa de hoje que já passou: a capa e o nome apagados, e "Já passou" no lugar do sino (dono, 31/10/2026: "pq so
   tenho o avisa me no ultimo?"). */
.programacao-passou .programacao-capa { opacity: .5; filter: grayscale(.6); }
.programacao-passou .programacao-programa-abrir,
.programacao-passou time { color: var(--ui-secondary-color); }
/* O cartão da coleção: o nome fica ao lado da logo enquanto tem 9rem; com menos, desce para baixo dela. */
.programacao-cartao { min-width: 0; }
.programacao-cartao-texto { flex: 1 1 9rem; min-width: 0; }
/* A logo pequena no canto da capa do palco do Ao vivo. */
.programacao-logo-capa { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; }
@media (min-width: 992px) {
  /* Abaixo do cabeçalho do site, que também gruda (`--mm-altura-cabecalho`, do `chrome.js`): com `top: 1rem`, o Ao vivo
     passava por baixo dele (revisão de tela, 30/10/2026). Com o "Sobre o programa" embaixo do palco (31/10/2026), o lado
     pode passar da altura da tela: ele rola sozinho, e o fim dele não fica escondido até o fim da agenda. */
  .programacao-lado {
    position: sticky; top: calc(var(--mm-altura-cabecalho, 0px) + 1rem);
    max-height: calc(100vh - var(--mm-altura-cabecalho, 0px) - 2rem);
    max-height: calc(100dvh - var(--mm-altura-cabecalho, 0px) - 2rem);
    overflow-y: auto; scrollbar-width: thin;
  }
}
/* A linha da agenda abre o programa na janela ampla: o nome é o botão, e ele cobre a linha (`stretched-link`). */
.programacao-programa-abrir {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.programacao-programa:hover { background-color: var(--ui-tertiary-bg); }
.programacao-programa:has(.programacao-programa-abrir:focus-visible) {
  outline: 2px solid var(--ui-primary); outline-offset: -2px;
}
/* O tempo do programa de agora, na cor da categoria (`HorarioDoPrograma`). */
.programacao-progresso { height: .5rem; }
/* O resumo da série (TVmaze), na medida de leitura; os fatos em colunas que se ajustam à largura. */
.programacao-resumo { max-width: 65ch; line-height: 1.6; }
.programacao-fatos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .75rem 1.5rem; margin-bottom: 1rem;
}
.programacao-fatos dt { font-size: .875em; font-weight: 400; color: var(--ui-secondary-color); }
.programacao-fatos dd { margin: .125rem 0 0; font-weight: 650; overflow-wrap: anywhere; }
/* A janela ampla do programa: a imagem grande à esquerda, inteira, e o texto à direita; no celular, a imagem em cima. */
.programacao-janela {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; align-items: start;
}
.programacao-janela-imagem img {
  display: block; max-width: 100%; height: auto; max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem);
  margin-inline: auto; border-radius: var(--ui-border-radius-lg); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}
@media (max-width: 767.98px) {
  .programacao-janela { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .programacao-janela-imagem img { max-height: 45vh; max-height: 45dvh; }
}
@media (max-width: 991.98px) {
  .programacao-logo-grande { flex-basis: 4.5rem; width: 4.5rem; height: 4.5rem; }
}
@media (max-width: 575.98px) {
  .programacao-capa { flex-basis: 4rem; width: 4rem; }
  .card.programacao-achado { grid-template-columns: minmax(0, 1fr); }
  .programacao-achado-capa { min-height: 12rem; }
  /* A margem do painel em volta dos cartões e a do cartão, em px: em rem, elas dobravam com a letra em 200% e deixavam
     198 px para o nome ("GloboNe/ws", revisão de tela, 30/10/2026). */
  .programacao-colecao { padding-left: 8px; padding-right: 8px; }
  .programacao-cartao-corpo { padding: 12px; }
}

/* A programação ao lado do vídeo (`player/programacao.jsx`), nas cores do painel do chat: a lista rola sozinha, e o
   programa escolhido abre com a capa grande em cima e o horário embaixo. A marca verde e o selo Agora são os da agenda. */
.player-grade { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; color: #ddd; }
.player-grade-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .5rem;
  border-bottom: 1px solid #2a2a2a;
}
.player-grade-titulo { display: inline-flex; align-items: center; margin: 0; font-size: .85rem; font-weight: 650; }
.player-grade-titulo > .grade-ico { margin-right: .3rem; color: #9fd0ff; }
.player-grade-link { color: #9fd0ff; font-size: .78rem; text-decoration: none; }
.player-grade-link:hover { text-decoration: underline; }
.player-grade-link:focus-visible { outline: 2px solid #9fd0ff; outline-offset: 2px; }
.player-grade-lista { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.player-grade-linha { border-bottom: 1px solid #1f1f1f; }
.player-grade-linha.is-aberto { background: #1a1a1a; }
.player-grade-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: .35rem .5rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .85rem;
  text-align: left;
}
.player-grade-item:hover { background: #1d1d1d; }
.player-grade-item:focus-visible { outline: 2px solid #9fd0ff; outline-offset: -2px; }
.player-grade-inicio { flex: 0 0 auto; margin-right: .5rem; color: #9a9a9a; font-variant-numeric: tabular-nums; }
.player-grade-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-grade-linha.is-aberto .player-grade-nome { white-space: normal; overflow-wrap: anywhere; font-weight: 650; }
.player-grade-selo { flex: 0 0 auto; margin-left: .4rem; }
.player-grade-aberto { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 0 .5rem .55rem; }
.player-grade-capa { flex: 0 0 100%; width: 100%; max-width: 22rem; margin-bottom: .45rem; }
/* O horário e a categoria descem para baixo da capa: com base 0, sobravam ao lado dela, uma letra por linha. */
.player-grade-sobre { flex: 1 1 100%; min-width: 0; font-size: .78rem; }
.player-grade-sobre p { margin: 0 0 .2rem; }
.player-grade-hora { font-weight: 650; font-variant-numeric: tabular-nums; }
.player-grade-cat { color: #9a9a9a; overflow-wrap: anywhere; }
.player-grade-estado { margin: 0; padding: .5rem; font-size: .8rem; color: #9a9a9a; }
.player-grade-estado .btn { margin-left: .5rem; }