/*
 * Cards and small labels — the building blocks for panels, lists, and tags.
 *   .card   a bordered panel on the page background
 *   .chip   small rounded tag, e.g. "based on: OwnerController.java" or a technology
 *   .badge  tiny status label, e.g. "anchor", "pending", "completed"
 */
.card {
	padding: var(--space-6);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.card--interactive {
	transition: border-color var(--transition), background var(--transition);
}

.card--interactive:hover {
	border-color: var(--border-strong);
	background: var(--surface-raised);
}

.card__title {
	margin-bottom: var(--space-2);
	color: var(--text);
	font-size: var(--text-lg);
	font-weight: 600;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	background: var(--accent-soft);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-pill);
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
}

.chip--neutral {
	background: var(--surface-raised);
	border-color: var(--border-strong);
	color: var(--text-muted);
}

.badge {
	display: inline-block;
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--surface-highlight);
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-transform: lowercase;
}

.badge--accent {
	background: var(--accent-soft);
	color: var(--accent);
}

.badge--success {
	background: var(--success-soft);
	color: var(--success);
}

.badge--warning {
	background: var(--warning-soft);
	color: var(--warning);
}

.badge--danger {
	background: var(--danger-soft);
	color: var(--danger);
}