/* ------------------------------------------------- TDN Popular Right Now
 *
 * "Popular right now" bar under the site navigation. On desktop it is a
 * full-width bar with text links; on tablets and phones it becomes a
 * single swipeable row of pill chips. Follows the theme's dark-mode
 * toggle via html[data-theme="dark"], the same mechanism the TDN Now
 * Playing plugin uses.
 */

.tdnpr-bar {
	background: var(--tdnpr-bg, #fafafa);
	border-bottom: 1px solid var(--tdnpr-border, #e8e8e8);
}

.tdnpr-inner {
	align-items: baseline;
	display: flex;
	gap: 14px;
	padding-bottom: 8px;
	padding-top: 8px;
}

.tdnpr-label {
	color: var(--tdnpr-accent, #d51f2d);
	flex: none;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tdnpr-names {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.tdnpr-name {
	color: var(--tdnpr-ink, #1a1a1a);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.tdnpr-name:hover {
	color: var(--tdnpr-accent, #d51f2d);
	text-decoration: underline;
}

html[data-theme="dark"] .tdnpr-bar {
	background: var(--tdnpr-bg-dark, #141414);
	border-bottom-color: var(--tdnpr-border-dark, #2a2a2a);
}

html[data-theme="dark"] .tdnpr-name {
	color: var(--tdnpr-ink-dark, #f0f0f0);
}

/* ------------------------------------------------- Mobile: swipeable strip
 *
 * One thin row: the label stays pinned left, the names become a
 * horizontally scrollable strip of pill chips. The scrollbar is hidden
 * and the right edge fades to hint that more names are a swipe away.
 */

@media (max-width: 1023.98px) {
	.tdnpr-inner {
		align-items: center;
		display: flex;
		gap: 10px;
		padding: 8px 0 8px 16px;
	}

	.tdnpr-label {
		font-size: 10px;
	}

	.tdnpr-names {
		align-items: center;
		display: flex;
		flex: 1 1 auto;
		flex-wrap: nowrap;
		gap: 8px;
		min-width: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 4px 16px 4px 2px;
		-webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
		mask-image: linear-gradient(to right, #000 90%, transparent 100%);
	}

	.tdnpr-names::-webkit-scrollbar {
		display: none;
	}

	.tdnpr-name {
		border: 1px solid var(--tdnpr-border, #e8e8e8);
		border-radius: 999px;
		flex: none;
		font-size: 13px;
		padding: 9px 14px;
	}

	html[data-theme="dark"] .tdnpr-name {
		border-color: var(--tdnpr-border-dark, #2a2a2a);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdnpr-name {
		transition: none;
	}
}