/* Pills stay under the control height on purpose. A bare .pill is a badge and hugs its text; one
   that is also a .btn is a compact control, so it drops the height it would take from .btn and
   sizes on padding instead — reading smaller than a default button. */
.pill {
    display: inline-flex;
    gap: var(--space-inline);
    align-items: center;
    padding: var(--space-inline) var(--control-padding-y);
    font-size: var(--text-xs);
    line-height: 1;
    border-radius: var(--radius-md);
}

.btn.pill {
    min-height: 0;
    padding: var(--space-inline) var(--control-padding-y);
    font-size: var(--text-xs);
}

.pill.outline {
    border: solid 1px var(--border);
}

button.pill:hover {
    background: var(--surface-sunken);
}

.pill.neutral { 
    background: var(--surface-sunken);
}