/* header-avatar — circular Settings entry point that lives inside .dash-topbar.
 * Canonical contract from .tmp/settings-drawer.html (see Canopy v2 design system).
 * Uses ONLY var(--v2-*) tokens. No raw hex permitted in this file. */

.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--v2-pop-sage-bg);
  color: var(--v2-accent-botanical);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  border: 1.5px solid var(--v2-accent-botanical);
  cursor: pointer;
  padding: 0;
  /* Containing block for the ::after tap-target ring. Without this the
   * ::after's `position: absolute` falls up to .dash-topbar and the ring
   * expands across the entire bar, intercepting clicks on sibling
   * elements like .dash-back. */
  position: relative;
  /* 48pt tap target via ::after padding ring */
}

.header-avatar::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.header-avatar:focus-visible {
  outline: 2px solid var(--v2-accent-botanical);
  outline-offset: 2px;
}

.header-avatar[data-loading="true"] {
  color: var(--v2-text-tertiary);
}