/* Status pills and small inline tags. */
/* The display:flex below would beat the browser's own [hidden] — re-assert it, so a badge a page toggles
   with the hidden attribute (e.g. the roster's Trainer badge) actually disappears. */
.badge[hidden] {
    display: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 12px;
    border-radius: var(--radius-full);
    font: var(--text-label-md);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--published { background: var(--success-container); color: var(--on-success-container); }
.badge--pending { background: var(--secondary-container); color: var(--on-secondary-container); }
.badge--draft { background: var(--surface-container-highest); color: var(--on-surface-variant); }
.badge--flagged { background: var(--error-container); color: var(--on-error-container); }
.badge--verified { background: var(--success-container); color: var(--on-success-container); }
.badge--neutral { background: var(--surface-container-high); color: var(--on-surface-variant); }

/* Who runs a race: a club race wears badge--neutral; a federation/national-club race wears this, so the
   two rows for the same flying (club result + amalgamation) are tellable apart at a glance. */
.badge--federation { background: var(--secondary-container); color: var(--on-secondary-container); }

.badge--win {
    background: var(--secondary);
    color: var(--on-secondary);
    font-style: italic;
    font-weight: 800;
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-size: 10px;
}

.tag-live {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.tag-live::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--secondary-container);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .tag-live::before { animation: none; }
}