.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 64px;
  padding: 0 1.5rem;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}
.site-header__brand-mark {
  width: 28px;
  height: 28px;
  background: var(--md-sys-color-primary);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.site-header__nav { display: flex; gap: 0.25rem; }
.site-header__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 1rem;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.site-header__nav a:hover {
  color: var(--md-sys-color-on-surface);
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  text-decoration: none;
}

/* Lens switcher — the on-page control in the contacts toolbar that
   shows the active lens and opens a menu to switch. Replaces the old
   nav-link hover dropdown. */
.lens-switcher {
  position: relative;
  display: inline-flex;
}

.lens-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem 0.35rem 0.6rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  font-size: var(--md-sys-typescale-label-large-size);
  cursor: pointer;
}
.lens-switcher__trigger:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
}

.lens-switcher__name {
  font-weight: 500;
}

.lens-switcher__all-icon {
  font-size: 1.1rem;
  color: var(--md-sys-color-on-surface-variant);
}

.lens-switcher__caret {
  font-size: 1.2rem;
  color: var(--md-sys-color-on-surface-variant);
  margin-left: -0.1rem;
}

.lens-switcher__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 220px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level2);
  padding: 0.25rem 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
}

.lens-switcher__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-size: var(--md-sys-typescale-label-large-size);
}
.lens-switcher__item:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.lens-switcher__item.is-active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}