/*
 * ABDS Connect settings screen — native wp-admin card layout. Deliberately
 * light: WP's own .card/.form-table/.description classes carry the layout,
 * this file only adds the bits wp-admin doesn't already have (status dots,
 * source pills, the onboarding panel). Colours reference the shared design
 * tokens in tokens.css — no hardcoded colours here, so this plugin's status
 * colours stay in sync with ABDS SEO's.
 */

.abds-connect-page-title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.abds-connect-logo {
	display: inline-block;
	width: 40px;
	height: 40px;
	vertical-align: middle;
}

.abds-connect-settings .abds-connect-card {
	max-width: 720px;
	margin-top: 20px;
	margin-bottom: 0;
}

.abds-connect-badge-free {
	color: var( --abds-color-good-text );
	font-size: 12px;
	font-weight: 400;
}

.abds-connect-badge-pro {
	color: var( --abds-color-premium-text );
	font-size: 12px;
	font-weight: 400;
}

.abds-connect-onboarding {
	background: var( --abds-color-bg );
	border: 1px solid var( --abds-color-border );
	border-radius: 2px;
	padding: 1px 12px;
	margin-bottom: 16px;
}

.abds-connect-status {
	font-size: 14px;
}

.abds-connect-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
}

.abds-connect-dot-ok {
	background: var( --abds-color-good-text );
}

.abds-connect-dot-error {
	background: var( --abds-color-poor-text );
}

.abds-connect-dot-off {
	background: var( --abds-color-text-muted );
}

.abds-connect-test-result {
	margin-left: 8px;
	font-weight: 500;
}

.abds-connect-test-result.is-success {
	color: var( --abds-color-good-text );
}

.abds-connect-test-result.is-error {
	color: var( --abds-color-poor-text );
}

.abds-connect-sources {
	margin: 0;
}

.abds-connect-sources li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var( --abds-color-bg );
	max-width: 480px;
}

.abds-connect-sources li:last-child {
	border-bottom: none;
}

.abds-connect-pill {
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.abds-connect-pill-ok {
	color: var( --abds-color-good-text );
}

.abds-connect-pill-ok .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.abds-connect-pill-off {
	color: var( --abds-color-text-muted );
}