/* Sync changes the material of the existing corner badge, not its geometry. */
.has-media-availability {
  --availability-local: #d9f45b;
  --availability-network: #f3b35a;
  --availability-ink: #11140e;
  --availability-paper: #f0f3e9;
  --availability-edge: color-mix(in srgb, var(--availability-paper) 34%, transparent);
  --availability-glow: transparent;
  --availability-mark: color-mix(in srgb, var(--availability-paper) 65%, var(--availability-ink));
  --availability-fill: var(--availability-ink);
}
.has-media-availability:has(> .media-availability[data-state="available"]) {
  --availability-edge: var(--availability-local);
  --availability-glow: color-mix(in srgb, var(--availability-local) 40%, transparent);
  --availability-mark: var(--availability-local);
  --availability-fill: color-mix(in srgb, var(--availability-local) 17%, var(--availability-ink));
}
.has-media-availability:has(> .media-availability[data-state="behind"]) {
  --availability-edge: var(--availability-network);
  --availability-glow: color-mix(in srgb, var(--availability-network) 40%, transparent);
  --availability-mark: var(--availability-network);
  --availability-fill: color-mix(in srgb, var(--availability-network) 17%, var(--availability-ink));
}
.media-availability {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  color: var(--availability-edge);
  pointer-events: none;
}
.media-availability::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 5px var(--availability-glow);
}
/* Unbadged covers use only a glint on their existing top edge. */
.has-media-availability:has(> :is(.pc__badge, .timeline-card__watch-badge, .timeline-card__watch-dot, .watched-info)) > .media-availability::before {
  content: none;
}
.idx-home .has-media-availability:has(> .media-availability) > :is(.pc__badge, .timeline-card__watch-badge) {
  border-color: var(--availability-edge);
  background: var(--availability-fill);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--availability-edge) 32%, transparent), 0 0 5px var(--availability-glow);
}
.idx-home .has-media-availability:has(> .media-availability) > .timeline-card__watch-dot {
  background: var(--availability-mark);
  box-shadow: 0 0 0 1px var(--availability-edge), 0 0 5px var(--availability-glow);
}
@media (min-width: 769px) {
  .library-page--v3 .poster-item.has-media-availability::after {
    border-top-color: var(--availability-edge);
    color: var(--availability-paper);
    background: var(--availability-fill);
    box-shadow: inset 0 0 0 1px var(--availability-edge), 0 0 5px var(--availability-glow);
  }
  .library-page--v3 .poster-item.has-media-availability > .poster-rank {
    border-color: var(--availability-edge);
    color: var(--availability-paper);
    background: var(--availability-fill);
    box-shadow: inset 0 1px 0 var(--availability-edge);
  }
}
.library-page:not(.library-page--v3) .poster-item.has-media-availability > .watched-info {
  border-color: var(--availability-edge);
  background: var(--availability-fill);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--availability-edge) 32%, transparent), 0 0 5px var(--availability-glow);
}
.library-page .poster-item.has-poster-rank > .poster-rank { top: 8px; left: 8px; right: auto; }
.library-page--v3 .poster-item.has-poster-rank::after { display: none; }

/* The lid owns the light, so it follows the case and disappears with its face. */
.idx-home .hero3__case-cover-face > .media-availability { opacity: 0; }
.idx-home .hero3[data-hero-intro="ready"] .hero3__case-cover-face > .media-availability { opacity: 1; }
@media (max-width: 768px) {
  .library-page .poster-item.has-media-availability > .watched-info {
    border-color: var(--availability-edge);
    background: var(--availability-fill);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--availability-edge) 32%, transparent), 0 0 5px var(--availability-glow);
  }
  .library-page .poster-item.has-poster-rank > .poster-rank { left: auto; right: 8px; }
  .idx-home .idx-section--updates .sec-hd__more { flex-shrink: 0; white-space: nowrap; }
}