/* HolyGlow V121D7C31R11Q-R4
   Shared visual contract for Profile Glow Studio and the live profile header.
   This replaces the extra banner rail visually, removes the shield's square
   backing, and retires empty/loading fallback boxes inside the header. */

:root {
  --hg-r11q-r4-banner-height: 92px;
  --hg-r11q-r4-avatar-size: 108px;
  --hg-r11q-r4-overlap: 48px;
}

/* One outer card language for both Studio preview and live profile. */
.altar-wrapper.hg-r11p-profile-glow-ready .profile-header-wrap,
.hg-r11p-live-preview {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 2px solid var(--hg-r11p-banner, var(--hg-r11p-accent, var(--preview-accent, #63ecff))) !important;
  border-radius: 22px !important;
  background: #0c1119 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 16px 42px rgba(0,0,0,.44),
    0 0 23px color-mix(in srgb, var(--hg-r11p-banner, var(--hg-r11p-accent, var(--preview-accent, #63ecff))) 28%, transparent) !important;
}

/* R11Q-R2's extra absolute rail is superseded. The banner itself owns the
   lower border exactly as it does in Profile Glow Studio. */
.altar-wrapper .hg-r11q-r2-banner-rail {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.altar-wrapper.hg-r11p-profile-glow-ready #profileBanner,
.hg-r11p-live-preview .hg-r11j-preview-banner {
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  height: var(--hg-r11q-r4-banner-height) !important;
  min-height: var(--hg-r11q-r4-banner-height) !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 4px solid var(--hg-r11p-banner, var(--hg-r11p-accent, var(--preview-accent, #63ecff))) !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 -1px rgba(255,255,255,.66),
    0 4px 16px color-mix(in srgb, var(--hg-r11p-banner, var(--hg-r11p-accent, var(--preview-accent, #63ecff))) 38%, transparent) !important;
  z-index: 1 !important;
}

/* Match the Studio's identity-panel overlap and padding. */
.altar-wrapper.hg-r11p-profile-glow-ready .profile-header,
.hg-r11p-live-preview .hg-r11j-preview-profile {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  margin-top: calc(-1 * var(--hg-r11q-r4-overlap)) !important;
  padding: 0 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  text-align: center !important;
  background:
    linear-gradient(rgba(4,9,15,.70), rgba(4,9,15,.84)),
    var(--hg-r11p-theme-bg, var(--preview-theme-bg, linear-gradient(145deg,#05131e,#073b53 58%,#0ea5c6))) !important;
  background-size: cover !important;
  box-shadow: none !important;
}

/* Shared avatar box. */
.altar-wrapper.hg-r11p-profile-glow-ready #avatarWrap,
.hg-r11p-live-preview .hg-r11j-preview-avatar {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  width: var(--hg-r11q-r4-avatar-size) !important;
  height: var(--hg-r11q-r4-avatar-size) !important;
  min-width: var(--hg-r11q-r4-avatar-size) !important;
  min-height: var(--hg-r11q-r4-avatar-size) !important;
  max-width: var(--hg-r11q-r4-avatar-size) !important;
  max-height: var(--hg-r11q-r4-avatar-size) !important;
  flex: 0 0 var(--hg-r11q-r4-avatar-size) !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 4 !important;
}

/* Circle and soft-square remain conventional. */
.altar-wrapper #avatarWrap:not([data-hg-avatar-shape="shield"]),
.hg-r11p-live-preview:not([data-hg-avatar-shape="shield"]) .hg-r11j-preview-avatar {
  background: #101722 !important;
}

/* Shield parity: no square/black backing in either renderer. */
.altar-wrapper #avatarWrap[data-hg-avatar-shape="shield"],
.hg-r11p-live-preview[data-hg-avatar-shape="shield"] .hg-r11j-preview-avatar {
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

.altar-wrapper #avatarWrap[data-hg-avatar-shape="shield"]::before,
.hg-r11p-live-preview[data-hg-avatar-shape="shield"] .hg-r11j-preview-avatar::before {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hg-r11p-frame, var(--preview-frame, #63ecff)) !important;
  clip-path: polygon(50% 0,92% 16%,88% 70%,50% 100%,12% 70%,8% 16%) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--hg-r11p-frame, var(--preview-frame, #63ecff)) 72%, transparent)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.altar-wrapper #avatarWrap[data-hg-avatar-shape="shield"]::after,
.hg-r11p-live-preview[data-hg-avatar-shape="shield"] .hg-r11j-preview-avatar::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 0 !important;
  background: #071019 !important;
  clip-path: polygon(50% 0,92% 16%,88% 70%,50% 100%,12% 70%,8% 16%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.altar-wrapper #avatarWrap[data-hg-avatar-shape="shield"] #avatar,
.hg-r11p-live-preview[data-hg-avatar-shape="shield"] .hg-r11j-preview-avatar img {
  position: absolute !important;
  inset: 3px !important;
  width: calc(100% - 6px) !important;
  height: calc(100% - 6px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center !important;
  clip-path: polygon(50% 0,92% 16%,88% 70%,50% 100%,12% 70%,8% 16%) !important;
  z-index: 2 !important;
}

/* Retire the ugly empty/default loading block without hiding real testimony. */
.altar-wrapper.hg-r11q-r4-shared-header #testimony,
.hg-r11p-live-preview .hg-r11j-preview-profile .testimony {
  width: auto !important;
  max-width: min(100%, 420px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 6px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.altar-wrapper.hg-r11q-r4-shared-header #testimony:empty,
.altar-wrapper.hg-r11q-r4-shared-header #testimony[data-hg-empty="true"],
.altar-wrapper.hg-r11q-r4-shared-header .profile-header [data-profile-skeleton],
.altar-wrapper.hg-r11q-r4-shared-header .profile-header .profile-skeleton,
.altar-wrapper.hg-r11q-r4-shared-header .profile-header .loading-placeholder,
.altar-wrapper.hg-r11q-r4-shared-header .profile-header .skeleton {
  display: none !important;
}

.altar-wrapper.hg-r11q-r4-shared-header .profile-actions-container:empty,
.altar-wrapper.hg-r11q-r4-shared-header .profile-actions-container[data-hg-empty="true"] {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 680px) {
  :root {
    --hg-r11q-r4-banner-height: 78px;
    --hg-r11q-r4-avatar-size: 88px;
    --hg-r11q-r4-overlap: 40px;
  }

  .altar-wrapper.hg-r11p-profile-glow-ready .profile-header,
  .hg-r11p-live-preview .hg-r11j-preview-profile {
    padding: 0 14px 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .altar-wrapper.hg-r11q-r4-shared-header *,
  .hg-r11p-live-preview * {
    transition-duration: .001ms !important;
  }
}