/**
 * Front-end styles for the Technical Information table.
 * Scoped to .utd-tech-info so themes stay untouched.
 */

.utd-tech-info {
	--utd-ti-border: #e3e6ec;
	--utd-ti-bg: #ffffff;
	--utd-ti-stripe: #f7f8fa;
	--utd-ti-label: #4a5261;
	--utd-ti-text: #1e2430;
	--utd-ti-accent: #2563eb;
	margin: 2em 0;
	color: var(--utd-ti-text);
}

.utd-tech-info__title {
	margin: 0 0 .6em;
	font-size: 1.35em;
	line-height: 1.3;
}

.utd-tech-info__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--utd-ti-border);
	border-radius: 8px;
	background: var(--utd-ti-bg);
}

.utd-tech-info__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: .97em;
	table-layout: auto;
}

.utd-tech-info__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.utd-tech-info__table tr + tr {
	border-top: 1px solid var(--utd-ti-border);
}

.utd-tech-info__table tr:nth-child(even) {
	background: var(--utd-ti-stripe);
}

.utd-tech-info__label,
.utd-tech-info__value {
	padding: .7em 1em;
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
	border: 0;
}

.utd-tech-info__label {
	width: 34%;
	min-width: 130px;
	font-weight: 600;
	color: var(--utd-ti-label);
}

.utd-tech-info__value {
	word-break: break-word;
}

.utd-tech-info__link {
	color: var(--utd-ti-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.utd-tech-info__link:hover,
.utd-tech-info__link:focus {
	text-decoration: none;
}

.utd-tech-info__empty {
	color: #8a92a3;
}

@media (max-width: 480px) {
	.utd-tech-info__label,
	.utd-tech-info__value {
		padding: .6em .75em;
	}

	.utd-tech-info__label {
		width: 42%;
		min-width: 110px;
	}
}

@media (prefers-color-scheme: dark) {
	.utd-tech-info {
		--utd-ti-border: #303643;
		--utd-ti-bg: #171b22;
		--utd-ti-stripe: #1d222b;
		--utd-ti-label: #a7b0c0;
		--utd-ti-text: #e8ecf3;
		--utd-ti-accent: #6ea8ff;
	}

	.utd-tech-info__empty {
		color: #798296;
	}
}