/* ===== Shared atoms ===== */
.avatar{ border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; background-color:var(--sage-3); }
.chip{
  font-family:var(--font-mono); font-size:11px; padding:7.5px 14px; border-radius:999px; border:1.5px solid var(--line);
  white-space:nowrap; color:var(--cream-dim); flex-shrink:0; transition:background .15s, border-color .15s, color .15s;
  display:inline-flex; align-items:center; gap:6px;
}
.chip:hover:not([disabled]){ border-color:var(--line-strong); }
.chip[aria-pressed="true"]{ background:var(--sage-3); color:var(--black); border-color:var(--sage-3); font-weight:700; }
.chip .ct{ font-size:10px; opacity:.7; }
.genre-tag{ font-family:var(--font-mono); font-size:10.5px; padding:4px 10px; border-radius:999px; background:rgb(var(--ink-rgb) / .07); color:var(--cream-dim); white-space:nowrap; }
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:12.5px; padding:7px 15px; border-radius:999px; background:rgb(var(--ink-rgb) / .08); white-space:nowrap; }
.btn-ghost:hover{ background:rgb(var(--ink-rgb) / .14); }
/* Discover / artist-page follow: Follow → Following */
.btn-follow{ font-weight:700; font-size:12.5px; padding:7px 15px; border-radius:999px; border:1.5px solid var(--line-strong); transition:background .15s, color .15s, border-color .15s, transform .15s; white-space:nowrap; }
.btn-follow:hover{ border-color:var(--sage-4); }
.btn-follow:active{ transform:scale(.95); }
.btn-follow.solid{ background:var(--sage-3); color:var(--black); border-color:var(--sage-3); }
.btn-follow.on{ background:rgb(var(--ink-rgb) / 0.08); border-color:transparent; color:var(--sage-4); }
/* Interested → Going ✓ (same toggle on feed gig cards, the map and artist pages) */
.btn-go{ font-weight:700; font-size:12px; padding:7px 13px; border-radius:999px; background:var(--cat-gig); color:var(--black); white-space:nowrap; transition:background .15s, color .15s, transform .15s; }
.btn-go:active{ transform:scale(.95); }
.btn-go.on{ background:rgba(255,159,90,.18); color:var(--cat-gig); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:13px; padding:9px 14px; border-radius:12px; white-space:nowrap; transition:background .15s, transform .15s, border-color .15s; }
.btn:active{ transform:scale(.96); }
.btn.primary{ background:var(--sage-3); color:var(--black); }
.btn.primary:hover{ background:var(--sage-4); }
.btn.ghost{ background:rgb(var(--ink-rgb) / .09); }
.btn.ghost:hover{ background:rgb(var(--ink-rgb) / .15); }
.btn.outline{ border:1.5px solid var(--line-strong); }
.btn.outline:hover{ border-color:var(--sage-4); }
.ib{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--cream); flex-shrink:0; transition:background .15s; position:relative; }
.ib:hover{ background:rgb(var(--ink-rgb) / .08); }
.ib.glass{ background:rgb(var(--scrim-rgb) / .55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgb(var(--ink-rgb) / .14); }
.ib .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:1.5px solid var(--black); }
.role{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:20px; background:rgb(var(--accent-rgb) / 0.18); border:1px solid rgb(var(--accent-rgb) / 0.45); color:var(--sage-4); white-space:nowrap; }
.sec-h{ display:flex; align-items:baseline; justify-content:space-between; padding:0 16px; margin:22px 0 10px; }
.sec-h h3{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:0; }
.sec-h button, .sec-h small{ font-family:var(--font-mono); font-size:10.5px; color:var(--sage-4); }
.search{ position:relative; }
.search input{
  width:100%; font-family:var(--font-body); font-size:14px; color:var(--cream);
  background:rgb(var(--shade-rgb) / calc(0.22 * var(--shade-k))); border:1.5px solid var(--field-line); border-radius:14px; padding:12px 40px 12px 40px;
  transition:border-color .15s, background .15s; -webkit-appearance:none; appearance:none;
}
.search input::placeholder{ color:var(--cream-dim); opacity:.6; font-style:italic; }
.search input:focus{ outline:none; border-color:var(--sage-3); background:rgb(var(--shade-rgb) / calc(.3 * var(--shade-k))); }
.search input::-webkit-search-cancel-button{ display:none; }
.search .s-ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--sage-4); pointer-events:none; display:flex; z-index:1; }
.search .s-clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:1; width:26px; height:26px; border-radius:50%; display:none; align-items:center; justify-content:center; color:var(--cream-dim); background:rgb(var(--ink-rgb) / .08); }
.search.has-q .s-clear{ display:flex; }
.stack{ display:inline-flex; }
.stack .avatar{ border:2px solid var(--charcoal); margin-left:-7px; }
.stack .avatar:first-child{ margin-left:0; }
.dt{ width:44px; flex-shrink:0; align-self:flex-start; text-align:center; border-radius:12px; overflow:hidden; background:var(--cream); color:var(--black); }
.dt small{ display:block; background:var(--cat-gig); font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:2px 0; }
.dt b{ display:block; font-family:var(--font-display); font-size:20px; line-height:1.2; padding:1px 0 2px; }
.mutual{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--cream-dim); }
.mutual b{ color:var(--cream); font-weight:600; }
.empty{ text-align:center; padding:50px 28px; color:var(--cream-dim); }
.empty img{ margin:0 auto; opacity:.55; }
.empty h4{ font-family:var(--font-display); font-size:17px; color:var(--cream); margin:12px 0 4px; }
.empty p{ font-size:12.5px; margin:0 0 14px; }
.endcap{ text-align:center; padding:24px 16px 30px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim); }
.endcap svg{ display:block; margin:0 auto 8px; color:var(--sage-3); }

