/**
 * Pathways landing — selector + dynamic display styles.
 * Mirrors the <style> block in web-orig/src/pages/pathways.astro.
 *
 * Shared with pathway-detail.css for .req-card / .handle-item via @import,
 * but kept inline here so both templates work even if loaded standalone.
 */

.selector-btn {
	color: #5E5E78;
	background: transparent;
	cursor: pointer;
	border: 0;
}
.selector-btn.active {
	color: #5B34B5;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.selector-btn:not(.active):hover {
	color: #464660;
}
.selector-btn.disabled {
	color: #C4C4D4;
	cursor: not-allowed;
	pointer-events: none;
}

.selector-group-disabled {
	opacity: 0.45;
	pointer-events: none;
}

.req-card {
	background: #ffffff;
	border: 1px solid #E2E2EC;
	border-radius: 14px;
	padding: 1.5rem;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.req-card:hover {
	border-color: #DDD0F7;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.handle-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
	background: #F7F4FD;
	border-radius: 12px;
	border: 1px solid #EEE8FB;
}

@keyframes pathway-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.pathway-animate {
	animation: pathway-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}