/* =====================================================================
   V5 STREAM — Horizontal Card Browse Mode
   Opt-in toggle for all users on the Stream page (discover.php).
   Default: Scroll (unchanged V5 vertical feed).
   Cards mode: snap-scrollable horizontal card deck, mobile/desktop.
   All rules scoped to body.page-discover.v5-stream-preview
   ===================================================================== */

/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */
body.page-discover.v5-stream-preview {
	--v5s-purple:    #8b5cf6;
	--v5s-cyan:      #22d3ee;
	--v5s-glow:      rgba(139, 92, 246, 0.18);
	--v5s-border:    rgba(139, 92, 246, 0.24);
	--v5s-toggle-bg: rgba(16, 12, 28, 0.92);
	--v5s-shadow:    0 8px 28px -10px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.07);
	--v5s-ease:      cubic-bezier(0.23, 1, 0.32, 1);
}

/* ─── MODE TOGGLE ────────────────────────────────────────────────── */
@keyframes v5s-toggle-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}

body.page-discover.v5-stream-preview .v5s-toggle {
	align-items: center;
	animation: v5s-toggle-in .35s var(--v5s-ease) both;
	-webkit-backdrop-filter: saturate(150%) blur(16px);
	backdrop-filter: saturate(150%) blur(16px);
	background: var(--v5s-toggle-bg);
	border: 1px solid var(--v5s-border);
	border-radius: 999px;
	box-shadow: var(--v5s-shadow);
	display: inline-flex;
	gap: 2px;
	margin: 0 0 14px auto;
	padding: 3px;
	position: sticky;
	top: calc(env(safe-area-inset-top, 0px) + 74px);
	-webkit-user-select: none;
	user-select: none;
	width: max-content;
	z-index: 70;
}

body.page-discover.v5-stream-preview .v5s-toggle-btn {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--text-secondary, #b0a8c4);
	cursor: pointer;
	display: inline-flex;
	font: 750 12px/1 'Inter', system-ui, sans-serif;
	gap: 5px;
	min-height: 44px;
	padding: 0 12px;
	transition: color .22s var(--v5s-ease), background .22s var(--v5s-ease);
	white-space: nowrap;
}

