/* Shared: Understanding Contractions + 5-1-1 Rule
   Used by: contraction timer calculator, report wellness page */

.contraction-types {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}
.contraction-type {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(139,123,184,0.06), 0 3px 8px rgba(139,123,184,0.04);
}
.contraction-type-header {
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 800;
	text-align: center;
}
.contraction-type-header.bh {
	background: linear-gradient(135deg, #f5d98e, #d4c478);
	color: var(--text, #3D2F50);
}
.contraction-type-header.real {
	background: linear-gradient(135deg, var(--primary, #8B7BB8), #a48ed4);
	color: #fff;
}
.contraction-wave-container {
	height: 60px;
	padding: 12px 16px 0;
}
.contraction-wave {
	width: 100%;
	height: 100%;
}
.wave-path {
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bh-wave {
	stroke: #d4c478;
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: wave-draw 3s ease forwards;
}
.real-wave {
	stroke: var(--primary, #8B7BB8);
	stroke-dasharray: 800;
	stroke-dashoffset: 800;
	animation: wave-draw 3s ease forwards;
}
@keyframes wave-draw {
	to { stroke-dashoffset: 0; }
}
.contraction-traits {
	list-style: none;
	padding: 12px 16px 16px;
	margin: 0;
}
.contraction-traits li {
	list-style: none;
	font-size: 16px;
	color: var(--text-muted, #695A80);
	padding: 5px 0;
	padding-left: 20px;
	position: relative;
}
.contraction-traits li::before {
	content: '•';
	position: absolute;
	left: 4px;
	color: var(--accent, #7BC8B8);
	font-weight: 700;
}

/* 5-1-1 Rule card */
.contraction-511 {
	background: linear-gradient(135deg, rgba(139,123,184,0.08), rgba(242,212,215,0.10));
	border-radius: 16px;
	padding: 24px;
	text-align: center;
	border-left: 4px solid var(--primary, #8B7BB8);
	margin-bottom: 28px;
}
.contraction-511-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--text, #3D2F50);
	margin-bottom: 18px;
}
.contraction-511-cards {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 18px;
}
.contraction-511-card {
	background: #fff;
	border-radius: 14px;
	padding: 18px 28px;
	box-shadow: 0 2px 12px rgba(61,47,80,0.06);
	min-width: 90px;
}
.contraction-511-number {
	font-family: 'Nunito', sans-serif;
	font-size: 40px;
	font-weight: 800;
	color: var(--primary, #8B7BB8);
	line-height: 1;
}
.contraction-511-text {
	font-size: 14px;
	color: var(--text-muted, #695A80);
	margin-top: 6px;
	text-transform: lowercase;
}
.contraction-511-note {
	font-size: 14px;
	color: var(--text-muted, #695A80);
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.contraction-types {
		grid-template-columns: 1fr;
	}
	.contraction-511-cards {
		gap: 8px;
		flex-wrap: wrap;
	}
	.contraction-511-card {
		min-width: 0;
		flex: 1 1 0;
		padding: 14px 10px;
	}
	.contraction-511-number {
		font-size: 28px;
	}
}