/**
 * M3a on-page SEO issue overlay — frontend styles.
 *
 * Deliberately self-contained (own hardcoded values, not a link to
 * admin/css/tokens.css): tokens.css is conceptually an admin-only file
 * scoped by its own docblock to "the plugin's admin UI", and this
 * stylesheet loads on an arbitrary theme's public page instead, so it
 * carries its own copy of the same three severity colours rather than
 * pulling in a file whose own contract is admin-only. Values below mirror
 * tokens.css's --abds-color-poor-text/--abds-color-ok-text/
 * --abds-color-primary (link) exactly, matching admin.js's own
 * SEVERITY_TILE_GROUP critical/warning/info -> poor/ok/link convention.
 */

:root {
	--abds-hl-critical: #b32d2e;
	--abds-hl-warning: #8a6d00;
	--abds-hl-info: #005bbb;
	--abds-hl-surface: #ffffff;
	--abds-hl-text: #1e1e1e;
	--abds-hl-text-muted: #50575e;
	--abds-hl-border: #c3c4c7;
	--abds-hl-panel-width: 340px;
}

/* Coordinator, 2026-09-23: the panel was a fixed overlay sitting ON TOP
   of the page's own right edge, hiding exactly the content/menu it was
   meant to help inspect. Fixed by shifting the whole page's own box left
   by the panel's width while highlight mode is on, instead of overlaying
   it -- nothing on the page is ever actually covered. Applied to <html>
   (not <body>): a theme whose own fixed/sticky elements are positioned
   relative to the viewport, not to <body>, still needs a viewport-level
   push, not just a document-flow one. */
html.abds-seo-hl-shifted {
	margin-right: var( --abds-hl-panel-width );
}

.abds-seo-hl-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 99998;
}

.abds-seo-hl-badge {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var( --abds-hl-critical );
	color: #ffffff;
	font: 700 12px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	pointer-events: none;
	z-index: 99999;
}

.abds-seo-hl-badge--critical {
	background: var( --abds-hl-critical );
}

.abds-seo-hl-badge--warning {
	background: var( --abds-hl-warning );
}

.abds-seo-hl-badge--info {
	background: var( --abds-hl-info );
}

.abds-seo-hl-panel {
	position: fixed;
	top: 32px;
	right: 0;
	bottom: 0;
	width: var( --abds-hl-panel-width );
	max-width: 90vw;
	overflow-y: auto;
	background: var( --abds-hl-surface );
	border-left: 1px solid var( --abds-hl-border );
	box-shadow: -2px 0 8px rgba( 0, 0, 0, 0.12 );
	padding: 20px;
	box-sizing: border-box;
	z-index: 99999;
	font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var( --abds-hl-text );
}

.abds-seo-hl-panel__title {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
}

.abds-seo-hl-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.abds-seo-hl-panel__item {
	position: relative;
	padding: 12px 0 12px 30px;
	border-top: 1px solid var( --abds-hl-border );
}

.abds-seo-hl-panel__item:first-child {
	border-top: none;
}

.abds-seo-hl-panel__badge {
	position: absolute;
	top: 12px;
	left: 0;
}

.abds-seo-hl-panel__item-title {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.abds-seo-hl-panel__how {
	margin: 0 0 8px;
	color: var( --abds-hl-text-muted );
}

.abds-seo-hl-panel__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.abds-seo-hl-panel__actions a,
.abds-seo-hl-panel__jump {
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var( --abds-hl-info );
	background: none;
	border: 1px solid var( --abds-hl-info );
	border-radius: 4px;
	padding: 4px 8px;
	cursor: pointer;
	text-decoration: none;
}

.abds-seo-hl-panel__actions a:hover,
.abds-seo-hl-panel__jump:hover {
	background: var( --abds-hl-info );
	color: #ffffff;
}