.abds-seo-snippet-preview {
	font-family: arial, sans-serif;
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius );
	padding: var( --abds-space-3 );
	margin-top: var( --abds-space-2 );
}

/*
 * The snippet-preview title/url/description colours below are DELIBERATELY
 * Google's own SERP colours (#1a0dab / #006621 / #545454), not design tokens:
 * this block must look like a real Google result, so it stays pinned to
 * Google's palette regardless of the plugin's theme.
 */
.abds-seo-snippet-title {
	color: #1a0dab;
	font-size: 18px;
	line-height: 1.3;

	/* Truncation (with an explicit "…") is already computed by pixel width
	   in JS (see snippet-width.js) — the text handed here already fits the
	   600px desktop budget. Wrapping (not clipping) is deliberate: this
	   sidebar is much narrower than 600px, so the already-correct text
	   still needs to flow across lines rather than being clipped again. */
	overflow-wrap: break-word;
}

.abds-seo-snippet-url {
	color: #006621;
	font-size: 13px;
}

.abds-seo-snippet-description {
	color: #545454;
	font-size: 13px;
	line-height: 1.4;
}

.abds-seo-char-count.is-over {
	color: var( --abds-color-poor-text );
	font-weight: var( --abds-font-weight-semibold );
}

/*
 * Title/description length gauge (CharCount in sidebar.js): a thin bar
 * whose width is set from a plain inline style percentage recomputed on
 * every keystroke — the `width` transition below is what makes each
 * keystroke's jump feel like a smooth fill instead of a snap.
 */
.abds-seo-char-count-wrap {
	display: block;
}

.abds-seo-char-gauge {
	display: block;
	margin-top: 3px;
	height: 3px;
	border-radius: var( --abds-radius-pill );
	background: var( --abds-color-border );
	overflow: hidden;
}

.abds-seo-char-gauge__fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var( --abds-radius-pill );
	transform: scaleX( var( --abds-seo-char-gauge-ratio, 0 ) );
	transform-origin: left;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.abds-seo-char-gauge__fill--good {
	background: var( --abds-color-good-text );
}

.abds-seo-char-gauge__fill--ok {
	background: var( --abds-color-ok-text );
}

.abds-seo-char-gauge__fill--poor {
	background: var( --abds-color-poor-text );
}

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

/*
 * Animated content-score ring (ScoreRing in sidebar.js). The number and the
 * ring's stroke-dashoffset are tweened in JS via requestAnimationFrame; the
 * colour crossfade between bands happens here, as a CSS transition on
 * `stroke` triggered by the --good/--ok/--poor modifier class swapping.
 * Bands match ABDS_SEO_Content_Analyzer::categorize_score()'s thresholds.
 */
.abds-seo-score-row {
	display: flex;
	align-items: center;
	gap: var( --abds-space-3 );
}

.abds-seo-score-row__label {
	display: flex;
	flex-direction: column;
	font-weight: var( --abds-font-weight-semibold );
}

.abds-seo-score-row__updating {
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
	font-weight: var( --abds-font-weight-medium );
}

/*
 * "Fixed N of M" micro-reward counter (wow-layer mockup) — grows as
 * recommendations resolve, giving the same causality signal as the
 * resolved-item recolouring but as a running total, not just a moment.
 */
.abds-seo-fix-counter {
	display: block;
	color: var( --abds-color-good-text );
	font-size: var( --abds-font-size-sm );
	font-weight: var( --abds-font-weight-medium );
	font-variant-numeric: tabular-nums;
}

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

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

.abds-seo-score-ring__track {
	fill: none;
	stroke: var( --abds-color-border );
	stroke-width: 5;
}

/*
 * The fill's stroke is a fixed poor→ok→good gradient (set inline via
 * `stroke="url(#...)"` in sidebar.js), not a flat per-band colour — the
 * "living dial" from the owner-approved wow-layer mockup. No CSS `stroke`
 * override here on purpose: a CSS color would beat the SVG url() reference.
 */
.abds-seo-score-ring__fill {
	fill: none;
	stroke-width: 5;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.1s linear;
}

.abds-seo-score-ring__value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var( --abds-font-size-base );
	font-weight: var( --abds-font-weight-bold );
	color: var( --abds-color-text );
}

/*
 * The one-time achievement-confetti canvas (useAchievementConfetti in
 * sidebar.js) sits over the ring, inert until a burst is triggered.
 */
