/**
 * Admin screen styles. Every colour, and the standard spacing/type steps,
 * reference the design tokens in tokens.css (Stage 7.5) — no hardcoded colours
 * here, so the blue-yellow palette and its WCAG-AA guarantee hold everywhere.
 */

.abds-seo-page-title {
	display: flex;
	align-items: center;
	gap: var( --abds-space-2 );
}

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

/* ---- Bento cards + grid (Stage 7.6 structural layout) ----
   One reusable card surface + an asymmetric grid, used across the Dashboard,
   Settings and Reports. Colours come from the tokens; the spacing is the larger
   structural scale so cards breathe and never sit edge-to-edge. */
.abds-seo-bento {
	display: grid;
	grid-template-columns: 1fr; /* mobile-first: a single column */
	gap: var( --abds-space-section );
	align-items: start;
	margin-top: var( --abds-space-6 );
}

.abds-seo-bento-card {
	background: var( --abds-color-surface );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius-card );
	box-shadow: var( --abds-shadow-card-raised );
	padding: var( --abds-space-card-padding );
	min-width: 0; /* let grid children shrink instead of overflowing */
	transition: box-shadow var( --abds-duration-base ) var( --abds-ease-out ),
		border-color var( --abds-duration-base ) var( --abds-ease-out );
}

.abds-seo-bento-card:hover {
	box-shadow: var( --abds-shadow-card-hover );
	border-color: var( --abds-color-border-strong );
}

@media ( prefers-reduced-motion: reduce ) {
	.abds-seo-bento-card {
		transition: none;
	}
}

/* A single-form card (Search Appearance's Global/Archives/System tabs,
   Indexing's Sitemap/Robots.txt tabs) still spans the full grid row so
   nothing awkwardly shares its line, but the card itself stays a
   comfortable reading/form width instead of stretching edge-to-edge on
   wide monitors — the same "readable form" cap already used for the AI
   settings panel (.abds-seo-ai-settings, 640px). */
.abds-seo-bento-card--form {
	max-width: 640px;
}

