/* CoreStream member portal frame. Mobile-first, server-rendered, PWA-safe. */
body { background: var(--cs-color-bg-deep); }
.member-app {
  min-height: 100dvh;
  background: var(--cs-hero-glow), var(--cs-color-bg);
}
.member-sidebar { display: none; }
.member-main {
  width: min(100%, var(--cs-mobile-column));
  margin-inline: auto;
  padding:
    calc(var(--cs-space-4) + env(safe-area-inset-top))
    var(--cs-space-5)
    calc(6.75rem + env(safe-area-inset-bottom));
}
.member-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  margin-bottom: var(--cs-space-8);
}
.member-topbar__logo { width: 9.25rem; height: auto; }
.member-topbar__account {
  display: grid;
  place-items: center;
  width: var(--cs-touch-target);
  height: var(--cs-touch-target);
  border: 1px solid var(--cs-color-line-strong);
  border-radius: 50%;
  background: rgba(10, 42, 77, .7);
  color: var(--cs-color-light-blue);
  text-decoration: none;
}
.member-topbar__account:hover { border-color: var(--cs-color-info-line); background: var(--cs-color-info-bg); }
.member-topbar__account svg { width: 1.25rem; height: 1.25rem; }
/* Staff-only shortcut into the cockpit (shown only when user.is_staff). Pushed
   to the right so it groups with the account button. */
.member-topbar__staff {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-left: auto; margin-right: .5rem;
  padding: .42rem .72rem;
  border: 1px solid var(--cs-color-line-strong); border-radius: 999px;
  background: rgba(10, 42, 77, .7); color: var(--cs-color-light-blue);
  text-decoration: none; font-size: var(--cs-font-size-small);
  font-weight: var(--cs-font-weight-semibold);
}
.member-topbar__staff:hover { border-color: var(--cs-color-info-line); background: var(--cs-color-info-bg); }
.member-topbar__staff svg { width: 1rem; height: 1rem; }
/* Staff-only "Back to Staff" link in the desktop sidebar (the topbar is hidden at
   desktop width, so the sidebar carries the round-trip link for staff owners). */
.member-sidebar__staff {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 var(--cs-space-4); padding: .42rem .72rem;
  border: 1px solid var(--cs-color-line-strong); border-radius: 999px;
  background: rgba(10, 42, 77, .7); color: var(--cs-color-light-blue);
  text-decoration: none; font-size: var(--cs-font-size-small);
  font-weight: var(--cs-font-weight-semibold); align-self: flex-start;
}
.member-sidebar__staff:hover { border-color: var(--cs-color-info-line); background: var(--cs-color-info-bg); }
.member-sidebar__staff svg { width: 1rem; height: 1rem; }
.member-page { display: grid; gap: var(--cs-space-6); min-width: 0; }
.member-page__header { display: grid; gap: var(--cs-space-3); }
.member-page__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  color: var(--cs-color-light-blue);
  font-size: var(--cs-font-size-caption);
  font-weight: var(--cs-font-weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.member-page__eyebrow svg { width: 1rem; height: 1rem; color: var(--cs-color-primary); }
.member-page__title {
  margin: 0;
  color: var(--cs-color-text-strong);
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: var(--cs-font-weight-bold);
  letter-spacing: -.035em;
  line-height: 1.08;
}
.member-page__support {
  max-width: 42rem;
  margin: 0;
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-body);
  line-height: 1.65;
}
.program-tabs {
  display: flex;
  gap: var(--cs-space-2);
  overflow-x: auto;
  margin-inline: calc(var(--cs-space-5) * -1);
  padding: 0 var(--cs-space-5) var(--cs-space-1);
  scrollbar-width: none;
}
.program-tabs::-webkit-scrollbar { display: none; }
.program-tabs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--cs-space-4);
  border: 1px solid var(--cs-color-line-strong);
  border-radius: var(--cs-radius-pill);
  background: rgba(3, 16, 31, .3);
  color: var(--cs-color-text-muted);
  font-size: var(--cs-font-size-small);
  font-weight: var(--cs-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.program-tabs__link:hover { color: var(--cs-color-text); border-color: rgba(204, 225, 246, .42); }
.program-tabs__link[aria-current="page"] {
  border-color: var(--cs-color-info-line);
  background: var(--cs-color-info-bg);
  color: var(--cs-color-light-blue);
}
.program-tabs__link[aria-disabled="true"] { opacity: .52; pointer-events: none; }
.member-section { display: grid; gap: var(--cs-space-4); }
.member-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cs-space-4);
}
.member-section__title { margin: 0; color: var(--cs-color-text-strong); font-size: var(--cs-font-size-h3); font-weight: 600; line-height: 1.25; }
.member-section__meta { margin: 0; color: var(--cs-color-text-subtle); font-size: var(--cs-font-size-small); }
.member-footer {
  display: grid;
  gap: var(--cs-space-2);
  padding-top: var(--cs-space-6);
  border-top: 1px solid var(--cs-color-line-subtle);
  color: var(--cs-color-text-subtle);
  font-size: var(--cs-font-size-caption);
  line-height: 1.6;
}
.member-footer__links { display: flex; flex-wrap: wrap; gap: var(--cs-space-4); }
.member-footer a { color: var(--cs-color-light-blue); text-underline-offset: .2em; }

