/**
 * 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;
}

/* 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-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 );
}

/* 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;
}

.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 );
}

.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 {
	display: grid;
	grid-template-columns: 4px 1fr auto;
	gap: var( --abds-space-4 );
	align-items: center;
	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 {
	align-self: stretch;
	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 {
	padding: var( --abds-space-3 ) 0;
	min-width: 0;
}

.abds-seo-issue-card__body h3 {
	margin: var( --abds-space-1 ) 0 0;
	font-size: var( --abds-font-size-base );
	font-weight: var( --abds-font-weight-semibold );
}

.abds-seo-issue-card__count {
	padding-right: var( --abds-space-4 );
	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;
}

/* 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;
	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 );
}