/* ui_pill — pair file for src/ui_system/pill.jl
 *
 * Three variants share the pill shape with different palettes:
 *   .reset-pill          — muted outline pill (reset filter link)
 *   .builder-chip        — neutral chip with × close button
 *   .builder-chip-verdict — verdict-colored chip (composes badge palette) */

.reset-pill {
    width: auto;
    margin: 0;
    font-size: var(--ds-font-sm);
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--ds-radius-pill);
    background: transparent;
    color: var(--pico-muted-color);
    text-decoration: none;
    line-height: 1.4;
    transition: border-color var(--ds-transition-base),
                color var(--ds-transition-base),
                background-color var(--ds-transition-base);
    cursor: pointer;
}
.reset-pill:hover,
.reset-pill:focus-visible {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
    background: color-mix(in srgb, var(--pico-primary) 8%, transparent);
}

.builder-chip {
    width: auto;
    margin: 0;
    padding: 0.2rem 0.55rem;
    font-size: var(--ds-font-sm);
    line-height: 1.2;
    border-radius: var(--ds-radius-pill);
    background: transparent;
    color: var(--pico-muted-color);
    border: 1px solid var(--pico-muted-border-color);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: border-color var(--ds-transition-fast),
                color var(--ds-transition-fast),
                background var(--ds-transition-fast);
}
.builder-chip:hover,
.builder-chip:focus-visible {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}
.builder-chip-x {
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.7;
}
.builder-chip-verdict {
    text-transform: none;
    letter-spacing: 0;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ds-radius-pill);
    font-weight: 600;
}
.builder-chip.badge-positive {
    background: color-mix(in srgb, var(--ds-color-positive-bg) 18%, transparent);
    color: var(--ds-color-positive);
    border-color: var(--ds-color-positive);
}
.builder-chip.badge-negative {
    background: color-mix(in srgb, var(--ds-color-negative-bg) 18%, transparent);
    color: var(--ds-color-negative);
    border-color: var(--ds-color-negative);
}
.builder-chip.badge-inconclusive {
    background: color-mix(in srgb, var(--ds-color-inconclusive-bg) 18%, transparent);
    color: var(--ds-color-inconclusive);
    border-color: var(--ds-color-inconclusive);
}
.builder-chip.badge-invalid {
    background: color-mix(in srgb, var(--ds-color-invalid-bg) 22%, transparent);
    color: var(--ds-color-invalid);
    border-color: var(--ds-color-invalid);
}
.builder-chip-verdict:hover { filter: brightness(1.1); }
.builder-chip-verdict .builder-chip-x { opacity: 0.85; }