/* STX Online header recovery + compact member menu — 2026-08-08 */

/* The prior nav-polish patch is intentionally retired.  Keep the native
   STX Online header layout and only make the member account compact. */
.header-community[data-stx-auth] {
  margin-left: auto;
  flex: 0 0 auto;
  position: relative;
  min-width: 0;
}

.stx-compact-member-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 1001;
}

.stx-compact-member-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  max-width: 220px;
  padding: .32rem .48rem;
  border-radius: 999px;
  cursor: pointer;
}

.stx-compact-member-button:hover,
.stx-compact-member-button:focus-visible {
  background: rgba(255,255,255,.08);
  outline: none;
}

.stx-compact-member-avatar,
.stx-compact-member-fallback {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

.stx-compact-member-avatar {
  display: block;
  object-fit: cover;
}

.stx-compact-member-fallback {
  display: inline-grid;
  place-items: center;
  font-weight: 900;
  font-size: .78rem;
}

.stx-compact-member-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.stx-compact-member-chevron {
  font-size: .68rem;
  opacity: .7;
  transition: transform .15s ease;
}

.stx-compact-member-menu.open .stx-compact-member-chevron {
  transform: rotate(180deg);
}

.stx-compact-member-dropdown {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  min-width: 165px;
  padding: .38rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: #10252d;
  box-shadow: 0 18px 45px rgba(0,0,0,.36);
  z-index: 1100;
}

.stx-compact-member-dropdown[hidden] {
  display: none !important;
}

.stx-compact-member-dropdown a,
.stx-compact-member-dropdown button {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: .68rem .75rem;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #eef7f8 !important;
  text-decoration: none !important;
  font: inherit;
  font-size: .88rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
}

.stx-compact-member-dropdown a:hover,
.stx-compact-member-dropdown button:hover {
  background: rgba(255,255,255,.09) !important;
}

.stx-original-member-controls {
  display: none !important;
}

/* The decorative green status dot from an earlier Trivia patch is no longer
   needed now that the member avatar is visible. */
.trivia-member-pill::before,
.trivia-member-pill::after {
  content: none !important;
  display: none !important;
}

/* On the standalone Trivia page, the authenticated member sits at the far
   right of the nav and becomes the same compact dropdown. */
.stx-trivia-page .trivia-nav {
  min-width: 0;
}
.stx-trivia-page #triviaMemberIdentity {
  margin-left: auto;
  flex: 0 0 auto;
}
.stx-trivia-page #triviaMemberIdentity.stx-menu-host {
  padding: 0;
  border: 0;
  background: transparent;
}

/* The champion strip belongs below the complete site header, never inline
   between navigation and the member account. */
.site-header + .stx-trivia-champion-strip {
  width: 100%;
}

@media (max-width: 760px) {
  .stx-compact-member-name { max-width: 100px; }
  .stx-compact-member-button { padding-inline: .28rem; }
}