/* One icon per award; shared by desktop, mobile, welcome and settings. */
.account-badges, .who .account-badges, .settings__me .account-badges {
  display: inline-flex !important; flex-direction: row; align-items: center;
  gap: 6px; width: fit-content; max-width: 100%; flex-wrap: wrap; flex: none;
  overflow: visible; line-height: 1; margin-bottom: 4px;
}
.rolechip, .who .rolechip, .settings__me .rolechip, .mb-rolechip, .hm-role .mb-rolechip {
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: none; gap: 0; width: 30px; height: 30px; padding: 0; margin: 0;
  border-radius: 9px; box-sizing: border-box; cursor: help;
}
.rolechip--sm, .who .rolechip--sm, .mb-rolechip--mini, .hm-role .mb-rolechip--mini { width: 26px; height: 26px; border-radius: 8px; }
.rolechip--lg { width: 36px; height: 36px; border-radius: 11px; }
.rolechip > i, .who .rolechip > i, .settings__me .rolechip > i, .mb-rolechip i { display: grid; place-items: center; width: 18px; height: 18px; }
.rolechip--sm > i, .who .rolechip--sm > i, .mb-rolechip--mini i { width: 16px; height: 16px; }
.rolechip--lg > i { width: 22px; height: 22px; }
.rolechip:focus-visible, .mb-rolechip:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.rolechip:hover, .mb-rolechip:hover { filter: brightness(.97); }
.account-badge-tooltip {
  position: fixed; z-index: 30000; pointer-events: none; max-width: min(280px, calc(100vw - 16px));
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--mb-mint-line, var(--mint-line, #cfe4d8));
  background: var(--mb-card, var(--paper, #faf9f5)); color: var(--mb-ink, var(--ink, #23382f));
  box-shadow: 0 6px 24px rgba(16, 44, 29, .14);
  font: 500 12px/1.45 var(--font-ui, 'Hanken Grotesk', sans-serif); text-align: left; overflow-wrap: anywhere;
}
.account-badge-tooltip[hidden] { display: none; }
.dark .account-badge-tooltip { background: var(--dark-card, #1c2925); color: var(--dark-text, #e5eee8); border-color: var(--dark-line, #354a40); }
@media (max-width: 319px) {
  .hm-top { flex-wrap: wrap; column-gap: 6px; row-gap: 6px; }
  .hm-top .hm-role { order: 2; flex-basis: 100%; border-radius: 0; }
  .hm-top .account-badges { margin-bottom: 0; }
}