/**
 * Classic Editor meta box: char-count gauges, Google snippet preview, and
 * the SEO-score badge status colors (used here and by the post-list score
 * column — abds-seo-score--{status} had no styling anywhere in the plugin
 * before this file).
 *
 * @package ABDS_SEO
 */

.abds-seo-classic-field {
	margin-bottom: 10px;
}

.abds-seo-char-count {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
}

.abds-seo-char-count.is-over {
	color: #b32d2e;
}

.abds-seo-snippet-preview {
	margin: 10px 0 14px;
	padding: 12px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	font-family: arial, sans-serif;
}

.abds-seo-snippet-title {
	color: #1a0dab;
	font-size: 18px;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.abds-seo-snippet-url {
	color: #006621;
	font-size: 13px;
	line-height: 1.3;
	margin-top: 2px;
	overflow-wrap: break-word;
}

.abds-seo-snippet-description {
	color: #4d5156;
	font-size: 13px;
	line-height: 1.4;
	margin-top: 2px;
	overflow-wrap: break-word;
}

/* Matches ABDS_SEO_Content_Analyzer::categorize_score()'s exact three bands
   (good/ok/poor) — a real pre-existing gap fixed here: this file previously
   defined --warning instead of --ok, so PHP's actual "ok" band (score
   between the poor and good thresholds) rendered with no colour at all. */
.abds-seo-score--good {
	color: var( --abds-color-good-text, #007017 );
	font-weight: var( --abds-font-weight-bold, 700 );
}

.abds-seo-score--ok {
	color: var( --abds-color-ok-text, #8a6d00 );
	font-weight: var( --abds-font-weight-bold, 700 );
}

.abds-seo-score--poor {
	color: var( --abds-color-poor-text, #b32d2e );
	font-weight: var( --abds-font-weight-bold, 700 );
}

/*
 * Live score ring + recommendations (classic-meta-box.js's
 * animateScoreRing()/renderRecommendations()) — the Classic Editor
 * counterpart of src/style.css's .abds-seo-score-ring rules in the
 * Gutenberg sidebar. Kept as a near-exact duplicate rather than a shared
 * stylesheet: the two surfaces load through entirely different enqueue
 * paths (this file has no build step, src/style.css goes through
 * wp-scripts), so a shared file would need its own build wiring for a
 * handful of rules.
 */
[data-abds-seo-live-result] {
	transition: opacity 0.15s ease;
}

[data-abds-seo-live-result].is-updating {
	opacity: 0.6;
}

.abds-seo-score-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0;
}

.abds-seo-score-row__text {
	display: flex;
	flex-direction: column;
}

.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, #c3c4c7 );
	stroke-width: 5;
}

/*
 * The fill's stroke is a fixed poor→ok→good gradient, set inline via
 * `stroke="url(#...)"` (render_live_result_markup() in PHP,
 * ensureLiveResultSkeleton() in JS) — 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;
}

.abds-seo-score-ring__value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: var( --abds-font-weight-bold, 700 );
	color: var( --abds-color-text, #1e1e1e );
}

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

/*
 * "Fixed N of M" micro-reward counter (wow-layer mockup) — the Classic
 * Editor counterpart of src/style.css's .abds-seo-fix-counter.
 */
.abds-seo-fix-counter {
	display: block;
	color: var( --abds-color-good-text, #007017 );
	font-size: 11px;
	font-weight: var( --abds-font-weight-medium, 500 );
}

/*
 * Title/description length gauge — same visual language as the score ring
 * above, matching src/style.css's Gutenberg equivalent.
 */
.abds-seo-char-count-wrap {
	display: inline-block;
	min-width: 90px;
	vertical-align: middle;
}

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

.abds-seo-char-gauge__fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	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, #007017 );
}

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

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

.abds-seo-classic-recommendations {
	margin: 0 0 0 20px;
	padding: 0;
}

/*
 * "What the score is made of" disclosure (Task A6) — same rules as
 * src/style.css's Gutenberg equivalent, duplicated rather than shared for
 * the same reason as the score-ring/gauge rules above (no build step here).
 */
.abds-seo-score-breakdown {
	margin: 8px 0 10px;
	font-size: 12px;
}

.abds-seo-score-breakdown__summary {
	cursor: pointer;
	color: var( --abds-color-link, #005bbb );
	font-weight: var( --abds-font-weight-medium, 500 );
	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: 8px 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, 700 );
	text-align: center;
}

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

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

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

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

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

.abds-seo-recommendation--resolved {
	color: var( --abds-color-good-text, #007017 );
	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 — the "checkmark with a spring" micro-reward
 * from the owner-approved wow-layer mockup (Task B3), not a generic
 * default; everything else here 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,
	.abds-seo-char-gauge__fill,
	.abds-seo-score-breakdown__summary::before,
	[data-abds-seo-live-result] {
		transition: none;
	}

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