/**
 * Enhanced post relation — picker label layout.
 *
 * The Voxel post-relation picker renders each candidate label as plain text inside
 * a single `<span>{{ post.title }}</span>` (text interpolation, no HTML). This module
 * joins the primary line and the secondary line(s) with a newline.
 *
 * Baseline (no JS): `white-space: pre-line` turns the newline into a real line break
 * and lets the text wrap instead of being truncated next to the title.
 * Enhanced (JS): the enhancer splits the text into `.epr-title` / `.epr-meta` spans,
 * which this stylesheet then styles independently.
 *
 * Scope is limited to the post-relation popup wrapper (`.prmr-popup`) so other Voxel
 * dropdowns are not affected.
 */

/*
 * Voxel fixes the row height (`.ts-term-dropdown li > a { height: 40px }`) and clips it
 * (`.ts-term-dropdown li { overflow: hidden }`), which truncates a second line. Let the
 * row grow with its content while keeping the default height as a minimum. Scoped to the
 * post-relation popup so other Voxel dropdowns keep their fixed-height look.
 */
.prmr-popup .ts-term-dropdown li {
	overflow: visible;
}

.prmr-popup .ts-term-dropdown li > a {
	height: auto;
	min-height: 40px;
	align-items: center;
}

.prmr-popup .ts-term-dropdown-list a > span {
	font-size: var(--esmira-epr-font-size, inherit);
	white-space: pre-line;
	overflow: visible;
	overflow-wrap: anywhere;
	word-break: break-word;
	line-height: 1.35;
}

/* Structured label produced by the JS enhancer. */
.prmr-popup .ts-term-dropdown-list a > span .epr-title,
.prmr-popup .ts-term-dropdown-list a > span .epr-meta {
	display: block;
	white-space: pre-line;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.prmr-popup .ts-term-dropdown-list a > span .epr-title {
	font-weight: 600;
}

.prmr-popup .ts-term-dropdown-list a > span .epr-meta {
	margin-top: 2px;
	font-size: 0.85em;
	line-height: 1.3;
	opacity: 0.7;
}

/*
 * Collapsed field (selected value): keep it on a single line. The selected value is
 * "title\nmeta +N"; the newline collapses to a space here, and any enhancer spans are
 * inlined so the trigger never grows to multiple lines.
 */
.ts-filter-text .epr-title,
.ts-filter-text .epr-meta {
	display: inline;
}

.ts-filter-text .epr-meta {
	margin-left: 4px;
	opacity: 0.7;
}