/**
 * The people on a trip, in My Travellers.
 *
 * Its own file rather than more rules in dashboard.css, so the whole feature is
 * one PHP file and one stylesheet that can be removed together. saved.css does
 * the same for Saved Tours.
 *
 * Scoped under .ct-dash, whose palette tokens are declared in dashboard.css.
 * Both stylesheets are on that page, so the tokens cascade down; the fallbacks
 * are only there in case this is ever loaded on its own.
 *
 * @package CustomTours
 */

.ct-dash__people {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-dash__person {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px dashed #EEF1F4;
	list-style: none;
}

.ct-dash__person:last-child { border-bottom: 0; }

/*
 * A number, not a bullet.
 *
 * Travellers are stored and shown in a fixed order, and a rooming list or a
 * permit refers to "traveller 3". The position is information, so it is printed
 * rather than implied by a dot.
 */
.ct-dash__personno {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--d-blue-soft, #EAF4FC);
	color: var(--d-blue-dark, #0F6EA8);
	font-size: 11px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* min-width:0 so a long name wraps instead of widening the flex row. */
.ct-dash__personmain {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ct-dash__personmain strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--d-ink, #1B2733);
	overflow-wrap: anywhere;
}

.ct-dash__personmain span {
	font-size: 12.5px;
	color: var(--d-muted, #6B7280);
}