/* Radio calls tagged to a spot (#1230), built by public/modules/spotRadioCallTags.js. The section,
   cards, buttons and byline reuse the event-link classes in style.css and communityAdditions.css;
   only the call itself needs its own rules. */

/* "Tagged radio calls" (#1230): a section of its own. Its divider comes from the panel's one
   rule (style.css, "Section dividers"); the heading's look from .event-graph-link-heading. */
#details-panel .radio-call-tags-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 9px 0;
}

#details-panel .radio-call-tags-heading {
	margin: 0;
}

/* Tag from radio: the panel's action button, full width and outlined, as Add details and Hide
   spot are drawn (staffTools.css .staff-posted-by-button, .mongo-details-btn). */
#details-panel .radio-call-tag-from-radio {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--details-divider-color);
	border-radius: 999px;
	background: transparent;
	font-family: var(--headerfont);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--purple);
	text-decoration: none;
}

#details-panel .radio-call-tag-from-radio:hover,
#details-panel .radio-call-tag-from-radio:focus-visible {
	background: var(--calendar-indicator-bg);
	border-color: var(--purple);
}

#details-panel .radio-call-tags-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

#details-panel .radio-call-tag-details {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* A row's top line: the call's time, and the compact player at its end. The row is the
   positioned box the player's progress line runs along the top of (radioMiniPlayer.css). */
#details-panel .radio-call-tag {
	position: relative;
	overflow: hidden;
}

#details-panel .radio-call-tag-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
}

#details-panel .radio-call-tag-head > p {
	margin: 0;
}

/* The player and Open in radio, together at the line's end. */
#details-panel .radio-call-tag-controls {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 4px;
}

/* Open in radio: a small muted icon, its tap target 32px like the player's buttons. */
#details-panel .radio-call-tag-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	font-size: 12px;
	color: var(--details-subtle-text-color);
	text-decoration: none;
}

#details-panel .radio-call-tag-open:hover,
#details-panel .radio-call-tag-open:focus-visible {
	color: var(--purple);
	background: var(--calendar-indicator-bg);
}

#details-panel .radio-call-tag-time {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--details-label-color);
}

#details-panel .radio-call-tag-candidate .event-graph-linked-badge {
	align-self: flex-start;
	margin: 0;
}