/* RELEASE 175 — command-deck navigation and verified social-profile links.
   The complete globe assembly, accepted backdrop and eight side panels stay frozen. */

/* The social dock is shared by every route; its visual treatment adapts below. */
.r175SocialLink {
  gap: 7px;
}

.r175SocialLink svg,
.r175MobileLink svg,
.r175SearchGlyph {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.r175SocialLink > span,
.r175MobileLink > span {
  white-space: nowrap;
}

@media (min-width: 761px) {
  /* Keep the 68px header geometry so the approved hero does not move. */
  body[data-route="artist"] header,
  body[data-route="artist"] header.scrolled {
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(720px 94px at 13% 0%, rgba(37, 118, 187, .13), transparent 73%),
      radial-gradient(600px 82px at 84% 0%, rgba(113, 70, 191, .105), transparent 75%),
      linear-gradient(90deg, rgba(2, 6, 14, .975), rgba(3, 8, 17, .981) 48%, rgba(3, 6, 15, .975)) !important;
    box-shadow: inset 0 1px 0 rgba(114, 204, 251, .065) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  /* A quiet upper trace replaces the former rounded, floating outline. */
  body[data-route="artist"] header::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: auto !important;
    height: 1px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, transparent 0 7%, rgba(84, 207, 250, .46) 23%, rgba(98, 121, 238, .22) 57%, rgba(186, 102, 242, .39) 82%, transparent 94%) !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: .78 !important;
    pointer-events: none !important;
  }

  /* The lower edge dissolves into the chamber rather than drawing a divider. */
  body[data-route="artist"] header::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: -11px !important;
    left: 0 !important;
    height: 11px !important;
    background: linear-gradient(180deg, rgba(2, 5, 12, .58), transparent) !important;
    pointer-events: none !important;
  }

  body[data-route="artist"] header .nav {
    position: relative !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 13px !important;
    gap: 10px !important;
    background: transparent !important;
  }

  /* Identity block is part of the command rail, not a detached pill. */
  body[data-route="artist"] header .brandLogo {
    padding: 5px 11px 5px 4px !important;
    gap: 10px !important;
    border-radius: 0 !important;
  }

  body[data-route="artist"] header .brandLogo::after {
    display: block !important;
    clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%) !important;
    border-radius: 0 !important;
    background:
      linear-gradient(110deg, rgba(46, 173, 223, .09), rgba(83, 83, 187, .045) 54%, transparent) !important;
  }

  body[data-route="artist"] header .logoStage,
  body[data-route="artist"] header .logoStage img {
    width: 54px !important;
    height: 54px !important;
  }

  body[data-route="artist"] header .logoStage img {
    border-radius: 4px !important;
  }

  body[data-route="artist"] header .brandWords {
    position: relative !important;
    font-size: 17px !important;
    letter-spacing: .13em !important;
  }

  body[data-route="artist"] header .brandWords small {
    margin-top: 6px !important;
    color: rgba(177, 214, 233, .78) !important;
    font-size: 6.7px !important;
    letter-spacing: .205em !important;
  }

  /* Preserve overflow for MUSIC's submenu; only pseudo-surfaces are clipped. */
  body[data-route="artist"] header .navlinks {
    gap: 2px !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body[data-route="artist"] header .navlinks::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    border: 1px solid rgba(92, 190, 234, .24) !important;
    border-radius: 0 !important;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
    background:
      radial-gradient(130% 140% at 0 0, rgba(43, 142, 205, .115), transparent 53%),
      linear-gradient(112deg, rgba(5, 13, 24, .9), rgba(6, 10, 22, .78)) !important;
    pointer-events: none !important;
  }

  body[data-route="artist"] header .navlinks::after {
    border: 1px solid rgba(98, 218, 253, .33) !important;
    border-radius: 0 !important;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px) !important;
    background:
      linear-gradient(114deg, rgba(48, 139, 196, .17), rgba(77, 112, 196, .09) 53%, rgba(120, 75, 176, .12)) !important;
    box-shadow:
      inset 0 1px 0 rgba(152, 228, 255, .07),
      0 0 16px rgba(80, 168, 224, .075) !important;
    opacity: .94 !important;
  }

  body[data-route="artist"] header .navlinks button {
    min-height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
    color: rgba(181, 199, 218, .84) !important;
    font-size: clamp(13px, .78vw, 15px) !important;
    font-weight: 800 !important;
    letter-spacing: .014em !important;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px) !important;
  }

  body[data-route="artist"] header .navlinks button:hover,
  body[data-route="artist"] header .navlinks button:focus-visible {
    color: #effbff !important;
    background: linear-gradient(105deg, rgba(53, 181, 229, .11), rgba(122, 93, 195, .065)) !important;
    transform: none !important;
    outline: none !important;
  }

  body[data-route="artist"] header .navlinks button.active {
    color: #eefaff !important;
    text-shadow: 0 0 12px rgba(92, 217, 245, .25) !important;
  }

  body[data-route="artist"] header .navMusicSub {
    width: 183px !important;
    padding: 6px !important;
    border-color: rgba(96, 202, 243, .26) !important;
    border-radius: 0 !important;
    clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px) !important;
  }

  body[data-route="artist"] header .navMusicSub button {
    min-height: 34px !important;
    font-size: 12px !important;
  }

  /* Three compact, recognizable profile modules. */
  body[data-route="artist"] header .r175SocialDock {
    gap: 6px !important;
  }

  body[data-route="artist"] header .r175SocialLink {
    height: 37px !important;
    min-height: 37px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(110, 183, 226, .22) !important;
    border-radius: 0 !important;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px) !important;
    background: linear-gradient(118deg, rgba(7, 17, 30, .87), rgba(8, 12, 25, .78)) !important;
    color: rgba(220, 237, 248, .89) !important;
    font-size: 11px !important;
    font-weight: 780 !important;
    text-decoration: none !important;
    transition: color .18s ease, border-color .18s ease, background .18s ease, filter .18s ease !important;
  }

  body[data-route="artist"] header .r175Instagram svg {
    color: #d68bea !important;
  }

  body[data-route="artist"] header .r175YouTube svg {
    color: #ff777f !important;
  }

  body[data-route="artist"] header .r175TikTok svg {
    color: #76e9f6 !important;
  }

  body[data-route="artist"] header .r175Instagram:hover {
    border-color: rgba(212, 121, 231, .57) !important;
  }

  body[data-route="artist"] header .r175YouTube:hover {
    border-color: rgba(250, 108, 123, .55) !important;
  }

  body[data-route="artist"] header .r175TikTok:hover {
    border-color: rgba(100, 230, 244, .55) !important;
  }

  body[data-route="artist"] header .r175SocialLink:hover {
    color: #f5fbff !important;
    filter: brightness(1.12) !important;
  }

  /* Search and language controls use the same cut-corner chassis. */
  body[data-route="artist"] header .iconBtn {
    width: 37px !important;
    height: 37px !important;
    border: 1px solid rgba(102, 197, 233, .25) !important;
    border-radius: 0 !important;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px) !important;
    background: linear-gradient(123deg, rgba(7, 18, 30, .83), rgba(8, 12, 24, .77)) !important;
    color: #c9edf8 !important;
  }

  body[data-route="artist"] header .iconBtn:hover {
    border-color: rgba(111, 232, 249, .54) !important;
    transform: none !important;
  }

  body[data-route="artist"] header .lang {
    gap: 3px !important;
    padding: 3px !important;
    border: 1px solid rgba(101, 186, 222, .23) !important;
    border-radius: 0 !important;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px) !important;
    background: linear-gradient(120deg, rgba(6, 15, 26, .85), rgba(7, 10, 22, .77)) !important;
  }

  body[data-route="artist"] header .lang button {
    width: 31px !important;
    height: 31px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px) !important;
    background: transparent !important;
    color: rgba(190, 209, 224, .79) !important;
    font-size: 10px !important;
  }

  body[data-route="artist"] header .lang button.active {
    background: linear-gradient(130deg, rgba(84, 215, 245, .92), rgba(106, 154, 250, .84)) !important;
    color: #06121c !important;
    box-shadow: none !important;
  }
}