.member-mobile-tabs {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  min-height: calc(4.75rem + env(safe-area-inset-bottom));
  padding: .375rem max(.375rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.375rem, env(safe-area-inset-left));
  border-top: 1px solid var(--cs-color-line);
  background: rgba(3, 16, 31, .97);
  backdrop-filter: blur(18px);
}
.member-mobile-tabs__link {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .125rem;
  min-width: 0;
  min-height: var(--cs-touch-target);
  border-radius: var(--cs-radius-md);
  color: var(--cs-color-text-subtle);
  font-size: .625rem;
  font-weight: var(--cs-font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
}
.member-mobile-tabs__link span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-mobile-tabs__link svg { width: 1.375rem; height: 1.375rem; }
.member-mobile-tabs__link[aria-current="page"] { background: rgba(1, 126, 255, .14); color: var(--cs-color-light-blue); }

@media (min-width: 56.25rem) {
  .member-app { display: grid; grid-template-columns: var(--cs-desktop-sidebar) minmax(0, 1fr); }
  .member-sidebar {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding: var(--cs-space-8) var(--cs-space-5) var(--cs-space-6);
    border-inline-end: 1px solid var(--cs-color-line);
    background: rgba(3, 16, 31, .98);
  }
  .member-sidebar__logo { width: 10.5rem; height: auto; margin-bottom: var(--cs-space-10); }
  .member-sidebar__nav { display: grid; gap: var(--cs-space-8); }
  .member-sidebar__group { display: grid; gap: var(--cs-space-1); }
  .member-sidebar__label {
    margin: 0 0 var(--cs-space-2);
    color: var(--cs-color-text-subtle);
    font-size: .6875rem;
    font-weight: var(--cs-font-weight-semibold);
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .member-sidebar__link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--cs-space-3);
    border-radius: var(--cs-radius-md);
    color: var(--cs-color-text-muted);
    font-size: var(--cs-font-size-small);
    font-weight: var(--cs-font-weight-medium);
    text-decoration: none;
  }
  .member-sidebar__link svg { width: 1.25rem; height: 1.25rem; margin-inline-end: var(--cs-space-3); flex: none; }
  .member-sidebar__link:hover { background: rgba(204, 225, 246, .06); color: var(--cs-color-text); }
  .member-sidebar__link[aria-current="page"] { background: rgba(1, 126, 255, .14); color: var(--cs-color-light-blue); }
  .member-sidebar__link[aria-disabled="true"] { opacity: .46; pointer-events: none; }
  .member-sidebar__profile {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: var(--cs-space-3);
    align-items: center;
    margin-top: auto;
    padding: var(--cs-space-3);
    border: 1px solid var(--cs-color-line);
    border-radius: var(--cs-radius-xl);
    background: rgba(10, 42, 77, .44);
  }
  .member-sidebar__avatar {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--cs-color-info-bg);
    color: var(--cs-color-light-blue);
    font-size: var(--cs-font-size-small);
    font-weight: 700;
  }
  .member-sidebar__profile-copy { min-width: 0; }
  .member-sidebar__handle { display: block; overflow: hidden; color: var(--cs-color-text); font-size: var(--cs-font-size-small); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .member-sidebar__role { display: block; color: var(--cs-color-text-subtle); font-size: .75rem; }
  .member-sidebar__profile svg { width: 1rem; height: 1rem; color: var(--cs-color-text-subtle); }
  .member-main {
    width: min(100%, var(--cs-desktop-content));
    margin-inline: auto;
    padding: var(--cs-space-12) var(--cs-space-8) var(--cs-space-16);
  }
  .member-topbar, .program-tabs, .member-mobile-tabs { display: none; }
  .member-page { gap: var(--cs-space-8); }
  .member-page__header { gap: var(--cs-space-4); }
  .member-page__title { font-size: 3.25rem; }
}