/* Parlor — badges.css
   Pill tags + kbd chip + status dots. */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--tag-fg);
  background: var(--tag-bg);
  border: var(--border-width-hair) solid var(--tag-border);
  border-radius: var(--radius-pill);
  font-feature-settings: var(--font-feature-tabular);
}
.tag--neutral { background: var(--surface-sunken); color: var(--fg-secondary); border-color: var(--border-hairline); }
.tag--ok      { background: rgba(45, 74, 56, .12);   color: var(--felt-500);  border-color: var(--felt-300); }
.tag--warn    { background: rgba(184,137,62,.18);     color: var(--brass-900); border-color: var(--brass-300); }
.tag--danger  { background: rgba(139, 58, 46, .12); color: var(--semantic-danger); border-color: rgba(139,58,46,.4); }
.tag--dark    { background: var(--piece-dark);       color: var(--piece-light); border-color: var(--wood-900); }

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-muted);
  margin-right: var(--space-2);
  vertical-align: middle;
}
.dot--dark  { background: var(--piece-dark);  border: 1px solid var(--piece-dark-rim); }
.dot--light { background: var(--piece-light); border: 1px solid var(--piece-light-rim); }
.dot--brass { background: var(--brass-500); }

.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 1px 6px;
  color: var(--kbd-fg);
  background: var(--kbd-bg);
  border: var(--border-width-hair) solid var(--kbd-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-flat);
}