/* HolyGlow V121D7C31R11Q-R6
   One-bug hotfix: the lower banner rail lives on the outer card seam and the
   avatar renders above it. This prevents the banner stacking context from
   slicing the shield while preserving the R11Q-R5 crop and geometry. */

:root {
  --hg-r11q-r6-banner-height: var(--hg-r11q-r5-banner-height, 92px);
  --hg-r11q-r6-rail-height: var(--hg-r11q-r5-rail-height, 4px);
}

/* The banner is the bottom visual layer. R11Q-R5 still owns its crop. */
.altar-wrapper.hg-r11p-profile-glow-ready #profileBanner,
.hg-r11p-live-preview .hg-r11j-preview-banner {
  z-index: 1 !important;
}

/* Retire the R11Q-R5 rail attached inside the banner. That rail was trapped
   inside the banner stacking context and therefore crossed over the avatar. */
.altar-wrapper.hg-r11p-profile-glow-ready #profileBanner::after,
.hg-r11p-live-preview .hg-r11j-preview-banner::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* The identity body must not form a lower stacking prison around the avatar.
   With z-index:auto, the avatar can participate directly in the outer card's
   isolated stacking context and sit above the seam rail. */
.altar-wrapper.hg-r11p-profile-glow-ready .profile-header,
.hg-r11p-live-preview .hg-r11j-preview-profile {
  z-index: auto !important;
  isolation: auto !important;
}

/* One seam rail shared by Studio and live profile. It is above both banner
   and body backgrounds, but below the avatar. No inserted DOM node is used. */
.altar-wrapper.hg-r11p-profile-glow-ready .profile-header-wrap::after,
.hg-r11p-live-preview::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--hg-r11q-r6-banner-height) - var(--hg-r11q-r6-rail-height)) !important;
  width: 100% !important;
  height: var(--hg-r11q-r6-rail-height) !important;
  min-height: var(--hg-r11q-r6-rail-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(
    --hg-r11q-r5-rail-color,
    var(--hg-r11p-banner, var(--preview-banner, var(--hg-r11p-accent, var(--preview-accent, #63ecff))))
  ) !important;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.58),
    0 0 10px var(--hg-r11q-r5-rail-color, var(--hg-r11p-accent, var(--preview-accent, #63ecff))),
    0 3px 14px var(--hg-r11q-r5-rail-color, var(--hg-r11p-accent, var(--preview-accent, #63ecff))) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* Avatar is the top seam object in both renderers. */
.altar-wrapper.hg-r11p-profile-glow-ready #avatarWrap,
.hg-r11p-live-preview .hg-r11j-preview-avatar {
  z-index: 7 !important;
  transform: translateZ(0) !important;
}

/* Keep the avatar's frame and image above the rail as one unit. */
.altar-wrapper.hg-r11p-profile-glow-ready #avatarWrap::before,
.altar-wrapper.hg-r11p-profile-glow-ready #avatarWrap::after,
.altar-wrapper.hg-r11p-profile-glow-ready #avatarWrap #avatar,
.hg-r11p-live-preview .hg-r11j-preview-avatar::before,
.hg-r11p-live-preview .hg-r11j-preview-avatar::after,
.hg-r11p-live-preview .hg-r11j-preview-avatar img {
  backface-visibility: hidden !important;
}

@media (max-width: 680px) {
  :root {
    --hg-r11q-r6-banner-height: var(--hg-r11q-r5-banner-height, 78px);
    --hg-r11q-r6-rail-height: var(--hg-r11q-r5-rail-height, 3px);
  }
}