/**
 * Version Check — front-end styles.
 *
 * Written to sit inside whatever the active theme provides: colours come from
 * custom properties with conservative fallbacks, and typography is inherited
 * rather than set. The results table is the one thing that needs care, because
 * four columns of version numbers must not force the page to scroll sideways
 * on a phone.
 */

.nvc {
	--nvc-radius: 10px;
	--nvc-border: color-mix( in srgb, currentColor 15%, transparent );
	--nvc-muted: color-mix( in srgb, currentColor 65%, transparent );
	--nvc-surface: color-mix( in srgb, currentColor 4%, transparent );

	--nvc-ok: #1a7f43;
	--nvc-minor: #2563eb;
	--nvc-warn: #b45309;
	--nvc-critical: #b91c1c;
	--nvc-info: #4f46e5;

	max-width: 48rem;
	margin-inline: auto;
}

@media ( prefers-color-scheme: dark ) {
	.nvc {
		--nvc-ok: #4ade80;
		--nvc-minor: #93c5fd;
		--nvc-warn: #fbbf24;
		--nvc-critical: #fca5a5;
		--nvc-info: #a5b4fc;
	}
}

.nvc__heading {
	margin: 0 0 0.5rem;
}

.nvc__description {
	margin: 0 0 1.5rem;
	color: var( --nvc-muted );
}

/* ------------------------------------------------------------------ Form */

.nvc__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.nvc__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nvc__input {
	flex: 1 1 16rem;
	min-width: 0; /* Lets the input shrink inside the flex row. */
	padding: 0.7rem 0.85rem;
	border: 1px solid var( --nvc-border );
	border-radius: var( --nvc-radius );
	font: inherit;
	background: transparent;
	color: inherit;
}

.nvc__input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.nvc__submit {
	flex: 0 0 auto;
	padding: 0.7rem 1.25rem;
	border: 0;
	border-radius: var( --nvc-radius );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	/* Not currentColor: that resolves against this element's own color, so
	 * pairing it with a color on the same rule paints text-on-same-text.
	 * Block themes restyle this via the wp-element-button class instead. */
	background: var( --wp--preset--color--primary, #0f0b22 );
	color: var( --wp--preset--color--white, #ffffff );
}

.nvc__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.nvc__error {
	margin: 0.75rem 0 0;
	color: var( --nvc-critical );
	font-size: 0.9375rem;
}

.nvc__smallprint {
	margin-top: 1.5rem;
	font-size: 0.8125rem;
	color: var( --nvc-muted );
}

/* --------------------------------------------------------------- Results */

/* The report arrives all at once from the REST call; let the cards settle
 * into place rather than snap. Entrance only, and none at all for visitors
 * who ask for reduced motion. */
@keyframes nvc-enter {
	from {
		opacity: 0;
		transform: translateY( 10px );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.nvc__results > * {
		animation: nvc-enter 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ) backwards;
	}

	.nvc__results > :nth-child( 2 ) {
		animation-delay: 90ms;
	}

	.nvc__results > :nth-child( 3 ) {
		animation-delay: 180ms;
	}

	.nvc__results > :nth-child( 4 ) {
		animation-delay: 270ms;
	}
}

.nvc__results:not( :empty ) {
	margin-top: 1.75rem;
	display: grid;
	gap: 1rem;
}

.nvc-card {
	padding: 1.15rem 1.25rem;
	border: 1px solid var( --nvc-border );
	border-left-width: 4px;
	border-radius: var( --nvc-radius );
	background: var( --nvc-surface );
}

.nvc-card--ok { border-left-color: var( --nvc-ok ); }
.nvc-card--minor { border-left-color: var( --nvc-minor ); }
.nvc-card--warn { border-left-color: var( --nvc-warn ); }
.nvc-card--critical { border-left-color: var( --nvc-critical ); }
.nvc-card--info { border-left-color: var( --nvc-info ); }

.nvc-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.85rem;
	font-size: 1.0625rem;
}

.nvc-card__note {
	margin: 0.85rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid var( --nvc-border );
	font-size: 0.875rem;
	color: var( --nvc-muted );
}

.nvc-facts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
	gap: 0.75rem 1.25rem;
}

.nvc-fact {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.nvc-fact__label {
	font-size: 0.8125rem;
	color: var( --nvc-muted );
}

.nvc-fact__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.nvc-summary {
	margin: 0 0 0.85rem;
	font-size: 0.9375rem;
}

.nvc-badge {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	border: 1px solid currentColor;
}

.nvc-badge--ok { color: var( --nvc-ok ); }
.nvc-badge--minor { color: var( --nvc-minor ); }
.nvc-badge--warn { color: var( --nvc-warn ); }
.nvc-badge--critical { color: var( --nvc-critical ); }
.nvc-badge--info { color: var( --nvc-info ); }
.nvc-badge--unknown { color: var( --nvc-muted ); }

/* The table scrolls inside its own container so the page never does. */
.nvc-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.nvc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.nvc-table th,
.nvc-table td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var( --nvc-border );
	white-space: nowrap;
}

.nvc-table th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --nvc-muted );
}

/* The plugin name is the one column allowed to wrap. */
.nvc-table td:first-child {
	white-space: normal;
	min-width: 12rem;
}

.nvc-table tbody tr:last-child td {
	border-bottom: 0;
}

.nvc-table td em {
	color: var( --nvc-muted );
	font-style: normal;
}

/* ------------------------------------------------------------------- CTA */

.nvc-cta {
	padding: 1.15rem 1.25rem;
	border: 1px dashed var( --nvc-border );
	border-radius: var( --nvc-radius );
}

.nvc-cta p {
	margin: 0 0 0.75rem;
}

/* A button, not a text link — same colour pairing as .nvc__submit, and the
 * wp-element-button class on the markup lets block themes restyle it. */
.nvc-cta__link {
	display: inline-block;
	padding: 0.7rem 1.25rem;
	border-radius: var( --nvc-radius );
	font-weight: 600;
	text-decoration: none;
	background: var( --wp--preset--color--primary, #0f0b22 );
	color: var( --wp--preset--color--white, #ffffff );
}

.nvc-partial {
	margin: 0;
	font-size: 0.875rem;
	color: var( --nvc-muted );
}

/* ---------------------------------------------------------------- States */

.nvc.is-loading .nvc__results {
	opacity: 0.5;
}

@media ( prefers-reduced-motion: no-preference ) {
	.nvc__results {
		transition: opacity 150ms ease;
	}
}

/* ---------------------------------------------------------------- Editor */

.nvc-editor-preview {
	padding: 1.5rem;
	border: 1px dashed var( --nvc-border, #ccc );
	border-radius: 10px;
	text-align: center;
}

.nvc-editor-preview__title {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.nvc-editor-preview__note {
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.7;
}