/*
 * Manager-only Settings screen styling. Depends on hsi-portal-shell.css for
 * design tokens (see wp_register_style() deps in class-hsi-portal-settings-render.php).
 */

.hsi-portal-settings {
	max-width: var(--hsi-shell-max);
}

.hsi-portal-settings__instruction {
	margin: 0 0 var(--hsi-space-4);
	font-size: 0.9em;
	color: #555;
}

.hsi-portal-settings__table {
	width: 100%;
	border-collapse: collapse;
}

@media (max-width: 720px) {
	.hsi-portal-settings__table {
		display: block;
		overflow-x: auto;
	}
}

.hsi-portal-settings__table th,
.hsi-portal-settings__table td {
	text-align: left;
	vertical-align: top;
	padding: var(--hsi-space-3);
	border-bottom: 1px solid var(--hsi-neutral-tint);
}

.hsi-portal-settings__table th {
	font-weight: 600;
	border-bottom: 2px solid #c9ccd1;
}

.hsi-portal-settings__description {
	margin: var(--hsi-space-1) 0 0;
	font-size: 0.85em;
	font-weight: normal;
	color: #555;
}

.hsi-portal-settings__unset {
	color: var(--hsi-red);
}

.hsi-portal-settings__badge {
	display: inline-block;
	margin-left: var(--hsi-space-2);
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--hsi-neutral-tint);
	font-size: 0.78em;
	font-weight: 600;
	color: #555;
}