.abds-seo-bento-card__title {
	margin: 0 0 var( --abds-space-1 );
	font-size: var( --abds-font-size-card-title );
	font-weight: var( --abds-font-weight-bold );
	line-height: 1.3;
	color: var( --abds-color-text );
	/* A custom post type/taxonomy label is site-owner-authored text of
	   unknown length (Search Appearance's Content Types/Taxonomies rows
	   title a card by it) — clip rather than wrap or overflow the card,
	   with the full name still reachable via the native title tooltip. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abds-seo-bento-card__desc {
	margin: 0 0 var( --abds-space-4 );
	max-width: 60ch;
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-base );
	line-height: var( --abds-line-height );
}

.abds-seo-bento-card__body {
	min-width: 0;
}

/* Wide viewport: an asymmetric 6-column grid — the spans give the bento
   rhythm, and the hero card carries the most visual weight. */
@media ( min-width: 1280px ) {
	.abds-seo-bento {
		grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	}

	.abds-seo-bento-card {
		grid-column: span 2;
	}

	.abds-seo-bento-card--wide {
		grid-column: span 3;
	}

	.abds-seo-bento-card--full {
		grid-column: span 6;
	}

	.abds-seo-bento-card--hero {
		grid-column: span 3;
		grid-row: span 2;
	}

	.abds-seo-dashboard-status-row {
		grid-column: span 6;
	}
}

/* Mid viewport: two columns; wide/full/hero take the whole width. */
@media ( min-width: 783px ) and ( max-width: 1279px ) {
	.abds-seo-bento {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.abds-seo-bento-card--wide,
	.abds-seo-bento-card--full,
	.abds-seo-bento-card--hero,
	.abds-seo-dashboard-status-row {
		grid-column: span 2;
	}
}

/* The Dashboard's Content/Indexing/Sitemap row is a nested .abds-seo-bento
   sub-grid (see dashboard-page.php's own comment on why: the hero card's
   grid-row: span 2 otherwise breaks the outer grid's auto-placement for
   whatever follows it) — it doesn't need the outer grid's own top margin
   a second time. */
.abds-seo-dashboard-status-row {
	margin-top: 0;
}

/* ---- Bento card entrance: staggered fade ----
   Switching Search Appearance/Indexing tabs swaps the whole panel's content
   instantly by default, which reads as a jump cut; the Dashboard's own
   full-page load has the same "everything pops in at once" flatness. A
   short fade + slight rise per CARD (not the grid container as one block)
   softens both — related cards arriving a beat apart reads as composed
   rather than dumped on screen, while staying well under the 300ms UI
   ceiling even for the last-staggered card. Entering content only (§
   animation decision framework: state change, not decoration for its own
   sake), so no exit animation is needed. */
.abds-seo-bento-card {
	animation: abds-seo-fade-in var( --abds-duration-base ) var( --abds-ease-out ) both;
}

.abds-seo-bento-card:nth-child( 2 ) {
	animation-delay: 40ms;
}

.abds-seo-bento-card:nth-child( 3 ) {
	animation-delay: 80ms;
}

.abds-seo-bento-card:nth-child( 4 ) {
	animation-delay: 120ms;
}

.abds-seo-bento-card:nth-child( 5 ) {
	animation-delay: 160ms;
}

.abds-seo-bento-card:nth-child( 6 ) {
	animation-delay: 200ms;
}

.abds-seo-bento-card:nth-child( n+7 ) {
	animation-delay: 240ms;
}

@keyframes abds-seo-fade-in {
	from {
		opacity: 0;
		transform: translateY( 4px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.abds-seo-bento-card {
		animation: none;
	}
}

/* ---- Save/Regenerate buttons: idle → saving → saved ----
   A page-level notice above the form is easy to miss; the control the
   user actually pressed should visibly confirm it heard them. Saving
   fades the label; saved briefly turns the button the same green used
   for a "good" score elsewhere, then it settles back to idle on its own
   (see useSaveStatus in src/shared/use-save-status.js). */
.abds-seo-save-button {
	transition: transform var( --abds-duration-fast ) var( --abds-ease-out ),
		background-color var( --abds-duration-base ) var( --abds-ease-out ),
		border-color var( --abds-duration-base ) var( --abds-ease-out );
}

.abds-seo-save-button:active:not( :disabled ) {
	transform: scale( 0.97 );
}

.abds-seo-save-button--saved {
	background: var( --abds-color-good-text ) !important;
	border-color: var( --abds-color-good-text ) !important;
}

/* ---- Dashboard hero card: animated gradient score ring ----
   Third design pass: brings the Dashboard hero up to Mockup B's own "wow"
   scene (ABDS-SEO-TZ-SCORE-WOW-093.md Task B, owner-approved 21Aug26) — the
   same gradient-sweep-ring identity as the editor sidebar's per-post score
   (src/sidebar.js's ScoreRing), scaled up as this composition's centerpiece.
   Deliberately a fresh, hero-sized markup/CSS pair rather than reusing that
   React component directly: the ring here is animated by a small vanilla
   rAF script (src/admin.js, matching this exact page's own established
   pattern for one-shot dashboard animations — see the checklist-completion
   confetti a few rules below) so the correct final score still renders
   server-side with zero JS, consistent with every other data-bearing block
   on this page. */
.abds-seo-bento-card--hero {
	display: flex;
	flex-direction: column;
	background: linear-gradient( 160deg, var( --abds-color-surface ) 0%, #f4f8ff 100% );
}

.abds-seo-hero-ring-wrap {
	display: flex;
	align-items: center;
	gap: var( --abds-space-6 );
	margin-top: var( --abds-space-2 );
}

.abds-seo-hero-ring {
	position: relative;
	width: 120px;
	height: 120px;
	flex-shrink: 0;
}

.abds-seo-hero-ring__svg {
	transform: rotate( -90deg );
	filter: drop-shadow( 0 2px 6px rgba( 0, 91, 187, 0.18 ) );
}

.abds-seo-hero-ring__track {
	fill: none;
	stroke: var( --abds-color-bg );
	stroke-width: 9;
}

.abds-seo-hero-ring__fill {
	fill: none;
	stroke-width: 9;
	stroke-linecap: round;
	/* No CSS transition here on purpose: the count-up script (admin.js)
	   drives stroke-dashoffset every rAF frame in lockstep with the
	   number — a CSS transition racing those per-frame JS writes would
	   fight it and read as stutter instead of one smooth sweep. */
}

.abds-seo-hero-ring__value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-weight: var( --abds-font-weight-semibold );
	font-size: 32px;
	font-variant-numeric: tabular-nums;
	color: var( --abds-color-text );
}

/* Empty state (no scan yet): a faint dotted grid texture — the same motif
   language already used for locked Pro-feature cards — stands in for the
   ring's gradient sweep, "?" instead of a number. Brand blue at very low
   opacity, never the brand yellow as a fill (design law). */
.abds-seo-hero-ring--empty {
	border-radius: 50%;
	overflow: hidden;
	background: var( --abds-color-surface );
	border: 9px solid var( --abds-color-bg );
}

.abds-seo-hero-ring__grid-motif {
	position: absolute;
	inset: 0;
	background-image: radial-gradient( circle at 6px 6px, var( --abds-color-primary ) 1.6px, transparent 1.7px );
	background-size: 16px 16px;
	opacity: 0.08;
}

.abds-seo-hero-ring--empty .abds-seo-hero-ring__value {
	font-size: 40px;
	color: var( --abds-color-text-muted );
}

.abds-seo-hero-sub {
	display: flex;
	flex-direction: column;
	gap: var( --abds-space-1 );
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
}

.abds-seo-hero-sub b {
	color: var( --abds-color-text );
	font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-variant-numeric: tabular-nums;
}

.abds-seo-bento-card--hero .abds-seo-hero-sub {
	margin-top: auto; /* pin the sub-stats/CTA to the bottom of the tall card */
}

.abds-seo-hero-sub form,
.abds-seo-hero-sub p {
	margin: var( --abds-space-2 ) 0 0;
}

/* ---- Dashboard status cards: Content / Indexing / Sitemap ----
   Compact stat cards next to the hero, on today's real data only — no
   Technical/Schema cards yet (§104, that data lands in R3/R4). Deliberately
   NOT colour-banded like the hero score for every stat: a noindex count or
   a sitemap URL count isn't inherently "good" or "poor," just a fact, so
   only the content-score stat (which the hero's own band logic already
   defines) borrows a band colour. */
.abds-seo-stat-card__value {
	display: block;
	margin: var( --abds-space-2 ) 0 var( --abds-space-1 );
	font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 40px;
	font-weight: var( --abds-font-weight-bold );
	line-height: 1;
	color: var( --abds-color-text );
}

.abds-seo-stat-card__value--good {
	color: var( --abds-color-good-text );
}

.abds-seo-stat-card__value--ok {
	color: var( --abds-color-ok-text );
}

.abds-seo-stat-card__value--poor {
	color: var( --abds-color-poor-text );
}

.abds-seo-stat-card__value--na {
	color: var( --abds-color-text-muted );
}

.abds-seo-stat-card__note {
	margin: 0;
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
}

/* ---- Noindex-activation card ----
   The same warning src/../class-abds-seo-noindex-activation-notice.php
   shows as a global admin_notices banner everywhere else, embedded here as
   a native card instead of a foreign strip stacked above this composition
   (only rendered on this screen; the notice class skips its own banner on
   the Dashboard for exactly this reason). Reuses the "ok" amber tokens —
   the closest existing status colour to a caution/warning tone, no new
   colour introduced. */
.abds-seo-bento-card--noindex-activation {
	background: var( --abds-color-ok-bg );
	border-color: var( --abds-color-ok-text );
}

.abds-seo-bento-card--noindex-activation .abds-seo-bento-card__title,
.abds-seo-bento-card--noindex-activation .abds-seo-bento-card__desc {
	color: var( --abds-color-ok-text );
}

/* A <form> isn't valid phrasing content inside a <p> (browsers silently
   split the paragraph around it) — this card's two actions sit in a plain
   flex row instead, not the <p>%s %s</p> shape the old admin_notices
   version used. */
.abds-seo-bento-card__actions {
	display: flex;
	align-items: center;
	gap: var( --abds-space-3 );
}

.abds-seo-bento-card__actions form {
	margin: 0;
}

/* ---- Dashboard: getting-started checklist ---- */
.abds-seo-checklist {
	position: relative;
	overflow: hidden;
}

.abds-seo-checklist__confetti {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.abds-seo-checklist__bar {
	margin: var( --abds-space-3 ) 0 var( --abds-space-4 );
	height: 8px;
	border-radius: var( --abds-radius-pill );
	background: var( --abds-color-bg );
	overflow: hidden;
}

/*
 * The "electric" yellow progress line from the owner-approved wow-layer
 * mockup (Mockup B, ABDS-SEO-TZ-SCORE-WOW-093.md Task B) — yellow is used
 * here strictly as a thin progress accent, never as a large-area fill (the
 * design law's one hard rule on the colour). Width is set once, server-side,
 * per page load — scaleX from the left edge instead of animating width
 * itself avoids layout thrash. Two animations run together: the one-time
 * fill-in reveal, and a looping moving highlight within the gradient that
 * reads as "live" rather than static.
 */
.abds-seo-checklist__bar-fill {
	height: 100%;
	width: 100%;
	border-radius: var( --abds-radius-pill );
	background: linear-gradient(
		90deg,
		var( --abds-color-accent ) 0%,
		#fff6b8 50%,
		var( --abds-color-accent ) 100%
	);
	background-size: 200% 100%;
	box-shadow: 0 0 6px rgba( 255, 213, 0, 0.55 );
	transform-origin: left;
	transform: scaleX( var( --abds-seo-checklist-fill, 1 ) );
	animation: abds-seo-checklist-fill-in 0.8s ease-out both,
		abds-seo-checklist-electric 2.2s linear infinite;
}

@keyframes abds-seo-checklist-fill-in {
	from {
		transform: scaleX( 0 );
	}
	to {
		transform: scaleX( var( --abds-seo-checklist-fill, 1 ) );
	}
}

@keyframes abds-seo-checklist-electric {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: 0 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.abds-seo-checklist__bar-fill {
		animation: none;
	}
}

.abds-seo-checklist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --abds-space-2 );
}

.abds-seo-checklist__item {
	display: flex;
	align-items: center;
	gap: var( --abds-space-2 );
	font-size: var( --abds-font-size-base );
}

.abds-seo-checklist__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var( --abds-color-border );
	color: var( --abds-color-on-primary );
	font-size: 12px;
}

.abds-seo-checklist__item.is-done {
	color: var( --abds-color-text-muted );
	text-decoration: line-through;
}

.abds-seo-checklist__item.is-done .abds-seo-checklist__icon {
	background: var( --abds-color-good-text );
	border-color: var( --abds-color-good-text );
}

/* ---- Settings: each provider is its own card in a two-column bento ---- */
.abds-seo-bento--settings {
	margin-top: var( --abds-space-6 );
}

/* Each settings card mounts into its own root (the free licence card here; the
   rest from the Pro add-on, or a locked teaser from the free bundle). The root
   is a normal grid cell and the card <section> fills it. Do NOT use
   display:contents here: in Chrome a display:contents grid item with a full
   React panel inside hangs layout (the light free teasers survived it; the Pro
   panels froze the tab). min-width:0 lets the card shrink instead of overflow. */
.abds-seo-settings-mount {
	display: block;
	min-width: 0;
}

@media ( min-width: 1280px ) {
	.abds-seo-bento--settings {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.abds-seo-bento--settings .abds-seo-bento-card {
		grid-column: auto;
	}
}

/* Each panel supplies its own <h2>; give it the card-title weight and drop the
   panels' own leading margins so content starts at the card's padding edge. */
.abds-seo-bento--settings .abds-seo-bento-card h2 {
	margin: 0 0 var( --abds-space-2 );
	font-size: var( --abds-font-size-card-title );
	font-weight: var( --abds-font-weight-bold );
	line-height: 1.3;
	color: var( --abds-color-text );
}

.abds-seo-bento--settings .abds-seo-bento-card__body > :first-child {
	margin-top: 0;
}

/* One connection-status line (a colored dot + text), used both inside each
   settings card and, as a link, in the "Connected services" summary above
   the grid (tasks/2026-09-08-seo-pro-vydymist-servisiv.md). The dot's color
   comes from the existing good/ok/poor/neutral score palette below, not a
   separate one -- state is the same kind of signal as a score band. */
.abds-seo-service-state {
	display: flex;
	align-items: center;
	gap: var( --abds-space-2 );
	margin: 0 0 var( --abds-space-3 );
	font-size: var( --abds-font-size-base );
	color: var( --abds-color-text-muted );
}

a.abds-seo-service-state--link {
	text-decoration: none;
	color: inherit;
}

a.abds-seo-service-state--link:hover span:last-child {
	text-decoration: underline;
}

.abds-seo-service-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: var( --abds-radius-pill );
	background: var( --abds-color-border-strong );
}

.abds-seo-service-dot.is-good {
	background: var( --abds-color-good-text );
}

.abds-seo-service-dot.is-caution {
	background: var( --abds-color-ok-text );
}

.abds-seo-service-dot.is-poor {
	background: var( --abds-color-poor-text );
}

.abds-seo-service-dot.is-neutral {
	background: var( --abds-color-border-strong );
}

/* The summary card itself is a normal .abds-seo-bento-card (see Card in
   admin-shared.js) -- only its list needs its own rules. */
.abds-seo-connected-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --abds-space-1 ) var( --abds-space-6 );
}

