/* ============================================================================
   v0.8.4.0 - drawn pet art (PetGlyph.razor, wwwroot/img/pet).

   ONE rule sizes every surface. The art replaces an emoji that was always sized
   by font-size on its wrapper - 23px in the phone top bar, 28px on desktop, 44px
   on the profile card, 52px in the day-recap dialog - so the image is sized in em
   and simply inherits whatever that wrapper already said. Nothing per-site, and a
   new render site needs no CSS here at all.

   The wrappers keep their own classes, animations and handlers: .pet-emoji still
   scales on hover, .pet-card-emoji still bobs, .pet-emoji-away still dims. That is
   why PetGlyph renders the glyph alone and never its own container.
   ============================================================================ */

.pet-art {
    /* 1em, not a pixel size: the wrapper's font-size is the single dial. */
    width: 1em;
    height: 1em;
    /* The sources are square with transparent margins; contain keeps them honest
       if a future stage ships a non-square drawing. */
    object-fit: contain;
    /* inline-block so it sits on the text baseline where the emoji used to, rather
       than dropping to the bottom of the line box. */
    display: inline-block;
    vertical-align: middle;
    /* An emoji cannot be dragged out of the page; the image could, and dragging the
       pet off the top bar is not a feature. */
    user-select: none;
}