/* Home event artwork must fit its actual frame, including compact TV rails.
   A grid item's intrinsic image width and fixed fallback badges must never
   determine the size of the artwork. Provider covers stay fully visible. */
#app .home-live-card-art { min-width: 0; overflow: hidden; }
#app .home-live-card-art > img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  box-sizing: border-box; padding: 6px; background: #080a0d;
  object-fit: contain !important; object-position: center !important; transform: none !important;
}
/* Preserve the cover's edge text inside rounded corners and the focus frame.
   The provider already composed its artwork; a vignette must not hide it. */
#app .home-live-card-art > img ~ .home-live-art-shade { background: none; }
/* Pointer controls live beside the viewport, never on top of a cover's ends.
   Small screens and remote APKs hide these arrows and keep the full width. */
@media (min-width: 761px) {
  html:not(.blackeye-fire-tv) #app .home-live-carousel-shell { padding-inline: 38px; box-sizing: border-box; }
  html:not(.blackeye-fire-tv) #app .home-live-carousel-arrow.is-previous { left: 0; }
  html:not(.blackeye-fire-tv) #app .home-live-carousel-arrow.is-next { right: 0; }
}
#app .home-live-identity {
  min-width: 0; min-height: 0; overflow: hidden;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
#app .home-live-identity img {
  display: block; width: 100%; height: 100%; min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%; padding: 3px; box-sizing: border-box;
  object-fit: contain; object-position: center; transform: none;
}
#app .home-live-identity b {
  width: min(72px, 100%); height: min(72px, 100%);
  min-width: 0; min-height: 0; font-size: clamp(10px, 2vw, 20px);
}
#app .home-live-art-fallback {
  top: 18%; width: 36%; height: 60%; max-width: 72px; max-height: 72px;
  font-size: clamp(12px, 2vw, 24px);
}
@media (max-height: 439px) {
  /* Compact TV rows need a separate label band: badges must not mask text
     already printed in a wide provider cover. Keep the remaining image whole. */
  html.blackeye-apk-shell.blackeye-tv-two-rails #app .home-live-card-art > img { padding: 18px 6px 4px !important; }
  html.blackeye-apk-shell.blackeye-tv-two-rails #app .home-live-art-time,
  html.blackeye-apk-shell.blackeye-tv-two-rails #app .home-live-art-category {
    top: 2px !important; padding: 2px 3px !important; font-size: 6px !important; line-height: 8px;
  }
  html.blackeye-tv-two-rails #app .home-live-identity { top: 44%; height: 50%; }
  html.blackeye-tv-two-rails #app .home-live-art-fallback { top: 44%; height: 50%; }
  html.blackeye-tv-two-rails #app .home-live-versus { top: 69%; width: 24px; height: 24px; font-size: 7px; }
}

