/* Shared sticky topbar used across the public-facing Therapy Sound
   family of pages (Sessions, Schedule, Moments, Artists). Hidden on
   mobile — the existing pill_header macro still owns ≤767px. */

.ps-topbar { display: none; }

@media (min-width: 768px) {
  .ps-topbar {
    /* Floating glass pill — centered with a max width so it doesn't
       stretch edge-to-edge on wide displays. Margins from the
       viewport top/edges keep it floating over content. */
    position: fixed;
    top: max(env(safe-area-inset-top, 0), 1rem);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 1180px;
    z-index: 600;
    /* Three equal-weight columns so the centre nav pill is truly
       centred regardless of how many social / user-pill items
       occupy the right column. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .55rem .85rem;
    background: rgba(13,13,20,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  }
  .ps-tabs    { justify-self: center; }
  .ps-actions { justify-self: end; }
}

.ps-brand {
  display: inline-flex; align-items: center;
  font-family: 'Public Sans', sans-serif; font-weight: 900;
  font-size: 1.05rem; letter-spacing: .02em;
  color: #e8eaf0; flex-shrink: 0;
  text-decoration: none;
}
.ps-brand-white { color: #e8eaf0; }
.ps-brand-teal  { color: #14b8a6; margin-left: .35em; }
.ps-brand-dot   { color: #f97316; margin-left: .15em; }

.ps-tabs {
  display: inline-flex; gap: .15rem;
}
.ps-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  color: rgba(232,234,240,0.62); font-weight: 600; font-size: .85rem;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ps-tab i { font-size: .95rem; }
.ps-tab:hover { color: #e8eaf0; }
.ps-tab.is-active {
  color: #14b8a6;
}
.ps-tab.is-locked {
  color: rgba(232,234,240,0.32);
  cursor: not-allowed;
}
.ps-tab.is-locked:hover { color: rgba(232,234,240,0.5); }
.ps-tab.is-locked i { opacity: .6; }

/* Toast for locked-tab clicks */
.ps-toast {
  position: fixed;
  top: max(env(safe-area-inset-top, 0), 5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: .55rem 1rem;
  border-radius: 999px;
  background: rgba(13,13,20,0.92);
  border: 1px solid rgba(20,184,166,0.45);
  color: #14b8a6;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .02em;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.ps-toast[hidden] { display: none !important; }
.ps-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ps-right {
  justify-self: end;
  display: inline-flex; align-items: center;
  flex-shrink: 0;
}
.ps-actions {
  display: inline-flex; align-items: center; gap: .35rem;
  flex-shrink: 0;
}
.ps-action {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #e8eaf0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ps-action:hover {
  color: #14b8a6;
  border-color: rgba(20,184,166,0.45);
}

.ps-user {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .25rem .85rem .25rem .25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: #e8eaf0; cursor: pointer;
  font-size: .85rem; font-weight: 600;
  margin-left: .25rem;
  font-family: inherit;
}
.ps-user:hover { border-color: rgba(20,184,166,0.45); }
.ps-user-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #00d2be, #14b8a6);
  color: #06121a; font-weight: 800; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ps-user-av--sm { width: 26px; height: 26px; font-size: .75rem; }
.ps-user-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ps-user-nm { white-space: nowrap; }
.ps-user .bi-chevron-down { font-size: .7rem; opacity: .6; }
.ps-user--anon {
  padding: .55rem 1.1rem; gap: .4rem;
}

/* ── Hamburger (tablet only) ── */
.ps-burger-wrap { position: relative; display: none; }
.ps-burger {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #e8eaf0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.15rem;
  transition: background .15s, border-color .15s, color .15s;
}
.ps-burger:hover { color: #14b8a6; border-color: rgba(20,184,166,0.45); }
.ps-burger[aria-expanded="true"] {
  color: #14b8a6;
  border-color: rgba(20,184,166,0.55);
  background: rgba(20,184,166,0.08);
}
.ps-burger-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: rgba(13,13,20,0.95);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: .35rem;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: .1rem;
  z-index: 700;
}
/* HTML's [hidden] attribute uses display:none but the .ps-burger-menu
   rule above sets display:flex — making `hidden` a no-op. Force it to
   win so toggling menu.hidden actually hides the menu. */
.ps-burger-menu[hidden] { display: none !important; }
.ps-burger-item {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .6rem .85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(232,234,240,0.85);
  font: inherit; font-size: .9rem; font-weight: 500;
  text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ps-burger-item i { font-size: 1.05rem; flex-shrink: 0; opacity: .85; }
.ps-burger-item:hover {
  background: rgba(255,255,255,0.05);
  color: #e8eaf0;
}
.ps-burger-item--cta {
  color: #14b8a6;
  background: rgba(20,184,166,0.10);
  border-color: rgba(20,184,166,0.30);
  font-weight: 600;
  margin-top: .15rem;
}
.ps-burger-item--cta:hover {
  background: rgba(20,184,166,0.18);
  color: #14b8a6;
}
.ps-burger-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: .25rem .35rem;
}

/* Tablet 768–1023px: hide inline actions, show hamburger. */
@media (min-width: 768px) and (max-width: 1023px) {
  .ps-actions { display: none; }
  .ps-burger-wrap { display: block; }
}

/* Hide brand-menu Platform section on tablet/desktop — those links are
   already in the topbar pill, repeating them in the dropdown is noise. */
@media (min-width: 768px) {
  .brand-menu .bm-section--mobile-only { display: none; }
}