/* The slot keeps its geometry when the badge is empty, loading, or unavailable. */
.visitor-count-slot { flex: 0 0 7.5rem; width: 7.5rem; height: 2rem; }
.visitor-count {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; height: 2rem; color: var(--ink-2);
  font: 400 .8rem/1 var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.visitor-count[hidden] { display: none; }
.visitor-count [data-visitor-count-label] { overflow: hidden; text-overflow: ellipsis; }
.visitor-count-dot { flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--new); animation: visitor-count-pulse 3s ease-in-out infinite; }
@keyframes visitor-count-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .visitor-count-dot { animation: none; } }
/* The existing header already uses nearly all narrow-screen space. */
@container site-header (width < 90rem) { .visitor-count-slot { display: none; } }