/* App-local styles for IPTV.
 *
 * Built from @ecosystem/design components; what lives here is only what is
 * genuinely specific to a channel tableau — the tile grid, the channel logo,
 * and the full-screen player overlay. Per packages/design/README.md this file
 * consumes semantic tokens only: no raw colors, no redefined .ds-* internals,
 * no primitive ramps. The accent block below is the one supported exception.
 */

/* IPTV's accent — a screen-glow blue, distinct from every other app's warm
   or earthy marks, since this is the one app that is literally about a
   screen. Repointing --ds-accent is the supported way an app expresses its
   own identity; nothing else here is colored. */
:root {
  --ds-accent: #1d4ed8;
  --ds-accent-hover: #1e40af;
  --ds-accent-subtle: #eef2ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-accent: #60a5fa;
    --ds-accent-hover: #93c5fd;
    --ds-accent-subtle: #1e2a4a;
    --ds-on-accent: var(--ds-neutral-900);
  }
}
:root[data-theme="dark"] {
  --ds-accent: #60a5fa;
  --ds-accent-hover: #93c5fd;
  --ds-accent-subtle: #1e2a4a;
  --ds-on-accent: var(--ds-neutral-900);
}

.tv-section + .tv-section {
  border-top: var(--ds-border-width) solid var(--ds-border);
}

.tv-section__title {
  padding: var(--ds-space-4) var(--ds-space-4) 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--ds-space-4);
  padding: var(--ds-space-4);
}

.tv-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4);
  text-align: center;
  cursor: pointer;
  position: relative;
}

.tv-tile__logo {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-sunken);
}

.tv-tile__logo--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-muted);
}

.tv-tile__name {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-tight);
}

.tv-tile__meta {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

.tv-tile__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-1);
}

.tv-geoblocked-toggle {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  white-space: nowrap;
}

.tv-tile__fav {
  position: absolute;
  top: var(--ds-space-2);
  right: var(--ds-space-2);
}
.tv-tile__fav[aria-pressed="true"] { color: var(--ds-danger); }

.tv-player-modal {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tv-player-modal[hidden] { display: none; }

.tv-player-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ds-neutral-900) 80%, transparent);
  border: none;
}

.tv-player-modal__panel {
  position: relative;
  z-index: 1;
  width: min(90vw, 64rem);
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-space-4);
}

.tv-player-modal__video {
  width: 100%;
  max-height: 70vh;
  border-radius: var(--ds-radius-md);
  background: var(--ds-neutral-900);
}

.tv-player-modal__title {
  margin-top: var(--ds-space-3);
  font-weight: var(--ds-weight-semibold);
}

.tv-player-modal__close {
  position: absolute;
  top: var(--ds-space-2);
  right: var(--ds-space-2);
  z-index: 2;
}

/* Why a stream did not play, under the player's own title. Tokens only, like
   every app stylesheet here — see packages/design/README.md. */
.tv-player-modal__note {
  margin: var(--ds-space-2) 0 0;
  color: var(--ds-danger);
  font-size: var(--ds-text-sm);
  text-align: center;
}