/**
 * Environmental Pulse — reader survey (Phase 33d).
 *
 * Scoped entirely under .entry-environmental-pulse, built from the same
 * design tokens as the rest of the article detail redesign
 * (assets/css/base.css / redesign-shared.css) rather than introducing
 * new hex/px literals. Loaded after ecolog-single-redesign (see
 * inc/environmental-pulse.php's dependency array) so it can rely on
 * that stylesheet's `.entry-content` reading-width rhythm already
 * being in effect; layered in `overrides` for the same reason
 * single-redesign.css itself is (page-specific, not core design system).
 */

@layer overrides {
	.entry-environmental-pulse {
		max-width: var(--content-reading);
		margin: var(--space-8) auto 0;
		padding: 0 var(--space-3);
	}

	.entry-environmental-pulse__inner {
		background: var(--color-bg-subtle);
		border: 1px solid var(--color-border-200);
		border-radius: var(--radius-md);
		padding: var(--space-4);
	}

	.entry-environmental-pulse__heading {
		font-size: var(--font-size-h3);
		color: var(--color-text-heading);
		margin: 0 0 var(--space-2);
	}

	.entry-environmental-pulse__intro,
	.entry-environmental-pulse__privacy {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		line-height: 1.7;
		margin: 0 0 var(--space-4);
	}

	.entry-environmental-pulse__question {
		border: 0;
		padding: 0;
		margin: 0 0 var(--space-6);
	}

	.entry-environmental-pulse__legend {
		font-size: var(--font-size-body);
		color: var(--color-text-heading);
		font-weight: 600;
		padding: 0 0 var(--space-3);
	}

	.entry-environmental-pulse__scale {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.entry-environmental-pulse__anchor {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		flex-basis: 100%;
	}

	.entry-environmental-pulse__anchor--low {
		order: 1;
	}

	.entry-environmental-pulse__anchor--high {
		order: 3;
		text-align: right;
	}

	.entry-environmental-pulse__option {
		order: 2;
		position: relative;
		display: flex;
	}

	.entry-environmental-pulse__radio {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.entry-environmental-pulse__option-number {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--color-border-300);
		border-radius: var(--radius-sm);
		background: var(--color-bg-surface);
		color: var(--color-text-body);
		font-size: var(--font-size-body);
		transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
	}

	.entry-environmental-pulse__option:hover .entry-environmental-pulse__option-number {
		border-color: var(--color-primary-600);
	}

	.entry-environmental-pulse__radio:checked + .entry-environmental-pulse__option-number {
		background: var(--color-primary-600);
		border-color: var(--color-primary-600);
		color: #fff;
	}

	.entry-environmental-pulse__radio:focus-visible + .entry-environmental-pulse__option-number {
		outline: 2px solid var(--color-primary-600);
		outline-offset: 2px;
	}

	.entry-environmental-pulse__actions {
		margin-top: var(--space-2);
	}

	.entry-environmental-pulse__submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: var(--space-2) var(--space-6);
		background: var(--color-primary-600);
		color: #fff;
		font-size: var(--font-size-button);
		font-weight: 600;
		border-radius: var(--radius-sm);
		transition: background var(--motion-fast);
	}

	.entry-environmental-pulse__submit:hover {
		background: var(--color-primary-700);
	}

	.entry-environmental-pulse__submit:focus-visible {
		outline: 2px solid var(--color-primary-700);
		outline-offset: 2px;
	}

	.entry-environmental-pulse__submit:disabled {
		background: var(--color-text-muted);
		cursor: not-allowed;
	}

	.entry-environmental-pulse__status {
		font-size: var(--font-size-meta);
		color: var(--color-text-body);
		margin: var(--space-3) 0 0;
		min-height: 1.5em;
	}

	@media (min-width: 768px) {
		.entry-environmental-pulse__anchor {
			flex-basis: auto;
		}

		.entry-environmental-pulse__anchor--low {
			order: 0;
			margin-right: var(--space-2);
		}

		.entry-environmental-pulse__anchor--high {
			order: 0;
			margin-left: var(--space-2);
		}

		.entry-environmental-pulse__option {
			order: 0;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.entry-environmental-pulse__option-number,
		.entry-environmental-pulse__submit {
			transition: none;
		}
	}

	/* ------------------------------------------------------------
	 * Results (Phase 33f). Same card, appended below the form once
	 * populated — no separate visual container, so the transition from
	 * survey to results reads as one continuous block rather than a
	 * layout jump.
	 * ------------------------------------------------------------ */

	.entry-environmental-pulse__results {
		margin-top: var(--space-6);
		padding-top: var(--space-6);
		border-top: 1px solid var(--color-border-200);
	}

	.entry-environmental-pulse__results-heading {
		font-size: var(--font-size-h3);
		color: var(--color-text-heading);
		margin: 0 0 var(--space-2);
	}

	.entry-environmental-pulse__results-heading:focus-visible {
		outline: 2px solid var(--color-primary-600);
		outline-offset: 2px;
	}

	.entry-environmental-pulse__results-count,
	.entry-environmental-pulse__results-lowN,
	.entry-environmental-pulse__results-unavailable {
		font-size: var(--font-size-body);
		color: var(--color-text-body);
		margin: 0 0 var(--space-4);
	}

	.entry-environmental-pulse__results-caveat {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		line-height: 1.7;
		margin: var(--space-4) 0 0;
	}

	.entry-environmental-pulse__metric {
		margin: 0 0 var(--space-6);
	}

	.entry-environmental-pulse__metric-heading {
		font-size: var(--font-size-body);
		color: var(--color-text-heading);
		font-weight: 600;
		margin: 0 0 var(--space-2);
	}

	.entry-environmental-pulse__metric-summary {
		font-size: var(--font-size-body);
		color: var(--color-text-body);
		margin: 0 0 var(--space-3);
	}

	/* Distribution: semantic <ul>, each row's full meaning lives in the
	   <li>'s aria-label (JS-set); label/track/count spans below are
	   aria-hidden and purely visual, so no information is duplicated or
	   contradicted for assistive tech. */
	.entry-environmental-pulse__distribution {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	.entry-environmental-pulse__dist-row {
		display: grid;
		grid-template-columns: 1.5em 1fr 4em;
		align-items: center;
		gap: var(--space-2);
	}

	.entry-environmental-pulse__dist-label {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		text-align: center;
	}

	.entry-environmental-pulse__dist-track {
		height: 12px;
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-200);
		border-radius: var(--radius-sm);
		overflow: hidden;
	}

	.entry-environmental-pulse__dist-fill {
		display: block;
		height: 100%;
		background: var(--color-primary-600);
	}

	.entry-environmental-pulse__dist-count {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		text-align: right;
	}

	@media (prefers-reduced-motion: reduce) {
		.entry-environmental-pulse__dist-fill {
			transition: none;
		}
	}

	.entry-environmental-pulse__insights-link {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		margin: var(--space-4) 0 0;
	}
}