.abds-seo-connected-services__list .abds-seo-service-state {
	margin: 0;
}

/* A vertical list of toggle / checkbox rows (the CRO card's switches, the popup
   card's post-type checkboxes). @wordpress/components reset every control's own
   margin to 0, so without an owner the row gap collapses — and any row that
   carries `help` text spaces differently from the ones that don't. The flex
   container owns one explicit, token-based rhythm so every row sits the same
   distance apart, and align-items keeps the switch/checkbox left-aligned with
   its neighbours regardless of label length. */
.abds-seo-toggle-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var( --abds-space-4 );
	margin: var( --abds-space-2 ) 0;
}

.abds-seo-toggle-list .components-base-control {
	margin-bottom: 0;
}

/* ---- Tools (migration wizard): per-adapter action forms sit side by side,
   not stacked — each is display:inline-block via a class instead of an
   inline style attribute, with a token-driven gap between adjacent ones. */
.abds-seo-inline-form {
	display: inline-block;
}

.abds-seo-inline-form + .abds-seo-inline-form {
	margin-left: var( --abds-space-2 );
}

/* ---- Reports & monthly report: each section is a full-width card ---- */
/* Report cards hold wide tables; let a too-wide table scroll inside its own
   card rather than pushing the page into a horizontal scroll. */
.abds-seo-bento--reports .abds-seo-bento-card {
	overflow-x: auto;
}

/* The monthly report is a print/PDF deliverable: on paper the cards must fall
   away to a clean, borderless flow — no shadows, borders or grid gaps. */
@media print {
	.abds-seo-bento {
		display: block;
	}

	.abds-seo-bento-card {
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
	}
}

