/* Only what belongs to watching television; everything else is ZemoUI. */

.login-error { width: 100%; }

/* The player beside the TV card on a wide screen, above it on a narrow one.
   align-items: start, so the shorter card is not stretched into empty space
   (rule 136). */
.watch {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--z-layout-gap);
  align-items: start;
}
@media (max-width: 900px) {
  .watch { grid-template-columns: minmax(0, 1fr); }
}

.player-card { padding: 0; overflow: hidden; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.player-idle {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--z-space-2);
  padding: var(--z-space-4);
  color: #d6dde3;
  text-align: center;
  background: radial-gradient(circle at 50% 40%, #2a3138, #0d1012);
}
.player-idle .z-icon { width: 40px; height: 40px; opacity: .7; }
.player-idle p { margin: 0; }
.player-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-3);
  padding: var(--z-space-3) var(--z-space-4);
}
.now { display: flex; flex-wrap: wrap; align-items: center; gap: var(--z-space-2); min-width: 0; }
.now strong { font-size: var(--z-font-lg); overflow-wrap: anywhere; }
.seek { flex-wrap: wrap; }

.tv-line { display: flex; align-items: center; justify-content: space-between; gap: var(--z-space-3); margin-block: var(--z-space-3); }
.tv-line > div { display: grid; min-width: 0; }
.tv-line strong { overflow-wrap: anywhere; }
.tv-error { width: 100%; margin: 0 0 var(--z-space-3); white-space: normal; }
/* Two columns even on a phone: the values are short, and one column made the
   card twice as long as the player above it. */
.stream-info { --z-def-columns: 2; }
@media (max-width: 620px) { .z-def-grid.stream-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.channels-head { flex-wrap: wrap; }
.room-count {
  padding: 1px 9px;
  border: 1px solid var(--z-border);
  border-radius: 999px;
  background: var(--z-surface-2);
  color: var(--z-muted);
  font-size: var(--z-font-xs);
  font-variant-numeric: tabular-nums;
}
.list-title { margin: var(--z-space-4) 0 var(--z-space-2); font-size: var(--z-font-sm); color: var(--z-muted); }
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: var(--z-space-2);
}
/* A channel is a button the size of a finger, its name allowed two lines. */
.channel {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 2px;
  min-height: 56px;
  height: auto;
  padding: var(--z-space-2) var(--z-space-3);
  text-align: left;
  white-space: normal;
}
.channel-name { font-weight: 650; overflow-wrap: anywhere; line-height: 1.25; }
.channel-meta { color: var(--z-muted); font-size: var(--z-font-xs); font-weight: 500; }
/* The playing channel: a border and a mark, not colour alone (rule 048). */
.channel.is-active { border-color: var(--z-primary); box-shadow: inset 0 0 0 1px var(--z-primary); }
.channel.is-active .channel-name::before { content: "▶ "; }