/**
 * CNA Starter Kit Builder — tool-specific layout.
 * Inherits chrome (buttons, fields, results, suggestions) from cna-core.css
 * or its bundled fallback. This file adds only what's unique to this tool.
 */

.cna-skb .cna-table td {
	vertical-align: top;
}

.cna-skb .cna-table td:first-child {
	width: 28px;
	text-align: center;
}

.cna-skb .cna-table td:nth-child(3),
.cna-skb .cna-table td:nth-child(4) {
	white-space: nowrap;
	text-align: right;
}

.cna-skb [data-cna-skb-skill] label,
.cna-skb [data-cna-skb-budget] label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	margin: 0 8px 8px 0;
	border: 1px solid var(--cna-line);
	border-radius: 999px;
	cursor: pointer;
}

.cna-skb [data-cna-skb-skill] input:checked + label,
.cna-skb [data-cna-skb-skill] label:has(input:checked),
.cna-skb [data-cna-skb-budget] label:has(input:checked) {
	border-color: var(--cna-primary);
	background: rgba(232, 99, 155, 0.08);
}

.cna-skb [data-cna-skb-interests] label,
.cna-skb [data-cna-skb-already-own] label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--cna-line);
	border-radius: 8px;
}

.cna-skb [data-cna-skb-over-budget] {
	border-left: 3px solid #c62828;
}

.cna-skb [data-cna-skb-over-budget] .cna-result__headline {
	color: #c62828;
}

.cna-skb [data-cna-skb-over-budget-suggestions] {
	margin: 8px 0 0;
	padding-left: 20px;
}

.cna-skb .cna-tag {
	font-size: 0.68rem;
	padding: 2px 8px;
}

@media print {
	.cna-skb [data-cna-skb-empty-state] {
		display: none !important;
	}
}