/* =====================================================================
   FEED — Timeline (feed.html): Local + Following in one tab
   ===================================================================== */
#scr-feed .scr{ overflow-anchor:none; }
.d3-head{ position:sticky; top:0; z-index:20; background:rgb(var(--scrim-rgb) / .88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); transition:transform .3s var(--ease-out); }
.d3-head.hide{ transform:translateY(-66px); }
.d3-row{ height:66px; padding:24px 14px 0; display:flex; align-items:center; justify-content:space-between; }
.d3-row img{ height:28px; width:auto; }
.d3-tabs{ display:flex; }
.d3-tabs button{ flex:1; padding:13px 0 12px; font-weight:600; font-size:14px; color:var(--cream-dim); position:relative; transition:color .2s; }
.d3-tabs button:hover{ background:rgb(var(--ink-rgb) / .03); }
.d3-tabs button[aria-selected="true"]{ color:var(--cream); font-weight:700; }
.d3-tabs button[aria-selected="true"]::after{ content:""; position:absolute; left:50%; bottom:0; width:56px; height:4px; margin-left:-28px; border-radius:4px; background:var(--sage-3); }
.d3-tabs small{ display:inline-block; font-family:var(--font-mono); font-size:10px; color:var(--sage-4); font-weight:500; margin-left:4px; }
.d3-tabs .bump small{ animation:bump .6s var(--ease-spring); }
@keyframes bump{ 0%{ transform:scale(1);} 40%{ transform:scale(1.6); color:var(--cream);} 100%{ transform:scale(1);} }
.d3-filters{ gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); }
.d3-filters .chip{ border-radius:10px; padding:7px 11px; }
.d3-filters .chip svg{ width:13px; height:13px; }
.t3{ display:flex; gap:11px; padding:13px 14px 10px; border-bottom:1px solid var(--line); transition:background .2s; }
.t3:hover{ background:rgb(var(--ink-rgb) / .02); }
.t3.leaving{ overflow:hidden; pointer-events:none; }
.t3.mine{ background:linear-gradient(90deg, rgb(var(--accent-rgb) / .07), transparent 60%); }
.t3-l{ display:flex; flex-direction:column; align-items:center; }
.t3-r{ flex:1; min-width:0; }
.t3-pin{ font-size:11.5px; color:var(--cat-ann); font-weight:600; display:flex; align-items:center; gap:6px; margin:-2px 0 4px; }
.t3-pin.gig{ color:var(--cat-gig); }
.t3-meta{ display:flex; align-items:center; gap:5px; font-size:13.5px; white-space:nowrap; }
.t3-meta .nm{ font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.t3-meta .nm:hover{ text-decoration:underline; }
.t3-meta .h{ color:var(--cream-dim); overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.t3-meta .ff, .t3-meta .you{ margin-left:auto; }
.t3-meta .you{ font-family:var(--font-mono); font-size:10px; color:var(--sage-4); padding:3px 8px; border-radius:999px; background:rgb(var(--accent-rgb) / .14); }
.t3-meta .more{ color:var(--cream-dim); padding:2px; }
.t3-meta .vf{ color:var(--sage-3); display:flex; }
.t3-txt{ font-size:14px; line-height:1.45; margin:3px 0 0; }
.t3-txt .ttl{ font-weight:700; }
.t3-txt .tag{ color:var(--sage-4); }
.t3-media{ margin-top:10px; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/11; }
.t3-media img{ width:100%; height:100%; object-fit:cover; }
.t3-sample{ margin-top:10px; display:flex; gap:12px; align-items:center; padding:10px; border-radius:16px; border:1px solid var(--line); background:var(--charcoal); }
.t3-sample .art{ width:58px; height:58px; border-radius:10px; background-size:cover; background-position:center; flex-shrink:0; position:relative; overflow:hidden; }
.t3-sample .art .pbtn{ position:absolute; inset:0; margin:auto; width:30px; height:30px; background:rgb(var(--ink-rgb) / .92); }
.t3-sample .mid{ flex:1; min-width:0; }
.t3-sample .mid b{ display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t3-sample .mid small{ font-family:var(--font-mono); font-size:10.5px; color:var(--cream-dim); }
.t3-sample .wv{ height:20px; margin-top:6px; }
.t3-gig{ margin-top:10px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,159,90,.3); background:var(--charcoal); }
.t3-gig .img{ display:block; width:100%; aspect-ratio:16/8; position:relative; }
.t3-gig .img img{ width:100%; height:100%; object-fit:cover; }
.t3-gig .img .onmap{ position:absolute; right:10px; top:10px; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; background:rgb(var(--scrim-rgb) / .78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--cream); }
.t3-gig .bot{ display:flex; align-items:center; gap:12px; padding:10px 12px; }
.t3-gig .date{ width:44px; text-align:center; flex-shrink:0; border-right:1px solid var(--line); padding-right:10px; }
.t3-gig .date small{ display:block; font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--cat-gig); letter-spacing:.06em; }
.t3-gig .date b{ font-family:var(--font-display); font-size:22px; line-height:1; }
.t3-gig .info{ flex:1; min-width:0; font-size:12px; color:var(--cream-dim); text-align:left; }
.t3-gig .info b{ display:block; font-size:13.5px; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t3-gig .go{ font-weight:700; font-size:12px; padding:7px 12px; border-radius:999px; border:1.5px solid var(--cat-gig); color:var(--cat-gig); white-space:nowrap; }
.t3-gig .go.on{ background:var(--cat-gig); color:var(--black); }
.t3-acts{ display:flex; justify-content:space-between; margin-top:10px; max-width:320px; }
.t3-acts .icon-act svg{ width:17px; height:17px; }
.t3-cmt{ font-size:12.5px; color:var(--cream-dim); margin-top:8px; padding:8px 10px; border-radius:12px; background:rgb(var(--ink-rgb) / .04); }
.t3-cmt b{ color:var(--cream); }
.icon-act{ display:inline-flex; align-items:center; gap:6px; color:var(--cream-dim); font-family:var(--font-mono); font-size:11.5px; transition:color .15s, transform .15s; }
.icon-act:hover{ color:var(--cream); }
.icon-act:active{ transform:scale(.9); }
.icon-act.on{ color:var(--amber); }
.icon-act.on svg{ animation:pop .35s var(--ease-spring); }
.save-act.on{ color:var(--sage-4); }
@keyframes pop{ 0%{transform:scale(.6);} 100%{transform:scale(1);} }
/* Feed follow: Follow (Local) is the filled primary action; Unfollow (Following) a quiet outline */
.ff{
  display:inline-flex; align-items:center; gap:5px; min-height:28px; flex-shrink:0;
  font-weight:700; font-size:12px; padding:5px 13px; border-radius:999px; border:1.5px solid var(--cream);
  background:var(--cream); color:var(--black);
  transition:background .15s, color .15s, border-color .15s, transform .15s var(--ease-spring); white-space:nowrap;
}
.ff:hover{ background:var(--sage-4); border-color:var(--sage-4); }
.ff:active{ transform:scale(.94); }
.ff.on{ background:transparent; border-color:var(--line-strong); color:var(--cream); }
.ff.on:hover{ border-color:var(--danger); color:var(--danger); background:rgba(201,106,79,.08); }
.ff.done{ background:var(--sage-3); border-color:var(--sage-3); color:var(--black); pointer-events:none; }
.ff.done.on{ background:transparent; border-color:var(--line); color:var(--cream-dim); }
.d3-new{
  position:absolute; left:50%; top:122px; z-index:25; transform:translate(-50%,-20px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; background:var(--sage-3); color:var(--black);
  font-weight:700; font-size:12.5px; box-shadow:0 10px 24px -6px rgb(var(--shade-rgb) / calc(.6 * var(--shade-k))); transition:opacity .3s, transform .4s var(--ease-spring);
}
.d3-new.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.d3-new .stack .avatar{ border-color:var(--sage-3); margin-left:-8px; }
.d3-new .stack .avatar:first-child{ margin-left:0; }
.d3-fab{ position:absolute; right:16px; bottom:86px; z-index:25; width:54px; height:54px; border-radius:18px; background:var(--sage-3); color:var(--black); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 28px -8px rgb(var(--accent-rgb) / .6); transition:transform .2s var(--ease-spring); }
.d3-fab:hover{ transform:scale(1.06) rotate(-4deg); }