/* Badge：内联状态标签。tone 决定颜色族。 */
.badge
{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: var(--fs-11);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    padding: 3px 8px;
    white-space: nowrap;
}

.neutral
{
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.accent
{
    background: var(--accent-soft);
    color: var(--accent);
}

.online
{
    background: color-mix(in srgb, var(--state-online) 16%, transparent);
    color: var(--state-online);
}

.error
{
    background: color-mix(in srgb, var(--state-error) 14%, transparent);
    color: var(--state-error);
}

.warn
{
    background: color-mix(in srgb, var(--state-warn) 16%, transparent);
    color: var(--state-warn);
}

.info
{
    background: var(--info-soft);
    color: var(--info);
}

.emphasis
{
    background: var(--emphasis-soft);
    color: var(--emphasis);
}

.dot
{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* label：children 统一包在 inline span（见 Badge.tsx 注释），避免聚珍在混排文本里
   注入的 jz-* 行内元素被 .badge 的 inline-flex 当成独立 flex item、让 gap:4px 在
   文本中间叠加。span 保持 inline，内部按内联流排版，不触发 flex item 化。 */
.label { display: inline; }
