/* TV mode — only applies when html.is-tv-mode (Smart TV / ?tv=1). Desktop/mobile unchanged. */

html.is-tv-mode,
html.is-tv-mode body {
  -webkit-tap-highlight-color: transparent;
}

/* Empty global player shell must not capture remote clicks (live page mounts its own). */
html.is-tv-mode #player-shell.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.is-tv-mode body.is-live-page #player-shell.hidden {
  display: block !important;
  visibility: visible !important;
}

html.is-tv-mode body.is-live-page #player-shell.hidden:empty,
html.is-tv-mode body.is-live-page #player-shell.hidden #media-player-root:empty {
  pointer-events: none !important;
}

/* Desktop/TV width: show category nav in header (not below 1101px). */
@media (min-width: 1101px) {
  html.is-tv-mode #desktop-nav {
    display: flex !important;
  }

  html.is-tv-mode #site-header .header-right > .relative.hidden.lg\:block,
  html.is-tv-mode #site-header .header-right > .hidden.lg\:block {
    display: block !important;
  }

  html.is-tv-mode #mobile-nav-btn {
    display: none !important;
  }
}

/* Phone / tablet width: logo + hamburger only. */
@media (max-width: 1100px) {
  html.is-tv-mode #site-header .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  html.is-tv-mode #site-header .header-center,
  html.is-tv-mode #desktop-nav {
    display: none !important;
  }

  html.is-tv-mode #mobile-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.is-tv-mode #site-header .header-right > .relative,
  html.is-tv-mode #site-header .header-right > .relative.hidden,
  html.is-tv-mode #site-header .header-right > .hidden.lg\:block,
  html.is-tv-mode #site-header .header-right > .relative.hidden.lg\:block {
    display: none !important;
  }

  html.is-tv-mode #site-header .header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html.is-tv-mode #site-header .header-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

html.is-tv-mode #site-header {
  z-index: 100000 !important;
}

html.is-tv-mode #site-header .nav-link,
html.is-tv-mode #site-header .menu-item,
html.is-tv-mode #site-header button,
html.is-tv-mode #site-header a {
  min-height: 44px;
}

html.is-tv-mode #site-header .nav-link:focus,
html.is-tv-mode #site-header .nav-link:focus-visible,
html.is-tv-mode #site-header .menu-item:focus,
html.is-tv-mode #site-header .menu-item:focus-visible,
html.is-tv-mode #site-header button:focus,
html.is-tv-mode #site-header button:focus-visible {
  outline: 3px solid var(--accent, #57301c);
  outline-offset: 3px;
}

html.is-tv-mode #library-menu,
html.is-tv-mode #lang-menu,
html.is-tv-mode #user-menu {
  z-index: 100010 !important;
}

html.is-tv-mode .tv-player-wrap {
  position: relative;
  width: 100%;
  max-width: min(720px, 92vw);
  margin: 0 auto;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
  html.is-tv-mode .tv-player-wrap::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
}

html.is-tv-mode .tv-overlay-player {
  position: relative;
  width: 100%;
  min-height: min(56.25vw, 540px);
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
  html.is-tv-mode .tv-overlay-player::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
}

html.is-tv-mode .tv-player-wrap video,
html.is-tv-mode .tv-player-wrap audio {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: #000;
  object-fit: contain;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1;
}

html.is-tv-mode .tv-overlay-player video,
html.is-tv-mode .tv-overlay-player audio {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1;
}

html.is-tv-mode .tv-overlay-player audio {
  aspect-ratio: auto;
  min-height: 64px;
}

/* Full-screen VOD overlay (archive / library / menu on TV) */
html.is-tv-mode #twt-tv-vod-overlay {
  position: fixed;
  inset: 0;
  z-index: 250000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

html.is-tv-mode #twt-tv-vod-overlay.hidden {
  display: none !important;
}

html.is-tv-mode .twt-tv-vod-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}

html.is-tv-mode .twt-tv-vod-panel {
  position: relative;
  z-index: 1;
  width: min(960px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
}

html.is-tv-mode .twt-tv-vod-title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
}

