/* badge.css — pattern: inline label.
   Generic variants (neutral/info/success/warning/danger) AND data-state
   variants that encode evidential provenance.
   The Founding Member badge has its own component (founding-member-badge)
   because it is a hexagonal SVG, not a pill.
   See FSE_UI.md → Badge and Color-as-Meaning. */

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

.biq-badge--info    { background: var(--biq-color-info-soft);    color: var(--biq-color-info);    border-color: var(--biq-color-info); }
.biq-badge--success { background: var(--biq-color-success-soft); color: var(--biq-color-success); border-color: var(--biq-color-success); }
.biq-badge--warning { background: var(--biq-color-warning-soft); color: var(--biq-color-warning); border-color: var(--biq-color-warning); }
.biq-badge--danger  { background: var(--biq-color-danger-soft);  color: var(--biq-color-danger-strong); border-color: var(--biq-color-danger); }
.biq-badge--muted   { background: var(--biq-color-surface-sunk);  color: var(--biq-color-text-muted);   border-color: var(--biq-color-border); }

/* Data-state variants — these MUST be used when labelling evidential rows */
.biq-badge--state-field-captured { background: var(--biq-state-field-captured-bg); color: var(--biq-state-field-captured); border-color: var(--biq-state-field-captured); }
.biq-badge--state-validated      { background: var(--biq-state-validated-bg);      color: var(--biq-state-validated);      border-color: var(--biq-state-validated); }
.biq-badge--state-pending-review { background: var(--biq-state-pending-review-bg); color: var(--biq-state-pending-review); border-color: var(--biq-state-pending-review); }
.biq-badge--state-flagged        { background: var(--biq-state-flagged-bg);        color: var(--biq-state-flagged);        border-color: var(--biq-state-flagged); }
.biq-badge--state-ai-suggested   { background: var(--biq-state-ai-suggested-bg);   color: var(--biq-state-ai-suggested);   border-color: var(--biq-state-ai-suggested); }
.biq-badge--state-locked         { background: var(--biq-state-locked-bg);         color: var(--biq-state-locked);         border-color: var(--biq-state-locked); }
.biq-badge--state-superseded     { background: var(--biq-state-superseded-bg);     color: var(--biq-state-superseded);     border-color: var(--biq-state-superseded); }

/* Mono variant — for hashes and IDs */
.biq-badge--mono {
    font-family: var(--biq-font-mono);
    font-size: var(--biq-fs-xs);
    letter-spacing: 0;
}

/* ==========================================================================
   Founding Member badge — hexagonal SVG with gold gradient.
   Renders inline next to firm name on directory cards, dashboards,
   and the design-system page.
   ========================================================================== */

.biq-fm-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--biq-space-2);
    padding: var(--biq-space-1) var(--biq-space-3) var(--biq-space-1) var(--biq-space-2);
    background: var(--biq-color-fm-soft);
    color: var(--biq-color-fm-strong);
    border: 1px solid var(--biq-color-fm);
    border-radius: var(--biq-radius-pill);
    font-size: var(--biq-fs-xs);
    font-weight: var(--biq-fw-semibold);
    letter-spacing: var(--biq-tracking-wide);
    text-transform: uppercase;
    line-height: 1;
}

.biq-fm-badge__hex {
    width: var(--biq-space-5);
    height: var(--biq-space-5);
    flex: 0 0 auto;
}

.biq-fm-badge__number {
    font-family: var(--biq-font-mono);
    font-weight: var(--biq-fw-bold);
    color: var(--biq-color-fm-strong);
}

.biq-fm-badge--lg {
    font-size: var(--biq-fs-sm);
    padding: var(--biq-space-2) var(--biq-space-4) var(--biq-space-2) var(--biq-space-3);
}

.biq-fm-badge--lg .biq-fm-badge__hex {
    width: var(--biq-space-6);
    height: var(--biq-space-6);
}