/* SLE-T7-badges — canonical badge/pill patterns.
 *
 * Status pills + tag chips. Status lives on the surface (guide §2).
 *
 * Depends on tokens.css.
 */
.badge,
.badge-success,
.badge-warn,
.badge-error,
.badge-info,
.tag-chip,
.tag-chip-sm {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--sans);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.badge,
.badge-success,
.badge-warn,
.badge-error,
.badge-info {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
}

.badge-success {
  background: var(--bg-success);
  color: var(--fg-success);
}
.badge-warn {
  background: var(--bg-warn);
  color: var(--fg-warn);
}
.badge-error {
  background: var(--bg-error);
  color: var(--fg-error);
}
.badge-info {
  background: var(--bg-info);
  color: var(--bk);
}

/* Default neutral badge */
.badge {
  background: var(--g1);
  color: var(--bk);
}

/* Activity-type pill (camps) — .tp-pill.sc/.ac/.aa/.d
 * Per style guide §Chips & pills: pastel surface, 1px black border,
 * dark text. No uppercase or letter-spacing. */
.tp-pill {
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--bk);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  display: inline-block;
  color: var(--bk);
}
.tp-pill.sc { background: #cfe6ff; }
.tp-pill.ac { background: #dff0a4; }
.tp-pill.aa { background: #e8c8f5; }
.tp-pill.d  { background: #e4e2db; }

/* Tag chip — dark fill, white text. May contain a × close button.
 * Per style guide line 236: black background, white text, no border. */
.tag-chip {
  background: var(--bk);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
}
.tag-chip > button {
  background: none;
  border: none;
  color: var(--g3);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 1;
}
.tag-chip > button:hover {
  color: var(--white);
}

/* Dense table-row variant. */
.tag-chip-sm {
  padding: var(--sp-05) var(--sp-1h);
  font-size: var(--fs-xs);
  border-radius: var(--radius-xs);
  background: var(--g1);
  color: var(--bk);
}

/* Pedagogical relation pill (camps) — .rel-pill.pers/.corps/.env/.autres/.spirit
 * Per style guide lines 230-235. */
.rel-pill {
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--white);
  background: var(--c);
}
.rel-pill.pers   { --c: var(--pers); color: var(--bk); }
.rel-pill.corps  { --c: var(--corps); }
.rel-pill.env    { --c: var(--env); }
.rel-pill.autres { --c: var(--autres); }
.rel-pill.spirit { --c: var(--spirit); }

/* Countdown chip — dashed-border g1 surface.
 * Per style guide line 238. */
.countdown-chip {
  display: inline-block;
  background: var(--g1);
  border: 1px dashed var(--g4);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  font-size: 11px;
}