/* badges.css — status badges, priority dots, tags.
 *
 * Capsules, not chips with corners: a status is a word about a record, and the
 * platform draws that as a pill. The border is a hairline of the fill's own
 * hue rather than a neutral grey, so the badge stays one object at a glance
 * instead of a coloured label inside a box. */
.badge-status{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:590;letter-spacing:-.005em;white-space:nowrap;transition:background-color var(--t),color var(--t),border-color var(--t)}
.s-open{background:var(--s-open-bg);color:var(--s-open-fg);border:1px solid var(--s-open-line)}
.s-prog{background:var(--s-prog-bg);color:var(--s-prog-fg);border:1px solid var(--s-prog-line)}
.s-res{background:var(--s-res-bg);color:var(--s-res-fg);border:1px solid var(--s-res-line)}
.s-clo{background:var(--s-clo-bg);color:var(--s-clo-fg);border:1px solid var(--s-clo-line)}

/* Priority is a colour, so it is never only a colour: the dot carries the hue
   and the word beside it carries the meaning. */
.pri{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap}
.pri i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;transition:background-color var(--t)}
.p-Urgent{color:var(--danger)}.p-High{color:var(--warn)}.p-Medium{color:var(--accent)}.p-Low{color:var(--ink-4)}

.tag{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;background:var(--hover);color:var(--ink-3);border:1px solid transparent}