/* ==========================================================================
   .tp-badge — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   Priority, visibility, status, and count-confidence markers.

   THE RULE THAT SHAPES THIS COMPONENT (ACC-004, UX-008): a badge always renders
   its name as text. The colour is carried by a dot and a rail, never by the
   text colour and never by a fill behind the text. That is why the label uses
   --tp-color-text-primary in every variant and the variant token only ever
   paints the dot and the rail: it makes the 4.5:1 text pairing identical for
   all fifteen variants, and it makes a colour-blind reader's experience
   identical to everyone else's.

   Variants
     priority     --low  --moderate  --high  --urgent  --critical
     visibility   --normal  --sensitive  --personnel
     generic      --neutral  --success  --warning  --danger  --info
     shape        --compact
   Elements       __dot  __icon  __label  __count
   ========================================================================== */

.tp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  max-width: 100%;
  min-height: var(--tp-space-target-min);
  padding: var(--tp-space-1) var(--tp-space-3);
  border: var(--tp-border-width-hairline) solid var(--tp-color-border-subtle);
  border-inline-start: var(--tp-border-width-thick) solid var(--tp-color-border-default);
  border-radius: var(--tp-radius-sm);
  background-color: var(--tp-color-surface-raised);
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-xs);
  font-weight: var(--tp-weight-medium);
  line-height: var(--tp-leading-tight);
  white-space: nowrap;
  vertical-align: middle;
}

.tp-badge__dot {
  flex: none;
  width: var(--tp-space-2);
  height: var(--tp-space-2);
  border-radius: var(--tp-radius-pill);
  background-color: var(--tp-color-border-default);
}

.tp-badge__icon {
  flex: none;
  width: var(--tp-space-icon);
  height: var(--tp-space-icon);
  color: var(--tp-color-text-secondary);
}

.tp-badge__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A trailing figure, e.g. "Critical · 12". Tabular so a column of badges
   aligns. */
.tp-badge__count {
  flex: none;
  padding-inline-start: var(--tp-space-2);
  border-inline-start: var(--tp-border-width-hairline) solid
    var(--tp-color-border-subtle);
  color: var(--tp-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.tp-badge--compact {
  padding: 0 var(--tp-space-2);
  gap: var(--tp-space-1);
}

/* --------------------------------------------------------------------------
   Priority (BIZ-003/BIZ-004 vocabulary). The rail and dot carry the colour;
   the template carries the word.
   -------------------------------------------------------------------------- */

.tp-badge--low {
  border-inline-start-color: var(--tp-color-priority-low);
}

.tp-badge--low .tp-badge__dot,
.tp-badge--low .tp-badge__icon {
  background-color: var(--tp-color-priority-low);
  color: var(--tp-color-priority-low);
}

.tp-badge--moderate {
  border-inline-start-color: var(--tp-color-priority-moderate);
}

.tp-badge--moderate .tp-badge__dot,
.tp-badge--moderate .tp-badge__icon {
  background-color: var(--tp-color-priority-moderate);
  color: var(--tp-color-priority-moderate);
}

.tp-badge--high {
  border-inline-start-color: var(--tp-color-priority-high);
}

.tp-badge--high .tp-badge__dot,
.tp-badge--high .tp-badge__icon {
  background-color: var(--tp-color-priority-high);
  color: var(--tp-color-priority-high);
}

.tp-badge--urgent {
  border-inline-start-color: var(--tp-color-priority-urgent);
}

.tp-badge--urgent .tp-badge__dot,
.tp-badge--urgent .tp-badge__icon {
  background-color: var(--tp-color-priority-urgent);
  color: var(--tp-color-priority-urgent);
}

.tp-badge--critical {
  border-inline-start-color: var(--tp-color-priority-critical);
}

.tp-badge--critical .tp-badge__dot,
.tp-badge--critical .tp-badge__icon {
  background-color: var(--tp-color-priority-critical);
  color: var(--tp-color-priority-critical);
}

/* --------------------------------------------------------------------------
   Visibility (D-008). Compartmentalisation is always visible, and always
   named: "Sensitive" and "Personnel" appear as words next to the marker.
   -------------------------------------------------------------------------- */

.tp-badge--normal {
  border-inline-start-color: var(--tp-color-visibility-normal);
}

.tp-badge--normal .tp-badge__dot,
.tp-badge--normal .tp-badge__icon {
  background-color: var(--tp-color-visibility-normal);
  color: var(--tp-color-visibility-normal);
}

.tp-badge--sensitive {
  border-inline-start-color: var(--tp-color-visibility-sensitive);
}

.tp-badge--sensitive .tp-badge__dot,
.tp-badge--sensitive .tp-badge__icon {
  background-color: var(--tp-color-visibility-sensitive);
  color: var(--tp-color-visibility-sensitive);
}

.tp-badge--personnel {
  border-inline-start-color: var(--tp-color-visibility-personnel);
}

.tp-badge--personnel .tp-badge__dot,
.tp-badge--personnel .tp-badge__icon {
  background-color: var(--tp-color-visibility-personnel);
  color: var(--tp-color-visibility-personnel);
}

/* --------------------------------------------------------------------------
   Generic status
   -------------------------------------------------------------------------- */

.tp-badge--neutral {
  border-inline-start-color: var(--tp-color-border-strong);
}

.tp-badge--neutral .tp-badge__dot,
.tp-badge--neutral .tp-badge__icon {
  background-color: var(--tp-color-border-strong);
  color: var(--tp-color-border-strong);
}

.tp-badge--success {
  border-inline-start-color: var(--tp-color-state-success);
}

.tp-badge--success .tp-badge__dot,
.tp-badge--success .tp-badge__icon {
  background-color: var(--tp-color-state-success);
  color: var(--tp-color-state-success);
}

.tp-badge--warning {
  border-inline-start-color: var(--tp-color-state-warning);
}

.tp-badge--warning .tp-badge__dot,
.tp-badge--warning .tp-badge__icon {
  background-color: var(--tp-color-state-warning);
  color: var(--tp-color-state-warning);
}

.tp-badge--danger {
  border-inline-start-color: var(--tp-color-state-danger);
}

.tp-badge--danger .tp-badge__dot,
.tp-badge--danger .tp-badge__icon {
  background-color: var(--tp-color-state-danger);
  color: var(--tp-color-state-danger);
}

.tp-badge--info {
  border-inline-start-color: var(--tp-color-state-info);
}

.tp-badge--info .tp-badge__dot,
.tp-badge--info .tp-badge__icon {
  background-color: var(--tp-color-state-info);
  color: var(--tp-color-state-info);
}

/* --------------------------------------------------------------------------
   Interactive badges — a filter chip is a button that happens to look like a
   badge. The modifier is required: a static badge that lights up under the
   cursor claims to be clickable, and every hover affordance in this product
   must correspond to something that actually happens.
   -------------------------------------------------------------------------- */

.tp-badge--interactive {
  cursor: pointer;
}

.tp-badge--interactive:hover {
  background-color: var(--tp-color-surface-sunken);
  border-color: var(--tp-color-border-default);
}

.tp-badge--interactive:active {
  background-color: var(--tp-color-accent-subtle);
}

.tp-badge--interactive:disabled {
  opacity: var(--tp-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.tp-badge--interactive:focus-visible {
  position: relative;
  z-index: var(--tp-z-dropdown);
}