/* Final desktop rail rhythm and profile depth corrections. */

@media (min-width: 1061px) {
  /* Keep the desktop drawer on a single vertical grid.  Its internal cards stay
     content-sized; only the quiet interval before the legal links is flexible. */
  .product-sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    height: calc(100vh - 112px) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .product-sidebar > * { flex: 0 0 auto; }

  .product-side-panel {
    height: 317px !important;
    min-height: 317px !important;
    max-height: 317px !important;
    display: grid !important;
    grid-template-rows: 18px 86px 42px 1px 18px 90px !important;
    gap: 6px !important;
    align-content: start !important;
    padding: 12px !important;
    overflow: visible !important;
    transform: none !important;
  }

  .product-side-panel .side-title {
    min-height: 18px !important;
    margin: 0 !important;
    line-height: 18px !important;
  }

  .product-side-panel .recent-projects {
    display: grid !important;
    grid-auto-rows: 40px;
    align-content: start;
    gap: 5px !important;
    width: 100%;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    overflow: hidden !important;
  }
  .product-side-panel .recent-empty {
    height: 100% !important;
    display: grid !important;
    align-content: center !important;
    padding: 0 6px !important;
  }

  .product-side-panel .recent-date-group { display: contents !important; }
  .product-side-panel .recent-date-label { display: none !important; }
  .product-side-panel .recent-project { min-height: 40px !important; }
  .product-side-panel .recent-project-main {
    min-height: 40px !important;
    height: 40px !important;
    padding: 5px 7px !important;
  }
  .product-side-panel .recent-thumb { width: 30px !important; height: 30px !important; }
  .product-side-panel .side-action,
  .product-side-panel .side-link,
  .support-side-panel .side-link {
    height: 42px !important;
    min-height: 42px !important;
  }
  .product-side-panel .side-divider { align-self: center; margin: 0 8px !important; }
  .product-side-panel .product-nav {
    display: grid !important;
    grid-template-rows: repeat(2, 42px);
    gap: 6px !important;
    align-content: start !important;
  }

  .support-side-panel {
    height: 106px !important;
    min-height: 106px !important;
    padding: 8px !important;
    transform: none !important;
  }
  .support-side-panel .side-nav { gap: 6px !important; }

  .sidebar-legal {
    min-height: 28px !important;
    margin-top: auto !important;
    margin-bottom: clamp(132px, 17vh, 190px) !important;
    padding: 0 10px 2px !important;
  }

  /* The compact rail preserves the same rhythm, with recent projects as a
     vertical thumbnail stack rather than two escaping floating thumbnails. */
  html body.sidebar-collapsed .product-sidebar {
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
  html body.sidebar-collapsed .product-side-panel {
    width: 64px !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    display: grid !important;
    grid-template-rows: 90px 42px 90px !important;
    gap: 6px !important;
    place-items: center !important;
    padding: 6px !important;
    overflow: hidden !important;
    transform: none !important;
  }
  html body.sidebar-collapsed .product-side-panel .recent-projects {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 42px !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 42px !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    overflow: hidden !important;
  }
  html body.sidebar-collapsed .product-side-panel .recent-date-group { display: contents !important; }
  html body.sidebar-collapsed .product-side-panel .recent-project {
    display: block !important;
    width: 42px !important;
    min-height: 42px !important;
  }
  html body.sidebar-collapsed .product-side-panel .recent-project-main {
    display: grid !important;
    width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    place-items: center !important;
  }
  html body.sidebar-collapsed .product-side-panel .recent-thumb {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  html body.sidebar-collapsed .product-side-panel .recent-copy,
  html body.sidebar-collapsed .product-side-panel .project-status,
  html body.sidebar-collapsed .product-side-panel .recent-empty { display: none !important; }
  html body.sidebar-collapsed .product-side-panel > .side-action,
  html body.sidebar-collapsed .product-side-panel .product-nav {
    position: static !important;
    left: auto !important;
    width: 50px !important;
    margin: 0 auto !important;
    transform: none !important;
    translate: none !important;
  }
  html body.sidebar-collapsed .product-side-panel .product-nav {
    display: grid !important;
    grid-template-rows: repeat(2, 42px) !important;
    gap: 6px !important;
  }
  html body.sidebar-collapsed .product-sidebar .side-link,
  html body.sidebar-collapsed .product-sidebar .side-link:hover,
  html body.sidebar-collapsed .product-sidebar .side-link.active,
  html body.sidebar-collapsed .product-sidebar .side-link.active:hover,
  html body.sidebar-collapsed .product-sidebar .side-link.is-fluid-active,
  html body.sidebar-collapsed .product-sidebar .side-action,
  html body.sidebar-collapsed .product-sidebar .side-action:hover,
  html body.sidebar-collapsed .product-sidebar .side-action.is-fluid-active {
    width: 50px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 auto !important;
    transform: none !important;
    translate: none !important;
  }

  #profileModal .profile-cover-card .avatar-picker-current {
    top: 8px !important;
    bottom: 4px !important;
    left: 0 !important;
    width: 54% !important;
    z-index: 32 !important;
  }
  #profileModal .profile-cover-card .avatar-picker-current > img,
  #profileModal .profile-cover-card .avatar-picker-current.is-picker-editing > img {
    transform: scale(1.12) !important;
    transform-origin: center bottom !important;
  }
  #profileModal .profile-cover-card .profile-summary-card { z-index: 8 !important; }
  #profileModal .profile-cover-card .avatar-edit { pointer-events: auto !important; }

  #profileModal .profile-cover-card .achievement-rail {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 7px !important;
    margin-top: 0 !important;
    padding: 2px !important;
  }
  #profileModal .profile-cover-card .achievement {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    border-radius: 12px !important;
  }
  #profileModal .profile-cover-card .achievement i {
    display: grid !important;
    place-items: center !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }
  #profileModal .profile-cover-card .achievement b { display: none !important; }
  #profileModal .profile-cover-card .achievement.is-unlocked,
  #profileModal .profile-cover-card .achievement.unlocked {
    color: #fff !important;
    background: var(--accent) !important;
  }
  #profileModal .profile-cover-card .achievement.is-unlocked i,
  #profileModal .profile-cover-card .achievement.unlocked i { color: #fff !important; }
}

@media (max-width: 760px) {
  /* Avatar deliberately crosses the summary tile to create a foreground layer. */
  #mobileProfileContent .m-profile-avatar-stage,
  #mobileProfileContent.is-editing .m-profile-avatar-stage {
    z-index: 12 !important;
    pointer-events: none !important;
  }
  #mobileProfileContent .m-profile-avatar,
  #mobileProfileContent.is-editing .m-profile-avatar {
    transform: scale(1.08) !important;
    transform-origin: center bottom !important;
  }
  #mobileProfileContent .m-profile-main,
  #mobileProfileContent.is-editing .m-profile-main { z-index: 8 !important; }
  #mobileProfileContent .m-profile-inline-edit { z-index: 14 !important; pointer-events: auto !important; }
}