html.is-tv-mode .twt-tv-vod-meta {
  margin: 6px 0 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

html.is-tv-mode .twt-tv-vod-close {
  align-self: center;
  min-height: 48px;
  min-width: 140px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

html.is-tv-mode .twt-tv-vod-close:focus,
html.is-tv-mode .twt-tv-vod-close:focus-visible {
  outline: 3px solid var(--accent, #57301c);
  outline-offset: 3px;
}

html.is-tv-mode .live-stream-btn {
  min-height: 48px;
  min-width: 88px;
  font-size: 1rem;
  padding: 12px 18px;
}

html.is-tv-mode .live-stream-btn:focus,
html.is-tv-mode .live-stream-btn:focus-visible {
  outline: 3px solid var(--accent, #57301c);
  outline-offset: 2px;
}

html.is-tv-mode .live-trigger {
  display: none !important;
}

/* ─── Inline player (archive/library/conventions) — scaled for TV ─── */
html.is-tv-mode {
  --player-shell-max: min(640px, 58vw);
}

html.is-tv-mode #player-shell:not(.is-mini):not(.hidden),
html.is-tv-mode body.mp-inline-embedded #player-shell:not(.is-mini) {
  max-width: var(--player-shell-max) !important;
}

/* Avoid :has() — unsupported on older Samsung Tizen (Chromium ~94). */
html.is-tv-mode #player-shell:not(.is-mini) .mp-media {
  position: relative !important;
  min-height: 180px !important;
  aspect-ratio: 16 / 9 !important;
}

html.is-tv-mode #player-shell:not(.is-mini) .mp-media video,
html.is-tv-mode #player-shell:not(.is-mini) .mp-media iframe,
html.is-tv-mode .player-inline-slot .mp-media video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}

html.is-tv-mode #player-shell:not(.is-mini) .mp-media > .mp-overlay {
  z-index: 2 !important;
}

html.is-tv-mode #player-home-slot video,
html.is-tv-mode .player-inline-slot video,
html.is-tv-mode .tv-player-wrap video,
html.is-tv-mode .mp-media video {
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
}

html.is-tv-mode #player-shell.is-mini:not(.is-mini-controls-only):not(.mp-inline-split):not(.mp-mini-collapsed),
html.is-tv-mode body.mp-inline-docked #player-shell.is-mini:not(.is-mini-controls-only):not(.mp-mini-collapsed) {
  width: clamp(220px, 24vw, 320px) !important;
}

/* Fullscreen — fill the TV screen (inline max-height must not apply in FS) */
html.is-tv-mode body.mp-infs #player-shell,
html.is-tv-mode body.mp-infs #player-shell:not(.is-mini),
html.is-tv-mode body.mp-launching-from-mini-fs #player-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  z-index: 2147483646 !important;
}

html.is-tv-mode .mp-fswrap:fullscreen,
html.is-tv-mode .mp-fswrap:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

html.is-tv-mode .mp-fswrap:fullscreen .mp-card,
html.is-tv-mode .mp-fswrap:-webkit-full-screen .mp-card {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
}

html.is-tv-mode .mp-fswrap:fullscreen .mp-media,
html.is-tv-mode .mp-fswrap:-webkit-full-screen .mp-media,
html.is-tv-mode body.mp-infs .mp-media {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

html.is-tv-mode .mp-fswrap:fullscreen .mp-media video,
html.is-tv-mode .mp-fswrap:-webkit-full-screen .mp-media video,
html.is-tv-mode .mp-fswrap:fullscreen .mp-media iframe,
html.is-tv-mode .mp-fswrap:-webkit-full-screen .mp-media iframe,
html.is-tv-mode body.mp-infs .mp-media video,
html.is-tv-mode body.mp-infs .mp-media iframe,
html.is-tv-mode .player-inline-slot .mp-fswrap:fullscreen .mp-media video,
html.is-tv-mode video:fullscreen,
html.is-tv-mode video:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important;
}