html body.page-discover.v5-stream-preview .v5s-toggle-btn {
	background: transparent !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	color: var(--text-secondary, #b0a8c4) !important;
	-webkit-text-fill-color: currentColor !important;
}

body.page-discover.v5-stream-preview .v5s-toggle-btn .v5s-btn-icon {
	flex-shrink: 0;
	font-size: 11px;
}

html body.page-discover.v5-stream-preview .v5s-toggle-btn.is-active {
	background: linear-gradient(135deg, var(--v5s-purple), var(--v5s-cyan)) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

body.page-discover.v5-stream-preview .v5s-toggle-btn:focus-visible {
	outline: 2px solid var(--v5s-purple);
	outline-offset: 1px;
}

/* Card counter badge shown in swipe mode */
body.page-discover.v5-stream-preview .v5s-card-counter {
	background: rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1;
	min-width: 22px;
	padding: 3px 5px;
	text-align: center;
}

body.page-discover.v5-stream-preview .v5s-toggle-btn:not(.is-active) .v5s-card-counter {
	background: var(--v5s-glow);
	color: var(--v5s-purple);
}

/* ─── BACKWARD COMPAT: hide old toggle if still in DOM ───────────── */
body.page-discover.v5-stream-preview .v5-stream-mode-toggle {
	display: none !important;
}

/* ─── TOGGLE INSIDE .discover-audience (V1.1.11 inline groups) ──── */
/* View and Filter remain one horizontal row while reading as distinct groups. */
body.page-discover.v5-stream-preview .discover-audience .v5s-toggle {
	animation: none !important;  /* audience bar entrance handles fade */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	flex-shrink: 0;
	margin: 0 !important;
	order: -4;
	padding: 0;
	position: static !important;
	top: auto !important;
	width: max-content;
	z-index: 2;
}

body.page-discover.v5-stream-preview .discover-audience .v5s-rail-label {
	align-items: center;
	align-self: center;
	color: rgba(207, 211, 235, 0.58);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	order: -5;
	padding-inline: 3px 0;
	text-transform: uppercase;
	white-space: nowrap;
}

body.page-discover.v5-stream-preview
	.discover-audience .v5s-rail-label-filter {
	border-left: 1px solid rgba(150, 138, 214, 0.28);
	margin-left: 1px;
	order: -3;
	padding-left: 9px;
}

body.page-discover.v5-stream-preview .discover-audience .v5s-toggle-btn {
	gap: 4px;
	padding-inline: 10px;
}

body.page-discover.v5-stream-preview
	.discover-audience > .discover-audience-pill.active {
	order: -2;
}

body.page-discover.v5-stream-preview .discover-audience > .cf-wrap {
	order: -1;
}

/* Clipped controls are not a useful scroll affordance; a cut-off pill is. */
@media (max-width: 640px) {
	body.page-discover.v5-stream-preview .discover-audience.has-v5s-toggle {
		-webkit-mask-image: none !important;
		gap: 4px !important;
		mask-image: none !important;
	}

	body.page-discover.v5-stream-preview
		.discover-audience .v5s-rail-label {
		padding-right: 0;
	}

	body.page-discover.v5-stream-preview
		.discover-audience .v5s-rail-label-filter {
		padding-left: 6px;
	}

	body.page-discover.v5-stream-preview
		.discover-audience .v5s-toggle-btn {
		padding-inline: 9px;
	}

	body.page-discover.v5-stream-preview
		.discover-audience .v5s-toggle-btn .v5s-btn-icon,
	body.page-discover.v5-stream-preview
		.discover-audience > .discover-audience-pill.active > i {
		display: none !important;
	}

	body.page-discover.v5-stream-preview
		.discover-audience .v5s-card-counter {
		display: none !important;
	}
}

@media (max-width: 380px) {
	body.page-discover.v5-stream-preview
		.discover-audience .v5s-rail-label {
		font-size: 0.55rem;
		padding-left: 0;
	}

	body.page-discover.v5-stream-preview
		.discover-audience .v5s-toggle-btn {
		padding-inline: 7px;
	}
}

/* ─── SCROLL MODE — toggle is in audience bar, no separate row ────── */
body.page-discover.v5-stream-preview.v5-stream-mode-scroll .v5s-toggle {
	position: static !important;
	top: auto;
}

/* ─── SWIPE MODE — VIEWPORT LOCKDOWN ────────────────────────────── */
body.page-discover.v5-stream-preview.v5-stream-mode-swipe {
	height: 100dvh;
	overflow: hidden !important;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe #main {
	height: 100dvh !important;
	min-height: 100dvh !important;
	overflow: hidden !important;
	padding: 0 !important;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe #main > .container,
body.page-discover.v5-stream-preview.v5-stream-mode-swipe #main > .container > .wrapper,
body.page-discover.v5-stream-preview.v5-stream-mode-swipe .discover-wrap-stream {
	height: 100% !important;
	margin: 0 !important;
	max-width: none !important;
	overflow: visible !important;
	padding: 0 !important;
	width: 100% !important;
}

/* ─── SWIPE MODE — HIDE CHROME ───────────────────────────────────── */
body.page-discover.v5-stream-preview.v5-stream-mode-swipe .discover-briefing,
body.page-discover.v5-stream-preview.v5-stream-mode-swipe .discover-greet,
body.page-discover.v5-stream-preview.v5-stream-mode-swipe .discover-signal-strip,
body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	.discover-wrap-stream > .discover-section > .discover-section-head {
	display: none !important;
}

/* ─── SWIPE MODE — FIXED AUDIENCE FILTER (with toggle inside) ─────── */
/* V1.1.9: toggle rides inside the audience bar — merged into one fixed row.
   Moved from top:146px to top:88px, reclaiming the old toggle-row height.  */
body.page-discover.v5-stream-preview.v5-stream-mode-swipe .discover-audience {
	align-items: center !important;
	background: #111827 !important;
	border-color: rgba(167, 139, 250, 0.26) !important;
	box-shadow:
		0 14px 34px -22px rgba(0, 0, 0, 0.92),
		inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
	display: flex !important;
	isolation: isolate !important;
	left: 12px !important;
	bottom: auto !important;
	margin: 0 !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	overscroll-behavior-x: contain;
	overflow-x: auto !important;
	padding: 3px 0 7px !important;
	position: fixed !important;
	right: 12px !important;
	scrollbar-width: none !important;
	top: calc(env(safe-area-inset-top, 0px) + 88px) !important;
	width: auto !important;
	z-index: 10040 !important;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe .discover-audience::before {
	display: none !important;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	.discover-audience::-webkit-scrollbar {
	display: none;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe .cf-menu {
	z-index: 10060 !important;
}

/* ─── SWIPE MODE — CARD RAIL ──────────────────────────────────────── */
body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	#discover-stream.discover-stream {
	align-items: stretch !important;
	display: flex !important;
	flex-direction: row !important;
	gap: 14px !important;
	height: auto !important;
	inset:
		calc(env(safe-area-inset-top, 0px) + 150px)
		0
		calc(env(safe-area-inset-bottom, 0px) + 72px)
		0 !important;
	margin: 0 !important;
	max-width: none !important;
	overflow-x: scroll !important;
	overflow-y: hidden !important;
	padding: 10px 6vw 14px !important;
	position: fixed !important;
	/* scroll-behavior handled in prefers-reduced-motion block below */
	scroll-padding-inline: 6vw !important;
	scroll-snap-type: x mandatory !important;
	scrollbar-width: none !important;
	width: 100vw !important;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	#discover-stream.discover-stream::-webkit-scrollbar {
	display: none;
}

/* ─── SWIPE MODE — INDIVIDUAL CARDS ─────────────────────────────── */
body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	#discover-stream.discover-stream > :is(
		.discover-card,
		.discover-section,
		.discover-quiz-card-instream,
		.dcib-stream-card,
		.connect-tile
	) {
	align-self: stretch !important;
	flex: 0 0 min(88vw, 400px) !important;
	height: auto !important;
	margin: 0 !important;
	max-height: 100% !important;
	min-height: 0 !important;
	min-width: 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	scroll-snap-align: center !important;
	scroll-snap-stop: always !important;
	transition: box-shadow .32s ease !important;
	width: min(88vw, 400px) !important;
}

/* Flatten inherited category washes so text stays readable in the focused deck. */
html body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	.discover-wrap-signal-board > .discover-section
	#discover-stream.discover-stream > :is(
		.discover-card,
		.discover-section,
		.discover-quiz-card-instream,
		.dcib-stream-card,
		.connect-tile
	) {
	background: #111827 !important;
	background-image: none !important;
	border-color: rgba(167, 139, 250, 0.22) !important;
	isolation: isolate !important;
	position: relative !important;
	z-index: 1 !important;
}

html body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	.discover-wrap-signal-board > .discover-section
	#discover-stream.discover-stream > .discover-card.discover-card-item::before {
	background: var(--stream-accent, #8b5cf6) !important;
	background-image: none !important;
}

/* Active card gets a restrained elevation without tinting its contents. */
body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	#discover-stream.discover-stream > .v5s-card-active {
	box-shadow:
		0 18px 44px -24px rgba(0, 0, 0, 0.86),
		0 0 0 1px rgba(139, 92, 246, 0.32) !important;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	#discover-stream.discover-stream .discover-card-media {
	max-height: min(42dvh, 270px);
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	#discover-stream.discover-stream .discover-card-body {
	min-height: 0;
}

/* ─── SWIPE MODE — CONTINUOUS LOADING ───────────────────────────── */
body.page-discover.v5-stream-preview.v5-stream-mode-swipe .weird-infscroll {
	bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
	display: flex !important;
	left: 50%;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	position: fixed !important;
	transform: translateX(-50%);
	width: min(86vw, 360px);
	z-index: 10025;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe .weird-infscroll-skeleton {
	display: none !important;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe .weird-infscroll-sentinel {
	display: none !important;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe .weird-infscroll-status {
	min-height: 0;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe .weird-infscroll-status:empty {
	display: none;
}

body.page-discover.v5-stream-preview.v5-stream-mode-swipe .weird-infscroll-retry {
	min-height: 44px;
	pointer-events: auto;
}

/* ─── SWIPE NAV ARROWS (injected by JS, shown on desktop) ─────────── */
body.page-discover.v5-stream-preview .v5s-nav-btn {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	align-items: center;
	background: rgba(16, 12, 28, 0.88);
	border: 1px solid rgba(139, 92, 246, 0.24);
	border-radius: 50%;
	box-shadow: 0 4px 20px -6px rgba(0, 0, 0, 0.6);
	color: rgba(176, 168, 196, 0.9);
	cursor: pointer;
	display: none; /* shown only at ≥900px via media query */
	font-size: 15px;
	height: 44px;
	justify-content: center;
	overflow: visible;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	transition:
		background .2s var(--v5s-ease),
		box-shadow .2s ease,
		color .2s var(--v5s-ease);
	width: 44px;
	z-index: 10020;
}

body.page-discover.v5-stream-preview .v5s-nav-btn:hover {
	background: rgba(139, 92, 246, 0.28);
	box-shadow: 0 6px 28px -8px rgba(139, 92, 246, 0.5);
	color: #fff;
}

body.page-discover.v5-stream-preview .v5s-nav-btn:focus-visible {
	outline: 2px solid var(--v5s-purple);
	outline-offset: 2px;
}

body.page-discover.v5-stream-preview .v5s-nav-btn:disabled {
	cursor: default;
	opacity: 0.28;
}

body.page-discover.v5-stream-preview .v5s-nav-prev {
	left: 10px;
}

body.page-discover.v5-stream-preview .v5s-nav-next {
	right: 10px;
}

/* Keyboard shortcut hint — decorative, below each arrow */
body.page-discover.v5-stream-preview .v5s-nav-btn::after {
	bottom: -18px;
	color: rgba(176, 168, 196, 0.5);
	content: attr(data-kbd);
	font-size: 9px;
	font-weight: 700;
	left: 50%;
	letter-spacing: .04em;
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}

/* ─── LIGHT MODE ─────────────────────────────────────────────────── */
html.light-mode body.page-discover.v5-stream-preview .v5s-toggle {
	background: rgba(252, 251, 255, 0.94);
	border-color: rgba(124, 58, 237, 0.18);
	box-shadow:
		0 8px 28px -12px rgba(67, 56, 202, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html.light-mode body.page-discover.v5-stream-preview
	.discover-audience .v5s-rail-label {
	color: rgba(54, 47, 83, 0.58);
}

html.light-mode body.page-discover.v5-stream-preview
	.discover-audience .v5s-rail-label-filter {
	border-left-color: rgba(124, 58, 237, 0.18);
}

html.light-mode body.page-discover.v5-stream-preview .v5s-toggle-btn {
	color: #57526e !important;
}

html.light-mode body.page-discover.v5-stream-preview .v5s-toggle-btn.is-active {
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

html.light-mode body.page-discover.v5-stream-preview .v5s-card-counter {
	background: rgba(0, 0, 0, 0.10);
	color: #57526e;
}

html.light-mode body.page-discover.v5-stream-preview
	.v5s-toggle-btn.is-active .v5s-card-counter {
	background: rgba(0, 0, 0, 0.14);
	color: #fff;
}

html.light-mode body.page-discover.v5-stream-preview
	.v5s-toggle-btn:not(.is-active) .v5s-card-counter {
	background: rgba(124, 58, 237, 0.10);
	color: #7c3aed;
}

html.light-mode body.page-discover.v5-stream-preview .v5s-nav-btn {
	background: rgba(252, 251, 255, 0.94);
	border-color: rgba(124, 58, 237, 0.16);
	color: #57526e;
}

html.light-mode body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	.discover-audience {
	background: #fff !important;
	border-color: rgba(76, 57, 118, 0.16) !important;
	box-shadow:
		0 14px 34px -24px rgba(44, 31, 85, 0.30),
		inset 0 0 0 1px rgba(255, 255, 255, 0.90) !important;
}

html.light-mode body.page-discover.v5-stream-preview.v5-stream-mode-swipe
	.discover-wrap-signal-board > .discover-section
	#discover-stream.discover-stream > :is(
		.discover-card,
		.discover-section,
		.discover-quiz-card-instream,
		.dcib-stream-card,
		.connect-tile
	) {
	background: #fff !important;
	background-image: none !important;
	border-color: rgba(76, 57, 118, 0.16) !important;
}

/* ─── RESPONSIVE: DESKTOP (≥ 900px) ────────────────────────────── */
@media (min-width: 900px) {
	/* V1.1.9: toggle is inside audience bar — no standalone top override needed */

	body.page-discover.v5-stream-preview.v5-stream-mode-swipe .discover-audience {
		left: 32px !important;
		right: 32px !important;
		top: 84px !important;
	}

	body.page-discover.v5-stream-preview.v5-stream-mode-swipe .weird-infscroll {
		bottom: 14px;
	}

	body.page-discover.v5-stream-preview.v5-stream-mode-swipe
		#discover-stream.discover-stream {
		align-items: flex-start !important;
		gap: 20px !important;
		inset: 142px 60px 32px 60px !important;
		padding: 12px calc(50% - clamp(170px, 15vw, 220px)) 20px !important;
		scroll-padding-inline: calc(50% - clamp(170px, 15vw, 220px)) !important;
		width: auto !important;
	}

	body.page-discover.v5-stream-preview.v5-stream-mode-swipe
		#discover-stream.discover-stream > :is(
			.discover-card,
			.discover-section,
			.discover-quiz-card-instream,
			.dcib-stream-card,
			.connect-tile
		) {
		align-self: flex-start !important;
		flex-basis: clamp(340px, 30vw, 440px) !important;
		width: clamp(340px, 30vw, 440px) !important;
	}

	/* Reveal nav arrows on desktop in swipe mode (JS adds v5s-nav-visible to body).
	   Class-driven so mobile media-query keeps them hidden without inline-style race. */
	body.page-discover.v5-stream-preview.v5s-nav-visible .v5s-nav-btn {
		display: flex;
	}
}

/* ─── RESPONSIVE: VERY SMALL MOBILE (≤ 350px) ───────────────────── */
/* Keep text visible when icons are hidden at very narrow widths. */
@media (max-width: 350px) {
	body.page-discover.v5-stream-preview .discover-audience.has-v5s-toggle {
		gap: 3px !important;
	}

	body.page-discover.v5-stream-preview .v5s-toggle-btn .v5s-btn-label {
		display: inline;
	}

	body.page-discover.v5-stream-preview
		.discover-audience .v5s-toggle-btn {
		gap: 0;
		min-width: 44px;
		padding: 0 5px;
	}

}

/* ─── SCROLL BEHAVIOUR (respects reduced-motion) ────────────────── */
@media (prefers-reduced-motion: no-preference) {
	body.page-discover.v5-stream-preview.v5-stream-mode-swipe
		#discover-stream.discover-stream {
		scroll-behavior: smooth;
	}
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	/* Kill toggle entrance animation */
	body.page-discover.v5-stream-preview .v5s-toggle {
		animation: none;
	}

	/* Kill button hover/state transitions */
	body.page-discover.v5-stream-preview .v5s-toggle-btn,
	body.page-discover.v5-stream-preview .v5s-nav-btn {
		transition: none;
	}

}