/*
 * NV-08 User menu trigger — app/components/ui/user_menu_component.rb
 *
 * 32px avatar + name (--text-sm weight 500) + 16px chevron, wrapping
 * NV-07's dropdown-menu shell (dropdown_menu.css). Collapses to
 * avatar-only below --bp-xl (1280px) — the pixel value is hand-kept in
 * sync with tokens.css §1.11, same reasoning as shell.css's own
 * breakpoints (CSS custom properties can't appear inside a media query
 * condition). Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: transparent;
  padding: var(--space-1);
  padding-right: var(--space-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: var(--color-ink);
}

.ui-user-menu__trigger:hover,
.ui-user-menu__trigger.is-hover {
  background: var(--color-surface-inset);
}

.ui-user-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-halo);
}

.ui-user-menu__name {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 500;
  white-space: nowrap;
}

.ui-user-menu__chevron {
  flex-shrink: 0;
  color: var(--color-ink-muted);
}

@media (max-width: 1279px) {
  .ui-user-menu__name,
  .ui-user-menu__chevron {
    display: none;
  }

  .ui-user-menu__trigger {
    padding: var(--space-1);
  }
}