html.is-tv-mode .tv-player-wrap video:fullscreen,
html.is-tv-mode .tv-player-wrap video:-webkit-full-screen {
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

html.is-tv-mode body.mp-infs #player-shell:not(.is-mini) .mp-card,
html.is-tv-mode #player-shell:fullscreen .mp-card,
html.is-tv-mode #player-shell:-webkit-full-screen .mp-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

html.is-tv-mode body.mp-infs #player-shell:not(.is-mini) .mp-media,
html.is-tv-mode #player-shell:fullscreen .mp-media,
html.is-tv-mode #player-shell:-webkit-full-screen .mp-media {
  flex: 1 1 auto !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
}

html.is-tv-mode body.mp-infs #player-shell:not(.is-mini) .mp-media video,
html.is-tv-mode #player-shell:fullscreen .mp-media video,
html.is-tv-mode #player-shell:-webkit-full-screen .mp-media video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important;
}

html.is-tv-mode body[data-calendar-base] #player-shell.is-mini {
  width: min(420px, calc(100vw - 24px)) !important;
}

html.is-tv-mode #live-player-status {
  margin-top: 8px;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* Archive: title row + icons always visible on a second line (clear on TV). */
html.is-tv-mode .record.has-files .item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 8px 16px !important;
  padding: 10px 0 8px !important;
  cursor: default !important;
}

html.is-tv-mode .record.has-files .date {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  min-width: 0 !important;
  align-self: center !important;
}

html.is-tv-mode .record.has-files .title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  padding-right: 0 !important;
}

