/**
 * Front-end styles for the System Requirements table.
 * Scoped to .utd-sysreq so themes stay untouched.
 */

.utd-sysreq {
	--utd-sysreq-accent: #4a9ae8;
	--utd-sysreq-head-text: #ffffff;
	--utd-sysreq-label: #3d4757;
	--utd-sysreq-value: #6a7383;
	--utd-sysreq-stripe: #eef2f5;
	--utd-sysreq-border: #e6ebf0;
	--utd-sysreq-bg: #ffffff;
	margin: 2em 0;
}

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

.utd-sysreq__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--utd-sysreq-bg);
}

.utd-sysreq__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 1em;
	line-height: 1.5;
}

.utd-sysreq__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-sysreq__head {
	padding: 1.1em 1.15em;
	background: var(--utd-sysreq-accent);
	color: var(--utd-sysreq-head-text);
	font-weight: 700;
	border: 0;
}

.utd-sysreq__head--item {
	text-align: left;
}

.utd-sysreq__head--value {
	text-align: right;
}

.utd-sysreq__item,
.utd-sysreq__value {
	padding: 1.05em 1.15em;
	border: 0;
	border-bottom: 1px solid var(--utd-sysreq-border);
	vertical-align: top;
}

.utd-sysreq__item {
	width: 50%;
	text-align: left;
	font-weight: 700;
	color: var(--utd-sysreq-label);
}

.utd-sysreq__value {
	text-align: right;
	color: var(--utd-sysreq-value);
	word-break: break-word;
}

.utd-sysreq--striped .utd-sysreq__row:nth-child(even) .utd-sysreq__item,
.utd-sysreq--striped .utd-sysreq__row:nth-child(even) .utd-sysreq__value {
	background: var(--utd-sysreq-stripe);
}

.utd-sysreq__empty {
	color: #98a1b0;
}

@media (max-width: 480px) {
	.utd-sysreq__head,
	.utd-sysreq__item,
	.utd-sysreq__value {
		padding: .85em .8em;
	}

	.utd-sysreq__item {
		width: 45%;
	}
}

@media (prefers-color-scheme: dark) {
	.utd-sysreq {
		--utd-sysreq-label: #e3e8f0;
		--utd-sysreq-value: #a7b0c0;
		--utd-sysreq-stripe: #1d222b;
		--utd-sysreq-border: #303643;
		--utd-sysreq-bg: #171b22;
	}

	.utd-sysreq__empty {
		color: #798296;
	}
}