.abds-seo-wrap .abds-seo-summary-cards {
	display: flex;
	gap: var( --abds-space-4 );
	margin: var( --abds-space-4 ) 0 var( --abds-space-6 );
	flex-wrap: wrap;
}

.abds-seo-wrap .abds-seo-score {
	font-size: var( --abds-font-size-display );
	font-weight: var( --abds-font-weight-semibold );
	margin: 0;
}

.abds-seo-report-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var( --abds-space-3 );
	margin: var( --abds-space-4 ) 0;
}

.abds-seo-report-filters label {
	display: flex;
	flex-direction: column;
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
	gap: var( --abds-space-1 );
}

.abds-seo-status {
	display: inline-block;
	padding: 2px var( --abds-space-2 );
	border-radius: var( --abds-radius );
	font-size: var( --abds-font-size-sm );
	font-weight: var( --abds-font-weight-semibold );
}

.abds-seo-status-good {
	background: var( --abds-color-good-bg );
	color: var( --abds-color-good-text );
}

.abds-seo-status-ok {
	background: var( --abds-color-ok-bg );
	color: var( --abds-color-ok-text );
}

.abds-seo-status-poor {
	background: var( --abds-color-poor-bg );
	color: var( --abds-color-poor-text );
}

.abds-seo-status-not_analyzed {
	background: var( --abds-color-bg );
	color: var( --abds-color-text-muted );
}

.abds-seo-ai-settings {
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: var( --abds-space-3 );
	margin-top: var( --abds-space-4 );
}

.abds-seo-ai-settings__actions {
	display: flex;
	gap: var( --abds-space-2 );
	margin: var( --abds-space-2 ) 0 var( --abds-space-4 );
}

.abds-seo-ai-usage {
	max-width: 480px;
}

.abds-seo-cost-estimate {
	font-weight: var( --abds-font-weight-semibold );
	background: var( --abds-color-ok-bg );
	border-left: 4px solid var( --abds-color-accent );
	padding: var( --abds-space-2 ) var( --abds-space-3 );
}

.abds-seo-rank-chart-wrap {
	max-width: 680px;
	margin-top: var( --abds-space-4 );
}

.abds-seo-rank-chart {
	width: 100%;
	height: auto;
	background: var( --abds-color-surface );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius );
}

.abds-seo-rank-chart__axis {
	stroke: var( --abds-color-border );
	stroke-width: 1;
}

.abds-seo-rank-chart__label {
	font-size: 11px;
	fill: var( --abds-color-text-muted );
}

.abds-seo-rank-chart__line {
	fill: none;
	stroke: var( --abds-color-primary );
	stroke-width: 2;
}

.abds-seo-rank-chart__dot {
	fill: var( --abds-color-primary );
}

.abds-seo-rank-chart__jump {
	fill: none;
	stroke: var( --abds-color-poor-text );
	stroke-width: 2;
}

/* Applied-SEO-change markers: dashed verticals distinct from the solid
   axis and the position line, so an action reads as an annotation on the
   timeline rather than as data. */
.abds-seo-rank-chart__change {
	stroke: var( --abds-color-ok-text );
	stroke-width: 1;
	stroke-dasharray: 3 2;
	opacity: 0.7;
}

.abds-seo-pager {
	display: flex;
	align-items: center;
	gap: var( --abds-space-2 );
}

/* Monthly report: period comparison + sparklines (Pro add-on, 0.12.0). The
   verdict colour follows the metric's good direction, never the number's
   sign; every colour is paired with a word and an arrow in the markup. */
.abds-seo-comparison__bar {
	display: flex;
	gap: var( --abds-space-2 );
	margin-bottom: var( --abds-space-3 );
}

.abds-seo-comparison__basis,
.abds-seo-comparison__hint {
	color: var( --abds-color-text-muted );
}

.abds-seo-comparison__table td,
.abds-seo-comparison__table th {
	vertical-align: middle;
}

.abds-seo-comparison__change {
	white-space: nowrap;
	font-weight: var( --abds-font-weight-semibold );
}

.abds-seo-comparison__verdict {
	font-weight: normal;
}

.abds-seo-comparison__table td.abds-seo-comparison__change--better {
	color: var( --abds-color-good-text );
}

.abds-seo-comparison__table td.abds-seo-comparison__change--worse {
	color: var( --abds-color-poor-text );
}

.abds-seo-comparison__table td.abds-seo-comparison__change--unchanged,
.abds-seo-comparison__table td.abds-seo-comparison__change--changed,
.abds-seo-comparison__table td.abds-seo-comparison__change--unknown {
	color: var( --abds-color-text-muted );
}

.abds-seo-sparkline {
	display: block;
	width: 96px;
	height: 28px;
	color: var( --abds-color-text-muted );
}

.abds-seo-sparkline--good {
	color: var( --abds-color-good-text );
}

.abds-seo-sparkline--bad {
	color: var( --abds-color-poor-text );
}

.abds-seo-sparkline__line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.abds-seo-sparkline__dot {
	fill: currentColor;
}

.abds-seo-decay-declining td {
	background: var( --abds-color-poor-bg );
}

/* Contextual hint under a settings block's heading. */
.abds-seo-field-hint {
	margin: var( --abds-space-1 ) 0 var( --abds-space-4 );
	max-width: 640px;
}

.abds-seo-field-hint__text {
	margin: 0;
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-base );
	line-height: var( --abds-line-height );
}

.abds-seo-field-hint__toggle.components-button.is-link {
	padding: 0;
	height: auto;
	font-size: var( --abds-font-size-sm );
}

.abds-seo-field-hint__more {
	margin: var( --abds-space-2 ) 0 0;
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
	line-height: var( --abds-line-height );
	border-left: 3px solid var( --abds-color-accent );
	padding-left: var( --abds-space-3 );
}

/* ---- Current-tier indicator ---- */
.abds-seo-tier {
	display: inline-flex;
	align-items: center;
	gap: var( --abds-space-2 );
	margin: var( --abds-space-2 ) 0 var( --abds-space-4 );
}

.abds-seo-tier__label {
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-tier__badge {
	display: inline-block;
	padding: 2px var( --abds-space-3 );
	border-radius: var( --abds-radius-pill );
	font-size: var( --abds-font-size-sm );
	font-weight: var( --abds-font-weight-semibold );
	background: var( --abds-color-primary );
	color: var( --abds-color-on-primary );
}

/* Free reads as neutral (outlined), the top tier as the gold accent. */
.abds-seo-tier__badge--free {
	background: var( --abds-color-bg );
	color: var( --abds-color-text );
	border: 1px solid var( --abds-color-border-strong );
}

.abds-seo-tier__badge--agency {
	background: var( --abds-color-accent );
	color: var( --abds-color-on-accent );
}

.abds-seo-tier__link {
	font-size: var( --abds-font-size-sm );
}

/* ---- Locked-feature teaser + premium overview ---- */
.abds-seo-premium {
	margin-top: var( --abds-space-4 );
}

.abds-seo-premium__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: var( --abds-space-4 );
	margin-top: var( --abds-space-3 );
}

