.profiel-nav-link { min-width: 0; }

.site-nav a.profiel-nav-link,
.site-links a.profiel-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.profiel-nav-avatar {
  display: none;
  place-items: center;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  border: 1px solid color-mix(in srgb, var(--nav-active) 55%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--nav-active) 15%, var(--panel));
  color: var(--nav-active);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

.profiel-nav-link.is-ingelogd .profiel-nav-avatar { display: grid; }

.profiel-nav-naam {
  display: block;
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-profiel-top {
  display: none;
  grid-area: profiel;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.app-profiel-top .profiel-nav-naam { max-width: 76px; }
.app-profiel-top.is-ingelogd .profiel-nav-avatar { display: grid; }

.balk-navigatie a.is-ingelogd [data-profiel-avatar] {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nav-active) 15%, transparent);
  color: var(--nav-active);
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 760px) {
  .app-profiel-top.is-ingelogd { display: inline-flex; }
}

@media (max-width: 700px) {
  .site-page .profiel-nav-avatar { display: none !important; }
  .site-page .profiel-nav-naam { max-width: 72px; }
}

@media (max-width: 350px) {
  .app-profiel-top .profiel-nav-naam { display: none; }
}