/**
 * Molecule: Hint Banner
 * Informational callout block with icon rows and code badges
 */

.hint-banner {
	background: var(--hint-bg);
	border: 1px solid var(--hint-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3-5) var(--space-4);
	margin-bottom: var(--space-6);
}

.hint-banner-title {
	font-size: var(--text-base);
	font-weight: var(--font-bold);
	color: var(--gray-600);
	margin-bottom: var(--space-2);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.hint-banner-title svg {
	flex-shrink: 0;
	opacity: 0.5;
}

.hint-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--text-base);
	color: var(--gray-500);
	line-height: var(--leading-normal);
}

.hint-row + .hint-row {
	margin-top: var(--space-2);
}

.hint-row svg {
	flex-shrink: 0;
	margin-top: 2px;
	opacity: 0.4;
}

.hint-codes {
	display: inline-flex;
	gap: var(--space-1);
	margin: 0 2px;
}

.hint-code {
	background: var(--gray-200);
	border-radius: var(--radius-sm);
	padding: 1px 5px;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--gray-600);
	letter-spacing: 0.3px;
}