html.is-tv-mode body.is-archive-year .record.has-files .icons,
html.is-tv-mode body.is-library-index .record.has-files .icons,
html.is-tv-mode body.is-conventions .record.has-files .icons,
html.is-tv-mode .record.has-files .icons {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  margin-top: 4px !important;
  padding: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Fast TV icons: text labels only — skip SVG stroke rendering on WebOS */
html.is-tv-mode .js-langfile svg,
html.is-tv-mode .midx-file-btn svg,
html.is-tv-mode .twt-media-btn svg,
html.is-tv-mode [data-recommended-files="1"] a[data-play="1"] svg,
html.is-tv-mode .calendar-service-has-files a[data-play="1"] svg {
  display: none !important;
}

html.is-tv-mode .js-langfile .btn-label,
html.is-tv-mode .midx-file-btn .btn-label,
html.is-tv-mode .twt-media-btn .btn-label,
html.is-tv-mode [data-recommended-files="1"] a[data-play="1"] .btn-label,
html.is-tv-mode .calendar-service-has-files a[data-play="1"] .btn-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

html.is-tv-mode .record.has-files .js-langfile {
  min-width: 64px !important;
  min-height: 52px !important;
  width: 64px !important;
  height: 52px !important;
  flex: 0 0 auto !important;
  border: 2px solid var(--theme-color-border, rgba(87, 48, 28, 0.28)) !important;
  background: var(--theme-icon-bg, rgba(255, 255, 255, 0.72)) !important;
  color: var(--theme-ink, #251e1b) !important;
}

html.is-tv-mode .record.has-files .js-langfile:focus,
html.is-tv-mode .record.has-files .js-langfile:focus-visible {
  outline: 3px solid var(--accent, #57301c);
  outline-offset: 3px;
}

html.is-tv-mode .record.has-files .item:focus,
html.is-tv-mode .record.has-files .item:focus-visible {
  outline: 2px solid var(--accent, #57301c);
  outline-offset: 4px;
}

/* Menu — show media buttons on TV; larger tap targets. */
html.is-tv-mode [data-midx-group].is-open .js-midx-panel,
html.is-tv-mode [data-midx-group].is-open .midx-media-panel {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.is-tv-mode .midx-file-btn,
html.is-tv-mode .twt-media-btn,
html.is-tv-mode [data-recommended-files="1"] a[data-play="1"],
html.is-tv-mode .calendar-service-has-files a[data-play="1"] {
  min-width: 56px !important;
  min-height: 48px !important;
}

html.is-tv-mode .midx-file-btn:focus,
html.is-tv-mode .midx-file-btn:focus-visible,
html.is-tv-mode .twt-media-btn:focus,
html.is-tv-mode .twt-media-btn:focus-visible,
html.is-tv-mode [data-recommended-files="1"] a[data-play="1"]:focus,
html.is-tv-mode .calendar-service-has-files a[data-play="1"]:focus {
  outline: 3px solid var(--accent, #57301c);
  outline-offset: 3px;
}

/* ─── Page foundation ─── */
html.is-tv-mode body {
  background: var(--theme-bg, #fbf6ef) !important;
  color: var(--theme-ink, #251e1b);
  -webkit-font-smoothing: antialiased;
}

html.is-tv-mode body[data-calendar-base] {
  background: var(--theme-bg, #fbf6ef) !important;
}

/* Banner pages: desktop-style flush hero under header */
html.is-tv-mode body[data-calendar-base] main#page-content,
html.is-tv-mode body.is-archive-year main#page-content,
html.is-tv-mode body.is-conventions main#page-content,
html.is-tv-mode body.is-live-page main#page-content,
html.is-tv-mode body.is-library-index main#page-content,
html.is-tv-mode body.is-upload-page main#page-content {
  padding-top: 0 !important;
}

/* ─── TV-safe banner fades (no color-mix — broken on many TV browsers) ─── */
html.is-tv-mode {
  --tv-fade-hero-bottom: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 38%,
    rgba(251, 246, 239, 0.22) 62%,
    rgba(251, 246, 239, 0.72) 80%,
    rgba(251, 246, 239, 0.96) 94%,
    var(--theme-bg, #fbf6ef) 100%
  );
  --tv-fade-archive-view: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.14) 18%,
    rgba(0, 0, 0, 0.04) 38%,
    rgba(251, 246, 239, 0.12) 56%,
    rgba(251, 246, 239, 0.48) 72%,
    rgba(251, 246, 239, 0.9) 88%,
    var(--theme-bg, #fbf6ef) 100%
  );
}

html.is-tv-mode body,
html.is-tv-mode main,
html.is-tv-mode #page-content {
  background: var(--theme-bg, #fbf6ef) !important;
}

/* ─── Header: solid readable bar on banner/list pages (beat page inline overrides) ─── */
html.is-tv-mode #site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

html.is-tv-mode #site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  max-width: 1680px !important;
  margin: 0 auto !important;
  padding: 12px 20px !important;
}

html.is-tv-mode #site-header .header-left {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

@media (min-width: 1101px) {
  html.is-tv-mode #site-header .header-center,
  html.is-tv-mode #desktop-nav {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html.is-tv-mode #site-header .header-right > .relative,
  html.is-tv-mode #site-header .header-right > .relative.hidden,
  html.is-tv-mode #site-header .header-right > .hidden.lg\:block {
    display: block !important;
  }
}

html.is-tv-mode #site-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 8px !important;
}

html.is-tv-mode #site-header .brand-sep,
html.is-tv-mode #site-header .brand-sep.hidden {
  display: inline-block !important;
}

html.is-tv-mode body.is-archive-year #header-shell,
html.is-tv-mode body.is-conventions #header-shell,
html.is-tv-mode body.is-library-index #header-shell,
html.is-tv-mode body.is-live-page #header-shell,
html.is-tv-mode body.is-upload-page #header-shell {
  background: var(--theme-bg, #fbf6ef) !important;
  border-bottom: 1px solid var(--theme-color-border, rgba(37, 30, 27, 0.14)) !important;
  box-shadow: 0 8px 22px rgba(87, 48, 28, 0.08) !important;
}

html.is-tv-mode body.is-archive-year .header-fg,
html.is-tv-mode body.is-archive-year .nav-link,
html.is-tv-mode body.is-conventions .header-fg,
html.is-tv-mode body.is-conventions .nav-link,
html.is-tv-mode body.is-library-index .header-fg,
html.is-tv-mode body.is-library-index .nav-link,
html.is-tv-mode body.is-live-page .header-fg,
html.is-tv-mode body.is-live-page .nav-link,
html.is-tv-mode body.is-upload-page .header-fg,
html.is-tv-mode body.is-upload-page .nav-link {
  color: var(--theme-ink, #251e1b) !important;
  text-shadow: none !important;
}

html.is-tv-mode body.is-archive-year .brand-sub.header-fg,
html.is-tv-mode body.is-conventions .brand-sub.header-fg,
html.is-tv-mode body.is-library-index .brand-sub.header-fg,
html.is-tv-mode body.is-live-page .brand-sub.header-fg {
  color: var(--theme-color, #57301c) !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

html.is-tv-mode body.is-archive-year .brand-sep,
html.is-tv-mode body.is-conventions .brand-sep,
html.is-tv-mode body.is-library-index .brand-sep,
html.is-tv-mode body.is-live-page .brand-sep,
html.is-tv-mode body.is-upload-page .brand-sep {
  background: var(--theme-color-border, rgba(37, 30, 27, 0.25)) !important;
}

/* ─── Banner blending (theme-aware fades, no hardcoded milky seams) ─── */
html.is-tv-mode .archive-hero-desktop {
  background: var(--theme-bg, #fbf6ef) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

html.is-tv-mode body.is-archive-year .archive-hero-desktop::before,
html.is-tv-mode body.is-archive-year .archive-hero-desktop::after,
html.is-tv-mode .archive-hero-desktop::before,
html.is-tv-mode .archive-hero-desktop::after {
  display: block !important;
}

html.is-tv-mode .archive-hero-desktop::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 58% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: var(--tv-fade-hero-bottom) !important;
}

html.is-tv-mode body.is-archive-year .view::before {
  background:
    var(--tv-fade-archive-view),
    url("/static/banners/archive_top.jpg") center top / cover no-repeat !important;
}

html.is-tv-mode body.is-archive-year .view,
html.is-tv-mode body.is-archive-year #archive-list,
html.is-tv-mode body.is-archive-year #month-filter {
  background: transparent !important;
}

html.is-tv-mode .library-hero {
  background: var(--theme-bg, #fbf6ef) !important;
}

html.is-tv-mode .library-hero__fade {
  display: block !important;
  background: var(--tv-fade-hero-bottom) !important;
}

html.is-tv-mode .live-hero {
  background: var(--theme-bg, #fbf6ef) !important;
}

html.is-tv-mode .live-banner::after {
  display: block !important;
  background: var(--tv-fade-hero-bottom) !important;
}

html.is-tv-mode .oc-hero::after {
  display: block !important;
  background: var(--tv-fade-hero-bottom) !important;
}

html.is-tv-mode body.is-archive-year .view::before {
  height: clamp(900px, 82vw, 1240px) !important;
}

/* Side wings — hide on TV; they leave harsh bottom edges on large screens */
html.is-tv-mode body.is-archive-year::before,
html.is-tv-mode body.is-archive-year::after {
  display: none !important;
}

/* Menu/home hero keeps white header over the church banner */
html.is-tv-mode body[data-calendar-base]:not(.header-scrolled) .header-fg,
html.is-tv-mode body[data-calendar-base]:not(.header-scrolled) .nav-link {
  color: #fff !important;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

html.is-tv-mode body[data-calendar-base]:not(.header-scrolled) .brand-sub.header-fg {
  color: #fff !important;
  opacity: 0.85 !important;
}

html.is-tv-mode body[data-calendar-base]:not(.header-scrolled) #header-shell {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ─── Archive / library list rows ─── */
html.is-tv-mode .record.has-files .item {
  border-radius: 12px;
  transition: background 0.15s ease;
}

html.is-tv-mode .record.has-files .item:focus,
html.is-tv-mode .record.has-files .item:focus-visible {
  background: rgba(87, 48, 28, 0.06);
  background: color-mix(in srgb, var(--theme-color) 7%, var(--theme-bg));
}

html.is-tv-mode .record.has-files .title {
  font-size: 1.05rem;
  line-height: 1.35;
}

html.is-tv-mode .record.has-files .js-langfile {
  border-radius: 12px !important;
  border-color: var(--theme-color-border) !important;
  background: var(--theme-icon-bg) !important;
}

html.is-tv-mode .record.has-files .js-langfile:focus,
html.is-tv-mode .record.has-files .js-langfile:focus-visible {
  background: var(--theme-icon-bg-hover) !important;
}

html.is-tv-mode #archive-list .month-sep,
html.is-tv-mode .month-sep {
  border-color: var(--theme-color-border) !important;
}

/* ─── Menu: category tiles + calendar ─── */
html.is-tv-mode .cat-tile {
  min-height: clamp(180px, 18vh, 240px);
  border-radius: 20px;
}

html.is-tv-mode .cat-title {
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
}

html.is-tv-mode .midx-file-btn,
html.is-tv-mode .twt-media-btn,
html.is-tv-mode [data-recommended-files="1"] a[data-play="1"],
html.is-tv-mode .calendar-service-has-files a[data-play="1"] {
  border-radius: 12px !important;
}

/* ─── Live page stream controls ─── */
html.is-tv-mode .live-stream-group {
  background: rgba(251, 246, 239, 0.72);
  background: color-mix(in srgb, var(--theme-bg) 72%, transparent);
  border: 1px solid var(--theme-color-border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.is-tv-mode .live-stream-btn.is-active {
  background: var(--theme-color) !important;
  color: var(--theme-on-theme) !important;
  border-color: var(--theme-color-border-strong) !important;
}

/* ─── TV simplify: hide broken / heavy UI (Philips, Puffin, etc.) ─── */

/* Live nav red dot — polling badge breaks on TV browsers */
html.is-tv-mode [data-nav-live].is-stream-live::before,
html.is-tv-mode .mn-cat[data-nav-live].is-stream-live::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

html.is-tv-mode [data-nav-live].is-stream-live,
html.is-tv-mode .mn-cat[data-nav-live].is-stream-live,
html.is-tv-mode [data-nav-live].is-stream-live.header-fg {
  color: inherit !important;
}

html.is-tv-mode .nav-live-badge,
html.is-tv-mode .nav-live-label {
  display: none !important;
}

/* Home: calendar + day search (heavy JS, broken on TV) */
html.is-tv-mode #calendar-section,
html.is-tv-mode .calendar-band,
html.is-tv-mode .calendar-tail,
html.is-tv-mode #menu-global-search-box,
html.is-tv-mode #m-day-wrap {
  display: none !important;
}

/* Home: recommended carousel (hover overlays) */
html.is-tv-mode .midx-rec-box {
  display: none !important;
}

/* Home: popup overlay panels */
html.is-tv-mode #overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Home: scroll-following player dock (archive/library use slot when VOD plays) */
html.is-tv-mode body[data-calendar-base] #player-anchor,
html.is-tv-mode body[data-calendar-base] #player-sentinel,
html.is-tv-mode body[data-calendar-base] #player-home-slot:not(.twt-tv-vod-active) {
  display: none !important;
}

/* Archive / library VOD — same inline player path as live (native controls, proven on Android TV) */
html.is-tv-mode body.twt-tv-vod-open #player-home-slot {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: calc(var(--header-offset, 76px) + 10px) !important;
  left: 20px !important;
  right: 20px !important;
  z-index: 240000 !important;
  margin: 0 !important;
  max-height: calc(100vh - var(--header-offset, 76px) - 24px) !important;
  overflow: auto !important;
  background: var(--theme-bg, #fbf6ef) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

html.is-tv-mode body.twt-tv-vod-open #player-shell,
html.is-tv-mode body.twt-tv-vod-open #player-shell.hidden {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
}

html.is-tv-mode body.twt-tv-vod-open #media-player-root .tv-player-wrap {
  width: 100% !important;
  max-width: none !important;
  min-height: min(56.25vw, 520px) !important;
  height: min(56.25vw, 520px) !important;
  aspect-ratio: 16 / 9;
}

html.is-tv-mode #media-player-root .twt-tv-vod-head {
  margin-bottom: 10px;
  color: var(--theme-ink, #251e1b);
}

html.is-tv-mode #media-player-root .twt-tv-vod-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}

html.is-tv-mode #media-player-root .twt-tv-vod-meta {
  margin: 6px 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

html.is-tv-mode #media-player-root .tv-audio-wrap {
  aspect-ratio: auto;
  min-height: 72px;
}

/* ─── Simple TV VOD polish (body.stv-simple-vod) — inline dock, not floating popup ─── */
html.is-tv-mode body.stv-simple-vod.twt-tv-vod-open #player-home-slot {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 20 !important;
  margin: 18px auto 28px !important;
  max-width: min(960px, 96vw) !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-height: none !important;
}

html.is-tv-mode body.stv-simple-vod[data-calendar-base] #player-home-slot.twt-tv-vod-active {
  display: block !important;
}

html.is-tv-mode body.stv-simple-vod.twt-tv-vod-open #player-shell,
html.is-tv-mode body.stv-simple-vod.twt-tv-vod-open #player-shell.hidden {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
}

html.is-tv-mode body.stv-simple-vod #player-shell .mp-fab {
  display: none !important;
  pointer-events: none !important;
}

html.is-tv-mode body.stv-simple-vod .stv-vod-card {
  background: #1a1210;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 18px 20px 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38);
  color: #fbf6ef;
}

html.is-tv-mode body.stv-simple-vod .stv-vod-head {
  margin-bottom: 14px;
}

html.is-tv-mode body.stv-simple-vod .stv-vod-title {
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.25;
  color: #fbf6ef;
}

html.is-tv-mode body.stv-simple-vod .stv-vod-meta {
  margin: 8px 0 0;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1.4;
  opacity: 0.88;
  color: rgba(251, 246, 239, 0.92);
}

html.is-tv-mode body.stv-simple-vod .stv-vod-hint {
  margin: 10px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  opacity: 0.65;
  color: rgba(251, 246, 239, 0.8);
}

html.is-tv-mode body.stv-simple-vod .stv-vod-status {
  margin: 0 0 10px;
  font-size: 0.95rem;
  opacity: 0.9;
}

html.is-tv-mode body.stv-simple-vod .stv-vod-status[hidden] {
  display: none !important;
}

html.is-tv-mode body.stv-simple-vod .stv-vod-card .tv-player-wrap {
  width: 100% !important;
  max-width: none !important;
  min-height: min(52vw, 480px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

html.is-tv-mode body.stv-simple-vod .stv-vod-card .tv-audio-wrap {
  aspect-ratio: auto;
  min-height: 72px;
  height: auto;
}

html.is-tv-mode body.stv-simple-vod .stv-vod-card video,
html.is-tv-mode body.stv-simple-vod .stv-vod-card audio {
  width: 100%;
  display: block;
}

html.is-tv-mode body.stv-simple-vod .stv-vod-card video:focus,
html.is-tv-mode body.stv-simple-vod .stv-vod-card video:focus-visible,
html.is-tv-mode body.stv-simple-vod .stv-vod-card audio:focus,
html.is-tv-mode body.stv-simple-vod .stv-vod-card audio:focus-visible {
  outline: 3px solid var(--theme-color, #57301c);
  outline-offset: 3px;
}

/* Menu/home header — solid readable bar (simple TV only) */
html.is-tv-mode body.stv-simple-vod[data-calendar-base] #header-shell {
  background: var(--theme-bg, #fbf6ef) !important;
  border-bottom: 1px solid var(--theme-color-border, rgba(37, 30, 27, 0.14)) !important;
  box-shadow: 0 8px 22px rgba(87, 48, 28, 0.08) !important;
}

html.is-tv-mode body.stv-simple-vod[data-calendar-base] .header-fg,
html.is-tv-mode body.stv-simple-vod[data-calendar-base] .nav-link {
  color: var(--theme-ink, #251e1b) !important;
  text-shadow: none !important;
}

html.is-tv-mode body.stv-simple-vod[data-calendar-base] .brand-sub.header-fg {
  color: var(--theme-color, #57301c) !important;
  opacity: 1 !important;
}

html.is-tv-mode body.stv-simple-vod #site-header .brand-main {
  font-size: clamp(20px, 2.1vw, 28px) !important;
  letter-spacing: 0.14em !important;
}

html.is-tv-mode body.stv-simple-vod #site-header .brand-sub {
  font-size: clamp(11px, 1.4vw, 14px) !important;
  letter-spacing: 0.28em !important;
}

html.is-tv-mode body.stv-simple-vod #site-header .brand-wrap {
  max-width: min(72vw, 720px) !important;
  gap: 14px !important;
}

/* TV focus rings — simple TV */
html.is-tv-mode body.stv-simple-vod .js-midx-toggle:focus,
html.is-tv-mode body.stv-simple-vod .js-midx-toggle:focus-visible,
html.is-tv-mode body.stv-simple-vod [data-midx-group]:focus,
html.is-tv-mode body.stv-simple-vod [data-midx-group]:focus-visible,
html.is-tv-mode body.stv-simple-vod .m2-recommend-square:focus,
html.is-tv-mode body.stv-simple-vod .m2-recommend-square:focus-within,
html.is-tv-mode body.stv-simple-vod .midx-rec-card:focus,
html.is-tv-mode body.stv-simple-vod .midx-rec-card:focus-within {
  outline: 3px solid var(--theme-color, #57301c) !important;
  outline-offset: 4px !important;
}

html.is-tv-mode body.stv-simple-vod a[data-play="1"]:focus,
html.is-tv-mode body.stv-simple-vod a[data-play="1"]:focus-visible,
html.is-tv-mode body.stv-simple-vod .js-langfile:focus,
html.is-tv-mode body.stv-simple-vod .js-langfile:focus-visible,
html.is-tv-mode body.stv-simple-vod .twt-media-btn:focus,
html.is-tv-mode body.stv-simple-vod .twt-media-btn:focus-visible,
html.is-tv-mode body.stv-simple-vod .midx-file-btn:focus,
html.is-tv-mode body.stv-simple-vod .midx-file-btn:focus-visible {
  outline: 3px solid var(--theme-color, #57301c) !important;
  outline-offset: 3px !important;
}

/* Hero full-screen snap (blocks D-pad scroll on TV) */
html.is-tv-mode .hero-scroll-cue {
  display: none !important;
}

html.is-tv-mode .hero-wrap {
  min-height: auto !important;
  height: auto !important;
  max-height: min(42vh, 420px);
  position: relative !important;
}

html.is-tv-mode .hero-wrap .hero-media {
  position: absolute !important;
}

/* Blur filters are slow / broken on many TV browsers */
html.is-tv-mode .live-stream-group,
html.is-tv-mode .glass,
html.is-tv-mode [class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Archive list: no hover-reveal row chrome on TV */
html.is-tv-mode #archive-list .record.has-files.is-hover-open:not(.is-open) .icons {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* TV menu cards — text-only compact buttons, media row anchored inside card */
html.is-tv-mode .m2-rec-media,
html.is-tv-mode .m2-feature-media,
html.is-tv-mode .m03-featured-media,
html.is-tv-mode .midx-rec-overlay,
html.is-tv-mode .l03-rec-overlay {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px 16px !important;
}

html.is-tv-mode .m2-rec-media .midx-media-grid,
html.is-tv-mode .m2-feature-media .midx-media-grid,
html.is-tv-mode .m03-featured-media .midx-media-grid,
html.is-tv-mode .midx-rec-overlay .midx-media-grid,
html.is-tv-mode .l03-rec-overlay .midx-media-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

html.is-tv-mode .m2-rec-media .midx-file-btn,
html.is-tv-mode .m2-feature-media .midx-file-btn,
html.is-tv-mode .m03-featured-media .midx-file-btn,
html.is-tv-mode .midx-rec-overlay .midx-file-btn,
html.is-tv-mode .l03-rec-overlay .midx-file-btn,
html.is-tv-mode .midx-media-panel .midx-file-btn {
  width: auto !important;
  min-width: 56px !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
}

html.is-tv-mode .m2-recommend-square.is-open .m2-rec-hit {
  pointer-events: none !important;
}