.ks-avatar,
.ks-avatar-ring,
.realtime-hit-feed__avatar,
.story-profile-badge-wrap,
.story-profile-map .story-map-popup__person-photo,
.account-profile-avatar-link.is-photo-hidden,
.account-profile-avatar,
.profile-avatar,
.profile-fb-avatar,
.bill-add-shell-preview-card__avatar,
.bill-detail-shell-story-card__avatar,
.ks-admin-user__avatar,
.send-person-avatar {
  --ks-avatar-size: var(--ks-avatar-module-size, 50px);
  --ks-avatar-ring-width: clamp(
    var(--ks-avatar-ring-min, 2px),
    calc(var(--ks-avatar-size) * var(--ks-avatar-ring-ratio, 0.04)),
    var(--ks-avatar-ring-max, 4px)
  );
  --ks-avatar-shadow-color: rgba(15, 23, 42, 0.2);
  --ks-avatar-shadow-outline: rgba(100, 116, 139, 0.2);
  border: var(--ks-avatar-ring-width) solid var(--ks-avatar-ring-color, #ffffff);
  border-radius: 50%;
  box-shadow:
    0 calc(var(--ks-avatar-size) * var(--ks-avatar-shadow-y-ratio, 0.035))
      calc(var(--ks-avatar-size) * var(--ks-avatar-shadow-blur-ratio, 0.1))
      var(--ks-avatar-shadow-color, rgba(15, 23, 42, 0.2)),
    0 calc(var(--ks-avatar-size) * 0.015)
      calc(var(--ks-avatar-size) * 0.035)
      rgba(15, 23, 42, 0.14),
    0 0 0 1px var(--ks-avatar-shadow-outline, rgba(100, 116, 139, 0.2)) !important;
  box-sizing: border-box;
}

.ks-avatar img,
.ks-avatar-ring img,
.realtime-hit-feed__avatar img,
.story-profile-badge-photo,
.story-profile-map .story-map-popup__person-photo img,
.account-profile-avatar,
.profile-avatar,
.profile-fb-avatar img {
  border-radius: inherit;
}

.ks-avatar img,
.ks-avatar-ring img,
.realtime-hit-feed__avatar img,
.story-profile-badge-photo,
.story-profile-map .story-map-popup__person-photo img,
.profile-fb-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  color: transparent;
  font-size: 0;
}

.story-profile-badge-wrap {
  --ks-avatar-module-size: var(--ks-badge-avatar-size);
}

.realtime-hit-feed__avatar {
  --ks-avatar-module-size: var(--ks-feed-avatar-size);
}

.account-profile-avatar {
  --ks-avatar-module-size: var(--ks-account-avatar-size);
}

.account-profile-avatar-link.is-photo-hidden {
  --ks-avatar-module-size: var(--ks-account-avatar-size);
}

.me-concept-page .account-profile-avatar {
  --ks-avatar-module-size: var(--ks-me-concept-profile-avatar-size);
}

.me-concept-page .account-profile-avatar-link.is-photo-hidden {
  --ks-avatar-module-size: var(--ks-me-concept-profile-avatar-size);
}

.profile-avatar {
  --ks-avatar-module-size: 160px;
}

.profile-fb-avatar {
  --ks-avatar-module-size: 136px;
}

.profile-fb-avatar--mini,
.ks-admin-user__avatar {
  --ks-avatar-module-size: 32px;
}

.bill-add-shell-preview-card__avatar,
.bill-detail-shell-story-card__avatar {
  --ks-avatar-module-size: 58px;
}

.send-person-avatar {
  --ks-avatar-module-size: 44px;
}

/* One source of truth: anonymous/fallback avatars use the real KS SVG mask,
   scaled close to the avatar edge instead of plain text. */
.story-profile-badge-ks,
.realtime-hit-feed__avatar-ks,
.story-map-popup__person-photo-ks,
.account-profile-avatar-fallback__logo {
  --ks-anonymous-ks-logo-inset: calc(var(--ks-avatar-ring-width, 1.5px) + 1px);
  --ks-anonymous-ks-logo-ratio: 1.728;
  display: block;
  color: #ffffff;
  background-color: currentColor;
  flex: 0 0 auto;
}

.story-profile-badge-ks {
  width: calc(var(--ks-avatar-module-size, var(--ks-badge-avatar-size, 56px)) - (var(--ks-anonymous-ks-logo-inset) * 2));
  height: calc((var(--ks-avatar-module-size, var(--ks-badge-avatar-size, 56px)) - (var(--ks-anonymous-ks-logo-inset) * 2)) / var(--ks-anonymous-ks-logo-ratio));
}

.realtime-hit-feed__avatar-ks {
  width: calc(var(--ks-avatar-module-size, var(--ks-feed-avatar-size, 42px)) - (var(--ks-anonymous-ks-logo-inset) * 2));
  height: calc((var(--ks-avatar-module-size, var(--ks-feed-avatar-size, 42px)) - (var(--ks-anonymous-ks-logo-inset) * 2)) / var(--ks-anonymous-ks-logo-ratio));
}

.story-map-popup__person-photo-ks {
  width: calc(var(--ks-avatar-module-size, 42px) - (var(--ks-anonymous-ks-logo-inset) * 2));
  height: calc((var(--ks-avatar-module-size, 42px) - (var(--ks-anonymous-ks-logo-inset) * 2)) / var(--ks-anonymous-ks-logo-ratio));
}

.account-profile-avatar-fallback__logo {
  --ks-anonymous-ks-logo-inset: calc(var(--ks-avatar-ring-width, 2px) + 2px);
  width: calc(var(--ks-avatar-module-size, var(--ks-account-avatar-size, 112px)) - (var(--ks-anonymous-ks-logo-inset) * 2));
  height: calc((var(--ks-avatar-module-size, var(--ks-account-avatar-size, 112px)) - (var(--ks-anonymous-ks-logo-inset) * 2)) / var(--ks-anonymous-ks-logo-ratio));
}

.account-profile-avatar-link.is-photo-hidden {
  border-color: #ffffff;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.16),
    0 1px 3px rgba(15, 23, 42, 0.12) !important;
}

.realtime-hit-feed__avatar--fallback,
.story-profile-badge-wrap--fallback,
.story-profile-map .story-map-popup__person-photo--fallback {
  --ks-avatar-ring-width: 1.5px;
  --ks-avatar-ring-min: 1.5px;
  --ks-avatar-ring-max: 1.5px;
  --ks-avatar-ring-ratio: 0;
  --ks-avatar-ring-color: #ffffff;
  --ks-avatar-shadow-color: transparent;
  --ks-avatar-shadow-outline: transparent;
  box-shadow: none !important;
}

.realtime-hit-feed__avatar-badge .avatar-initials {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  font-size: clamp(0.72rem, calc(var(--ks-feed-avatar-size, 42px) * 0.42), 1.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.story-profile-map .story-map-popup__person-photo-button {
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}