.abds-seo-locked {
	background: var( --abds-color-premium-bg );
	border: 1px solid var( --abds-color-premium-accent );
	border-radius: var( --abds-radius-lg );
	padding: var( --abds-space-4 );
}

/*
 * Grid-motif texture from the plugin's own icon (the 2×2 rounded-block
 * glyph) — faint dots tiling the background, decoration only, in empty/
 * locked states per the owner-approved wow-layer mockup's design law.
 * Deliberately the brand blue, not yellow: yellow is reserved for the
 * "electric" progress-line/achievement accent elsewhere, never used as a
 * background fill.
 */
.abds-seo-grid-motif {
	position: relative;
	overflow: hidden;
}

.abds-seo-grid-motif::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle at 6px 6px,
		var( --abds-color-primary ) 1.6px,
		transparent 1.7px
	);
	background-size: 16px 16px;
	opacity: 0.05;
	pointer-events: none;
}

/* ---- Blurred-preview upsell (Stage 9.6, Block 3.4 — one example card,
   Reports page's Content gaps) ---- */
.abds-seo-blur-preview {
	position: relative;
	min-height: 180px;
}

.abds-seo-blur-preview__content {
	filter: blur( 4px );
	pointer-events: none;
	user-select: none;
}

.abds-seo-blur-preview__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --abds-space-2 );
	text-align: center;
	padding: var( --abds-space-4 );
	background: rgba( 255, 255, 255, 0.72 );
	border-radius: var( --abds-radius-lg );
}

.abds-seo-blur-preview__label {
	margin: 0;
	font-size: var( --abds-font-size-sm );
	font-weight: var( --abds-font-weight-semibold );
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --abds-color-text-muted );
}

.abds-seo-blur-preview__overlay .description {
	max-width: 420px;
	margin: 0;
}

/* ---- Settings feature catalog (Stage 9.6) ---- */
.abds-seo-catalog {
	margin: var( --abds-space-4 ) 0 var( --abds-space-6 );
}

.abds-seo-catalog__group {
	margin-top: var( --abds-space-4 );
}

.abds-seo-catalog__group h3 {
	margin: 0 0 var( --abds-space-2 );
	font-size: var( --abds-font-size-base );
	font-weight: var( --abds-font-weight-semibold );
	color: var( --abds-color-text-muted );
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.abds-seo-catalog__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: var( --abds-space-3 );
}

.abds-seo-catalog__item {
	display: flex;
	align-items: flex-start;
	gap: var( --abds-space-2 );
	padding: var( --abds-space-3 );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius-lg );
	background: var( --abds-color-surface );
}

.abds-seo-catalog__item.is-included {
	border-color: var( --abds-color-good-text );
	background: var( --abds-color-good-bg );
}

.abds-seo-catalog__icon {
	flex-shrink: 0;
	font-size: var( --abds-font-size-base );
	line-height: 1.4;
}

.abds-seo-catalog__benefit {
	display: block;
	margin-top: 2px;
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-locked__head {
	display: flex;
	align-items: center;
	gap: var( --abds-space-2 );
	margin-bottom: var( --abds-space-2 );
	flex-wrap: wrap;
}

.abds-seo-locked__lock {
	font-size: var( --abds-font-size-lg );
}

.abds-seo-locked__title {
	font-size: var( --abds-font-size-lg );
	font-weight: var( --abds-font-weight-semibold );
	color: var( --abds-color-premium-text );
}

.abds-seo-locked__tier {
	margin-left: auto;
	background: var( --abds-color-accent );
	color: var( --abds-color-on-accent );
	font-size: var( --abds-font-size-sm );
	font-weight: var( --abds-font-weight-semibold );
	padding: 2px var( --abds-space-2 );
	border-radius: var( --abds-radius-pill );
	white-space: nowrap;
}

.abds-seo-locked__benefit {
	margin: 0 0 var( --abds-space-3 );
	color: var( --abds-color-premium-text );
	line-height: var( --abds-line-height );
}

.abds-seo-locked__price {
	margin: 0 0 var( --abds-space-3 );
	font-weight: var( --abds-font-weight-semibold );
	color: var( --abds-color-premium-text );
}

.abds-seo-locked__cta {
	text-decoration: none;
}

/* ---- Upgrade panel (Settings) ---- */
.abds-seo-upgrade {
	margin: var( --abds-space-4 ) 0 var( --abds-space-6 );
}

.abds-seo-upgrade__currency {
	display: inline-flex;
	gap: 2px;
	background: var( --abds-color-bg );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius-pill );
	padding: 2px;
	margin-top: var( --abds-space-2 );
}

.abds-seo-upgrade__currency-btn {
	border: 0;
	background: transparent;
	color: var( --abds-color-text-muted );
	font-weight: var( --abds-font-weight-medium );
	font-size: var( --abds-font-size-sm );
	line-height: 1;
	padding: 6px 14px;
	border-radius: var( --abds-radius-pill );
	cursor: pointer;
}

.abds-seo-upgrade__currency-btn[aria-pressed="true"] {
	background: var( --abds-color-surface );
	color: var( --abds-color-text );
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.14 );
}

.abds-seo-upgrade__compare {
	margin-top: var( --abds-space-3 );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-upgrade__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --abds-space-4 );
	margin-top: var( --abds-space-3 );
}

.abds-seo-upgrade-tier {
	background: var( --abds-color-surface );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius-lg );
	padding: var( --abds-space-4 );
	display: flex;
	flex-direction: column;
}

.abds-seo-upgrade-tier__label {
	margin: 0 0 var( --abds-space-2 );
	font-size: var( --abds-font-size-lg );
	display: flex;
	align-items: center;
	gap: var( --abds-space-2 );
}

.abds-seo-upgrade-tier__current {
	font-size: var( --abds-font-size-sm );
	font-weight: var( --abds-font-weight-medium );
	color: var( --abds-color-primary );
	background: var( --abds-color-bg );
	border-radius: var( --abds-radius-pill );
	padding: 2px var( --abds-space-2 );
}

