/* The SAME visible annotation on photo.php, admin/photo-tags.php and player/tags.php.
   The stored percentage coordinate refers to the CENTER of the pill. */
.photo-player-tag{
  box-sizing:border-box;position:absolute;z-index:2;
  transform:translate(-50%,-50%);
  background:rgba(7,16,22,.94);border:2px solid #78fa43;
  border-radius:12px;padding:5px 10px;color:#fff;
  font-family:Inter,Arial,sans-serif;font-size:12px;font-weight:700;
  line-height:1.3;white-space:nowrap;text-decoration:none;
  max-width:90%;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 2px 7px rgba(0,0,0,.24);
}
a.photo-player-tag:hover,a.photo-player-tag:focus{background:#78fa43;color:#071016}
.photo-player-tag--preview{pointer-events:none}
.photo-player-tag--existing{pointer-events:none}
.photo-tagger-frame{position:relative;display:inline-block;max-width:100%;vertical-align:top;cursor:crosshair;line-height:0;touch-action:manipulation}
.photo-tagger-frame>img{display:block;width:auto;height:auto;max-width:100%;max-height:70vh;line-height:normal}
.photo-tagger-frame>.photo-player-tag{line-height:1.3}
.photo-tagger-frame>.photo-player-tag[hidden]{display:none!important}
.tag-editor-hint{font-size:14px;line-height:1.5;color:#525f67;max-width:780px}
/* Consistent positions on the published photo, including responsive images. */
.tagged-image>img{max-width:100%;height:auto}
@media(max-width:500px){.photo-player-tag{font-size:10px;padding:3px 6px;border-width:1.5px;border-radius:9px}}