/* brand-avatar.css — shared .bav component (window.BrandAvatar).
   Two clean, mutually exclusive states:
     • favicon loads  → show ONLY the favicon (initials + bg hidden)
     • favicon fails / none → show ONLY the initials circle (bg + letter)
   The initials live in a single .bav__initials layer so a loaded favicon
   can hide them wholesale — no gradient/letter bleeding through a
   transparent favicon. Size, colour and radius come from the helper as
   dynamic inline values; this file owns shape, layering and the reveal. */

.bav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-family: var(--fh, inherit);
  font-weight: 700;
  line-height: 1;
  user-select: none;
  vertical-align: middle;
  background: var(--bg); /* clean slot; always covered by initials or favicon */
}

/* Initials layer — background tint + letter as ONE unit, so favicon-load
   can hide both at once (display:none). Absolute-filled, no layout shift. */
.bav__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bav__letter {
  font-size: 1em;
  line-height: 1;
}

.bav__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg); /* transparent favicons render on white, not the tint */
  opacity: 0;
  transition: opacity 0.18s ease;
}

.bav__img--loaded {
  opacity: 1;
}

/* Favicon loaded → show ONLY the favicon. Hiding the whole initials layer
   (bg + letter) is what fixes the overlap: nothing shows behind a
   transparent favicon. On error the helper drops the <img> and removes
   this class, so the initials layer returns as the fallback. */
.bav--has-favicon .bav__initials {
  display: none;
}