/* feed-status.css — data feed status badge
 * Include on any page that shows a FeedStatus badge.
 * Usage: <span class="feed-status-badge feed-status--unknown">◌</span>
 */
.feed-status-badge {
  display: inline-flex;
  align-items: center;
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .3s, background .3s, border-color .3s;
}

.feed-status--unknown    { color: #555; border-color: #333; background: transparent; }
.feed-status--live       { color: #10b981; border-color: color-mix(in srgb, #10b981 40%, transparent); background: color-mix(in srgb, #10b981 12%, transparent); }
.feed-status--connecting { color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 40%, transparent); background: color-mix(in srgb, #f59e0b 12%, transparent); }
.feed-status--delayed    { color: #888; border-color: #333; background: transparent; }