/* Stored profile pictures, contact photos and company logos.

   Loaded from base.html rather than a per-page sheet: avatars render in the
   rail, the popup, settings, profile, the contacts table and
   the pipeline cards, which sit across both the arena chrome and the legacy
   chrome. A per-page sheet would have to be linked from a dozen templates and
   would be forgotten on the thirteenth.

   The contract with templates/partials/_avatar.html: the host element carries
   `.has-photo`, and its last child is `img.da-av-photo`. Everything here keys
   off those two, so it works on any host — .da-me-av, .da-um-av, .set-av,
   .pf-av, .cc-av, .co-logo, .clogo, .wm-av — without naming them. */

.da-av-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit high in a portrait; a centred crop cuts foreheads. Matches the
     object-position portraitHTML() already uses elsewhere. */
  object-position: 50% 20%;
  display: block;
  border-radius: inherit;
}

/* The photo covers the initials rather than replacing them, so a broken or
   still-loading image reveals the fallback underneath with no JS. */
.has-photo > .da-me-liquid { display: none; }

/* .da-me-av animates a gradient "liquid glow" as the empty-state affordance.
   With a real photo there is nothing to glow about, and the pulse reads as a
   loading state that never resolves. */
.has-photo { animation: none !important; }

/* Company logos are usually wordmarks on a transparent or white field, and
   cropping them square eats the mark. `contain` on a logo host, `cover` on a
   face host. Set by the caller passing cls="... is-logo". */
.has-photo.is-logo > .da-av-photo {
  object-fit: contain;
  object-position: 50% 50%;
  background: #fff;
}

/* A photo whose fetch failed. static/js/avatar.js sets this on the capture
   phase, because `error` does not bubble. */
.da-av-photo.is-broken { display: none; }