/**
 * @file public/css/components/classification-badge.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The ClassificationBadge (components/ClassificationBadge.js): how sensitive one thing is,
 *   said on the Tag (poster.css .poster-chip) beside the AudienceBadge, with the conflict or the
 *   exception as the Status after it. This sheet holds what the Tag alone does not: the badge is as
 *   wide as its words, like the AudienceBadge beside it, and the square before the words carries the
 *   classification's own colour (an SVG fill, set from the policy's data; the words stay --text).
 * @structure .classification-badge-group · .classification-badge · .classification-badge-swatch
 * @version-history
 *   v1.0.0 — 2026-10-18 — Initial (plan doc-mvdipuyqraas, L4.2).
 */
.classification-badge-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  vertical-align: middle;
}
.classification-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: max-content;
  max-width: 100%;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* The square in the classification's colour, framed in the words' colour so a pale colour still reads. */
.classification-badge-swatch { flex: none; width: 11px; height: 11px; }