/* ============================================================================
 * COMPONENT — Avatar
 * ----------------------------------------------------------------------------
 * Renderer: shared/components/avatar.php
 *
 * Falls back to the person's initial on a tinted background, which is the
 * common case: most profiles have no photo when they are first created, and an
 * empty grey circle makes a directory look abandoned.
 * ========================================================================== */

.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: var(--font-latin);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1;
  user-select: none;

  /* NO overflow:hidden here.
   *
   * It was the obvious way to clip a photo into the circle, but it also clips
   * the verification badge, which deliberately sits half outside the rim — the
   * tick came out sliced in half. The photo is clipped by its own border-radius
   * instead, which leaves the badge free to overhang. */
}

.avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* inherit, not --r-full: it follows the square variant too. */
  border-radius: inherit;
}

.avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--fs-xs); }
.avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--fs-xl); }
.avatar--xl { inline-size: 96px; block-size: 96px; font-size: var(--fs-3xl); }

/* Square variant for an institution — an organisation is not a person, and the
   shape says so before the label does. */
.avatar--square { border-radius: var(--r-md); }

/* -- verification tick -----------------------------------------------------
 * Sits on the bottom-trailing rim, overhanging it slightly, with a ring in the
 * surface colour so it reads as a separate object rather than a smudge on the
 * photo. z-index keeps it above the image.
 *
 * It scales with the avatar: a badge fixed at one size is either invisible on a
 * 96px profile header or swamps a 28px row in a list.
 * ----------------------------------------------------------------------- */

.avatar__check {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--brand-on);
  border: 2px solid var(--surface);
  box-shadow: var(--sh-1);
}

/* Corner-flush, with no transform.
 *
 * The badge's centre then lands at distance √2·(d/2 − b/2) from the avatar's
 * centre, for diameter d and badge size b. At the largest size that is exactly
 * on the rim; at the smaller sizes, where the badge is proportionally bigger,
 * it sits a few pixels inside it. Both read correctly and the badge is fully
 * visible either way — which is the point, since the earlier version had it
 * sliced in half by the container's overflow.
 *
 * Nothing here needs mirroring for RTL: inset-inline-end flips on its own, and
 * there is no transform to undo. */

/* A square avatar has a real corner there, so the badge is pulled inside a
   little rather than floating off the point. */
.avatar--square .avatar__check {
  inset-block-end: -3px;
  inset-inline-end: -3px;
}

.avatar__check .icon {
  inline-size: 9px;
  block-size: 9px;
  stroke-width: 3.5;
}

.avatar--sm .avatar__check {
  inline-size: 13px;
  block-size: 13px;
  border-width: 1.5px;
}

.avatar--sm .avatar__check .icon {
  inline-size: 7px;
  block-size: 7px;
}

.avatar--lg .avatar__check {
  inline-size: 20px;
  block-size: 20px;
}

.avatar--lg .avatar__check .icon {
  inline-size: 11px;
  block-size: 11px;
}

.avatar--xl .avatar__check {
  inline-size: 28px;
  block-size: 28px;
  border-width: 3px;
}

.avatar--xl .avatar__check .icon {
  inline-size: 15px;
  block-size: 15px;
}

/* -- with a name beside it ------------------------------------------------- */

.avatar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-inline-size: 0;
}

.avatar-row__text { min-inline-size: 0; }

.avatar-row__name {
  /* Holds text a USER typed, which may be Urdu or Arabic on a page laid out
     left-to-right. Isolating it keeps the layout from flipping while letting
     the script itself read correctly — see .ugc in base.css. */
  unicode-bidi: isolate;

  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-row__meta {
  /* Holds text a USER typed, which may be Urdu or Arabic on a page laid out
     left-to-right. Isolating it keeps the layout from flipping while letting
     the script itself read correctly — see .ugc in base.css. */
  unicode-bidi: isolate;

  font-size: var(--fs-sm);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}