/* Profile photos inside the round name-letter avatars (see js/photos.js).
   The photo sits on top of the letters; if it cannot load it removes itself
   and the letters stay. */
.photo-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
  display: block;
}

/* the verified seal stays above the photo */
.header-sub-badge,
.profile-sub-badge,
.admin-sub-badge {
  z-index: 2;
}

/* a round avatar showing a photo (or the Urban Tutor Site logo) has no border or ring round it */
.has-photo {
  border: 0 !important;
  box-shadow: none !important;
  /* the circle's own colour (behind the letters) peeped out round the picture's edge */
  background: transparent !important;
}

/* the letters shown till the photo comes (a slow connection): on a colour of their own, not the page's (indigo, or the
   circle's own --av / --av-ink - the home page's tutors) - it stops just inside the circle, so nothing of it peeps out
   round the photo's edge once the photo is there */
.has-photo,
.sp-av:has(> .photo-fill) {
  background: radial-gradient(circle closest-side, var(--av, #4f46e5) calc(100% - 2px), transparent calc(100% - 1px)) !important;
  color: var(--av-ink, #ffffff) !important;
}
.sp-av:has(> .photo-fill) .sp-av-letters { color: #ffffff; }

/* a tutor with no photo: the site's logo on black (dark mode: green and silver) or on white (light mode: green and black) */
html[data-theme="light"] img[src*="tutor-avatar.png"] { content: url("/brand/tutor-avatar-light.png?v=3"); }