/* status-badge.css — pattern: data-driven status badge.
   Color comes from a custom property (--biq-status-color) set inline on
   the badge element. The badge composes a coloured dot + label so the
   colour does double duty: visible shape (dot) plus semantic value
   (label). Per FSE_UI.md → Status Badge Component.

   The single inline-style attribute on the badge is the one exception
   to Standing Order #8 — documented in fse-style-baseline.json. */

.biq-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--biq-space-2);
    padding: var(--biq-space-1) var(--biq-space-3);
    border-radius: var(--biq-radius-pill);
    background: var(--biq-color-surface-raised);
    border: 1px solid var(--biq-color-rule);
    font-size: var(--biq-fs-xs);
    font-weight: var(--biq-fw-medium);
    color: var(--biq-color-text-primary);
    line-height: 1;
    white-space: nowrap;
}

.biq-status-badge__dot {
    width: var(--biq-space-2);
    height: var(--biq-space-2);
    border-radius: 50%;
    background: var(--biq-status-color, var(--biq-color-text-muted));
    flex: 0 0 auto;
}

.biq-status-badge__label {
    color: var(--biq-color-text-primary);
}

@media (prefers-contrast: more) {
    .biq-status-badge {
        border-color: var(--biq-color-border-strong);
    }
}