/* Sellgrip: Chancen-Check /{lang}/<slug>/ (21 okt 2026, scripts/build-chancen-check.mjs).
 * Na tools.css en calculator.css: zelfde formulier (calc-field, calc-select) en tabel (fee-table)
 * als de provisietabel. Alleen tokens: licht en donker volgen vanzelf. Geen gekleurde streep,
 * geen gloed, niets dat vanzelf beweegt. */

.cc-form {
	max-width: 40rem;
	margin-bottom: 24px;
}

.cc-sample {
	max-width: 58rem;
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper-2);
	color: var(--ink);
	font-size: 0.95rem;
}

.cc-table caption {
	font-weight: 650;
	color: var(--ink);
	font-size: 0.98rem;
}

.cc-table .cc-pos {
	width: 2.2em;
	padding-right: 8px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.cc-table tbody th {
	min-width: 12rem;
}

.cc-name {
	display: block;
}

.cc-sub {
	display: block;
	margin-top: 2px;
	font-size: 0.86rem;
	font-weight: 400;
	color: var(--muted);
}

.cc-tag {
	display: inline-block;
	padding: 0 6px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--graphite);
	white-space: nowrap;
}

.cc-table td {
	white-space: nowrap;
}

.cc-error[hidden] {
	display: none;
}

.cc-table + .calc-connect,
.table-scroll + .cc-error + .calc-connect {
	max-width: 58rem;
}

@media (max-width: 760px) {
	.cc-form .calc-fields {
		grid-template-columns: 1fr;
	}
}

/* Smal: per product de naam over de hele breedte, daaronder vraag, prijs en rang naast elkaar,
 * elk met zijn kolomnaam erboven (data-label). Geen horizontaal scrollen. */
@media (max-width: 560px) {
	.cc-table thead {
		display: none;
	}

	.cc-table tbody tr {
		display: grid;
		grid-template-columns: 2.2em repeat(3, minmax(0, 1fr));
		border-bottom: 1px solid var(--line);
		padding: 12px 0;
	}

	.cc-table tbody tr > * {
		border-bottom: 0;
		padding: 0;
	}

	.cc-table tbody .cc-pos {
		grid-row: 1;
		grid-column: 1;
	}

	.cc-table tbody th {
		grid-row: 1;
		grid-column: 2 / -1;
		min-width: 0;
		margin-bottom: 8px;
	}

	.cc-table tbody td[data-label] {
		grid-row: 2;
		white-space: normal;
		text-align: left;
		padding: 0 8px 0 0;
	}

	.cc-table tbody td[data-label]:nth-of-type(2) {
		grid-column: 2;
	}

	.cc-table tbody td[data-label]:nth-of-type(3) {
		grid-column: 3;
	}

	.cc-table tbody td[data-label]:nth-of-type(4) {
		grid-column: 4;
	}

	.cc-table tbody td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--muted);
	}
}