/* Medium desktop keeps every profile accessible without crowding the menu. */
@media (min-width: 1181px) and (max-width: 1420px) {
  .r175SocialLink {
    width: 39px !important;
    min-width: 39px !important;
    padding: 0 !important;
  }

  .r175SocialLink > span {
    display: none !important;
  }
}

/* Phone drawer receives the same three profile links; top-bar layout is frozen. */
@media (max-width: 760px) {
  .r175MobileSocial {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 18px !important;
  }

  .r175MobileSocial .r175MobileLink {
    display: flex !important;
    min-height: 47px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-top: 0 !important;
    padding: 8px 5px !important;
    border-radius: 0 !important;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px) !important;
    font-size: 10px !important;
    font-weight: 760 !important;
    text-decoration: none !important;
  }

  .r175MobileLink svg {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }

  .r175MobileLink.r175Instagram svg {
    color: #d68bea !important;
  }

  .r175MobileLink.r175YouTube svg {
    color: #ff777f !important;
  }

  .r175MobileLink.r175TikTok svg {
    color: #76e9f6 !important;
  }
}

@media (max-width: 340px) {
  .r175MobileSocial .r175MobileLink {
    gap: 3px !important;
    font-size: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="artist"] header .navlinks::after,
  body[data-route="artist"] header .r175SocialLink {
    transition: none !important;
  }
}