/* Watch On — streaming service pills + editor (js/watch-on.js) */
@layer features {

/* Service tile: the official square app icon (TMDB/JustWatch), as-is. */
.vc-watchon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; cursor: pointer; overflow: hidden; line-height: 1;
  border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: #000;
  box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: transform .15s, border-color .15s;
}
.vc-watchon:hover { transform: translateY(-1px); border-color: var(--gold); }
.vc-watchon--tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-watchon--unset {
  background: rgba(5,4,7,.78); font-size: 0.875rem; color: var(--fog); border-style: dashed;
}

/* On a ritual card: bottom-left of the poster */
.ritual-card-poster-wrap .vc-watchon-slot { position: absolute; left: 7px; bottom: 7px; z-index: 3; }
.ritual-card-poster-wrap .vc-watchon--unset { opacity: 0; transition: opacity .15s; }
.ritual-card:hover .vc-watchon--unset, .ritual-card:focus-within .vc-watchon--unset { opacity: 1; }

.vc-watchon-attrib {
  font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 1px; color: var(--dust);
  margin-top: 0.75rem; opacity: .8;
}
.vc-watchon-attrib a { color: var(--fog); }

/* Editor */
.vc-watchon-backdrop {
  position: fixed; inset: 0; z-index: var(--z-popup-low); display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0,0,0,.65); backdrop-filter: blur(3px);
}
.vc-watchon-panel {
  width: 100%; max-width: 36rem; max-height: 90vh; overflow-y: auto; box-sizing: border-box;
  background: var(--deep); border: 1px solid var(--border); border-radius: var(--radius); color: var(--static);
}
.vc-watchon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.125rem 1.25rem 0.5rem; }
.vc-watchon-eyebrow { font-family: var(--font-vhs); font-size: 0.625rem; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.vc-watchon-title { font-family: var(--font-header); font-size: 1.125rem; margin-top: 0.25rem; }
.vc-watchon-x { background: transparent; border: 1px solid var(--border); color: var(--fog); border-radius: 50%; width: 2rem; height: 2rem; cursor: pointer; }
.vc-watchon-body { padding: 0.5rem 1.25rem 0.25rem; }
.vc-watchon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; }
.vc-watchon-opt-logo { width: 2.5rem; height: 2.5rem; border-radius: 8px; object-fit: cover; }
.vc-watchon-opt-ico { font-size: 1.375rem; line-height: 2.5rem; height: 2.5rem; color: var(--gold); }
.vc-watchon-opt-sub { font-family: var(--font-vhs); font-size: 0.625rem; color: var(--dust); letter-spacing: .5px; }
.vc-watchon-delays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.vc-watchon-actions { display: flex; justify-content: flex-end; gap: 0.625rem; padding: 0.875rem 1.25rem 1.125rem; border-top: 1px solid var(--border); margin-top: 0.75rem; }
@media (max-width: 30rem) { .vc-watchon-delays { grid-template-columns: repeat(2, 1fr); } }

} /* end @layer features */