/* The music feed: posts, comments, the composer and Discover. */
.feedcol{max-width:760px;margin:0 auto}
.wrap{white-space:normal}
.feedlabel{font:500 12px var(--ui);color:var(--m);margin:6px 0 -3px}.feedlabel[hidden]{display:none}
.emptyslot:empty{display:none}
.hero .body{background:linear-gradient(170deg,color-mix(in srgb,var(--c2) 24%,transparent),transparent 78%)}
.heroes>:only-child{grid-column:1/-1}
.livebox:empty{display:none}
.livebox .rows{margin-top:11px}
.moreroom{display:block;margin:11px auto 0;min-height:44px;font-size:14px}
.emptybtns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.empty.small{padding:24px 18px}

/* phone bar: five even slots that still fit at 320px */
.nav a,.navplus{flex:1 1 0;width:auto;min-width:0}
.navplus{display:flex;justify-content:center;background:none;border:0;padding:0}
.navitem .badge{right:calc(50% - 26px)}

/* share row */
.sharerow{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line2);background:var(--s1);color:var(--m);font:400 15px var(--ui);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.sharerow:hover{border-color:var(--sig);background:var(--s2);color:var(--t)}.sharerow[hidden]{display:none}

/* post card */
.posts,.postlist{display:flex;flex-direction:column;gap:11px}.postlist[aria-busy] .skeleton{height:150px}
.post{display:flex;flex-direction:column;gap:11px;padding:13px 14px 8px;flex:none}
.post:hover{border-color:var(--line)}
.posthead{display:flex;align-items:center;gap:8px;min-width:0}
.postwho{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.postwho b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.postwho a:hover b{text-decoration:underline}.postsub{display:flex;gap:4px;align-items:center}
.caption{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.42}
.postsong .dropwrap,.postsong .dropwrap.playing{width:100%}
.postsong .drop{width:100%;padding:0;gap:12px;background:none;border:0;border-radius:0}
.postsong .droplink{gap:13px}
.postsong .drop .art{width:84px;height:84px;border-radius:12px;box-shadow:0 10px 26px -12px #000}
.postsong .droptitle{font:700 18px/1.15 var(--disp);letter-spacing:-.015em;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.postsong .droplink .meta{margin-top:4px;font-size:13px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.postsong .droplink:hover .droptitle{text-decoration:underline}
.postsong .playbtn{width:46px;height:46px}
.postacts{display:flex;gap:4px;margin-left:-8px}
.postact{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 8px;background:none;border:0;border-radius:11px;color:var(--m);font:500 13px var(--ui);cursor:pointer;transition:background .12s,color .12s}
.postact:hover{background:rgba(255,255,255,.08);color:var(--t)}.postact.iconly{flex:none;padding:0}
.postact.on{color:var(--t)}
.postact.like.on{color:var(--sig)}.postact.like.on svg{fill:currentColor}
.postact .n:empty{display:none}
.postact.bump svg{animation:bump .28s ease-out}
@keyframes bump{40%{transform:scale(1.28)}}
.newposts{align-self:center;position:sticky;top:10px;z-index:5;height:38px;padding:0 16px;border:0;border-radius:99px;background:var(--sig);color:var(--sig-ink);font:600 13px var(--ui);box-shadow:0 10px 28px #0009;cursor:pointer}.newposts[hidden]{display:none}

/* comments */
.thread{display:flex;flex-direction:column;gap:10px;padding:8px 0 10px;border-top:1px solid var(--line)}.thread[hidden]{display:none}
.comments{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto}.comments:empty{display:none}
.comment{display:flex;gap:9px;align-items:flex-start}.comment .postact.iconly{min-width:36px;height:36px;margin-top:-5px}
.commenthead{display:flex;gap:7px;align-items:baseline;font-size:13px;min-width:0}.commenthead b{font-weight:500}.commenthead a:hover{text-decoration:underline}
.commentbody{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.commentform{display:flex;gap:8px;align-items:center}.commentform .field{height:44px}
.commentform .playbtn{width:44px;height:44px}.commentform .playbtn[disabled]{opacity:.55}
.olderbtn{align-self:flex-start;font-size:13px;min-height:32px}.olderbtn[hidden]{display:none}

/* composer */
.composerform{display:flex;flex-direction:column;gap:14px;padding:14px 16px 18px;overflow-y:auto;min-height:0}
.composerhead{font:700 20px var(--disp);letter-spacing:-.02em}
.composerform .field{flex:none}.composerform .area{font-size:15px}
.composerform [data-song-preview]:empty{display:none}.counter{text-align:right;min-height:17px}.counter:empty{min-height:0;margin:0}
.cpopwrap:not(.sheeted):has(.composer){display:grid;place-items:center;background:rgba(4,5,8,.62)}
.cpopwrap:not(.sheeted) .cpop.composer{position:static;width:min(480px,calc(100vw - 32px));max-height:min(86vh,680px)}

/* Discover */
.discover{max-width:1040px;margin:0 auto;padding:22px 20px 28px;display:flex;flex-direction:column;gap:16px}
.discoversearch{display:flex;flex-direction:column;gap:9px;max-width:560px}
.discovergrid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:6px;align-items:start}
.discoverpart{display:flex;flex-direction:column;gap:11px;min-width:0}
.sectionhead{font:700 20px/1.1 var(--disp);letter-spacing:-.02em;outline-offset:4px}.sectionhead:focus{outline:0}
.liveh{display:flex;align-items:center;gap:9px}
.suggestions,.vibelist{display:flex;flex-direction:column;gap:9px}.skeleton.short{height:62px}
.personlink{display:flex;gap:11px;align-items:center;flex:1;min-width:0}.personname{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.personlink:hover .personname{text-decoration:underline}
.dismiss{width:40px;height:40px;flex:none;margin-left:-5px;display:grid;place-items:center;background:none;border:0;border-radius:10px;color:var(--m);cursor:pointer}.dismiss:hover{background:rgba(255,255,255,.08);color:var(--t)}
.nudge{font-size:13px;margin-top:3px}
.suggestions .person .meta{white-space:normal}
.suggestions:not(.all) [data-suggestion]:nth-of-type(n+6){display:none}
.morepeople{align-self:flex-start;font-size:14px;min-height:44px}
.vibes{display:flex;gap:8px;flex-wrap:wrap}.vibes:empty{display:none}
.vibe{background:none;font:400 13px var(--ui);min-height:36px;cursor:pointer}.vibe:hover{border-color:var(--t);color:var(--t)}
@media (max-width:899px){.vibe,.dismiss{min-height:44px;min-width:44px}.olderbtn{min-height:44px}.nav a{min-height:48px}.comment .postact.iconly{min-width:44px;height:44px;margin-top:-8px}.composer .seg b{padding:14px 15px}.composer .icon{width:44px;height:44px}}
@media (max-width:359px){.person .btn.sm{padding:0 10px}.postsong .drop .art{width:68px;height:68px}.postsong .droptitle{font-size:16px}}
@media (min-width:900px){.feedcol .top{padding:24px 28px 16px}.discover{padding:30px 32px 40px;gap:18px}.discovergrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}}
@media (prefers-reduced-motion:reduce){.postact.bump svg{animation:none}.postact,.sharerow{transition:none}.skeleton{animation:none}}
.postlist>.btn[hidden]{display:none}

/* The way to Friends, and the post's own page. */
.discoverhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.friendslink{display:inline-flex;align-items:center;gap:7px;flex:none}.friendslink .badge{margin:0}
.postwho a{color:inherit}.postwho a.postwhen{color:var(--d)}.postwho a.postwhen:hover{color:var(--t);text-decoration:underline}
@media (max-width:899px){.friendslink{min-height:44px}.postwhen{display:inline-block;padding:4px 0}}
.postpage{display:flex;flex-direction:column;gap:14px;padding:18px 16px 28px;max-width:640px;margin:0 auto;width:100%}
.empty.small .title{font-size:17px;line-height:1.3}