/* sl-avatar: one person tile, used on every surface that shows a human.
 *
 * The photo is a LAYER PAINTED OVER the initials, never a replacement for them.
 * That ordering is the whole point:
 *
 *   - most people have not uploaded anything, and never will, so the no-photo
 *     case is the common case and has to keep looking finished rather than
 *     degrading to a grey silhouette;
 *   - while the image is in flight the gradient and initials are already there,
 *     so a roster does not flash a row of empty holes on every navigation;
 *   - if the fetch 404s (no photo, or a viewer who may not see this one, or a
 *     GCS hiccup) the <img> removes itself and what is underneath is correct
 *     already. No error state to design, no layout shift either way.
 *
 * Sizes come through the --sl-av-size custom property so one class covers the
 * 28px combobox row and the 64px profile header without a variant per size.
 * Colours reuse the --rt-avatar-* tokens from btn-brand.css, which is what the
 * existing .tenant-avatar tiles already use, so a photo tile and an initials
 * tile sitting in the same row are visibly the same component. */

.sl-av {
  --sl-av-size: 42px;
  --sl-av-radius: calc(var(--sl-av-size) * 0.31);
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  width: var(--sl-av-size);
  height: var(--sl-av-size);
  border-radius: var(--sl-av-radius);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--sl-av-size) * 0.31);
  line-height: 1;
  letter-spacing: .01em;
  user-select: none;
  background: var(--rt-avatar-1, linear-gradient(135deg, #8C6CFF, #6A9EFF));
  box-shadow: var(--rt-avatar-shadow, 0 5px 12px -5px rgba(15, 23, 42, .35));
}

.sl-av[data-variant="1"] { background: var(--rt-avatar-2, linear-gradient(135deg, #6A9EFF, #48E2D9)); }
.sl-av[data-variant="2"] { background: var(--rt-avatar-3, linear-gradient(135deg, #7C82FF, #A66BFF)); }
.sl-av[data-variant="3"] { background: var(--rt-avatar-4, linear-gradient(135deg, #2FBFD4, #48E2D9)); }
.sl-av[data-variant="4"] { background: var(--rt-avatar-5, linear-gradient(135deg, #5B8DEF, #48C6D9)); }

/* Round rather than squircle, for message threads and anywhere the surrounding
   UI already uses circles. */
.sl-av.is-round { --sl-av-radius: 9999px; }

.sl-av-ini {
  position: relative;
  z-index: 0;
}

.sl-av-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A portrait is nearly always centred slightly high; without this a head is
     cropped at the forehead in the small sizes. */
  object-position: center 30%;
  display: block;
  /* NO background here, deliberately. `background: inherit` looks harmless and
     is not: an image that has not loaded yet, or has failed, still occupies the
     layer above the initials, so it painted an opaque gradient rectangle over
     them. The tile then read as a blank coloured square rather than as
     initials, which is exactly the "grey silhouette" failure this component
     exists to avoid. Transparent means the initials show until real pixels
     arrive, and keep showing if they never do. Caught by driving the page with
     a photo path that 404s, which is also the everyday case for a lazy image
     still below the fold. */
}

/* Overlapping row of household members. The ring is the page background, so it
   reads as separation rather than as a border on the tile. */
.sl-av-stack { display: inline-flex; align-items: center; }
.sl-av-stack .sl-av { margin-left: -10px; border: 2.5px solid #fff; box-shadow: none; }
.sl-av-stack .sl-av:first-child { margin-left: 0; }

@media (prefers-reduced-motion: no-preference) {
  .sl-av-img { animation: sl-av-fade .18s ease-out both; }
  @keyframes sl-av-fade { from { opacity: 0 } to { opacity: 1 } }
}