/* CRC Blueprint Research — clinical trial directory
 *
 * Loaded only where the finder or a trial record appears. Follows the same
 * conventions as front.css: everything scoped to .crcbp- classes, colours from
 * custom properties, both schemes defined because the theme decides which
 * applies.
 *
 * Status colour is never the only carrier of meaning. Every dot sits beside its
 * own written label, so the list reads the same to someone who cannot separate
 * green from amber.
 */

:root {
	--crcbp-open: #197a45;
	--crcbp-open-soft: #e8f4ed;
	--crcbp-soon: #9a6410;
	--crcbp-soon-soft: #fdf3e3;
	--crcbp-closed: #5c6670;
	--crcbp-closed-soft: #eef0f2;
	--crcbp-stopped: #a32b2b;
	--crcbp-stopped-soft: #fbecec;
}

@media (prefers-color-scheme: dark) {
	:root {
		--crcbp-open: #5cc98a;
		--crcbp-open-soft: #122c1d;
		--crcbp-soon: #e0a95c;
		--crcbp-soon-soft: #30250f;
		--crcbp-closed: #a6adb4;
		--crcbp-closed-soft: #22272c;
		--crcbp-stopped: #e58080;
		--crcbp-stopped-soft: #331b1b;
	}
}

/* ---------------------------------------------------------------------
 * Badges
 * ------------------------------------------------------------------ */

.crcbp-trial-badges,
.crcbp-trial-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 .7em;
}

.crcbp-trial-badge {
	display: inline-flex;
	align-items: center;
	gap: .38em;
	padding: .22em .62em;
	border: 1px solid var(--crcbp-line);
	border-radius: 999px;
	background: var(--crcbp-panel);
	color: var(--crcbp-muted);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .01em;
	white-space: nowrap;
}

.crcbp-trial-badge__dot {
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.crcbp-trial-badge--status.is-recruiting {
	color: var(--crcbp-open);
	background: var(--crcbp-open-soft);
	border-color: transparent;
}

.crcbp-trial-badge--status.is-not_yet_recruiting {
	color: var(--crcbp-soon);
	background: var(--crcbp-soon-soft);
	border-color: transparent;
}

.crcbp-trial-badge--status.is-enrolling_by_invitation,
.crcbp-trial-badge--status.is-active_not_recruiting,
.crcbp-trial-badge--status.is-completed,
.crcbp-trial-badge--status.is-unknown {
	color: var(--crcbp-closed);
	background: var(--crcbp-closed-soft);
	border-color: transparent;
}

.crcbp-trial-badge--status.is-terminated,
.crcbp-trial-badge--status.is-suspended,
.crcbp-trial-badge--status.is-withdrawn {
	color: var(--crcbp-stopped);
	background: var(--crcbp-stopped-soft);
	border-color: transparent;
}

.crcbp-trial-badge--phase,
.crcbp-trial-badge--design {
	color: var(--crcbp-teal);
	background: var(--crcbp-teal-soft);
	border-color: transparent;
}

.crcbp-trial-badge--results {
	color: var(--crcbp-amber);
	background: var(--crcbp-amber-soft);
	border-color: transparent;
}

/* ---------------------------------------------------------------------
 * The filter bar
 * ------------------------------------------------------------------ */

.crcbp-trial-filter {
	margin: 0 0 1.6em;
	padding: 1em 1.1em;
	border: 1px solid var(--crcbp-line);
	border-radius: 6px;
	background: var(--crcbp-panel);
}

.crcbp-trial-filter__group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .8rem;
	margin-bottom: .7em;
}

.crcbp-trial-filter__group:last-of-type {
	margin-bottom: 0;
}

