/*
 * Aggregate patient experience and reported side effects (dev-077).
 *
 * The two blocks on a condition page: `What patients report` and `Reported
 * side effects`. Scoped to `.kl-safety` so no rule reaches another surface.
 * Every value comes from assets/css/tokens.css (no literal colour or spacing);
 * the block's own heading and lede reuse the site's `.kl-fields` family, so
 * only the row list and the source line are new here.
 *
 * Design: docs/research/21-聚合型患者体验与安全性来源_v0.md §四 / §六.
 */

.kl-safety {
	max-width: 820px;
	margin-top: var(--kl-space-6);
}

.kl-safety__rows {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--kl-space-4);
}

.kl-safety__row {
	padding: var(--kl-space-4) var(--kl-space-5);
	border: 1px solid var(--kl-border);
	border-radius: var(--kl-radius-card);
	background: var(--kl-paper-alt);
}

.kl-safety__claim {
	margin: 0;
	max-width: var(--kl-measure);
	font-size: var(--kl-text-base);
	line-height: var(--kl-leading-body);
	color: var(--kl-ink);
}

.kl-safety__caliber {
	margin: var(--kl-space-3) 0 0;
	max-width: var(--kl-measure);
	color: var(--kl-slate);
	font-size: var(--kl-text-sm);
	line-height: var(--kl-leading-body);
}

.kl-safety__source {
	margin: var(--kl-space-3) 0 0;
	color: var(--kl-slate);
	font-size: var(--kl-text-sm);
	line-height: var(--kl-leading-snug);
	overflow-wrap: anywhere;
}

.kl-safety__source a {
	color: var(--kl-accent);
}

.kl-safety__level,
.kl-safety__as-of {
	white-space: nowrap;
}

.kl-safety__topics {
	margin: var(--kl-space-5) 0 0;
	font-size: var(--kl-text-sm);
}

@media (max-width: 720px) {
	.kl-safety__row {
		padding: var(--kl-space-4);
	}
}