/* Top bar: brand, org switcher, language switcher, user menu (AppHeaderComponent). */
.app-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--wa-space-s);
  padding: var(--wa-space-2xs) var(--wa-space-m);
  border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

.app-header > .wa-cluster {
  flex-wrap: nowrap;
  gap: var(--wa-space-xs);
  min-width: 0;
}

.app-header-brand {
  font-weight: var(--wa-font-weight-semibold);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.app-header-org-name {
  display: inline-block;
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/*
 * wa-page[view="mobile"] tracks wa-page's own measured width (its
 * ResizeObserver, mobile-breakpoint attribute default 768px) rather than
 * the raw viewport — the same signal WA's own .wa-desktop-only/.wa-mobile-only
 * utilities key off (webawesome.css, wa-base layer), so this stays in sync
 * with the drawer/nav breakpoint instead of hardcoding a second one.
 */
wa-page[view="mobile"] .app-header {
  padding-inline: var(--wa-space-s);
  gap: var(--wa-space-2xs);
}

wa-page[view="mobile"] .app-header > .wa-cluster {
  gap: var(--wa-space-2xs);
}

wa-page[view="mobile"] .app-header-org-name {
  max-width: 12ch;
}