/* ================================================================
   The signed-in header on public pages (lib/portal-header.js).
   Matches the dashboard's header in portal.css + dashboard.css, but
   self-contained: pages that load it use styles.css, not portal.css.
   Uses styles.css's Ember tokens.
   ================================================================ */

/* Set in the page head when a session looks present; removed once the
   swap has happened or been ruled out. */
html.portal-pending .site-header { visibility: hidden; }

.portal-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(25, 18, 29, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.portal-header .bar { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.portal-header .wordmark {
  font-family: var(--font-mono);
  font-weight: 500;
  font-stretch: normal;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.portal-header .wordmark:hover { text-decoration: none; color: var(--ink); }

.portal-nav { display: flex; gap: 20px; margin-left: auto; align-items: center; font-size: 15px; }
.portal-nav a { color: var(--paper-dim); text-underline-offset: 4px; }
.portal-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); }
.portal-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

.portal-header .who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--slate); }
.portal-header .who-text { margin: 0; line-height: 1.3; }
.portal-header .who-text strong { display: block; color: var(--ink); font-weight: 500; }

.portal-header .avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3B2A42, #221927);
  border: 1.5px solid var(--gold);
  color: var(--gold-pale);
  font: 500 12.5px/1 var(--font-mono);
  letter-spacing: 0.04em;
}

.portal-header .nav-btn {
  padding: 7px 14px;
  border: 1px solid var(--hairline-dark);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: 500 14px/1.2 var(--font-body);
  cursor: pointer;
}
.portal-header .nav-btn:hover { border-color: var(--slate); background: rgba(255, 255, 255, 0.04); }
.portal-header .nav-btn[disabled] { opacity: 0.6; cursor: progress; }

@media (max-width: 860px) {
  .portal-header .bar { flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .portal-nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 12px 18px; }
}