/* ============================================
   COMPONENTS — Minimal, shared UI pieces
   ============================================ */

/* Collapsible details */
details {
  margin-top: 0.35rem;
  cursor: pointer;
}

summary {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  padding: 0;
  transition: color var(--transition);
}

summary:hover {
  color: var(--color-heading);
}

summary::marker {
  color: var(--color-text-secondary);
  font-size: 0.7em;
}

/* Pill badge */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Small button link */
.btn-sm {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-heading);
  border: 1px solid var(--color-heading);
  padding: 2px 8px;
  border-radius: 3px;
  text-decoration: none;
  transition: all var(--transition);
}

.btn-sm:hover {
  background-color: var(--color-heading);
  color: var(--color-bg);
  text-decoration: none;
}