/* play + waveform (one player shared by every tab) */
.pbtn{ width:34px; height:34px; border-radius:50%; background:var(--cream); color:var(--black); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .15s, background .15s; }
.pbtn:active{ transform:scale(.9); }
.pbtn .i-pause{ display:none; } .pbtn.on .i-pause{ display:block; } .pbtn.on .i-play{ display:none; }
.wv{ position:relative; height:24px; flex:1; min-width:0; --p:0%; }
.wv-l{ position:absolute; inset:0; display:flex; align-items:center; gap:2px; }
.wv-l i{ flex:1; min-width:2px; border-radius:2px; background:currentColor; }
.wv-base{ opacity:.32; }
.wv-fill{ color:var(--sage-3); clip-path:inset(0 calc(100% - var(--p)) 0 0); transition:clip-path .2s linear; }
.tm{ font-family:var(--font-mono); font-size:11px; color:var(--cream-dim); min-width:32px; text-align:right; }

/* horizontal rails: drag / swipe, edge fades, arrow buttons, scroll track */
.rail{ position:relative; --rail-bg:var(--black); }
.rail::before, .rail::after{ content:""; position:absolute; top:0; bottom:0; width:34px; z-index:3; pointer-events:none; opacity:0; transition:opacity .2s; }
.rail::before{ left:0; background:linear-gradient(90deg, var(--rail-bg), transparent); }
.rail::after{ right:0; background:linear-gradient(270deg, var(--rail-bg), transparent); }
.rail.can-l::before, .rail.can-r::after{ opacity:1; }
.rail.no-fade::before, .rail.no-fade::after{ display:none; }
[data-rail]{ position:relative; cursor:grab; -webkit-user-select:none; user-select:none; }
[data-rail].dragging{ cursor:grabbing; scroll-snap-type:none !important; scroll-behavior:auto !important; }
[data-rail].dragging > *{ pointer-events:none; }
.rail-btn{
  position:absolute; top:50%; z-index:4; width:30px; height:30px; margin-top:-15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--cream);
  background:rgb(var(--scrim-rgb) / .85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line-strong);
  box-shadow:0 6px 16px -6px rgb(var(--shade-rgb) / calc(.7 * var(--shade-k))); opacity:0; pointer-events:none; transform:scale(.8);
  transition:opacity .2s, transform .2s var(--ease-spring), background .15s;
}
.rail-btn:hover{ background:var(--sage-2); }
.rail-btn.l{ left:6px; } .rail-btn.r{ right:6px; }
.rail.can-l .rail-btn.l, .rail.can-r .rail-btn.r{ opacity:1; pointer-events:auto; transform:none; }
@media (hover:none){ .rail-btn{ display:none; } }
.rail-track{ height:14px; margin:2px 16px 0; position:relative; cursor:pointer; touch-action:none; }
.rail-track::before{ content:""; position:absolute; left:0; right:0; top:50%; height:3px; transform:translateY(-50%); border-radius:999px; background:rgb(var(--ink-rgb) / 0.1); }
.rail-track i{ position:absolute; top:50%; left:0; height:5px; min-width:26px; border-radius:999px; background:var(--sage-3); transform:translateY(-50%); cursor:grab; transition:background .1s, height .1s; }
.rail-track i:hover, .rail-track.dragging i{ background:var(--sage-4); height:6px; }
.rail-track[hidden]{ display:none; }