.crcbp-trial-filter__label {
	flex: none;
	min-width: 6.5em;
	color: var(--crcbp-muted);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.crcbp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crcbp-pills li {
	margin: 0;
	padding: 0;
}

.crcbp-pill {
	display: inline-flex;
	align-items: baseline;
	gap: .35em;
	padding: .25em .7em;
	border: 1px solid var(--crcbp-line);
	border-radius: 999px;
	background: transparent;
	color: var(--crcbp-ink);
	font-size: .84rem;
	line-height: 1.6;
	text-decoration: none;
}

.crcbp-pill:hover,
.crcbp-pill:focus {
	border-color: var(--crcbp-teal);
	color: var(--crcbp-teal);
}

.crcbp-pill.is-current {
	border-color: transparent;
	background: var(--crcbp-teal);
	color: #fff;
	font-weight: 600;
}

.crcbp-pill__count {
	font-size: .78em;
	font-variant-numeric: tabular-nums;
	opacity: .65;
}

.crcbp-country-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.crcbp-country-select {
	max-width: 100%;
	padding: .35em .5em;
	border: 1px solid var(--crcbp-line);
	border-radius: 4px;
	background: var(--crcbp-panel);
	color: var(--crcbp-ink);
	font-size: .88rem;
	font-family: inherit;
}

.crcbp-country-go {
	padding: .38em .9em;
	border: 1px solid var(--crcbp-line);
	border-radius: 4px;
	background: transparent;
	color: var(--crcbp-ink);
	font: inherit;
	font-size: .84rem;
	cursor: pointer;
}

.crcbp-country-go:hover,
.crcbp-country-go:focus {
	border-color: var(--crcbp-teal);
	color: var(--crcbp-teal);
}

.crcbp-trial-filter__clear {
	margin: .8em 0 0;
	font-size: .84rem;
}

/* The "what these mean" panel that closes the filter box. Sits inside the box,
   so it inherits the panel background and reads as belonging to the filters
   rather than to the list of trials underneath. Closed by default: the wording
   is explaining technical words, and a reader who knows them should not have to
   scroll past three paragraphs being told. */

.crcbp-legend {
	margin: .9em 0 0;
	padding-top: .8em;
	border-top: 1px solid var(--crcbp-line);
	font-size: .84rem;
}

.crcbp-legend > summary {
	color: var(--crcbp-teal);
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
}

.crcbp-legend > summary:hover,
.crcbp-legend > summary:focus {
	text-decoration: underline;
}

.crcbp-legend__body {
	margin-top: .8em;
	max-width: 46em;
}

.crcbp-legend__row {
	margin-bottom: .8em;
}

.crcbp-legend__row h3 {
	margin: 0 0 .15em;
	color: var(--crcbp-muted);
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.crcbp-legend__row p,
.crcbp-legend__caveat {
	margin: 0;
	color: var(--crcbp-ink);
	line-height: 1.5;
}

.crcbp-legend__caveat {
	padding-top: .7em;
	border-top: 1px solid var(--crcbp-line);
	color: var(--crcbp-muted);
}

/* ---------------------------------------------------------------------
 * Sorting
 * ------------------------------------------------------------------ */

.crcbp-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem .7rem;
	margin: 0 0 1em;
	font-size: .84rem;
}

.crcbp-sort__label {
	color: var(--crcbp-muted);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .78rem;
}

.crcbp-sort ul {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crcbp-sort__item {
	color: var(--crcbp-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.crcbp-sort__item:hover,
.crcbp-sort__item:focus {
	color: var(--crcbp-teal);
	border-bottom-color: currentColor;
}

.crcbp-sort__item.is-current {
	color: var(--crcbp-ink);
	font-weight: 600;
	border-bottom-color: var(--crcbp-teal);
}

/* ---------------------------------------------------------------------
 * What a trial is looking for, on the record
 * ------------------------------------------------------------------ */

.crcbp-factors {
	margin: 0;
}

.crcbp-factors__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem .8rem;
	padding: .5em 0;
	border-bottom: 1px solid var(--crcbp-line);
}

.crcbp-factors__row:last-child {
	border-bottom: 0;
}

.crcbp-factors__label {
	flex: none;
	min-width: 7em;
	color: var(--crcbp-muted);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.crcbp-factors__list {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crcbp-factor {
	display: inline-block;
	padding: .2em .6em;
	border-radius: 999px;
	background: var(--crcbp-teal-soft);
	color: var(--crcbp-teal);
	font-size: .8rem;
	font-weight: 600;
}

//* ---------------------------------------------------------------------
 * The card list
 * ------------------------------------------------------------------ */

.crcbp-trials__heading {
	margin-top: 0;
}

.crcbp-trials__count {
	margin: 0 0 .8em;
	color: var(--crcbp-muted);
	font-size: .84rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.crcbp-trial-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.crcbp-trial-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.05em 1.15em;
	border: 1px solid var(--crcbp-line);
	border-radius: 6px;
	background: var(--crcbp-panel);
}

.crcbp-trial-card__title {
	margin: 0 0 .45em;
	font-size: 1.05rem;
	line-height: 1.35;
}

.crcbp-trial-card__title a {
	text-decoration: none;
}

.crcbp-trial-card__title a:hover,
.crcbp-trial-card__title a:focus {
	text-decoration: underline;
}

.crcbp-trial-card__meta {
	margin: 0 0 .5em;
	color: var(--crcbp-muted);
	font-size: .84rem;
	line-height: 1.5;
}

.crcbp-trial-card__updated {
	margin: auto 0 0;
	padding-top: .5em;
	color: var(--crcbp-muted);
	font-size: .78rem;
}

.crcbp-sep {
	opacity: .5;
}

.crcbp-trials__none,
.crcbp-trials--empty p {
	padding: 1.2em;
	border: 1px dashed var(--crcbp-line);
	border-radius: 6px;
	color: var(--crcbp-muted);
	text-align: center;
}

.crcbp-trials__pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5em;
	padding-top: 1em;
	border-top: 1px solid var(--crcbp-line);
	font-size: .88rem;
}

.crcbp-trials__page {
	color: var(--crcbp-muted);
}

.crcbp-trials__prev {
	margin-right: auto;
}

.crcbp-trials__next {
	margin-left: auto;
}

/* ---------------------------------------------------------------------
 * A single trial record
 * ------------------------------------------------------------------ */

.crcbp-banner--trial {
	margin: 0 0 1.4em;
	padding: .9em 1.1em;
	border-left: 3px solid var(--crcbp-soon);
	border-radius: 0 4px 4px 0;
	background: var(--crcbp-soon-soft);
	font-size: .94em;
}

.crcbp-banner--trial p {
	margin: 0;
}

.crcbp-snapshot--trial {
	width: 100%;
	margin: 0 0 1.6em;
	border-collapse: collapse;
}

.crcbp-trial-block {
	margin: 0 0 1.6em;
}

.crcbp-trial-interventions {
	margin: 0;
	padding: 0;
	list-style: none;
}

.crcbp-trial-interventions li {
	padding: .45em 0;
	border-bottom: 1px solid var(--crcbp-line);
}

.crcbp-trial-interventions li:last-child {
	border-bottom: 0;
}

.crcbp-trial-kind {
	display: inline-block;
	min-width: 6.5em;
	margin-right: .5em;
	color: var(--crcbp-muted);
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.crcbp-trial-note {
	margin: .6em 0 0;
	color: var(--crcbp-muted);
	font-size: .88em;
	line-height: 1.5;
}

/* The model-written note on what the trial is trying to do. Given a left rule
   in the accent colour, like the article dek, so it reads as this site talking
   rather than as another field lifted from the registry. */

.crcbp-assessment {
	padding: .1em 0 .1em 1.1em;
	border-left: 3px solid var(--crcbp-amber);
}

.crcbp-assessment h2 {
	margin-top: 0;
}

.crcbp-assessment p {
	line-height: 1.6;
}

.crcbp-assessment__caveat {
	color: var(--crcbp-ink);
}

.crcbp-trial-phase-note {
	margin: 0 0 1.6em;
	padding: .85em 1.05em;
	border-left: 3px solid var(--crcbp-teal);
	border-radius: 0 4px 4px 0;
	background: var(--crcbp-teal-soft);
	font-size: .94em;
}

.crcbp-trial-phase-note p {
	margin: 0;
}

.crcbp-trial-summary {
	margin: 0;
	padding: 0 0 0 1.1em;
	border-left: 2px solid var(--crcbp-line);
	font-style: normal;
}

.crcbp-trial-summary cite {
	display: block;
	margin-top: .7em;
	color: var(--crcbp-muted);
	font-size: .84rem;
	font-style: normal;
}

.crcbp-trial-eligibility h3 {
	margin: 1em 0 .4em;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.crcbp-trial-eligibility h3:first-child {
	margin-top: 0;
}

.crcbp-trial-eligibility ul {
	margin: 0 0 .8em;
	padding-left: 1.2em;
}

.crcbp-trial-eligibility li {
	margin-bottom: .35em;
	font-size: .94em;
	line-height: 1.5;
}

* ---------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.crcbp-trial-filter__label {
		min-width: 100%;
	}

	.crcbp-factors__label {
		min-width: 100%;
	}

	.crcbp-trial-kind {
		display: block;
		min-width: 0;
		margin-bottom: .15em;
	}

	.crcbp-trials__pagination {
		flex-wrap: wrap;
		justify-content: center;
	}
}