/* ============================================================
   BADGES — Version, type, location badges
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* Version badges */
.badge--v16    { background: rgba(100,116,139,.15); color: #94a3b8; border: 1px solid rgba(100,116,139,.3); }
.badge--v17    { background: rgba(59,130,246,.12);  color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.badge--v80    { background: rgba(16,185,129,.12);  color: #34d399; border: 1px solid rgba(16,185,129,.3); }
.badge--v81    { background: rgba(139,92,246,.12);  color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.badge--v9x    { background: rgba(249,115,22,.12);  color: #fb923c; border: 1px solid rgba(249,115,22,.3); }

/* Type badges */
.badge--action  { background: rgba(59,130,246,.12);  color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.badge--display { background: rgba(139,92,246,.12);  color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.badge--filter  { background: rgba(16,185,129,.12);  color: #34d399; border: 1px solid rgba(16,185,129,.3); }

/* Location badges */
.badge--fo    { background: rgba(6,182,212,.1);  color: #22d3ee; border: 1px solid rgba(6,182,212,.3); }
.badge--bo    { background: rgba(99,102,241,.1); color: #818cf8; border: 1px solid rgba(99,102,241,.3); }
.badge--both  { background: rgba(245,158,11,.1); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }

/* Status badges */
.badge--new        { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.3); }
.badge--deprecated { background: rgba(239,68,68,.1);   color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.badge--removed    { background: rgba(100,116,139,.1); color: #94a3b8; border: 1px solid rgba(100,116,139,.3); text-decoration: line-through; }
.badge--breaking   { background: rgba(239,68,68,.15);  color: #f87171; border: 1px solid rgba(239,68,68,.4); }

/* Inline badge row */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  align-items: center;
}

/* Alert / callout */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid;
  margin: var(--space-6) 0;
  background: var(--bg-surface);
}

.alert--info    { border-color: var(--color-info);    background: rgba(59,130,246,.05); }
.alert--warning { border-color: var(--color-warning); background: rgba(245,158,11,.05); }
.alert--danger  { border-color: var(--color-danger);  background: rgba(239,68,68,.05); }
.alert--success { border-color: var(--color-success); background: rgba(16,185,129,.05); }
.alert--tip     { border-color: var(--color-tip);     background: rgba(139,92,246,.05); }

.alert-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1.5; }

.alert-title {
  display: block;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.alert--info    .alert-title { color: var(--color-info); }
.alert--warning .alert-title { color: var(--color-warning); }
.alert--danger  .alert-title { color: var(--color-danger); }
.alert--success .alert-title { color: var(--color-success); }
.alert--tip     .alert-title { color: var(--color-tip); }

.alert p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }