/* Shared header / top navigation — source of truth: DESIGN.md §5.1.
   Scope: global (rendered on authenticated screens). Mobile-first. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: transparent;
  backdrop-filter: blur(12px);
}
@media (min-width: 768px) {
  .site-header { height: 70px; padding: 0 var(--space-8); }
}

.site-header__brand { display: inline-flex; align-items: center; }
.site-header__logo { height: 28px; width: auto; }
@media (min-width: 768px) { .site-header__logo { height: 34px; } }

/* Responsive logo: mark-only on mobile, wordmark on desktop (US6). */
.site-header__logo--desktop { display: none; }
.site-header__logo--mobile { display: block; height: 32px; }
@media (min-width: 768px) {
  .site-header__logo--desktop { display: block; }
  .site-header__logo--mobile { display: none; }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  justify-content: flex-end;
}

/* Search control — a link styled as an input that routes to /search.
   Mobile: centered and flexible. Desktop: compact, right-aligned. */
.search-box {
  display: flex;
  align-items: center;
  height: 40px;
  flex: 1;
  max-width: 100%;
  margin: 0 var(--space-3);
  padding: 0 var(--space-4);
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  cursor: text;
}
.search-box:hover,
.search-box:focus-visible {
  border-color: var(--accent-blue);
  outline: none;
}
.search-box__placeholder { font-size: var(--text-meta); }
@media (min-width: 768px) {
  .search-box { flex: none; width: 240px; margin: 0; }
}

/* Rounded, clickable avatar (DESIGN §5.1). */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: var(--radius-pill);
  background: var(--accent-blue);
  color: var(--text-primary);
  font: 600 var(--text-meta) / 1 var(--font-display);
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
}
.avatar:hover, .avatar:focus-visible { border-color: var(--text-primary); }