.seg {
    display: inline-flex;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg__btn {
    /* inline-flex so anchor variants (audit state filter, etc.) get the
       same min-height treatment as buttons — min-height is a no-op on
       plain inline elements. */
    display: inline-flex;
    align-items: center;
    /* min-height 32px is comfortably above WCAG 2.5.8's 24px floor
       and closer to the 44px AAA target without bloating chrome. */
    min-height: 28px;
    white-space: nowrap;
    flex-shrink: 0;
    padding: var(--sp-2) var(--sp-3);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    border-right: 1px solid var(--color-border);
    transition: background var(--t-fast), color var(--t-fast);
}
.seg__btn:last-child { border-right: 0; }
.seg__btn:hover { background: var(--color-surface); color: var(--color-text); }
.seg__btn--active {
    background: var(--color-primary-soft);
    color: var(--color-primary-hi);
}

/* Filter-row variant — used as a leading element in a card body
   (audit state filter, future notification channel filter). Needs
   a gap below so the filtered table doesn't collide with the chips. */
.seg--filters {
    margin-bottom: var(--sp-3);
}