/* =============================================================================
   Feature badges — small inline pills marking a feature's status (e.g. "Beta").
   Generic + reusable across app-shell surfaces (settings, help, tokens).
   Loaded by base.html. Marketing pages use their own Tailwind pill — the two
   systems stay separate (see CLAUDE.md "Marketing site is out of scope").
============================================================================= */
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 100px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

/* Beta — on-brand sage pill. Signals "new, evolving" without alarm. */
.feature-badge--beta {
    background: var(--accent-light, #E8EDE6);
    color: var(--accent-dark, #5C6B59);
    border: var(--border-width, 1px) solid var(--accent, #9CA998);
}

/* Sits next to a heading without inheriting its size. */
h1 .feature-badge,
h2 .feature-badge,
h3 .feature-badge {
    margin-left: 8px;
    position: relative;
    top: -2px;
}