/* ==========================================================================
   Command reference — compact chip groups.
   ========================================================================== */

.commands {
	padding: var(--space-32) var(--space-16) var(--space-48);
	max-width: var(--container-wide);
	margin: 0 auto;
}

.commands__title {
	color: var(--color-text);
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-32);
}

.commands__title::before {
	content: "# ";
	color: var(--color-text-muted);
}

.commands__groups {
	grid-template-columns: 1fr;
	gap: var(--space-24);
}

.commands__group {
	padding: var(--space-20);
	background-color: var(--color-panel);
	border: var(--border-default);
	border-radius: var(--radius-md);
}

.commands__group-title {
	color: var(--color-accent-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-16);
}

.commands__chips {
	flex-wrap: wrap;
	gap: var(--space-8);
}

.commands__chip {
	padding: var(--space-4) var(--space-12);
	background-color: var(--color-bg);
	border: var(--border-default);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: var(--font-size-xs);
	cursor: pointer;
	transition: color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.commands__chip:hover,
.commands__chip:focus-visible {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.commands__chip.is-selected {
	color: var(--color-accent);
	border-color: var(--color-accent);
	background-color: rgba(74, 222, 128, 0.1);
}

.commands__chip.is-dimmed {
	opacity: 0.4;
}

@media (min-width: 768px) {
	.commands__groups {
		grid-template-columns: 1fr 1fr;
	}
}