/* ============================================================
   Datamart — DS pill — JEDEN atributový štítek pro celou aplikaci
   (kategorie, tag, role, typ). Nízko-chroma --pill-* tokeny:
   tónuje KATEGORII, nikdy stav — na stavy jsou --positive /
   --warning / --critical (viz karta Status & health).
   Výchozí 22 px · .sm 20 px · volitelné × (.x) pro odebratelné
   tagy. Kanonická karta: colors-pills.html.
   Load after colors_and_type.css.
   ============================================================ */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 var(--sp-3); border-radius: var(--radius-pill); font: 600 11.5px var(--font-sans); line-height: 1; white-space: nowrap; }
.pill.sm { height: 20px; padding: 0 7px; font-size: 11px; }
.pill .ti { font-size: 12px; }

/* tóny — vždy stejný odstín ink na jemné výplni */
.pill.lime   { background: var(--pill-lime-bg);   color: var(--pill-lime-ink); }
.pill.amber  { background: var(--pill-amber-bg);  color: var(--pill-amber-ink); }
.pill.blue   { background: var(--pill-blue-bg);   color: var(--pill-blue-ink); }
.pill.purple { background: var(--pill-purple-bg); color: var(--pill-purple-ink); }
.pill.green  { background: var(--pill-green-bg);  color: var(--pill-green-ink); }
.pill.rose   { background: var(--pill-rose-bg);   color: var(--pill-rose-ink); }
.pill.grey   { background: var(--pill-grey-bg);   color: var(--pill-grey-ink); }

/* odebratelný tag — <span class="pill purple">tag<button class="x">…×…</button></span> */
.pill .x { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; padding: 0; border: 0; background: transparent; border-radius: var(--radius-pill); color: inherit; cursor: pointer; opacity: 0.65; }
.pill .x:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }
.pill .x .ti { font-size: var(--ico-2xs); }