/* HolyGlow V121D7C31R11Q-R5
   One-bug completion: Studio and live profile share the same cropped banner
   strip and a dedicated lower rail that cannot be covered by the identity
   panel. No other profile geometry or application system is changed. */

:root {
  --hg-r11q-r5-banner-height: 92px;
  --hg-r11q-r5-rail-height: 4px;
}

/* Keep the outer profile cards clipped and finished. */
.altar-wrapper.hg-r11p-profile-glow-ready .profile-header-wrap,
.hg-r11p-live-preview {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* One cropped banner strip in Studio and live profile. */
.altar-wrapper.hg-r11p-profile-glow-ready #profileBanner,
.hg-r11p-live-preview .hg-r11j-preview-banner {
  box-sizing: border-box !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: var(--hg-r11q-r5-banner-height) !important;
  min-height: var(--hg-r11q-r5-banner-height) !important;
  max-height: var(--hg-r11q-r5-banner-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-bottom: 0 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center 48% !important;
  z-index: 3 !important;
}

/* Some profile banners are background images and others include an img.
   Both must crop identically instead of stretching to reveal the full image. */
.altar-wrapper.hg-r11p-profile-glow-ready #profileBanner > img,
.hg-r11p-live-preview .hg-r11j-preview-banner > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center 48% !important;
  transform: none !important;
}

/* The lower rail belongs to the banner itself. Because the banner sits above
   the identity panel, this rail remains visible across the full width while
   the avatar stays above both layers. */
.altar-wrapper.hg-r11p-profile-glow-ready #profileBanner::after,
.hg-r11p-live-preview .hg-r11j-preview-banner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: 100% !important;
  height: var(--hg-r11q-r5-rail-height) !important;
  min-height: var(--hg-r11q-r5-rail-height) !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,.54),
    0 0 10px var(--hg-r11q-r5-rail-color, var(--hg-r11p-accent, var(--preview-accent, #63ecff))),
    0 2px 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: 9 !important;
}

/* The content panel may overlap the banner, but it must remain below the
   banner rail. The avatar stays above the seam. */
.altar-wrapper.hg-r11p-profile-glow-ready .profile-header,
.hg-r11p-live-preview .hg-r11j-preview-profile {
  position: relative !important;
  z-index: 2 !important;
}

.altar-wrapper.hg-r11p-profile-glow-ready #avatarWrap,
.hg-r11p-live-preview .hg-r11j-preview-avatar {
  position: relative !important;
  z-index: 10 !important;
}

/* R11Q-R2's inserted rail remains retired. R11Q-R5 uses no extra DOM node. */
.altar-wrapper .hg-r11q-r2-banner-rail {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

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

@media (prefers-reduced-motion: reduce) {
  .altar-wrapper.hg-r11p-profile-glow-ready #profileBanner::after,
  .hg-r11p-live-preview .hg-r11j-preview-banner::after {
    animation: none !important;
    transition: none !important;
  }
}