.abds-seo-upgrade-tier__price {
	margin: 0 0 var( --abds-space-3 );
	font-size: var( --abds-font-size-xl );
	font-weight: var( --abds-font-weight-bold );
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.abds-seo-upgrade-tier__price--unavailable {
	font-size: var( --abds-font-size-base );
	font-weight: var( --abds-font-weight-medium );
	color: var( --abds-color-text-muted );
}

.abds-seo-upgrade-tier__benefits {
	list-style: disc;
	margin: 0 0 var( --abds-space-4 ) var( --abds-space-4 );
	padding: 0;
	flex-grow: 1;
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-base );
}

.abds-seo-upgrade-tier__benefits li {
	margin-bottom: var( --abds-space-1 );
}

.abds-seo-upgrade-tier__cta {
	text-decoration: none;
	align-self: flex-start;
}

.abds-seo-upgrade__key-hint {
	margin-top: var( --abds-space-4 );
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
}

/* ---- Onboarding wizard ---- */
.abds-seo-onboarding-launcher {
	margin: var( --abds-space-2 ) 0 var( --abds-space-4 );
}

.abds-seo-wizard .abds-seo-wizard__progress {
	margin: 0 0 var( --abds-space-2 );
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.abds-seo-wizard__title {
	margin: 0 0 var( --abds-space-2 );
	font-size: var( --abds-font-size-xl );
}

.abds-seo-wizard__benefit {
	margin: 0 0 var( --abds-space-3 );
	font-size: var( --abds-font-size-lg );
	line-height: var( --abds-line-height );
}

.abds-seo-wizard__note {
	margin: 0 0 var( --abds-space-4 );
	color: var( --abds-color-text-muted );
	border-left: 3px solid var( --abds-color-accent );
	padding-left: var( --abds-space-3 );
	line-height: var( --abds-line-height );
}

.abds-seo-wizard__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --abds-space-3 );
	margin-top: var( --abds-space-5 );
	flex-wrap: wrap;
}

.abds-seo-wizard__nav {
	display: flex;
	gap: var( --abds-space-2 );
	margin-left: auto;
}

/* ---- R3 Site Audit screen (mockup Screen 3, "Аудит як видимий процес") ---- */

.abds-seo-audit-progress {
	margin-top: var( --abds-space-4 );
}

.abds-seo-audit-progress-track {
	height: 6px;
	background: var( --abds-color-bg );
	border-radius: var( --abds-radius-pill );
	overflow: hidden;
}

.abds-seo-audit-progress-fill {
	height: 100%;
	border-radius: var( --abds-radius-pill );
	background: linear-gradient( 90deg, var( --abds-color-primary ), var( --abds-color-accent ) );
	transition: width var( --abds-duration-base ) var( --abds-ease-out );
}

.abds-seo-audit-progress-label {
	margin: var( --abds-space-2 ) 0 0;
	font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-variant-numeric: tabular-nums;
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
}

/* UI/UX review P1.2: the score headline -- the single number a site owner
   actually acts on, so it leads over the tiles instead of hiding in small
   print. Same good/ok/poor palette scoreBand() everywhere else in the
   plugin already uses. */
.abds-seo-audit-score-headline {
	display: flex;
	align-items: baseline;
	gap: var( --abds-space-3 );
	margin: var( --abds-space-2 ) 0 var( --abds-space-4 );
}

.abds-seo-audit-score-headline__n {
	font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-variant-numeric: tabular-nums;
	font-weight: var( --abds-font-weight-bold );
	font-size: 40px;
	line-height: 1;
}

.abds-seo-audit-score-headline__n--good {
	color: var( --abds-color-good-text );
}

.abds-seo-audit-score-headline__n--ok {
	color: var( --abds-color-ok-text );
}

.abds-seo-audit-score-headline__n--poor {
	color: var( --abds-color-poor-text );
}

.abds-seo-audit-score-headline__meta {
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-base );
}

/* Severity summary: 3 tiles (D1's collapse of the 5-level audit_issues
   vocabulary for display) — same colour roles the rest of the plugin
   already uses for poor/ok/neutral, no new palette introduced. */
.abds-seo-severity-summary {
	display: flex;
	gap: var( --abds-space-4 );
	flex-wrap: wrap;
}

/* UI/UX review P1.3: tiles are now filter buttons, not static divs --
   reset the button defaults, add a pressed/selected treatment and a
   hover/focus affordance so they read as clickable. */
.abds-seo-sev-tile {
	flex: 1 1 160px;
	background: var( --abds-color-surface );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius-card );
	padding: var( --abds-space-4 );
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color var( --abds-duration-base ) var( --abds-ease-out ),
		box-shadow var( --abds-duration-base ) var( --abds-ease-out );
}

.abds-seo-sev-tile:hover {
	border-color: var( --abds-color-border-strong );
}

.abds-seo-sev-tile:focus-visible {
	outline: 2px solid var( --abds-color-link );
	outline-offset: 1px;
}

.abds-seo-sev-tile--selected {
	border-color: var( --abds-color-link );
	box-shadow: 0 0 0 1px var( --abds-color-link );
}

.abds-seo-severity-summary__hint {
	margin: var( --abds-space-2 ) 0 0;
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
}

.abds-seo-sev-tile__n {
	font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-variant-numeric: tabular-nums;
	font-weight: var( --abds-font-weight-bold );
	font-size: 28px;
	line-height: 1;
}

.abds-seo-sev-tile__lbl {
	margin-top: var( --abds-space-1 );
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
}

.abds-seo-sev-tile--critical .abds-seo-sev-tile__n {
	color: var( --abds-color-poor-text );
}

.abds-seo-sev-tile--warning .abds-seo-sev-tile__n {
	color: var( --abds-color-ok-text );
}

.abds-seo-sev-tile--info .abds-seo-sev-tile__n {
	color: var( --abds-color-link );
}

/* Issue list: one card per distinct issue_key, staggered fade-in on
   arrival (emil-design-eng pass) — the same abds-seo-fade-in keyframe the
   bento cards already use, applied to these list items with their own
   stagger group since they're not direct .abds-seo-bento-card children. */
.abds-seo-issue-list {
	display: flex;
	flex-direction: column;
	gap: var( --abds-space-3 );
}

.abds-seo-issue-card {
	position: relative;
	background: var( --abds-color-surface );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius-lg );
	overflow: hidden;
	animation: abds-seo-fade-in var( --abds-duration-base ) var( --abds-ease-out ) both;
}

