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

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

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

/* 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 {
		grid-column: span 2;
	}
}

/* Dashboard hero card: the overall SEO score is the one focus element, so it
   uses the full height of its (tall) cell and the largest number on the page. */
.abds-seo-bento-card--hero {
	display: flex;
	flex-direction: column;
}

.abds-seo-hero-score {
	margin: var( --abds-space-3 ) 0 var( --abds-space-5 );
	font-size: 64px;
	font-weight: var( --abds-font-weight-bold );
	line-height: 1;
}

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

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

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

.abds-seo-hero-score--na {
	color: var( --abds-color-text-muted );
}

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

.abds-seo-hero-substats {
	display: flex;
	gap: var( --abds-space-6 );
}

.abds-seo-hero-substats > div {
	color: var( --abds-color-text-muted );
	font-size: var( --abds-font-size-sm );
}

.abds-seo-hero-substats__num {
	display: block;
	font-size: var( --abds-font-size-xl );
	font-weight: var( --abds-font-weight-semibold );
	color: var( --abds-color-text );
}

/* ---- Dashboard: getting-started checklist ---- */
.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;
}

/* Width is set once, server-side, per page load (no client-side updates to
   animate) — scaleX from the left edge instead of animating width itself,
   so a future live-updating version of this bar never has to pay for
   layout thrash to get a smooth fill transition. */
.abds-seo-checklist__bar-fill {
	height: 100%;
	width: 100%;
	border-radius: var( --abds-radius-pill );
	background: var( --abds-color-good-text );
	transform-origin: left;
	transform: scaleX( var( --abds-seo-checklist-fill, 1 ) );
}

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

/* ---- 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-card {
	background: var( --abds-color-surface );
	border: 1px solid var( --abds-color-border );
	border-radius: var( --abds-radius );
	padding: var( --abds-space-4 ) var( --abds-space-5 );
	min-width: 220px;
	flex: 1 1 220px;
}

.abds-seo-wrap .abds-seo-card h2 {
	margin-top: 0;
	font-size: var( --abds-font-size-base );
	text-transform: uppercase;
	color: var( --abds-color-text-muted );
}

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

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