/* Shared sticky app header for chrome_base.j2 pages (homepage, inbox,
   settings, admin). The header is a non-scrolling flex child pinned at the
   top; the page content lives in `.app-scroll` below it and scrolls within
   that container — mirroring the fixed-topbar + scrolling-pane layout the
   profile pages (profile.css) already use. Color/font tokens come from
   tokens.css. */

/* Scoped to `.app-shell` (set by chrome_base.j2 only when a user is present)
   so the anonymous login / accept-invite pages keep their own centered
   body layout (auth.css). */
body.app-shell {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* The body is the viewport; the header is fixed and .app-scroll owns all
     vertical scrolling. */
  overflow: hidden;
}

.app-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--ns-header-h);
  /* Left gutter matches the page content gutter; the wide right lane clears
     the fixed chrome cluster (avatar + inbox + admin "+") that floats at the
     top-right of every authed page. */
  padding: 0 9.75rem 0 1.5rem;
  border-bottom: 1px solid var(--ns-border);
  background: color-mix(in oklab, var(--ns-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  position: relative;
  z-index: 40;
}

/* The chrome cluster (avatar + inbox + admin "+") centers itself within the
   --ns-header-h band via topbar-chrome.css — one rule for every page, so it's
   not re-centered here. */

.app-header__brand {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  min-width: 0;
}

.app-header__wordmark {
  font-family: var(--ns-font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ns-text);
  text-decoration: none;
  white-space: nowrap;
}

.app-header__tagline {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ns-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right-hand slot of the header (e.g. homepage search, inbox greeting). */
.app-header__aside {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.app-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  .app-header {
    /* The chrome cluster shrinks on phones (no admin "+"); reclaim the lane
       so the wordmark/aside aren't crammed. */
    padding: 0 5.5rem 0 1rem;
    gap: 1rem;
  }
  /* Drop the secondary text so the wordmark + aside (e.g. search) fit. */
  .app-header__tagline {
    display: none;
  }
}