/*
 * PeerMusic secondary-page icon system
 * Keeps every secondary route on one visual scale without changing page copy.
 */

.secondary-page-layer {
  --pm-icon-line: linear-gradient(
    110deg,
    rgba(247, 185, 232, 0.92),
    rgba(243, 247, 255, 0.98) 50%,
    rgba(188, 238, 255, 0.94)
  );
  --pm-icon-fill: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9),
    rgba(248, 252, 255, 0.8)
  );
  --pm-icon-color: #7095cc;
  --pm-icon-shadow:
    0 8px 19px rgba(122, 147, 188, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* Shared navigation chrome. */
#secondary-page-root .secondary-page-back {
  width: 46px !important;
  height: 46px !important;
  margin-top: 1px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  color: #607fa8 !important;
  background:
    var(--pm-icon-fill) padding-box,
    var(--pm-icon-line) border-box !important;
  box-shadow:
    0 10px 24px rgba(116, 139, 177, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

#secondary-page-root .secondary-page-back::before {
  width: 10px !important;
  height: 10px !important;
  border-width: 0 0 2px 2px !important;
}

#secondary-page-root .secondary-page-back::after {
  width: 16px !important;
  height: 2px !important;
}

#secondary-page-root .secondary-page-brand {
  gap: 7px !important;
  min-height: 30px !important;
  font-size: 17px !important;
}

#secondary-page-root .secondary-page-brand i {
  font-family: Arial, "Segoe UI Symbol", sans-serif !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Every route keeps a page-specific glyph in the same 42px glass tile. */
#secondary-page-root .secondary-page-header-icon {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  margin-top: 1px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  color: var(--pm-icon-color) !important;
  font-family: Arial, "Segoe UI Symbol", sans-serif !important;
  font-size: 17px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  background:
    var(--pm-icon-fill) padding-box,
    var(--pm-icon-line) border-box !important;
  box-shadow: var(--pm-icon-shadow) !important;
  visibility: visible !important;
}

/* Bottom navigation uses one exact drawing box on every route. */
#secondary-page-root .secondary-page-nav-item .nav-icon {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  color: currentColor !important;
  transform: scale(0.86) !important;
  transform-origin: center !important;
}

/* Small functional icons share the same glass, stroke color and depth. */
#secondary-page-root :is(
  .secondary-page-upload-icon,
  .withdraw-password-prompt-icon,
  .pm-ref-location-icon,
  .music-dividend-metric-icon,
  .secondary-page-product-icon,
  .secondary-page-task-icon,
  .personal-info-row-icon,
  .notifications-summary-icon,
  .notification-icon,
  .secondary-page-feedback-icon
) {
  border: 1px solid transparent !important;
  color: var(--pm-icon-color) !important;
  font-family: Arial, "Segoe UI Symbol", sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  background:
    var(--pm-icon-fill) padding-box,
    var(--pm-icon-line) border-box !important;
  box-shadow: var(--pm-icon-shadow) !important;
}

#secondary-page-root .secondary-page-task-icon {
  display: grid !important;
  place-items: center !important;
  border-radius: 19px !important;
}

#secondary-page-root .personal-info-row-icon {
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
}

#secondary-page-root :is(
  .secondary-page-product-image,
  .invite-poster-visual img,
  .secondary-page-player img
) {
  object-fit: contain !important;
  object-position: center !important;
}

@media (prefers-reduced-motion: reduce) {
  #secondary-page-root :is(
    .secondary-page-back,
    .secondary-page-header-icon,
    .secondary-page-nav-item .nav-icon
  ) {
    transition: none !important;
  }
}