.abds-seo-score-ring__confetti {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*
 * "Just resolved" recommendation: rendered in the success/green state for a
 * short linger (see useResolvedTransitions in sidebar.js) so fixing an issue
 * visibly turns it green instead of it silently vanishing from the list.
 */
.abds-seo-recommendation--resolved {
	animation: abds-seo-recommendation-resolved-in 0.4s ease-out;
}

@keyframes abds-seo-recommendation-resolved-in {
	from {
		opacity: 0;
		transform: translateY( -4px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/*
 * The spring/overshoot pop on the resolved checkmark is the one deliberate
 * bounce easing in this file — it's the literal "checkmark with a spring"
 * micro-reward from the owner-approved wow-layer mockup (Task B3), not a
 * generic default; every other motion in this stylesheet uses a smooth
 * ease-out.
 */
.abds-seo-recommendation--resolved__tick {
	display: inline-block;
	animation: abds-seo-tick-spring 0.45s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

@keyframes abds-seo-tick-spring {
	0% {
		transform: scale( 1 );
	}

	45% {
		transform: scale( 1.4 );
	}

	100% {
		transform: scale( 1 );
	}
}

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

	.abds-seo-recommendation--resolved {
		animation: none;
	}

	.abds-seo-recommendation--resolved__tick {
		animation: none;
	}
}

/*
 * "What the score is made of" disclosure (Task A6) — a plain native
 * <details>/<summary>, styled to look like a small link rather than a
 * generic browser triangle, matching the PanelRow rhythm around it.
 */
.abds-seo-score-breakdown {
	margin: 4px 0 var( --abds-space-3 );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-score-breakdown__summary {
	cursor: pointer;
	color: var( --abds-color-link );
	font-weight: var( --abds-font-weight-medium );
	list-style: none;
}

.abds-seo-score-breakdown__summary::-webkit-details-marker {
	display: none;
}

.abds-seo-score-breakdown__summary::before {
	content: '▸';
	display: inline-block;
	margin-right: 4px;
	transition: transform 0.15s ease;
}

.abds-seo-score-breakdown[open] > .abds-seo-score-breakdown__summary::before {
	transform: rotate( 90deg );
}

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

.abds-seo-score-breakdown__item {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.abds-seo-score-breakdown__icon {
	flex-shrink: 0;
	width: 14px;
	font-weight: var( --abds-font-weight-bold );
	text-align: center;
}

.abds-seo-score-breakdown__item--full .abds-seo-score-breakdown__icon {
	color: var( --abds-color-good-text );
}

.abds-seo-score-breakdown__item--partial .abds-seo-score-breakdown__icon {
	color: var( --abds-color-ok-text );
}

.abds-seo-score-breakdown__item--empty .abds-seo-score-breakdown__icon {
	color: var( --abds-color-poor-text );
}

.abds-seo-score-breakdown__label {
	flex: 1;
	color: var( --abds-color-text );
}

.abds-seo-score-breakdown__points {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	color: var( --abds-color-text-muted );
}

@media ( prefers-reduced-motion: reduce ) {
	.abds-seo-score-breakdown__summary::before {
		transition: none;
	}
}

.abds-seo-block-rec .components-button.is-link {
	text-align: left;
	white-space: normal;
	height: auto;
}

.abds-seo-history-entry {
	border-bottom: 1px solid var( --abds-color-border );
	padding: var( --abds-space-2 ) 0;
}

.abds-seo-history-entry:last-child {
	border-bottom: none;
}

.abds-seo-history-meta {
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
	margin-bottom: var( --abds-space-1 );
}

.abds-seo-history-values {
	font-size: 13px;
	margin-bottom: 6px;
	overflow-wrap: break-word;
}

.abds-seo-history-before {
	color: var( --abds-color-poor-text );
	text-decoration: line-through;
}

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

.abds-seo-prepublish-list {
	list-style: disc;
	margin: 0 0 0 20px;
	padding: 0;
}

.abds-seo-prepublish-list li {
	margin-bottom: 4px;
}

.abds-seo-ai-suggest {
	margin-top: 8px;
}

.abds-seo-ai-diff {
	font-size: 13px;
	margin-bottom: 8px;
}

.abds-seo-ai-diff-before,
.abds-seo-ai-diff-after {
	border-radius: var( --abds-radius );
	padding: 6px var( --abds-space-2 );
	margin-bottom: var( --abds-space-1 );
	overflow-wrap: break-word;
}

.abds-seo-ai-diff-before {
	background: var( --abds-color-poor-bg );
}

.abds-seo-ai-diff-after {
	background: var( --abds-color-good-bg );
}

.abds-seo-ai-suggest-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.abds-seo-serp-list {
	margin: 0 0 0 20px;
	padding: 0;
}

.abds-seo-serp-list li {
	margin-bottom: 10px;
}

.abds-seo-serp-domain {
	display: block;
	color: var( --abds-color-good-text );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-serp-snippet {
	margin: 2px 0 0;
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
}

/*
 * Monthly report. The print rules are the PDF deliverable: this plugin
 * ships no PDF engine, so "Друк / зберегти PDF" is the browser's own
 * print-to-PDF over these styles. They are also the seam a Stage 7
 * white-label export restyles — the report's markup is branding-free by
 * design (see ABDS_SEO_Monthly_Report_Builder).
 */
.abds-seo-report-header {
	margin: 16px 0 24px;
}

.abds-seo-report-header h2 {
	margin: 0 0 4px;
}

.abds-seo-report-section {
	margin-bottom: 28px;
}

@media print {
	/* WordPress' own chrome is not part of the report. */
	#adminmenumain,
	#wpadminbar,
	#wpfooter,
	.abds-seo-no-print,
	.notice,
	.update-nag {
		display: none !important;
	}

	#wpcontent,
	#wpbody-content {
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		width: 100% !important;
	}

	.abds-seo-monthly-report {
		margin: 0;
		color: #000;
	}

	/* A section split across a page break is far harder to read than a
	   slightly emptier page. */
	.abds-seo-report-section {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.abds-seo-monthly-report table {
		border-collapse: collapse;
		width: 100%;
	}

	.abds-seo-monthly-report th,
	.abds-seo-monthly-report td {
		border: 1px solid #ccc;
		padding: 4px 6px;
	}

	/* Zebra striping wastes toner and adds nothing on paper. */
	.abds-seo-monthly-report .striped > tbody > :nth-child(odd) {
		background: transparent !important;
	}
}