/* Header logged-in user / permission badge */
.header-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 280px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  line-height: 1;
  cursor: help;
}

.header-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
  font-weight: 750;
  color: var(--ink);
}

.header-user-role {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .header-user-badge {
    order: 90;
    max-width: 100%;
  }

  .header-user-name {
    max-width: 145px;
  }

  .header-user-role {
    font-size: .68rem;
  }
}