/* Feed v9: a Twitter-style timeline. Edge to edge posts split by hairlines, avatar column on the left, likes and replies. */
.tl-feed{--line:rgba(255,255,255,.08);--mut:rgba(235,235,245,.52);--like:#f91880;--rep:#8f82ec}
/* tabs: equal width, pill under the active one, stick under the top bar */
.tl-tabs{position:sticky;top:0;z-index:20!important;display:grid!important;grid-template-columns:repeat(3,1fr);gap:0!important;margin:0!important;padding:0;background:#07070b!important;border-bottom:1px solid var(--line)!important}
#hm.scrolled .tl-tabs{top:var(--hm-nbh,44px)}
.tl-tabs button{height:50px!important;display:grid;place-items:center;font-size:15px!important;font-weight:600!important;color:var(--mut)!important}
.tl-tabs button span{position:relative;display:inline-block;height:100%;line-height:50px}
.tl-tabs button.on{color:#fff!important;font-weight:750!important}
.tl-tabs button.on:after{display:none}
.tl-tabs button.on span:after{content:"";position:absolute;left:-2px;right:-2px;bottom:0;height:4px;border-radius:4px;background:var(--acc,#8f82ec)}
/* "What's happening?" */
.tl-comp{display:flex;align-items:center;gap:12px;width:100%;padding:12px var(--pad);border-bottom:1px solid var(--line);text-align:left}
.tl-comp>span:not(.fa){flex:1;font-size:17px;color:var(--mut)}
.tl-comp>i{display:grid;place-items:center;width:34px;height:34px;color:var(--acc,#8f82ec)}
.tl-comp>i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9}
.tl-comp>b{height:34px;padding:0 16px;border-radius:99px;display:grid;place-items:center;font-size:14.5px;font-weight:750;background:var(--acc,#8f82ec);color:#fff;opacity:.55}
/* the list */
.ff3 .tl-list,.fcp3 .tl-list,.fu3 .tl-list,.tl-list{display:block!important;gap:0!important;border-top:0!important}
.ff3 .fl-list.tl-list{margin:0!important;padding:0}
.tl{position:relative;display:block;padding:12px var(--pad) 4px;border-bottom:1px solid var(--line,rgba(255,255,255,.08));background:none;transition:background .15s}
.tl:active:not(:has(button:not(.tl-hit):active)){background:rgba(255,255,255,.03)}
.tl-hit{position:absolute;inset:0;z-index:0}
.tl>*:not(.tl-hit){position:relative;z-index:1;pointer-events:none}
.tl button,.tl a{pointer-events:auto}
.tl-ctx{display:flex;align-items:center;gap:8px;margin:0 0 6px 30px;font-size:13px;font-weight:650;color:var(--mut,rgba(235,235,245,.52))}
.tl-ctx .fci.xs{width:16px;height:16px;border-radius:5px;font-size:8px;background:color-mix(in srgb,var(--cc) 85%,#000)}
.tl-row{display:flex;gap:12px}
.tl-av{flex:none;align-self:flex-start}
.tl-main{flex:1;min-width:0}
.tl-h{display:flex;align-items:center;gap:6px;min-width:0;height:20px}
.tl-who{display:flex;align-items:baseline;gap:5px;min-width:0;flex:1;text-align:left;overflow:hidden;white-space:nowrap}
.tl-n{display:inline-flex;align-items:center;gap:3px;min-width:0;flex:none;max-width:62%}
.tl-n .fn{font-size:15px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-n .fv{width:16px;height:16px;align-self:center}
.tl-at,.tl-dot,.tl-who time{font-size:14.5px;color:var(--mut,rgba(235,235,245,.52));white-space:nowrap}
.tl-at{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.tl-dot,.tl-who time{flex:none}
.tl-more{flex:none;width:30px;height:30px;margin-right:-6px;display:grid;place-items:center;border-radius:50%;color:var(--mut,rgba(235,235,245,.52))}
.tl-more svg{width:18px;height:18px}
.tl-to{margin-top:2px;font-size:14px;color:var(--mut,rgba(235,235,245,.52))}
.tl-to .fl{font-weight:500}
.tl .fl{display:inline;padding:0;margin:0;font:inherit;color:var(--acc2,#b4a9ff);font-weight:600}
.tl-ti{margin:3px 0 0;font-size:15.5px;line-height:1.35;font-weight:750}
.tl-x{margin:2px 0 0;font-size:15.5px;line-height:1.42;color:rgba(255,255,255,.92);white-space:pre-wrap;word-break:break-word}
.tl-ti+.tl-x{margin-top:3px}
.tl-x.clip{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.tl-img{margin-top:10px;border-radius:16px;overflow:hidden;border:1px solid var(--line,rgba(255,255,255,.08));max-height:460px}
.tl-img img{display:block;width:100%;max-height:460px;object-fit:cover}
/* actions */
.tl-a{display:flex;align-items:center;justify-content:space-between;max-width:330px;margin:4px 0 0 -9px}
.tl-a button{display:flex;align-items:center;gap:2px;height:36px;padding:0 6px 0 0;font-size:13px;font-weight:500;color:var(--mut,rgba(235,235,245,.52));font-variant-numeric:tabular-nums}
.tl-a svg{box-sizing:content-box;width:19px;height:19px;padding:8px;margin:-8px -6px -8px -8px;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;transition:background .15s,color .15s}
.tl-a b{font-weight:500;min-width:16px;padding-left:6px;text-align:left}
.tl-r:active{color:var(--rep)}.tl-r:active svg{background:color-mix(in srgb,var(--rep,#8f82ec) 16%,transparent)}
.tl-l:active svg{background:rgba(249,24,128,.14)}
.tl-l.on{color:var(--like,#f91880)}
.tl-l.on svg{fill:currentColor}
.tl-l.pop svg{animation:tlpop .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes tlpop{0%{transform:scale(.6)}55%{transform:scale(1.28)}100%{transform:scale(1)}}
.tl-s{padding-right:0!important}
@media(hover:hover){.tl:hover{background:rgba(255,255,255,.022)}.tl-r:hover{color:var(--rep)}.tl-r:hover svg{background:color-mix(in srgb,var(--rep,#8f82ec) 16%,transparent)}.tl-l:hover{color:var(--like,#f91880)}.tl-l:hover svg{background:rgba(249,24,128,.12)}.tl-s:hover svg,.tl-more:hover{background:rgba(255,255,255,.07)}}
/* who to follow */
.tl-wtf{border-bottom:1px solid var(--line);padding:14px 0 6px}
.tl-wtf h3{margin:0 var(--pad) 4px;font-size:20px;font-weight:850;letter-spacing:-.02em}
.tl-who-r{display:flex;align-items:center;gap:12px;padding:10px var(--pad)}
.tl-wt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.tl-wt .tl-n{max-width:100%}
.tl-wt .tl-at{font-size:14px}
.tl-wt small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;font-size:13.5px;color:rgba(255,255,255,.75)}
.tl-fol{flex:none;height:34px;padding:0 16px;border-radius:99px;background:#fff;color:#0b0b10;font-size:14px;font-weight:750;transition:transform .12s}
.tl-fol:active{transform:scale(.95)}
.tl-fol.on{background:none;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
/* empty state */
.tl-feed .fe{padding:44px 24px}
/* write button */
.tl-feed .tl-fab{background:var(--acc,#8f82ec)!important;color:#fff!important;box-shadow:0 10px 26px -6px color-mix(in srgb,var(--acc,#8f82ec) 60%,transparent),0 2px 8px rgba(0,0,0,.5)!important}
.tl-fab svg{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* one post open */
.tl-fd .fd-top{margin-bottom:6px}
.tl-full{padding:6px 0 0;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.tl-full .tl-ctx{margin-left:0}
.tl-fh{display:flex;align-items:center;gap:12px}
.tl-fwho{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.tl-fwho .tl-n{max-width:100%}
.tl-full .tl-ti{margin-top:12px;font-size:19px}
.tl-full .tl-x{margin-top:12px;font-size:18px;line-height:1.4}
.tl-full .tl-ti+.tl-x{margin-top:6px}
.tl-time{margin-top:14px;padding-bottom:14px;font-size:14.5px;color:var(--mut,rgba(235,235,245,.52));border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.tl-stat{display:flex;gap:18px;padding:12px 0;font-size:14.5px;color:var(--mut,rgba(235,235,245,.52));border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.tl-stat b{color:#fff;font-weight:750}
.tl-full .tl-a{max-width:none;justify-content:space-around;margin:2px 0;padding:2px 0}
.tl-full .tl-a b{display:none}
.tl-full .tl-a svg{width:22px;height:22px}
.tl-rep{position:static!important;margin:0;padding:10px 0!important;border-bottom:1px solid var(--line,rgba(255,255,255,.08));background:none!important;box-shadow:none!important}
.tl-rep .fd-in{align-items:center}
.tl-rep textarea{font-size:16.5px}
.tl-rep .fd-send{background:var(--acc,#8f82ec)!important;color:#fff!important;border-radius:99px}
.tl-ths .tl{padding-left:0;padding-right:0}
.tl-th>.tl{border-bottom:0}
.tl-th{border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.tl-th.sub{border-bottom:0}
.tl-kids{position:relative;padding-left:24px;margin-left:17px;border-left:2px solid rgba(255,255,255,.1)}
.tl-kids .tl{padding-top:8px}
.tl-none{padding:28px 0;text-align:center;font-size:14.5px;color:var(--mut,rgba(235,235,245,.52))}
/* inside a space page and profiles the list runs edge to edge too */
.fcp3 .fl-list.tl-list{margin:0 calc(var(--pad) * -1)!important;padding:0 0 24px}
.fu3 .fl-list.tl-list{margin:0 calc(var(--pad) * -1)!important;padding:0 0 24px;border-top:1px solid rgba(255,255,255,.08)!important}
/* composer */
.tl-cmp .fcmp-go{background:var(--acc,#8f82ec)!important;color:#fff!important;border-radius:99px}
.tl-cmp textarea#fpb{font-size:19px;line-height:1.4;min-height:130px}
@media(min-width:700px){.tl-tabs{border-radius:0}.ff.tl-feed .tl,.ff.tl-feed .tl-comp,.ff.tl-feed .tl-who-r{padding-left:16px;padding-right:16px}.ff.tl-feed .tl-wtf h3{margin-left:16px}}
html[data-theme]:not([data-theme=midnight]) .tl-tabs{background:var(--bar)!important}
.tl-n .fv{width:16px!important;height:16px!important}
.tl-feed .f7-sh:first-child{margin-top:20px}
.tl-who,.tl-fwho,.tl-wt,.tl-ctx,.x9-pn{padding:0}
#ffb{position:relative;z-index:0;isolation:isolate}

/* post text never picks up paragraph margins from the sheet it's shown in */
.tl .tl-ti,.tl .tl-x{margin-bottom:0!important}
/* room to scroll the last post out from under the write button */
.ff.tl-feed{padding-bottom:calc(180px + var(--sab,0px))!important}
/* the write button posts to your profile, so it isn't shown on the Spaces list (that has its own Start a space) */
.tl-feed:has([data-ftab="comms"].on) .tl-fab{display:none}