@layer components {
  /* A number copied from the sidebar in the browser: accent for Accueil's unread, amber for what waits in Activité. */
  .nav-badge {
    display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; text-align: center;
    font-size: 0.8125rem; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums;
    background: var(--jx-accent); color: var(--jx-accent-fg);
  }
  .nav-badge--activity { background: var(--jx-wait); }
  .nav-badge[hidden] { display: none; }
}