/* toast (frame-level, with optional Undo) */
#toast{
  position:absolute; left:50%; bottom:104px; transform:translate(-50%,8px); z-index:130; opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:12px; max-width:calc(100% - 28px);
  background:var(--cream); color:var(--black); padding:9px 16px; border-radius:999px; font-size:12.5px; font-weight:700;
  box-shadow:0 10px 30px rgb(var(--shade-rgb) / calc(.4 * var(--shade-k))); transition:opacity .2s, transform .25s var(--ease-out); white-space:nowrap;
}
#frame[data-tab="feed"] #toast{ bottom:152px; }
#toast.show{ opacity:1; transform:translate(-50%,0); }
#toast.show:has(button){ pointer-events:auto; }
#toast .msg{ overflow:hidden; text-overflow:ellipsis; }
#toast button{ color:var(--sage-2); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.06em; padding:4px 2px; flex-shrink:0; }
#toast button:hover{ text-decoration:underline; }

/* Bottom sheets live inside the phone; the app behind is made inert while one is open */
#sheet-host{ position:absolute; inset:0; z-index:110; display:none; }
#sheet-host.open{ display:block; }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(10,8,18,.62); animation:fadeIn .2s ease; }
.sheet{ position:absolute; left:0; right:0; bottom:0; max-height:88%; overflow-y:auto; scrollbar-width:none; background:var(--charcoal); border-radius:24px 24px 0 0; border-top:1px solid var(--line); padding:10px 18px 26px; animation:sheetUp .32s var(--ease-out); }
.sheet::-webkit-scrollbar{ display:none; }
.sheet-grab{ width:38px; height:4px; border-radius:4px; background:var(--line-strong); margin:0 auto 14px; }
.sheet h3{ font-family:var(--font-display); font-size:20px; margin:0 0 4px; }
.sheet .sub{ color:var(--cream-dim); font-size:12.5px; margin:0 0 14px; }
.sheet .prow, .sheet .srow{ padding:9px 0; }
.sheet .favs{ padding:0; }
.sheet .grp-h{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage-4); margin:16px 0 8px; display:flex; justify-content:space-between; }
.sheet .chip-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.sheet .apply{ width:100%; margin-top:20px; padding:13px; border-radius:999px; background:var(--sage-3); color:var(--black); font-weight:700; font-size:14px; }
.sheet .reset{ font-family:var(--font-mono); font-size:11px; color:var(--sage-4); }
.sheet label{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage-4); margin:14px 0 8px; }
.sheet textarea{ width:100%; min-height:84px; resize:none; font:inherit; font-size:14px; line-height:1.45; color:var(--cream); background:rgb(var(--shade-rgb) / calc(.22 * var(--shade-k))); border:1.5px solid var(--field-line); border-radius:14px; padding:11px 12px; }
.sheet textarea:focus{ outline:none; border-color:var(--sage-3); }
.sheet .count{ display:block; text-align:right; font-family:var(--font-mono); font-size:10px; color:var(--cream-dim); margin-top:4px; }
.sheet .full{ width:100%; margin-top:18px; padding:13px; border-radius:999px; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.post-hero{ border-radius:16px; overflow:hidden; aspect-ratio:4/3.6; margin-bottom:12px; background-size:cover; background-position:center; }
@keyframes sheetUp{ from{ transform:translateY(100%);} to{ transform:none; } }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* Floating glass navigation bar — one bar shared by every tab */
.nav{ display:flex; position:absolute; left:14px; right:14px; bottom:14px; padding:10px 6px; border-radius:24px; background:rgb(var(--scrim-rgb) / .82); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); border:1px solid rgb(var(--ink-rgb) / .12); box-shadow:0 18px 40px -12px rgb(var(--shade-rgb) / calc(.8 * var(--shade-k))); z-index:40; view-transition-name:nav; }
.nav button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--cream-dim); position:relative; min-height:24px; justify-content:center; }
.nav button:hover{ color:var(--cream); }
.nav button.active{ color:var(--sage-4); }
.nav button.active::before{ content:""; position:absolute; top:-10px; width:18px; height:3px; border-radius:0 0 3px 3px; background:var(--sage-3); }
.nav .dot{ position:absolute; top:-2px; right:26%; width:7px; height:7px; border-radius:50%; background:var(--danger); }
.nav .badge{ position:absolute; top:-6px; left:54%; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--cat-gig); color:var(--black); font-family:var(--font-mono); font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.nav .badge[hidden]{ display:none; }