/* Presentation only: selectors also support the already-published React bundle. */
main.cueplay-page-enter:has(#my-list-panel) [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: .75rem;
  margin-top: 2.5rem;
}
main.cueplay-page-enter:has(#my-list-panel) [role="tablist"] > button {
  padding: .5rem 0 1rem;
  min-height: 44px;
}
/* Do not stretch a sparse result set to fill the whole desktop row. */
main.cueplay-page-enter:has([role="search"]) .grid:has(> .cueplay-hover-card) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
main.cueplay-page-enter:has(#my-list-panel) #my-list-panel > .grid:has(> article) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px) {
  main.cueplay-page-enter:has(#my-list-panel) #my-list-panel > .grid:has(> article) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  main.cueplay-page-enter:has([role="search"]) .grid:has(> .cueplay-hover-card) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  main.cueplay-page-enter:has(#my-list-panel) #my-list-panel > .grid:has(> article) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  main.cueplay-page-enter:has([role="search"]) .grid:has(> .cueplay-hover-card) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  main.cueplay-page-enter:has(#my-list-panel) #my-list-panel > .grid:has(> article) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {
  main.cueplay-page-enter:has([role="search"]) .grid:has(> .cueplay-hover-card) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* Resume cards intentionally remain landscape, with their own column count. */
main.cueplay-page-enter:has(#my-list-panel) #my-list-panel > .grid:has(.aspect-video) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  main.cueplay-page-enter:has(#my-list-panel) #my-list-panel > .grid:has(.aspect-video) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  main.cueplay-page-enter:has(#my-list-panel) #my-list-panel > .grid:has(.aspect-video) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
:is(main.cueplay-page-enter:has([role="search"]), main.cueplay-page-enter:has(#my-list-panel), main.cueplay-page-enter[class~="min-h-[75vh]"], section.cueplay-page-enter:has(input[aria-label="Buscar películas y series"])) {
  --library-ease: cubic-bezier(.22, 1, .36, 1);
}
:is(main:has([role="search"]), main:has(#my-list-panel), main[class~="min-h-[75vh]"], section.cueplay-page-enter:has(input[aria-label="Buscar películas y series"])) :is(.cueplay-hover-card, article.snap-start) {
  transition: transform 280ms var(--library-ease), box-shadow 280ms ease;
}
:is(main:has([role="search"]), main:has(#my-list-panel), main[class~="min-h-[75vh]"], section.cueplay-page-enter:has(input[aria-label="Buscar películas y series"])) :is(.cueplay-hover-card, article.snap-start) img {
  transition: transform 450ms var(--library-ease);
}
@keyframes cueplay-library-arrive {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(main:has([role="search"]), main:has(#my-list-panel), main[class~="min-h-[75vh]"], section.cueplay-page-enter:has(input[aria-label="Buscar películas y series"])) :is(.cueplay-hover-card, article.snap-start) {
    animation: cueplay-library-arrive 420ms var(--library-ease) both;
  }
  :is(main:has([role="search"]), main:has(#my-list-panel), main[class~="min-h-[75vh]"], section.cueplay-page-enter:has(input[aria-label="Buscar películas y series"])) :is(.cueplay-hover-card, article.snap-start):nth-child(2n) { animation-delay: 35ms; }
  :is(main:has([role="search"]), main:has(#my-list-panel), main[class~="min-h-[75vh]"], section.cueplay-page-enter:has(input[aria-label="Buscar películas y series"])) :is(.cueplay-hover-card, article.snap-start):nth-child(3n) { animation-delay: 70ms; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(main:has([role="search"]), main:has(#my-list-panel), main[class~="min-h-[75vh]"], section.cueplay-page-enter:has(input[aria-label="Buscar películas y series"])) :is(.cueplay-hover-card, article.snap-start):is(:hover, :focus-within) {
    transform: translateY(-4px);
  }
  :is(main:has([role="search"]), main:has(#my-list-panel)) .cueplay-hover-card:is(:hover, :focus-within) img { transform: scale(1.035); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  :is(main:has([role="search"]), main:has(#my-list-panel), main[class~="min-h-[75vh]"], section.cueplay-page-enter:has(input[aria-label="Buscar películas y series"])) :is(.cueplay-hover-card, article.snap-start):active { transform: scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  :is(main:has([role="search"]), main:has(#my-list-panel), main[class~="min-h-[75vh]"], section.cueplay-page-enter:has(input[aria-label="Buscar películas y series"])) :is(.cueplay-hover-card, article.snap-start, .cueplay-hover-card img, article.snap-start img) {
    animation: none;
    transition: none;
    transform: none;
    translate: none;
  }
}