/**
 * Environmental Pulse Insights (Phase 33h).
 *
 * Built from the same design tokens as the rest of the article detail
 * redesign and the Phase 33f results component (assets/css/base.css,
 * entry-environmental-pulse.css) rather than introducing new values.
 * Layered in `overrides` for the same page-specific reason those
 * stylesheets are.
 */

@layer overrides {
	.pulse-insights__hero {
		background: var(--color-bg-subtle);
		padding: var(--space-8) var(--space-3);
		text-align: center;
	}

	.pulse-insights__hero-inner {
		max-width: var(--content-reading);
		margin: 0 auto;
	}

	.pulse-insights__title {
		font-size: var(--font-size-h1);
		color: var(--color-text-heading);
		margin: 0 0 var(--space-2);
	}

	.pulse-insights__subtitle {
		font-size: var(--font-size-body);
		color: var(--color-text-muted);
		margin: 0;
	}

	.pulse-insights__inner {
		max-width: var(--content-reading);
		margin: 0 auto;
		padding: var(--space-8) var(--space-3);
	}

	.pulse-insights__section-heading {
		font-size: var(--font-size-h2);
		color: var(--color-text-heading);
		margin: 0 0 var(--space-3);
	}

	.pulse-insights__methodology {
		margin: 0 0 var(--space-8);
	}

	.pulse-insights__methodology-text {
		font-size: var(--font-size-body);
		color: var(--color-text-body);
		line-height: 1.8;
		margin: 0;
	}

	.pulse-insights__rankings {
		margin: 0 0 var(--space-8);
	}

	.pulse-insights__rankings-note {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		margin: 0 0 var(--space-6);
	}

	.pulse-insights__axes {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

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

	.pulse-insights__axis-heading {
		font-size: var(--font-size-h3);
		color: var(--color-text-heading);
		margin: 0 0 var(--space-1);
	}

	.pulse-insights__axis-scale {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		margin: 0 0 var(--space-3);
	}

	.pulse-insights__ranking-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		margin: 0;
	}

	.pulse-insights__ranking-row {
		list-style: none;
	}

	.pulse-insights__ranking-button {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-2);
		width: 100%;
		min-height: 44px;
		padding: var(--space-2) var(--space-3);
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-300);
		border-radius: var(--radius-sm);
		text-align: left;
		font-size: var(--font-size-meta);
		color: var(--color-text-body);
		transition: border-color var(--motion-fast), background var(--motion-fast);
	}

	.pulse-insights__ranking-button:hover {
		border-color: var(--color-primary-600);
	}

	.pulse-insights__ranking-button:focus-visible {
		outline: 2px solid var(--color-primary-600);
		outline-offset: 2px;
	}

	/* Selected state: never color alone -- a visible border weight
	   change, a bold label, and a textual marker together. */
	.pulse-insights__ranking-button.is-selected {
		border: 2px solid var(--color-primary-600);
		background: var(--color-primary-tint);
		font-weight: 600;
	}

	.pulse-insights__ranking-button.is-selected::after {
		content: '選択中';
		margin-left: auto;
		font-size: var(--font-size-meta);
		font-weight: 600;
		color: var(--color-primary-700);
	}

	.pulse-insights__ranking-rank {
		font-weight: 700;
		color: var(--color-primary-700);
		min-width: 3em;
	}

	.pulse-insights__ranking-name {
		flex: 1 1 auto;
	}

	.pulse-insights__ranking-mean,
	.pulse-insights__ranking-count {
		color: var(--color-text-muted);
		white-space: nowrap;
	}

	.pulse-insights__axis-status {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		margin: var(--space-2) 0 0;
	}

	.pulse-insights__detail {
		margin: 0 0 var(--space-8);
		padding: var(--space-6);
		background: var(--color-bg-subtle);
		border: 1px solid var(--color-border-200);
		border-radius: var(--radius-md);
	}

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

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

	.pulse-insights__detail-metric {
		margin: 0 0 var(--space-6);
	}

	.pulse-insights__detail-metric-heading {
		font-size: var(--font-size-body);
		color: var(--color-text-heading);
		font-weight: 600;
		margin: 0 0 var(--space-2);
	}

	.pulse-insights__detail-metric-summary {
		font-size: var(--font-size-body);
		color: var(--color-text-body);
		margin: 0 0 var(--space-3);
	}

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

	/* Distribution -- identical accessible pattern to Phase 33f's
	   entry-environmental-pulse.css (reused deliberately, Stage 10). */
	.pulse-insights__distribution {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		margin: 0;
		padding: 0;
	}

	.pulse-insights__dist-row {
		display: grid;
		grid-template-columns: 1.5em 1fr 4em;
		align-items: center;
		gap: var(--space-2);
		list-style: none;
	}

	.pulse-insights__dist-label {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		text-align: center;
	}

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

	.pulse-insights__dist-fill {
		display: block;
		height: 100%;
		background: var(--color-primary-600);
	}

	.pulse-insights__dist-count {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		text-align: right;
	}

	.pulse-insights__participating {
		margin-top: var(--space-4);
	}

	.pulse-insights__participating-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		margin: var(--space-2) 0 0;
		padding: 0;
	}

	.pulse-insights__participating-item {
		list-style: none;
	}

	.pulse-insights__cta {
		padding-top: var(--space-6);
		border-top: 1px solid var(--color-border-200);
	}

	.pulse-insights__cta-text {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		line-height: 1.7;
		margin: 0;
	}

	@media (min-width: 1024px) {
		.pulse-insights__axes {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.pulse-insights__ranking-button,
		.pulse-insights__dist-fill {
			transition: none;
		}
	}
}