/* ============================================================
   Phase 50.2 — Member profile avatar rendering hotfix
   Keeps uploaded photos circular and prevents rectangular/oval stretching.
   ============================================================ */

/* Shared avatar shell */
.phase501-header-avatar,
.phase501-public-avatar,
.phase501-mobile-profile{
  box-sizing:border-box!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
  padding:0!important;
  line-height:1!important;
}

/* Every member-profile photo must fill a square crop, never inherit button/image dimensions. */
.phase501-header-avatar img,
.phase501-public-avatar img,
.phase501-mobile-profile img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:50%!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  transform:none!important;
}

/* Desktop member-header profile chip */
.phase501-header-profile{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  min-height:46px!important;
  padding:5px 13px 5px 6px!important;
  border-radius:15px!important;
}
.phase501-header-profile .phase501-header-avatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  flex-basis:36px!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 2px rgba(0,153,255,.32)!important;
  background:linear-gradient(135deg,#0099FF,#0079c8)!important;
}
.phase501-header-profile .phase501-header-avatar b{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  color:#fff!important;
  font:900 10px/1 "Montserrat",sans-serif!important;
}

/* Public-site signed-in avatar */
.phase501-public-avatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  flex-basis:36px!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 2px rgba(0,153,255,.30)!important;
  background:linear-gradient(135deg,#0099FF,#0079c8)!important;
}

/* Member Portal mobile avatar: force a true circle, not an oval. */
.phase501-mobile-profile{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  max-width:46px!important;
  max-height:46px!important;
  flex-basis:46px!important;
  justify-self:end!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 3px rgba(0,153,255,.27),0 6px 16px rgba(15,23,42,.12)!important;
  background:#fff!important;
}
.phase501-mobile-profile span{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,#0099FF,#0079c8)!important;
  color:#fff!important;
  font:900 12px/1 "Montserrat",sans-serif!important;
}

/* Keep the small orange add-photo badge outside the circular crop. */
.phase501-header-avatar i,
.phase501-public-avatar i,
.phase501-mobile-profile i{
  position:absolute!important;
  right:-3px!important;
  bottom:-3px!important;
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  border-radius:50%!important;
  border:2px solid #fff!important;
  background:#FF9900!important;
  color:#111827!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  font:900 10px/1 Arial,sans-serif!important;
}

/* The mobile profile anchor needs visible overflow only for the + badge.
   The actual image remains clipped by a nested circle rule below. */
.phase501-mobile-profile{
  overflow:visible!important;
}
.phase501-mobile-profile img,
.phase501-mobile-profile span{
  overflow:hidden!important;
  clip-path:circle(50% at 50% 50%)!important;
}

/* Remove any legacy global image height rules from the profile chip. */
.portal-header-profile img,
.member-portal-mobilebar img{
  object-fit:cover!important;
}

/* Responsive sizing: smaller phones stay neat. */
@media(max-width:420px){
  .phase501-mobile-profile{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    max-width:42px!important;
    max-height:42px!important;
    flex-basis:42px!important;
  }
  .phase501-public-avatar{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    flex-basis:34px!important;
  }
}