/* Shared rails, loaded only by public profile and playlist templates. */
.playlist-layout{--playlist-left-width:220px}
.playlist-layout>.sidebar{width:220px;padding:20px 14px;min-width:0}
.pl-public-shell{column-gap:20px}
.pl-secondary-column{min-width:0;display:flex;flex-direction:column;gap:18px;max-height:100%;overflow-y:auto;padding:18px 12px 100px 0}
.pl-secondary-column>.pl-active-aside{position:static;max-height:none;flex-shrink:0;margin:0}
#pl-recommendations{display:grid;gap:18px;min-width:0}
#pl-recommendations:empty{display:none}
.playlist-layout .sb-sec{padding:0;margin:0}
.playlist-layout .sb-label{font-size:12px;line-height:1.5;letter-spacing:.04em;margin:0 0 12px;white-space:normal;overflow-wrap:anywhere}
.playlist-layout .sb-sec-playlists{gap:8px}
.playlist-layout .sb-item-playlist{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:9px;border-radius:12px;border:1px solid rgba(167,112,255,.18);background:rgba(24,20,37,.75)}
.playlist-layout .sb-pl-thumb{width:38px;height:38px;border-radius:8px}
.playlist-layout .pl-artist-card .sb-pl-thumb{border-radius:50%}
.playlist-layout .sb-pl-title{font-size:12px}
.playlist-layout .sb-pl-meta{font-size:11px}
.playlist-layout .sb-item-playlist:focus-visible,.profile-person-card:focus-visible{outline:2px solid #b493ff;outline-offset:3px}
.profile-community-layout{grid-template-columns:220px minmax(0,1fr) 220px;gap:20px}
.profile-community-left{position:static}
.profile-discover-people h2{margin:0 0 12px;font-size:12px;line-height:1.5}
.profile-people-list{display:grid;gap:8px}
.profile-person-card{display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border:1px solid rgba(167,112,255,.18);border-radius:12px;background:rgba(24,20,37,.75);color:#eee9f7;text-decoration:none}
.profile-person-card:hover,.playlist-layout .sb-item-playlist:hover{border-color:rgba(167,112,255,.5);background:rgba(35,25,53,.96)}
.profile-person-card img{width:38px;height:38px;flex:0 0 38px;object-fit:cover;border-radius:50%}
.profile-person-card span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.profile-community-layout .profile-playlist-card{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:10px;border-radius:12px}
.profile-community-layout .profile-playlist-mosaic{width:64px;height:64px;border-radius:8px}
.profile-community-layout .profile-playlist-copy{gap:5px}
.profile-community-layout .profile-playlist-copy h3{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.profile-community-layout .profile-playlist-copy>span{font-size:11px}
.profile-community-layout .profile-section-title{overflow-wrap:anywhere}
@media(min-width:1241px){
  .playlist-layout>.sidebar{display:block!important}
}
@media(max-width:1240px){
  .playlist-layout{display:flex;flex-direction:column;height:auto;overflow:visible}
  .playlist-layout>.content.playlist-content{order:1;width:100%;height:auto;overflow:visible}
  .playlist-layout>.sidebar{order:2;display:block!important;width:100%;height:auto;max-height:none;overflow:visible;padding:20px 16px 100px;border-right:0;border-top:1px solid rgba(167,112,255,.18)}
  .playlist-layout>.sidebar .sb-sec-playlists{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .pl-public-shell{height:auto;display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:start}
  .pl-secondary-column{max-height:none;overflow:visible;padding-bottom:24px}
  .profile-community-layout{grid-template-columns:minmax(0,1fr) 220px;gap:20px}
  .profile-community-left{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr))}
  .profile-left-rail{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:820px){
  .pl-public-shell{display:flex;flex-direction:column}
  .pl-public-main{width:100%}
  .pl-secondary-column{width:100%;padding:16px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .profile-community-layout{grid-template-columns:minmax(0,1fr)}
  .profile-community-left{grid-template-columns:minmax(0,1fr)}
  .profile-playlist-column{grid-column:1;grid-row:auto}
}
@media(max-width:540px){
  .pl-secondary-column{grid-template-columns:minmax(0,1fr)}
  .playlist-layout>.sidebar .sb-sec-playlists{grid-template-columns:minmax(0,1fr)}
}

/* Public playlist frame: same 1500px content cap and outer spacing as Profile. */
.playlist-layout:has(#pl-public-content){
  width:min(1500px,calc(100% - 2 * clamp(20px,2.4vw,46px)));
  margin-inline:auto;
  top:72px;
  column-gap:20px;
}
.playlist-layout:has(#pl-public-content)>.sidebar{
  padding:0;
  border-right:0;
  background:transparent;
  scrollbar-gutter:auto;
}
.playlist-layout:has(#pl-public-content)>.content{
  min-width:0;
  scrollbar-gutter:auto;
}
.playlist-layout:has(#pl-public-content) .pl-public-main{
  padding:0 0 96px;
  scrollbar-gutter:auto;
}
.playlist-layout:has(#pl-public-content) .pl-secondary-column{
  padding:0 0 96px;
}
@media(min-width:1241px){
  .playlist-layout:has(#pl-public-content){display:grid;grid-template-columns:220px minmax(0,1fr)}
}
@media(max-width:1240px){
  body:has(.playlist-layout #pl-public-content){overflow:auto}
  .playlist-layout:has(#pl-public-content){position:static;margin-top:72px;padding:0;gap:20px}
  .playlist-layout:has(#pl-public-content)>.sidebar{padding:20px 0 96px}
  .playlist-layout:has(#pl-public-content) .pl-public-main{padding-bottom:24px}
  .playlist-layout:has(#pl-public-content) .pl-secondary-column{padding-bottom:24px}
}
@media(max-width:820px){
  .playlist-layout:has(#pl-public-content){width:calc(100% - 32px);margin-top:68px}
}