/* Remote compatibility for installed APKs predating bundled agenda thumbnails. */
/* APK agenda: small uncropped artwork between device-local time and event. */
html.blackeye-apk-shell #app .is-apk-event-guide .live-events-epg-header,
html.blackeye-apk-shell #app .is-apk-event-guide .live-event-row {
  grid-template-columns: 94px 88px minmax(0,1fr) 102px 32px;
  gap: 12px; padding-left: 12px; padding-right: 12px;
}
html.blackeye-apk-shell #app .live-event-thumb {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 88px; height: 50px; min-width: 0; overflow: hidden;
  border-radius: 6px; background: #ffffff0a; pointer-events: none;
}
html.blackeye-apk-shell #app .live-event-thumb img {
  display: block; flex: 1 1 0; min-width: 0; width: 0; max-width: 100%;
  height: 100%; object-fit: contain; object-position: center;
}
html.blackeye-apk-shell #app .live-event-thumb img[hidden] { display: none; }
html.blackeye-apk-shell #app .is-apk-event-guide .live-event-time { grid-column: 1; grid-row: 1; }
html.blackeye-apk-shell #app .is-apk-event-guide .live-event-thumb { grid-column: 2; grid-row: 1; }
html.blackeye-apk-shell #app .is-apk-event-guide .live-event-info { min-width: 0; grid-column: 3; grid-row: 1; }
html.blackeye-apk-shell #app .is-apk-event-guide .live-event-status { grid-column: 4; grid-row: 1; }
html.blackeye-apk-shell #app .is-apk-event-guide .live-event-play { width: 30px; height: 30px; grid-column: 5; grid-row: 1; }
html.blackeye-apk-shell #app .is-apk-event-guide .live-event-row:focus {
  outline-offset: -3px !important; opacity: 1;
}
@media (max-width: 760px) {
  html.blackeye-apk-shell #app .is-apk-event-guide .live-events-epg-header,
  html.blackeye-apk-shell #app .is-apk-event-guide .live-event-row {
    grid-template-columns: 66px 56px minmax(0,1fr) 26px;
    gap: 6px; padding-left: 8px; padding-right: 8px;
  }
  html.blackeye-apk-shell #app .is-apk-event-guide .live-events-epg-header > :nth-child(4) { display: none; }
  html.blackeye-apk-shell #app .is-apk-event-guide .live-event-thumb { grid-column: 2; grid-row: 1 / 3; width: 56px; height: 40px; }
  html.blackeye-apk-shell #app .is-apk-event-guide .live-event-time { grid-column: 1; grid-row: 1 / 3; }
  html.blackeye-apk-shell #app .is-apk-event-guide .live-event-info { grid-column: 3; grid-row: 1; }
  html.blackeye-apk-shell #app .is-apk-event-guide .live-event-status { grid-column: 3; grid-row: 2; justify-self: start; }
  html.blackeye-apk-shell #app .is-apk-event-guide .live-event-play { grid-column: 4; grid-row: 1 / 3; width: 24px; height: 24px; }
  html.blackeye-apk-shell #app .is-apk-event-guide .live-event-time strong { font-size: 18px; }
  html.blackeye-apk-shell #app .is-apk-event-guide .live-event-info strong { font-size: 13px; }
}

body.theme-blackeye .content-grid.live-folders .live-folder.has-blackeye-art.is-events .live-folder-art,
body.theme-blackeye .content-grid.live-folders .live-folder.has-blackeye-art.is-channel-guide .live-folder-art {
  background-color: #1d1d1d;
  background-image: var(--blackeye-art) !important;
  background-position: center center !important;
  background-size: cover !important;
}

@media (max-width: 760px) {
  body.theme-blackeye .content-grid.live-folders .live-folder.has-blackeye-art.is-events .live-folder-art,
  body.theme-blackeye .content-grid.live-folders .live-folder.has-blackeye-art.is-channel-guide .live-folder-art {
    background-position: center center !important;
  }
}

/* All clients: accessible event-type picker beside MultiView. */
#app .live-events-toolbar { flex-wrap: wrap; }
#app .live-events-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; max-width: 100%; }
#app .live-events-type-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 100%; color: #e6d8b4; font-size: 11px; }
#app .live-events-type-filter select {
  width: 190px; max-width: 100%; min-height: 42px; padding: 8px 30px 8px 12px;
  border: 1px solid #d5b15b66; border-radius: 10px; background: #11151c; color: #fff;
  font: inherit; font-size: 14px; text-overflow: ellipsis; cursor: pointer; color-scheme: dark;
}
#app .live-events-type-filter select:focus-visible { outline: 2px solid #f5d878; outline-offset: 2px; }
@media(max-width: 600px) {
  #app .live-event-time { min-width: 0; }
  #app .live-event-time strong { font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; }
  #app .live-events-actions { width: 100%; }
  #app .live-events-type-filter { flex: 1 1 130px; }
  #app .live-events-type-filter select { width: 100%; }
  #app .live-events-actions > button { flex: 0 0 auto; }
}