/* ===================== BADGES / PILLS ===================== */
.bd{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:600;border:1px solid}
.bd.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.bd.off{color:var(--txd);border-color:var(--bdr);background:transparent}
.bd.r53.on{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);
  border-color:color-mix(in srgb,var(--teal) 28%,transparent)}
.bd.waf.on{background:color-mix(in srgb,var(--purple) 12%,transparent);color:var(--purple);
  border-color:color-mix(in srgb,var(--purple) 28%,transparent)}
.bd.iam.tier-very_high{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);
  border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.bd.iam.tier-high{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);
  border-color:color-mix(in srgb,var(--teal) 28%,transparent)}
.bd.iam.tier-medium{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);
  border-color:color-mix(in srgb,var(--amber) 28%,transparent)}
.bd.iam.tier-low,.bd.iam.tier-unscanned{color:var(--txd);border-color:var(--bdr)}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;
  text-transform:capitalize;white-space:nowrap;border:1px solid}
/* `.ed` — a 5px round dot — was here, used by nothing, and it collided with
   the email editor's container. Its border-radius:50% leaked through and,
   the moment that container gained overflow:hidden, clipped the whole editor
   into an ellipse. Removed; the editor's own classes are .ed-pane/.ed-bar/
   .ed-tools/.ed-canvas. */
.ch{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:5px;
  font-size:11px;font-weight:600}
.ch.added{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.ch.dropped{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.ch.changed{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}
.q{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;border:1px solid var(--bdr);color:var(--txd);font-size:10.5px;font-weight:600;
  cursor:help;flex-shrink:0;line-height:1}
.q:hover{border-color:var(--accent);color:var(--accent)}