.abds-seo-issue-card:nth-child( 2 ) {
	animation-delay: 40ms;
}

.abds-seo-issue-card:nth-child( 3 ) {
	animation-delay: 80ms;
}

.abds-seo-issue-card:nth-child( 4 ) {
	animation-delay: 120ms;
}

.abds-seo-issue-card:nth-child( n+5 ) {
	animation-delay: 160ms;
}

@media ( prefers-reduced-motion: reduce ) {
	.abds-seo-issue-card {
		animation: none;
	}
}

.abds-seo-issue-card__stripe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var( --abds-color-poor-text );
}

.abds-seo-issue-card--warning .abds-seo-issue-card__stripe {
	background: var( --abds-color-ok-text );
}

.abds-seo-issue-card--info .abds-seo-issue-card__stripe {
	background: var( --abds-color-link );
}

.abds-seo-issue-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var( --abds-space-2 );
}

.abds-seo-issue-card__body h3 {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: var( --abds-font-size-base );
	font-weight: var( --abds-font-weight-semibold );
	/* M2 visual acceptance (2026-09-22): every collapsed card must be the
	   same height regardless of how long its title is, so the list reads
	   as one even rhythm -- one line, clipped, full text still reachable
	   via the native title-attribute tooltip. Same technique
	   .abds-seo-bento-card__title already uses. Badge and title now sit on
	   one flex row (UI/UX review P1.11) instead of stacked, so every
	   collapsed card is exactly one line tall regardless of content. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abds-seo-issue-card__count {
	font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-variant-numeric: tabular-nums;
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
	white-space: nowrap;
}

/* UI/UX review P1.8: the "By pages" view was missing the one number that
   decides what to fix first -- the page's own score, shown as a small
   colour-banded pill next to its title. */
.abds-seo-page-score {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	padding: 2px var( --abds-space-1 );
	border-radius: var( --abds-radius );
	font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-variant-numeric: tabular-nums;
	font-weight: var( --abds-font-weight-bold );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-page-score--good {
	background: var( --abds-color-good-bg );
	color: var( --abds-color-good-text );
}

.abds-seo-page-score--ok {
	background: var( --abds-color-ok-bg );
	color: var( --abds-color-ok-text );
}

.abds-seo-page-score--poor {
	background: var( --abds-color-poor-bg );
	color: var( --abds-color-poor-text );
}

/* M2 1.3/1.4: the accordion header is a real <button> (keyboard/AT
   accessible expand toggle), laid out as the old card's body+count row
   used to be, now inside one flex row instead of two grid columns since
   the stripe moved to position:absolute above to make room for the
   full-width panel below. */
.abds-seo-issue-card__header {
	display: flex;
	align-items: center;
	gap: var( --abds-space-4 );
	width: 100%;
	padding: var( --abds-space-3 ) var( --abds-space-4 ) var( --abds-space-3 ) calc( 4px + var( --abds-space-4 ) );
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
}

.abds-seo-issue-card__header:focus-visible {
	outline: 2px solid var( --abds-color-link );
	outline-offset: -2px;
}

/* UI/UX review P1.5: the card must look clickable beyond just the cursor --
   a chevron that flips on expand, same affordance any native disclosure
   widget gives. Drawn with borders (no icon font/SVG dependency here). */
.abds-seo-issue-card__chevron {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var( --abds-color-text-muted );
	border-bottom: 2px solid var( --abds-color-text-muted );
	transform: rotate( -45deg );
	transition: transform var( --abds-duration-base ) var( --abds-ease-out );
}

/* P2 defect (coordinator, 2026-09-22): the "By pages" view's per-issue
   rows (PageIssueRow) reuse this same chevron but sit inside their own
   .abds-seo-page-issue__header button, not .abds-seo-issue-card__header --
   this selector missed that second button entirely, so those chevrons sat
   frozen in their collapsed angle forever, never flipping on expand. Both
   header classes are listed explicitly now instead of a single assumed one. */
.abds-seo-issue-card__header[aria-expanded="true"] .abds-seo-issue-card__chevron,
.abds-seo-page-issue__header[aria-expanded="true"] .abds-seo-issue-card__chevron {
	transform: rotate( 45deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.abds-seo-issue-card__chevron {
		transition: none;
	}
}

.abds-seo-issue-card__environment-notice {
	margin: 0;
	padding: var( --abds-space-3 );
	background: var( --abds-color-bg );
	border-radius: var( --abds-radius );
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
}

.abds-seo-issue-card__panel {
	padding: 0 var( --abds-space-4 ) var( --abds-space-4 ) calc( 4px + var( --abds-space-4 ) );
	border-top: 1px solid var( --abds-color-border );
	padding-top: var( --abds-space-3 );
	display: flex;
	flex-direction: column;
	gap: var( --abds-space-2 );
}

.abds-seo-issue-card__why,
.abds-seo-issue-card__how {
	margin: 0;
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
}

.abds-seo-issue-card__settings-link {
	font-size: var( --abds-font-size-sm );
}

.abds-seo-issues-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --abds-space-3 );
	margin-bottom: var( --abds-space-3 );
}

/* UI/UX review P2.12: a subheading over a same-severity run of cards,
   shown only when IssueAccordionList/PageAccordionList actually found
   more than one severity group present -- see groupBySeverity()'s own
   docblock in audit.js. */
.abds-seo-severity-group + .abds-seo-severity-group {
	margin-top: var( --abds-space-4 );
}

.abds-seo-severity-group__heading {
	margin: 0 0 var( --abds-space-2 );
	font-size: var( --abds-font-size-sm );
	font-weight: var( --abds-font-weight-semibold );
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --abds-color-text-muted );
}

/* UI/UX review P2.13: Edit/Open rendered as real button-links (icon +
   label), not bare text -- both to look clickable and, since every use
   here opens in a new tab, to visibly signal that before the click. */
.abds-seo-action-link {
	display: inline-flex;
	align-items: center;
	gap: var( --abds-space-1 );
	padding: var( --abds-space-1 ) var( --abds-space-2 );
	background: var( --abds-color-surface );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius );
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-link );
	text-decoration: none;
	line-height: 1;
}

.abds-seo-action-link:hover {
	border-color: var( --abds-color-border-strong );
	text-decoration: underline;
}

.abds-seo-action-link:focus-visible {
	outline: 2px solid var( --abds-color-link );
	outline-offset: 1px;
}

.abds-seo-action-link .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* UI/UX review P2.16: a genuinely clean audit gets a distinct, celebratory
   treatment -- the same good/success tokens ScoreHeadline's own "good"
   band already uses, so no new colour is introduced. */
