/* Profile refinement and desktop drawer grid: final cascade layer. */

#profileModal .profile-cover-card .profile-cover {
  transition: background-color 620ms cubic-bezier(.2,.72,.2,1) !important;
}

#profileModal .profile-cover-card.is-avatar-switching .profile-cover::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 16% 52%, rgba(255,255,255,.62) 0 2px, transparent 2.5px 17px, rgba(255,255,255,.28) 17.5px 19px, transparent 19.5px 34px),
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--profile-next-cover-color) 88%, white) 46%, transparent 100%) !important;
  transform: translateX(-76%) !important;
  animation: profile-avatar-colour-sweep 720ms cubic-bezier(.22,.78,.2,1) both !important;
}

#mobileProfileContent .m-profile-hero {
  transition: background-color 620ms cubic-bezier(.2,.72,.2,1);
}

#mobileProfileContent .m-profile-hero.is-avatar-switching .m-profile-cover::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 15% 50%, rgba(255,255,255,.58) 0 2px, transparent 2.6px 17px, rgba(255,255,255,.26) 17.6px 19px, transparent 19.6px 34px),
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--profile-next-cover-color) 88%, white) 46%, transparent 100%) !important;
  transform: translateX(-76%);
  animation: profile-avatar-colour-sweep 720ms cubic-bezier(.22,.78,.2,1) both;
}

@keyframes profile-avatar-colour-sweep {
  0% { opacity: 0; transform: translateX(-76%); }
  18% { opacity: .92; }
  82% { opacity: .48; }
  100% { opacity: 0; transform: translateX(76%); }
}

@media (min-width: 761px) {
  #profileModal .profile-cover-card .avatar-picker-current {
    top: 18px !important;
    bottom: 10px !important;
    left: 6px !important;
    width: 51% !important;
  }

  #profileModal .profile-cover-card .avatar-picker-current > img,
  #profileModal .profile-cover-card .avatar-picker-current.is-picker-editing > img {
    transform: scale(.98) !important;
  }

  #profileModal .profile-cover-card .profile-summary-card {
    top: 60px !important;
    right: 20px !important;
    bottom: 16px !important;
    left: 39.5% !important;
  }

  #profileModal .profile-cover-card .profile-email {
    min-height: 50px !important;
    padding: 7px 10px !important;
  }

  #profileModal .profile-cover-card .achievement-rail {
    gap: 6px !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
  }

  #profileModal .profile-cover-card .achievement {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    background: rgba(237, 240, 246, .88) !important;
  }

  #profileModal .profile-cover-card .achievement.is-unlocked,
  #profileModal .profile-cover-card .achievement.unlocked {
    background: var(--accent) !important;
    color: #121212 !important;
  }

  #profileModal .profile-cover-card .achievement.is-unlocked i,
  #profileModal .profile-cover-card .achievement.unlocked i {
    color: #121212 !important;
  }

  #profileModal .profile-cover-card .achievement b {
    display: none !important;
  }

  /* The recent lane has a fixed compact height; the old white fade read as a broken surface. */
  .product-side-panel {
    min-height: 422px !important;
    max-height: 422px !important;
    grid-template-rows: auto 90px 40px 1px auto minmax(0, 1fr) !important;
  }

  .product-side-panel .recent-projects {
    min-height: 90px !important;
    max-height: 90px !important;
    overflow: hidden !important;
  }

  .product-side-panel .recent-projects::after {
    display: none !important;
  }

  .recent-date-group { gap: 4px !important; }
  .recent-date-label { display: none !important; }
  .recent-project { min-height: 42px !important; }
  .recent-project-main { min-height: 42px !important; padding: 5px 7px !important; }
  .recent-thumb { width: 30px !important; height: 30px !important; overflow: hidden !important; border-radius: 9px !important; }
  .recent-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .recent-copy strong { font-size: 12px !important; }
  .recent-empty { padding: 7px 5px !important; }

  .product-sidebar { gap: 12px !important; }
  .support-side-panel { margin-top: 0 !important; }
  .sidebar-legal { margin-top: 6px !important; }

  body.sidebar-collapsed .product-side-panel {
    min-height: 326px !important;
    max-height: 326px !important;
    grid-template-rows: 62px minmax(0, 1fr) !important;
  }

  body.sidebar-collapsed .product-side-panel .recent-projects {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 42px !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    align-items: start !important;
    justify-content: center !important;
    min-height: 50px !important;
    max-height: 50px !important;
    overflow: hidden !important;
  }

  body.sidebar-collapsed .product-side-panel .recent-date-group { display: contents !important; }
  body.sidebar-collapsed .product-side-panel .recent-project { display: block !important; min-height: 42px !important; }
  body.sidebar-collapsed .product-side-panel .recent-project-main { width: 42px !important; min-height: 42px !important; padding: 0 !important; }
  body.sidebar-collapsed .product-side-panel .recent-copy,
  body.sidebar-collapsed .product-side-panel .project-status { display: none !important; }
  body.sidebar-collapsed .product-side-panel .recent-empty { display: none !important; }
  body.sidebar-collapsed .product-side-panel .recent-thumb { display: grid !important; width: 42px !important; height: 42px !important; border-radius: 12px !important; }
}

@media (max-width: 760px) {
  #mobileProfileContent .m-profile-hero,
  #mobileProfileContent.is-editing .m-profile-hero {
    height: 350px !important;
    min-height: 350px !important;
  }

  #mobileProfileContent .m-profile-avatar-stage,
  #mobileProfileContent.is-editing .m-profile-avatar-stage {
    top: 10px !important;
    bottom: 7px !important;
    left: -12px !important;
    width: 60% !important;
  }

  #mobileProfileContent .m-profile-avatar,
  #mobileProfileContent.is-editing .m-profile-avatar {
    transform: scale(.99) !important;
  }

  #mobileProfileContent .m-profile-main,
  #mobileProfileContent.is-editing .m-profile-main {
    top: 34px !important;
    right: 10px !important;
    left: 40.5% !important;
    height: 254px !important;
    min-height: 254px !important;
  }

  #mobileProfileContent .m-profile-identity h2,
  #mobileProfileContent.is-editing .m-profile-identity h2 {
    padding: 0 34px !important;
    text-align: center !important;
  }

  #mobileProfileContent .m-profile-inline-edit { right: 0 !important; }
}