/* Design system v2 — pills and badges (round 26, UIX-6).
   Radius full and soft tokens per colour; no size or typography. The small status dot
   (.siteclick-status-small) is already round and keeps its own colours. */

.siteclick-container .siteclick-status,
.siteclick-container span.count,
.np-chips .np-token {
    border-radius: var(--sc-radius-full);
}
.np-chips .np-token {
    background: var(--sc-color-primary-soft);
    color: var(--sc-color-primary-text);
    transition: background-color var(--sc-dur-fast) var(--sc-ease-out);
}
.np-chips .np-token:hover {
    background: var(--sc-color-primary-soft-strong);
}
.np-chips .np-token:focus-visible {
    outline: none;
    box-shadow: var(--sc-ring);
}

/* Status pills: soft background + full-colour ink. */
.siteclick-container .siteclick-status.bg-blue-1:not(.siteclick-status-small)   { background-color: var(--sc-color-blue-soft) !important;   color: var(--sc-color-blue); }
.siteclick-container .siteclick-status.bg-purple-1:not(.siteclick-status-small) { background-color: var(--sc-color-purple-soft) !important; color: var(--sc-color-purple); }
.siteclick-container .siteclick-status.bg-green-1:not(.siteclick-status-small)  { background-color: var(--sc-color-green-soft) !important;  color: var(--sc-color-green); }
.siteclick-container .siteclick-status.bg-red-1:not(.siteclick-status-small)    { background-color: var(--sc-color-danger-soft) !important;    color: var(--sc-color-danger); }
.siteclick-container .siteclick-status.bg-orange-1:not(.siteclick-status-small) { background-color: var(--sc-color-orange-soft) !important; color: var(--sc-color-orange); }
.siteclick-container .siteclick-status.bg-yellow-1:not(.siteclick-status-small) { background-color: var(--sc-color-yellow-soft) !important; color: var(--sc-color-text-strong); }
.siteclick-container .siteclick-status.bg-grey-1:not(.siteclick-status-small)   { background-color: var(--sc-color-surface-alt) !important; color: var(--sc-color-text-muted); }