.abds-seo-no-issues-celebration {
	display: flex;
	align-items: flex-start;
	gap: var( --abds-space-3 );
	padding: var( --abds-space-4 );
	background: var( --abds-color-good-bg );
	border-radius: var( --abds-radius-card );
	color: var( --abds-color-good-text );
}

.abds-seo-no-issues-celebration .dashicons {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	font-size: 28px;
}

.abds-seo-no-issues-celebration__title {
	margin: 0 0 var( --abds-space-1 );
	font-weight: var( --abds-font-weight-bold );
	font-size: var( --abds-font-size-lg );
}

.abds-seo-no-issues-celebration__desc {
	margin: 0;
	color: var( --abds-color-good-text );
}

/* UI/UX review P2.15: narrow screens. The issue-card header keeps its
   single-line ellipsis title at normal widths (M2 visual acceptance,
   2026-09-22); below this width the title gets the full row to itself and
   the count/chevron move to their own row underneath, instead of the
   title being squeezed to a sliver next to a count that never shrinks.
   The view-mode toggle drops below the section title and stretches full
   width instead of wrapping awkwardly beside it. */
@media ( max-width: 480px ) {
	.abds-seo-issue-card__header {
		flex-wrap: wrap;
	}

	.abds-seo-issue-card__body {
		flex-basis: 100%;
	}

	.abds-seo-issue-card__body h3 {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.abds-seo-issues-section-header {
		flex-direction: column;
		align-items: stretch;
	}

	.abds-seo-view-mode-toggle {
		display: flex;
	}

	.abds-seo-view-mode-toggle button {
		flex: 1 1 50%;
		text-align: center;
	}
}

.abds-seo-view-mode-toggle {
	display: inline-flex;
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius );
	overflow: hidden;
}

.abds-seo-view-mode-toggle button {
	padding: var( --abds-space-1 ) var( --abds-space-3 );
	background: var( --abds-color-surface );
	border: 0;
	cursor: pointer;
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
}

.abds-seo-view-mode-toggle button + button {
	border-left: 1px solid var( --abds-color-border );
}

.abds-seo-view-mode-toggle button.is-active {
	background: var( --abds-color-link );
	color: #fff;
}

.abds-seo-view-mode-toggle button:focus-visible {
	outline: 2px solid var( --abds-color-link );
	outline-offset: -2px;
}

.abds-seo-affected-pages,
.abds-seo-page-issues {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --abds-space-2 );
}

.abds-seo-affected-page {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --abds-space-3 );
	padding: var( --abds-space-2 ) 0;
	border-bottom: 1px solid var( --abds-color-border );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-affected-page:last-child {
	border-bottom: 0;
}

.abds-seo-affected-page__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.abds-seo-affected-page__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* This page's own instance of the issue's message -- may carry a detail
   (a count, a percentage) the group card's own title never does; see
   ABDS_SEO_Audit_Scheduler::format_affected_page()'s docblock for why the
   two are deliberately different fields. */
.abds-seo-affected-page__message {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-affected-page__actions {
	display: flex;
	gap: var( --abds-space-3 );
	white-space: nowrap;
}

.abds-seo-page-issue {
	border-bottom: 1px solid var( --abds-color-border );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-page-issue:last-child {
	border-bottom: 0;
}

/* UI/UX review P1.9: each issue row is its own small accordion -- one line
   collapsed (badge + message), how_to_fix only on click, same "closed by
   default" discipline the "By issues" cards already follow. Own button
   reset, same pattern .abds-seo-issue-card__header already uses. */
.abds-seo-page-issue__header {
	display: flex;
	align-items: center;
	gap: var( --abds-space-2 );
	width: 100%;
	padding: var( --abds-space-2 ) 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
}

.abds-seo-page-issue__header:focus-visible {
	outline: 2px solid var( --abds-color-link );
	outline-offset: -2px;
}

.abds-seo-page-issue__message {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: var( --abds-font-weight-semibold );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abds-seo-page-issue__panel {
	padding: 0 0 var( --abds-space-2 );
}

.abds-seo-page-issue__how {
	margin: 0 0 var( --abds-space-1 );
	color: var( --abds-color-text-muted );
}

.abds-seo-simple-pager {
	display: flex;
	align-items: center;
	gap: var( --abds-space-3 );
	font-size: var( --abds-font-size-sm );
	color: var( --abds-color-text-muted );
}

.abds-seo-simple-pager button {
	padding: var( --abds-space-1 ) var( --abds-space-2 );
	background: var( --abds-color-surface );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius );
	cursor: pointer;
}

.abds-seo-simple-pager button:disabled {
	opacity: 0.5;
	cursor: default;
}

.abds-seo-simple-pager__show-all {
	margin-left: auto;
}

/* Severity badge: the real 5-level value (D1's explicit addition — the
   3-tile summary above must not hide it). critical/high share the "poor"
   tone, medium/low share "ok," notice is neutral text-muted — 5 labels
   over 3 colour weights, since the label text itself carries the specific
   level, colour is only a rough visual anchor. */
.abds-seo-severity-badge {
	display: inline-block;
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: var( --abds-font-weight-semibold );
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px var( --abds-space-2 );
	border-radius: var( --abds-radius );
}

.abds-seo-severity-badge--critical,
.abds-seo-severity-badge--high {
	background: var( --abds-color-poor-bg );
	color: var( --abds-color-poor-text );
}

.abds-seo-severity-badge--medium,
.abds-seo-severity-badge--low {
	background: var( --abds-color-ok-bg );
	color: var( --abds-color-ok-text );
}

.abds-seo-severity-badge--notice {
	background: var( --abds-color-bg );
	color: var( --abds-color-text-muted );
}

.abds-seo-robots-preview {
	background: var( --abds-color-bg );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius-card );
	padding: var( --abds-space-4 );
	overflow: auto;
}

.abds-seo-robots-textarea textarea {
	font-family: Consolas, Monaco, monospace;
}

.abds-seo-robots-hints {
	margin: var( --abds-space-3 ) 0 0;
	color: var( --abds-color-text-muted );
}

.abds-seo-robots-actions {
	margin-top: var( --abds-space-4 );
}

/* M7 free: a skipped-attempt row (non-public-host gate) reads as a
   distinct, neutral state -- not the same warning colour a real failed
   submission gets, since nothing actually went wrong here. */
.abds-seo-indexnow-log__note {
	color: var( --abds-color-text-muted );
	cursor: help;
}