From eab796dca9784488df46c0b4d17a0423f756abaa Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Fri, 13 Mar 2026 12:35:39 -0500
Subject: [PATCH 1/6] feat: show rank change as tappable toast instead of
 auto-modal

Replace the auto-opening clout change modal with a persistent toast
at the top of the screen showing the new rank icon and message.
Tapping the toast opens the full modal. Removes the 3-day server-side
cooldown so rank changes are reported immediately.
---
 src/lib/components/ToastStack.svelte | 51 ++++++++++++++++++++++------
 src/lib/stores/toasts.ts             |  8 +++--
 src/routes/(app)/+layout.svelte      | 15 ++++++--
 src/routes/api/clout/+server.ts      | 21 ++++--------
 4 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/ToastStack.svelte b/src/lib/components/ToastStack.svelte
index 7aa8f36..64a8e1b 100644
--- a/src/lib/components/ToastStack.svelte
+++ b/src/lib/components/ToastStack.svelte
@@ -207,6 +207,13 @@
 		handleDismiss(toast.id);
 	}
 
+	function handleTap(toast: Toast) {
+		if (toast.onTap) {
+			toast.onTap();
+			handleDismiss(toast.id);
+		}
+	}
+
 	let dismissingIds = $state(new Set<string>());
 
 	function handleDismiss(id: string) {
@@ -237,24 +244,30 @@
 		{#each $toasts as toast (toast.id)}
 			<div
 				class="toast toast-{toast.type}"
+				class:tappable={toast.type === 'rank_change'}
 				class:dismissing={dismissingIds.has(toast.id)}
 				role="alert"
+				onclick={toast.type === 'rank_change' ? () => handleTap(toast) : undefined}
 				ontouchstart={(e) => onSwipeStart(e, toast.id)}
 				ontouchmove={(e) => onSwipeMove(e, toast.id)}
 				ontouchend={() => onSwipeEnd(toast.id)}
 				ontouchcancel={() => onSwipeEnd(toast.id)}
 			>
-				<div class="toast-icon">
-					{#if toast.type === 'processing'}
-						<div class="spinner-ring"></div>
-					{:else if toast.type === 'success'}
-						<CheckIcon size={16} weight="bold" />
-					{:else if toast.type === 'info'}
-						<InfoIcon size={16} />
-					{:else}
-						<XCircleIcon size={16} />
-					{/if}
-				</div>
+				{#if toast.type === 'rank_change' && toast.rankIcon}
+					<img src={toast.rankIcon} alt="" class="toast-rank-icon" />
+				{:else}
+					<div class="toast-icon">
+						{#if toast.type === 'processing'}
+							<div class="spinner-ring"></div>
+						{:else if toast.type === 'success'}
+							<CheckIcon size={16} weight="bold" />
+						{:else if toast.type === 'info'}
+							<InfoIcon size={16} />
+						{:else}
+							<XCircleIcon size={16} />
+						{/if}
+					</div>
+				{/if}
 				<span class="toast-message">{toast.message}</span>
 				{#if toast.type === 'success' && toast.clipId}
 					<button class="toast-view" onclick={() => handleView(toast)}>View</button>
@@ -355,6 +368,22 @@
 		background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
 	}
 
+	.toast-rank_change {
+		background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-elevated));
+		cursor: pointer;
+	}
+
+	.toast-rank-icon {
+		width: 32px;
+		height: 32px;
+		object-fit: contain;
+		flex-shrink: 0;
+	}
+
+	.toast.tappable:active {
+		transform: scale(0.97);
+	}
+
 	.toast-message {
 		flex: 1;
 		min-width: 0;
diff --git a/src/lib/stores/toasts.ts b/src/lib/stores/toasts.ts
index 5a60f3d..d5428d1 100644
--- a/src/lib/stores/toasts.ts
+++ b/src/lib/stores/toasts.ts
@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 
-export type ToastType = 'processing' | 'success' | 'error' | 'info';
+export type ToastType = 'processing' | 'success' | 'error' | 'info' | 'rank_change';
 
 export interface Toast {
 	id: string;
@@ -10,6 +10,9 @@ export interface Toast {
 	contentType?: string;
 	autoDismiss?: number;
 	createdAt: number;
+	/** Rank change toast data */
+	rankIcon?: string;
+	onTap?: () => void;
 }
 
 export const toasts = writable<Toast[]>([]);
@@ -23,7 +26,8 @@ const DEFAULT_DISMISS: Record<ToastType, number> = {
 	success: 3000,
 	error: 4000,
 	info: 3000,
-	processing: 0
+	processing: 0,
+	rank_change: 0
 };
 
 export function addToast(toast: Omit<Toast, 'id' | 'createdAt'>): string {
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 4ace849..a3c93d6 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -13,6 +13,7 @@
 	import { feedUiHidden } from '$lib/stores/uiHidden';
 	import { fetchGroupMembers } from '$lib/stores/members';
 	import { cloutChange } from '$lib/stores/cloutChange';
+	import { addToast } from '$lib/stores/toasts';
 	import ActivitySheet from '$lib/components/ActivitySheet.svelte';
 	import QueueSheet from '$lib/components/QueueSheet.svelte';
 	import AddVideoModal from '$lib/components/AddVideoModal.svelte';
@@ -41,6 +42,8 @@
 		iconic: 'Iconic'
 	};
 
+	const TIER_ORDER = ['fresh', 'rising', 'viral', 'iconic'];
+
 	async function checkCloutTier() {
 		try {
 			const res = await fetch('/api/clout');
@@ -48,9 +51,9 @@
 			const data = await res.json();
 			if (!data.enabled) return;
 
-			// Server tells us if a tier change modal should be shown (3-day cooldown)
 			if (data.tierChanged && data.lastTier) {
-				cloutChange.set({
+				const isRankUp = TIER_ORDER.indexOf(data.tier) > TIER_ORDER.indexOf(data.lastTier);
+				const changeData = {
 					previousTier: data.lastTier,
 					newTier: data.tier,
 					previousTierName: TIER_NAMES[data.lastTier] ?? data.lastTier,
@@ -58,7 +61,15 @@
 					cooldownMinutes: data.cooldownMinutes,
 					burstSize: data.burstSize,
 					queueLimit: data.queueLimit ?? null
+				};
+
+				addToast({
+					type: 'rank_change',
+					message: isRankUp ? 'You ranked up!' : 'Your rank changed',
+					rankIcon: data.icon,
+					onTap: () => cloutChange.set(changeData)
 				});
+
 				// Acknowledge so it won't show again on other devices
 				fetch('/api/clout', { method: 'POST' }).catch(() => {});
 			}
diff --git a/src/routes/api/clout/+server.ts b/src/routes/api/clout/+server.ts
index b6192e0..762315a 100644
--- a/src/routes/api/clout/+server.ts
+++ b/src/routes/api/clout/+server.ts
@@ -7,8 +7,6 @@ import { users } from '$lib/server/db/schema';
 import { eq } from 'drizzle-orm';
 import { dev } from '$app/environment';
 
-const MODAL_COOLDOWN_MS = 3 * 24 * 60 * 60 * 1000; // 3 days
-
 export const GET: RequestHandler = withAuth(async (event, { user, group }) => {
 	if (group.sharePacingMode !== 'queue' || !group.cloutEnabled) {
 		return json({ enabled: false });
@@ -42,22 +40,16 @@ export const GET: RequestHandler = withAuth(async (event, { user, group }) => {
 			thumbnailPath: b.thumbnailPath
 		}));
 
-	// Determine if a tier change modal should be shown.
-	// cloutTier tracks the last tier the user was NOTIFIED about (updated on POST ack).
-	// This means if a change is suppressed by cooldown, it's preserved until the
-	// cooldown expires — then the modal shows the accumulated change.
+	// Determine if a tier change should be reported.
+	// No cooldown — every change triggers a toast immediately.
 	const lastAckedTier = user.cloutTier;
-	const lastShownAt = user.cloutChangeShownAt;
 	let tierChanged = false;
 
 	if (!lastAckedTier) {
-		// First time — seed the tier silently (no modal on first load)
+		// First time — seed the tier silently (no notification on first load)
 		db.update(users).set({ cloutTier: result.tier }).where(eq(users.id, user.id)).run();
 	} else if (lastAckedTier !== result.tier) {
-		const cooldownElapsed = !lastShownAt || Date.now() - lastShownAt.getTime() >= MODAL_COOLDOWN_MS;
-		tierChanged = cooldownElapsed;
-		// Don't update cloutTier here — only on POST ack, so the change persists
-		// until the user actually sees the modal
+		tierChanged = true;
 	}
 
 	return json({
@@ -87,9 +79,8 @@ export const GET: RequestHandler = withAuth(async (event, { user, group }) => {
 	});
 });
 
-/** Acknowledge that the tier change modal was shown. Updates both the
- *  last-shown timestamp (cooldown) and the acked tier so future checks
- *  compare against the tier the user was actually notified about. */
+/** Acknowledge that the tier change was seen. Updates the acked tier so
+ *  future checks compare against the tier the user was notified about. */
 export const POST: RequestHandler = withAuth(async (_event, { user, group }) => {
 	// Recompute current tier so we store the accurate value
 	const result = getCloutScore(user.id, user.groupId, group.shareCooldownMinutes);

From f4da4d53e710e18b574f3cfc051b26e62b00983e Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Fri, 13 Mar 2026 12:35:53 -0500
Subject: [PATCH 2/6] fix: include tier name in rank change toast message

---
 src/routes/(app)/+layout.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index a3c93d6..64eccd8 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -65,7 +65,9 @@
 
 				addToast({
 					type: 'rank_change',
-					message: isRankUp ? 'You ranked up!' : 'Your rank changed',
+					message: isRankUp
+						? `You ranked up to ${data.tierName}!`
+						: `Your rank changed to ${data.tierName}`,
 					rankIcon: data.icon,
 					onTap: () => cloutChange.set(changeData)
 				});

From 4cde17370b8e53c10f17974102a53944c4217775 Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Fri, 13 Mar 2026 13:21:58 -0500
Subject: [PATCH 3/6] feat: improve rank change toast with centered tier name
 display

---
 src/lib/components/ToastStack.svelte | 19 ++++++++++++++++++-
 src/lib/stores/toasts.ts             |  1 +
 src/routes/(app)/+layout.svelte      |  5 ++---
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ToastStack.svelte b/src/lib/components/ToastStack.svelte
index 64a8e1b..5481c90 100644
--- a/src/lib/components/ToastStack.svelte
+++ b/src/lib/components/ToastStack.svelte
@@ -255,6 +255,10 @@
 			>
 				{#if toast.type === 'rank_change' && toast.rankIcon}
 					<img src={toast.rankIcon} alt="" class="toast-rank-icon" />
+					<span class="toast-message toast-message-rank">
+						{toast.message}
+						{#if toast.rankTierName}<strong>{toast.rankTierName}</strong>{/if}
+					</span>
 				{:else}
 					<div class="toast-icon">
 						{#if toast.type === 'processing'}
@@ -267,8 +271,8 @@
 							<XCircleIcon size={16} />
 						{/if}
 					</div>
+					<span class="toast-message">{toast.message}</span>
 				{/if}
-				<span class="toast-message">{toast.message}</span>
 				{#if toast.type === 'success' && toast.clipId}
 					<button class="toast-view" onclick={() => handleView(toast)}>View</button>
 				{/if}
@@ -371,6 +375,19 @@
 	.toast-rank_change {
 		background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-elevated));
 		cursor: pointer;
+		justify-content: center;
+	}
+
+	.toast-message-rank {
+		text-align: center;
+	}
+
+	.toast-message-rank strong {
+		display: block;
+		font-family: var(--font-display);
+		font-weight: 700;
+		font-size: 1rem;
+		color: var(--accent-primary);
 	}
 
 	.toast-rank-icon {
diff --git a/src/lib/stores/toasts.ts b/src/lib/stores/toasts.ts
index d5428d1..5b1237f 100644
--- a/src/lib/stores/toasts.ts
+++ b/src/lib/stores/toasts.ts
@@ -12,6 +12,7 @@ export interface Toast {
 	createdAt: number;
 	/** Rank change toast data */
 	rankIcon?: string;
+	rankTierName?: string;
 	onTap?: () => void;
 }
 
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 64eccd8..b46d8a3 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -65,10 +65,9 @@
 
 				addToast({
 					type: 'rank_change',
-					message: isRankUp
-						? `You ranked up to ${data.tierName}!`
-						: `Your rank changed to ${data.tierName}`,
+					message: isRankUp ? 'You ranked up!' : 'Your rank changed',
 					rankIcon: data.icon,
+					rankTierName: data.tierName,
 					onTap: () => cloutChange.set(changeData)
 				});
 

From 2d72410ec8bf75536728009f0a1ac61a4b6a5f50 Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Fri, 13 Mar 2026 13:23:45 -0500
Subject: [PATCH 4/6] feat: rework clout tips view with tappable tiers and
 engagement framing

---
 src/lib/components/CloutChangeModal.svelte |   4 +-
 src/lib/components/CloutTipsView.svelte    | 408 +++++++++++++--------
 src/routes/api/clout/+server.ts            |   1 +
 3 files changed, 265 insertions(+), 148 deletions(-)

diff --git a/src/lib/components/CloutChangeModal.svelte b/src/lib/components/CloutChangeModal.svelte
index d68161a..e8b89b7 100644
--- a/src/lib/components/CloutChangeModal.svelte
+++ b/src/lib/components/CloutChangeModal.svelte
@@ -175,7 +175,8 @@
 				tipsData = {
 					nextTier: data.nextTier,
 					underperforming: data.underperforming ?? [],
-					breakdown: data.breakdown ?? []
+					breakdown: data.breakdown ?? [],
+					baseCooldownMinutes: data.baseCooldownMinutes ?? 120
 				};
 			}
 		} catch {
@@ -318,6 +319,7 @@
 					nextTier={tipsData.nextTier}
 					underperforming={tipsData.underperforming}
 					breakdown={tipsData.breakdown}
+					baseCooldownMinutes={tipsData.baseCooldownMinutes}
 					ondismiss={dismiss}
 				/>
 			{/if}
diff --git a/src/lib/components/CloutTipsView.svelte b/src/lib/components/CloutTipsView.svelte
index e7f0f5d..87c4cda 100644
--- a/src/lib/components/CloutTipsView.svelte
+++ b/src/lib/components/CloutTipsView.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
+	import { slide } from 'svelte/transition';
 	import { basename } from '$lib/utils';
 	import PlatformIcon from './PlatformIcon.svelte';
+	import MinusCircleIcon from 'phosphor-svelte/lib/MinusCircleIcon';
+	import ThumbsUpIcon from 'phosphor-svelte/lib/ThumbsUpIcon';
+	import FireIcon from 'phosphor-svelte/lib/FireIcon';
 
 	const TIER_INFO: Record<string, { label: string; icon: string }> = {
 		fresh: { label: 'Fresh', icon: '/icons/clout/fresh.png' },
@@ -11,6 +15,30 @@
 
 	const TIER_ORDER = ['fresh', 'rising', 'viral', 'iconic'];
 
+	const TIER_ABILITIES: Record<
+		string,
+		{ burst: number; cooldownMultiplier: number; queueLimit: number | null }
+	> = {
+		fresh: { burst: 1, cooldownMultiplier: 3.0, queueLimit: 6 },
+		rising: { burst: 2, cooldownMultiplier: 2.0, queueLimit: 10 },
+		viral: { burst: 3, cooldownMultiplier: 1.0, queueLimit: null },
+		iconic: { burst: 5, cooldownMultiplier: 0.5, queueLimit: null }
+	};
+
+	let selectedTier = $state<string | null>(null);
+	let showUnderperforming = $state(false);
+
+	// Auto-select current tier on load
+	$effect(() => {
+		if (selectedTier === null) {
+			selectedTier = currentTier;
+		}
+	});
+
+	function toggleTier(tier: string) {
+		selectedTier = selectedTier === tier ? null : tier;
+	}
+
 	interface Underperformer {
 		clipId: string;
 		title: string | null;
@@ -33,15 +61,23 @@
 		nextTier,
 		underperforming,
 		breakdown,
+		baseCooldownMinutes = 120,
 		ondismiss
 	}: {
 		currentTier: string;
 		nextTier: NextTierInfo | null;
 		underperforming: Underperformer[];
 		breakdown: { clipId: string; score: number }[];
+		baseCooldownMinutes?: number;
 		ondismiss: () => void;
 	} = $props();
 
+	function formatCooldown(minutes: number): string {
+		if (minutes < 60) return `${minutes}m`;
+		const h = Math.round(minutes / 60);
+		return `${h}h`;
+	}
+
 	const neededUpgrades = $derived.by(() => {
 		if (!nextTier || !breakdown.length) return 0;
 		const total = breakdown.reduce((s, b) => s + b.score, 0);
@@ -71,18 +107,27 @@
 					{@const isCurrent = i === currentIdx}
 					{@const isNext = i === nextIdx}
 					{@const isPast = i < currentIdx}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<div
 						class="tier-step"
 						class:current={isCurrent}
 						class:next={isNext}
 						class:past={isPast}
 						class:future={i > nextIdx}
+						class:selected={selectedTier === tier}
+						onclick={() => toggleTier(tier)}
 					>
-						<img
-							src={TIER_INFO[tier]?.icon ?? ''}
-							alt={TIER_INFO[tier]?.label ?? ''}
-							class="step-icon"
-						/>
+						<div class="step-icon-wrap">
+							<img
+								src={TIER_INFO[tier]?.icon ?? ''}
+								alt={TIER_INFO[tier]?.label ?? ''}
+								class="step-icon"
+							/>
+							{#if isCurrent}
+								<span class="you-badge">YOU</span>
+							{/if}
+						</div>
 						<span class="step-label">{TIER_INFO[tier]?.label}</span>
 					</div>
 					{#if i < TIER_ORDER.length - 1}
@@ -94,6 +139,29 @@
 					{/if}
 				{/each}
 			</div>
+			{#if selectedTier}
+				{@const abilities = TIER_ABILITIES[selectedTier]}
+				<div class="tier-abilities">
+					<div class="ability">
+						<span class="ability-value">{abilities.burst}</span>
+						<span class="ability-label">per burst</span>
+					</div>
+					<div class="ability-divider"></div>
+					<div class="ability">
+						<span class="ability-value"
+							>{formatCooldown(
+								Math.round(baseCooldownMinutes * abilities.cooldownMultiplier)
+							)}</span
+						>
+						<span class="ability-label">cooldown</span>
+					</div>
+					<div class="ability-divider"></div>
+					<div class="ability">
+						<span class="ability-value">{abilities.queueLimit ?? '∞'}</span>
+						<span class="ability-label">queue depth</span>
+					</div>
+				</div>
+			{/if}
 			{#if neededUpgrades > 0}
 				<p class="target-distance">
 					{neededUpgrades} clip{neededUpgrades === 1 ? '' : 's'} need better engagement to reach
@@ -103,34 +171,22 @@
 		</div>
 
 		<div class="tips-section">
-			<span class="section-label">How scoring works</span>
-			<div class="score-grid">
-				<div class="score-row">
-					<span class="score-badge score-0">0<span class="score-unit">pts</span></span>
-					<span class="score-desc">No reactions or favorites</span>
+			<span class="section-label">How ranking works</span>
+			<div class="score-columns">
+				<div class="score-col score-0">
+					<span class="score-icon"><MinusCircleIcon size={20} /></span>
+					<span class="score-title">Nothing</span>
+					<span class="score-sub">No engagement</span>
 				</div>
-				<div class="score-row">
-					<span class="score-badge score-1">1<span class="score-unit">pt</span></span>
-					<span class="score-desc">Got a reaction or favorite</span>
+				<div class="score-col score-1">
+					<span class="score-icon"><ThumbsUpIcon size={20} weight="fill" /></span>
+					<span class="score-title">Reaction</span>
+					<span class="score-sub">Or a favorite</span>
 				</div>
-				<div class="score-row">
-					<span class="score-badge score-2">2<span class="score-unit">pts</span></span>
-					<span class="score-desc">Reaction/fave <strong>and</strong> a comment</span>
-				</div>
-			</div>
-		</div>
-
-		<div class="tips-section">
-			<span class="section-label">At {nextTier.tierName} you'll get</span>
-			<div class="perks-row">
-				<div class="perk">
-					<span class="perk-value">{nextTier.burst}</span>
-					<span class="perk-label">per burst</span>
-				</div>
-				<div class="perk-divider"></div>
-				<div class="perk">
-					<span class="perk-value">{nextTier.queueLimit ?? '∞'}</span>
-					<span class="perk-label">{nextTier.queueLimit ? 'max queued' : 'queue depth'}</span>
+				<div class="score-col score-2">
+					<span class="score-icon"><FireIcon size={20} weight="fill" /></span>
+					<span class="score-title">Both</span>
+					<span class="score-sub">Reaction + comment</span>
 				</div>
 			</div>
 		</div>
@@ -151,25 +207,30 @@
 
 	{#if underperforming.length > 0}
 		<div class="underperforming">
-			<span class="section-label">Dragging your score down</span>
-			<div class="clip-carousel">
-				{#each underperforming.slice(0, 8) as clip (clip.clipId)}
-					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-					<a class="clip-card" href="/?clip={clip.clipId}" onclick={ondismiss}>
-						<div class="clip-thumb">
-							{#if clip.thumbnailPath}
-								<img src="/api/thumbnails/{basename(clip.thumbnailPath)}" alt="" />
-							{:else}
-								<div class="thumb-placeholder">
-									<PlatformIcon platform={clip.platform} size={20} />
-								</div>
-							{/if}
-							<div class="thumb-score">0</div>
-						</div>
-						<span class="clip-caption">{clipTitle(clip)}</span>
-					</a>
-				{/each}
-			</div>
+			<button class="expand-toggle" onclick={() => (showUnderperforming = !showUnderperforming)}>
+				<span class="expand-label">Dragging your rank down</span>
+				<span class="expand-count">{underperforming.length}</span>
+				<span class="expand-chevron" class:open={showUnderperforming}>‹</span>
+			</button>
+			{#if showUnderperforming}
+				<div class="clip-carousel" transition:slide={{ duration: 250 }}>
+					{#each underperforming.slice(0, 8) as clip (clip.clipId)}
+						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+						<a class="clip-card" href="/?clip={clip.clipId}" onclick={ondismiss}>
+							<div class="clip-thumb">
+								{#if clip.thumbnailPath}
+									<img src="/api/thumbnails/{basename(clip.thumbnailPath)}" alt="" />
+								{:else}
+									<div class="thumb-placeholder">
+										<PlatformIcon platform={clip.platform} size={20} />
+									</div>
+								{/if}
+							</div>
+							<span class="clip-caption">{clipTitle(clip)}</span>
+						</a>
+					{/each}
+				</div>
+			{/if}
 		</div>
 	{/if}
 </div>
@@ -178,8 +239,6 @@
 	.tips-view {
 		text-align: left;
 	}
-
-	/* Tier progression track */
 	.target-card {
 		background: var(--bg-elevated);
 		border-radius: var(--radius-md);
@@ -200,25 +259,42 @@
 		gap: var(--space-xs);
 		opacity: 0.3;
 		transition: opacity 0.2s ease;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
 	}
 	.tier-step.past {
 		opacity: 0.5;
 	}
-	.tier-step.current {
+	.tier-step.current,
+	.tier-step.selected {
 		opacity: 1;
 	}
 	.tier-step.next {
 		opacity: 0.8;
 	}
+	.step-icon-wrap {
+		position: relative;
+		margin-bottom: var(--space-sm);
+	}
 	.step-icon {
 		width: 36px;
 		height: 36px;
 		object-fit: contain;
+		transition: transform 0.15s ease;
 	}
-	.tier-step.current .step-icon {
-		width: 44px;
-		height: 44px;
-		filter: drop-shadow(0 0 8px var(--accent-primary));
+	.you-badge {
+		position: absolute;
+		bottom: -8px;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 0.4375rem;
+		font-weight: 800;
+		letter-spacing: 0.06em;
+		color: var(--text-muted);
+		background: var(--bg-surface);
+		padding: 0 3px;
+		border-radius: var(--radius-full);
+		line-height: 1.5;
 	}
 	.step-label {
 		font-size: 0.625rem;
@@ -228,13 +304,62 @@
 		color: var(--text-muted);
 	}
 	.tier-step.current .step-label {
-		color: var(--accent-primary);
+		color: var(--text-muted);
 		font-weight: 700;
 	}
 	.tier-step.next .step-label {
 		color: var(--text-secondary);
 	}
-
+	.tier-step.selected .step-icon {
+		transform: scale(1.15);
+	}
+	.tier-step.selected .step-label {
+		color: var(--accent-primary);
+		font-weight: 700;
+	}
+	.tier-abilities {
+		display: flex;
+		align-items: center;
+		background: var(--bg-surface);
+		border-radius: var(--radius-sm);
+		padding: var(--space-sm) var(--space-md);
+		margin-top: var(--space-sm);
+		animation: abilities-in 0.15s ease-out;
+	}
+	@keyframes abilities-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	.ability {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1px;
+	}
+	.ability-value {
+		font-family: var(--font-display);
+		font-size: 1.125rem;
+		font-weight: 800;
+		color: var(--text-primary);
+		letter-spacing: -0.02em;
+	}
+	.ability-label {
+		font-size: 0.625rem;
+		color: var(--text-muted);
+		font-weight: 500;
+	}
+	.ability-divider {
+		width: 1px;
+		height: 24px;
+		background: var(--border);
+	}
 	.tier-connector {
 		width: 24px;
 		height: 2px;
@@ -248,9 +373,23 @@
 		opacity: 0.5;
 	}
 	.tier-connector.active {
-		background: linear-gradient(90deg, var(--accent-primary), var(--border));
+		background: linear-gradient(
+			90deg,
+			var(--accent-primary) 0%,
+			var(--border) 50%,
+			var(--accent-primary) 100%
+		);
+		background-size: 200% 100%;
+		animation: connector-shimmer 2s ease-in-out infinite;
+	}
+	@keyframes connector-shimmer {
+		0% {
+			background-position: 100% 0;
+		}
+		100% {
+			background-position: -100% 0;
+		}
 	}
-
 	.target-distance {
 		font-size: 0.8125rem;
 		color: var(--text-secondary);
@@ -261,8 +400,6 @@
 	.target-distance strong {
 		color: var(--text-primary);
 	}
-
-	/* Section shared label */
 	.section-label {
 		font-size: 0.6875rem;
 		font-weight: 600;
@@ -272,96 +409,47 @@
 		display: block;
 		margin-bottom: var(--space-sm);
 	}
-
-	/* Scoring breakdown */
 	.tips-section {
 		margin-bottom: var(--space-lg);
 	}
-	.score-grid {
-		display: flex;
-		flex-direction: column;
+	.score-columns {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
 		gap: var(--space-xs);
 	}
-	.score-row {
+	.score-col {
 		display: flex;
+		flex-direction: column;
 		align-items: center;
-		gap: var(--space-md);
-		padding: var(--space-sm) var(--space-md);
+		gap: 2px;
+		padding: var(--space-md) var(--space-xs);
 		background: var(--bg-elevated);
 		border-radius: var(--radius-sm);
+		text-align: center;
 	}
-	.score-badge {
-		width: 28px;
-		height: 28px;
-		border-radius: var(--radius-full);
+	.score-icon {
 		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 0.8125rem;
-		font-weight: 700;
-		flex-shrink: 0;
+		margin-bottom: 2px;
 	}
-	.score-unit {
-		font-size: 0.5rem;
-		font-weight: 600;
-		opacity: 0.7;
-		margin-left: 1px;
-	}
-	.score-0 {
-		background: var(--bg-subtle);
+	.score-0 .score-icon {
 		color: var(--text-muted);
 	}
-	.score-1 {
-		background: color-mix(in srgb, var(--accent-blue) 20%, transparent);
+	.score-1 .score-icon {
 		color: var(--accent-blue);
 	}
-	.score-2 {
-		background: color-mix(in srgb, var(--accent-primary) 20%, transparent);
+	.score-2 .score-icon {
 		color: var(--accent-primary);
 	}
-	.score-desc {
-		font-size: 0.8125rem;
-		color: var(--text-secondary);
-		line-height: 1.3;
-	}
-	.score-desc strong {
-		color: var(--text-primary);
-	}
-
-	/* Perks row */
-	.perks-row {
-		display: flex;
-		align-items: center;
-		background: var(--bg-elevated);
-		border-radius: var(--radius-sm);
-		padding: var(--space-md) var(--space-lg);
-	}
-	.perk {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 2px;
-	}
-	.perk-value {
-		font-family: var(--font-display);
-		font-size: 1.5rem;
-		font-weight: 800;
+	.score-title {
+		font-size: 0.75rem;
+		font-weight: 700;
 		color: var(--text-primary);
-		letter-spacing: -0.02em;
 	}
-	.perk-label {
-		font-size: 0.6875rem;
+	.score-sub {
+		font-size: 0.625rem;
 		color: var(--text-muted);
-		font-weight: 500;
-	}
-	.perk-divider {
-		width: 1px;
-		height: 32px;
-		background: var(--border);
+		line-height: 1.3;
 	}
-
-	/* At-top state (iconic tier) */
 	.at-top-state {
 		text-align: center;
 		padding: var(--space-lg) 0 var(--space-xl);
@@ -378,7 +466,8 @@
 		animation: float-orbit 4s ease-in-out infinite;
 	}
 	@keyframes float-orbit {
-		0% {
+		0%,
+		100% {
 			transform: translate(0, 0);
 			filter: drop-shadow(0 0 16px var(--accent-primary));
 		}
@@ -394,10 +483,6 @@
 			transform: translate(-4px, -6px);
 			filter: drop-shadow(0 0 22px var(--accent-primary));
 		}
-		100% {
-			transform: translate(0, 0);
-			filter: drop-shadow(0 0 16px var(--accent-primary));
-		}
 	}
 	.at-top-title {
 		font-family: var(--font-display);
@@ -414,8 +499,6 @@
 		max-width: 260px;
 		margin-inline: auto;
 	}
-
-	/* Underperforming clips */
 	.underperforming {
 		border-top: 1px solid var(--border);
 		padding-top: var(--space-lg);
@@ -464,21 +547,52 @@
 		justify-content: center;
 		color: var(--text-muted);
 	}
-	.thumb-score {
-		position: absolute;
-		top: var(--space-xs);
-		right: var(--space-xs);
-		width: 20px;
-		height: 20px;
-		border-radius: var(--radius-full);
-		background: rgba(0, 0, 0, 0.7);
-		backdrop-filter: blur(4px);
+	.expand-toggle {
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		gap: var(--space-sm);
+		width: calc(100% - var(--space-xl));
+		padding: var(--space-sm) var(--space-md);
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+		margin-bottom: var(--space-sm);
+	}
+	.expand-toggle:active {
+		background: var(--bg-surface);
+	}
+	.expand-label {
+		font-size: 0.6875rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--text-muted);
+	}
+	.expand-count {
 		font-size: 0.625rem;
 		font-weight: 700;
 		color: var(--text-muted);
+		background: var(--bg-surface);
+		min-width: 18px;
+		height: 18px;
+		border-radius: var(--radius-full);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 4px;
+	}
+	.expand-chevron {
+		font-size: 0.875rem;
+		color: var(--text-muted);
+		transition: transform 0.25s ease;
+		transform: rotate(-90deg);
+		margin-left: auto;
+	}
+	.expand-chevron.open {
+		transform: rotate(0deg);
 	}
 	.clip-caption {
 		font-size: 0.6875rem;
diff --git a/src/routes/api/clout/+server.ts b/src/routes/api/clout/+server.ts
index 762315a..927ed75 100644
--- a/src/routes/api/clout/+server.ts
+++ b/src/routes/api/clout/+server.ts
@@ -73,6 +73,7 @@ export const GET: RequestHandler = withAuth(async (event, { user, group }) => {
 					icon: nextTier.config.icon
 				}
 			: null,
+		baseCooldownMinutes: group.shareCooldownMinutes,
 		underperforming,
 		lastTier: lastAckedTier ?? null,
 		tierChanged

From af186f7aa2fafe3cd2b8aa0f9dfd88c602962cb2 Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Fri, 13 Mar 2026 13:23:53 -0500
Subject: [PATCH 5/6] feat: add desktop phone frame for wide viewports

---
 src/routes/+layout.svelte | 89 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 82 insertions(+), 7 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5265e8a..4c2e924 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -113,12 +113,16 @@
 	});
 </script>
 
-{@render children()}
-<ToastStack />
-<ConfirmDialog />
-<InstallBanner />
-<SwUpdateToast />
-<CloutChangeModal />
+<div class="desktop-frame">
+	<div class="desktop-frame-inner">
+		{@render children()}
+		<ToastStack />
+		<ConfirmDialog />
+		<InstallBanner />
+		<SwUpdateToast />
+		<CloutChangeModal />
+	</div>
+</div>
 
 <style>
 	:global(*, *::before, *::after) {
@@ -274,12 +278,20 @@
 	}
 
 	/* Feed context: override body background so the iOS black-translucent status bar
-	   shows the reel bg color rather than the light-mode white */
+	   shows the reel bg color rather than the light-mode white.
+	   On desktop (640px+), the outer body keeps its subtle bg and only the frame is dark. */
 	:global(html.feed-context),
 	:global(html.feed-context body) {
 		background: var(--reel-bg);
 	}
 
+	@media (min-width: 640px) {
+		:global(html.feed-context),
+		:global(html.feed-context body) {
+			background: var(--bg-subtle);
+		}
+	}
+
 	:global(body) {
 		margin: 0;
 		background: var(--bg-primary);
@@ -298,6 +310,69 @@
 		user-select: text;
 	}
 
+	/* Desktop frame: constrain app to phone-like container on wide viewports */
+	.desktop-frame {
+		display: contents;
+	}
+
+	.desktop-frame-inner {
+		display: contents;
+	}
+
+	@media (min-width: 640px) {
+		:global(body) {
+			background: var(--bg-elevated);
+		}
+
+		.desktop-frame {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			min-height: 100dvh;
+			padding: var(--space-xl) 0;
+			background:
+				radial-gradient(
+					ellipse at 20% 20%,
+					color-mix(in srgb, var(--accent-primary) 8%, transparent) 0%,
+					transparent 60%
+				),
+				radial-gradient(
+					ellipse at 80% 80%,
+					color-mix(in srgb, var(--accent-magenta) 6%, transparent) 0%,
+					transparent 60%
+				),
+				var(--bg-elevated);
+		}
+
+		.desktop-frame-inner {
+			display: block;
+			position: relative;
+			width: 390px;
+			max-height: min(850px, calc(100dvh - 3rem));
+			height: calc(100dvh - 3rem);
+			border-radius: var(--radius-xl);
+			overflow: clip;
+			background: var(--bg-primary);
+			box-shadow:
+				0 8px 40px rgba(0, 0, 0, 0.25),
+				0 0 0 0.5px rgba(255, 255, 255, 0.08);
+			/* Creates a containing block for position:fixed descendants,
+			   so all modals/sheets/toasts stay within the phone frame */
+			contain: paint;
+		}
+
+		/* Override app shell to fill the frame instead of the viewport */
+		.desktop-frame-inner :global(.app-shell) {
+			height: 100%;
+			min-height: unset;
+			overflow: hidden;
+		}
+
+		.desktop-frame-inner :global(main) {
+			overflow-y: auto;
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		:global(*, *::before, *::after) {
 			animation-duration: 0.01ms !important;

From 5e4f5a50d9b6766aa3265aa4efbf8827a2c4c26d Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Fri, 13 Mar 2026 13:30:03 -0500
Subject: [PATCH 6/6] refactor: extract UnderperformingClips component and fix
 type error

---
 src/lib/components/CloutChangeModal.svelte    |   1 +
 src/lib/components/CloutTipsView.svelte       | 162 +-----------------
 .../components/UnderperformingClips.svelte    | 160 +++++++++++++++++
 3 files changed, 165 insertions(+), 158 deletions(-)
 create mode 100644 src/lib/components/UnderperformingClips.svelte

diff --git a/src/lib/components/CloutChangeModal.svelte b/src/lib/components/CloutChangeModal.svelte
index e8b89b7..94b9012 100644
--- a/src/lib/components/CloutChangeModal.svelte
+++ b/src/lib/components/CloutChangeModal.svelte
@@ -38,6 +38,7 @@
 		nextTier: NextTierInfo | null;
 		underperforming: Underperformer[];
 		breakdown: { clipId: string; score: number }[];
+		baseCooldownMinutes: number;
 	} | null>(null);
 	let tipsLoading = $state(false);
 
diff --git a/src/lib/components/CloutTipsView.svelte b/src/lib/components/CloutTipsView.svelte
index 87c4cda..6011116 100644
--- a/src/lib/components/CloutTipsView.svelte
+++ b/src/lib/components/CloutTipsView.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { slide } from 'svelte/transition';
-	import { basename } from '$lib/utils';
-	import PlatformIcon from './PlatformIcon.svelte';
+	import UnderperformingClips from './UnderperformingClips.svelte';
 	import MinusCircleIcon from 'phosphor-svelte/lib/MinusCircleIcon';
 	import ThumbsUpIcon from 'phosphor-svelte/lib/ThumbsUpIcon';
 	import FireIcon from 'phosphor-svelte/lib/FireIcon';
@@ -26,7 +24,6 @@
 	};
 
 	let selectedTier = $state<string | null>(null);
-	let showUnderperforming = $state(false);
 
 	// Auto-select current tier on load
 	$effect(() => {
@@ -46,7 +43,6 @@
 		originalUrl: string;
 		thumbnailPath: string | null;
 	}
-
 	interface NextTierInfo {
 		tier: string;
 		tierName: string;
@@ -86,15 +82,6 @@
 		const needed = Math.ceil(targetAvg * count) - total;
 		return Math.max(0, needed);
 	});
-
-	function clipTitle(clip: Underperformer): string {
-		if (clip.title) return clip.title;
-		try {
-			return new URL(clip.originalUrl).hostname;
-		} catch {
-			return clip.originalUrl;
-		}
-	}
 </script>
 
 <div class="tips-view">
@@ -206,32 +193,7 @@
 	{/if}
 
 	{#if underperforming.length > 0}
-		<div class="underperforming">
-			<button class="expand-toggle" onclick={() => (showUnderperforming = !showUnderperforming)}>
-				<span class="expand-label">Dragging your rank down</span>
-				<span class="expand-count">{underperforming.length}</span>
-				<span class="expand-chevron" class:open={showUnderperforming}>‹</span>
-			</button>
-			{#if showUnderperforming}
-				<div class="clip-carousel" transition:slide={{ duration: 250 }}>
-					{#each underperforming.slice(0, 8) as clip (clip.clipId)}
-						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-						<a class="clip-card" href="/?clip={clip.clipId}" onclick={ondismiss}>
-							<div class="clip-thumb">
-								{#if clip.thumbnailPath}
-									<img src="/api/thumbnails/{basename(clip.thumbnailPath)}" alt="" />
-								{:else}
-									<div class="thumb-placeholder">
-										<PlatformIcon platform={clip.platform} size={20} />
-									</div>
-								{/if}
-							</div>
-							<span class="clip-caption">{clipTitle(clip)}</span>
-						</a>
-					{/each}
-				</div>
-			{/if}
-		</div>
+		<UnderperformingClips clips={underperforming} {ondismiss} />
 	{/if}
 </div>
 
@@ -249,7 +211,6 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: 0;
 		margin-bottom: var(--space-sm);
 	}
 	.tier-step {
@@ -304,7 +265,6 @@
 		color: var(--text-muted);
 	}
 	.tier-step.current .step-label {
-		color: var(--text-muted);
 		font-weight: 700;
 	}
 	.tier-step.next .step-label {
@@ -468,20 +428,10 @@
 	@keyframes float-orbit {
 		0%,
 		100% {
-			transform: translate(0, 0);
-			filter: drop-shadow(0 0 16px var(--accent-primary));
-		}
-		25% {
-			transform: translate(3px, -5px);
-			filter: drop-shadow(0 0 20px var(--accent-primary));
+			transform: translateY(0);
 		}
 		50% {
-			transform: translate(-2px, -3px);
-			filter: drop-shadow(0 0 14px var(--accent-primary));
-		}
-		75% {
-			transform: translate(-4px, -6px);
-			filter: drop-shadow(0 0 22px var(--accent-primary));
+			transform: translateY(-6px);
 		}
 	}
 	.at-top-title {
@@ -499,108 +449,4 @@
 		max-width: 260px;
 		margin-inline: auto;
 	}
-	.underperforming {
-		border-top: 1px solid var(--border);
-		padding-top: var(--space-lg);
-		margin-left: calc(-1 * var(--space-xl));
-		margin-right: calc(-1 * var(--space-xl));
-		padding-left: var(--space-xl);
-		padding-right: 0;
-	}
-	.clip-carousel {
-		display: flex;
-		gap: var(--space-md);
-		overflow-x: auto;
-		scroll-snap-type: x proximity;
-		-webkit-overflow-scrolling: touch;
-		padding-bottom: var(--space-sm);
-		padding-right: var(--space-xl);
-	}
-	.clip-carousel::-webkit-scrollbar {
-		display: none;
-	}
-	.clip-card {
-		flex-shrink: 0;
-		width: 88px;
-		scroll-snap-align: start;
-		text-decoration: none;
-	}
-	.clip-thumb {
-		width: 100%;
-		aspect-ratio: 9 / 14;
-		border-radius: var(--radius-sm);
-		overflow: hidden;
-		background: var(--bg-subtle);
-		margin-bottom: var(--space-xs);
-		position: relative;
-	}
-	.clip-thumb img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-	.thumb-placeholder {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--text-muted);
-	}
-	.expand-toggle {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: var(--space-sm);
-		width: calc(100% - var(--space-xl));
-		padding: var(--space-sm) var(--space-md);
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-sm);
-		cursor: pointer;
-		-webkit-tap-highlight-color: transparent;
-		margin-bottom: var(--space-sm);
-	}
-	.expand-toggle:active {
-		background: var(--bg-surface);
-	}
-	.expand-label {
-		font-size: 0.6875rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		color: var(--text-muted);
-	}
-	.expand-count {
-		font-size: 0.625rem;
-		font-weight: 700;
-		color: var(--text-muted);
-		background: var(--bg-surface);
-		min-width: 18px;
-		height: 18px;
-		border-radius: var(--radius-full);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 4px;
-	}
-	.expand-chevron {
-		font-size: 0.875rem;
-		color: var(--text-muted);
-		transition: transform 0.25s ease;
-		transform: rotate(-90deg);
-		margin-left: auto;
-	}
-	.expand-chevron.open {
-		transform: rotate(0deg);
-	}
-	.clip-caption {
-		font-size: 0.6875rem;
-		color: var(--text-secondary);
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-		line-height: 1.3;
-	}
 </style>
diff --git a/src/lib/components/UnderperformingClips.svelte b/src/lib/components/UnderperformingClips.svelte
new file mode 100644
index 0000000..f9479a9
--- /dev/null
+++ b/src/lib/components/UnderperformingClips.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { basename } from '$lib/utils';
+	import PlatformIcon from './PlatformIcon.svelte';
+
+	interface Underperformer {
+		clipId: string;
+		title: string | null;
+		platform: string;
+		originalUrl: string;
+		thumbnailPath: string | null;
+	}
+
+	let { clips, ondismiss }: { clips: Underperformer[]; ondismiss: () => void } = $props();
+
+	let expanded = $state(false);
+
+	function clipTitle(clip: Underperformer): string {
+		if (clip.title) return clip.title;
+		try {
+			return new URL(clip.originalUrl).hostname;
+		} catch {
+			return clip.originalUrl;
+		}
+	}
+</script>
+
+<div class="underperforming">
+	<button class="expand-toggle" onclick={() => (expanded = !expanded)}>
+		<span class="expand-label">Dragging your rank down</span>
+		<span class="expand-count">{clips.length}</span>
+		<span class="expand-chevron" class:open={expanded}>‹</span>
+	</button>
+	{#if expanded}
+		<div class="clip-carousel" transition:slide={{ duration: 250 }}>
+			{#each clips.slice(0, 8) as clip (clip.clipId)}
+				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+				<a class="clip-card" href="/?clip={clip.clipId}" onclick={ondismiss}>
+					<div class="clip-thumb">
+						{#if clip.thumbnailPath}
+							<img src="/api/thumbnails/{basename(clip.thumbnailPath)}" alt="" />
+						{:else}
+							<div class="thumb-placeholder">
+								<PlatformIcon platform={clip.platform} size={20} />
+							</div>
+						{/if}
+					</div>
+					<span class="clip-caption">{clipTitle(clip)}</span>
+				</a>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.underperforming {
+		border-top: 1px solid var(--border);
+		padding-top: var(--space-lg);
+		margin-left: calc(-1 * var(--space-xl));
+		margin-right: calc(-1 * var(--space-xl));
+		padding-left: var(--space-xl);
+		padding-right: 0;
+	}
+	.clip-carousel {
+		display: flex;
+		gap: var(--space-md);
+		overflow-x: auto;
+		scroll-snap-type: x proximity;
+		-webkit-overflow-scrolling: touch;
+		padding-bottom: var(--space-sm);
+		padding-right: var(--space-xl);
+	}
+	.clip-carousel::-webkit-scrollbar {
+		display: none;
+	}
+	.clip-card {
+		flex-shrink: 0;
+		width: 88px;
+		scroll-snap-align: start;
+		text-decoration: none;
+	}
+	.clip-thumb {
+		width: 100%;
+		aspect-ratio: 9 / 14;
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+		background: var(--bg-subtle);
+		margin-bottom: var(--space-xs);
+		position: relative;
+	}
+	.clip-thumb img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.thumb-placeholder {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--text-muted);
+	}
+	.expand-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm);
+		width: calc(100% - var(--space-xl));
+		padding: var(--space-sm) var(--space-md);
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+		margin-bottom: var(--space-sm);
+	}
+	.expand-toggle:active {
+		background: var(--bg-surface);
+	}
+	.expand-label {
+		font-size: 0.6875rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--text-muted);
+	}
+	.expand-count {
+		font-size: 0.625rem;
+		font-weight: 700;
+		color: var(--text-muted);
+		background: var(--bg-surface);
+		min-width: 18px;
+		height: 18px;
+		border-radius: var(--radius-full);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 4px;
+	}
+	.expand-chevron {
+		font-size: 0.875rem;
+		color: var(--text-muted);
+		transition: transform 0.25s ease;
+		transform: rotate(-90deg);
+		margin-left: auto;
+	}
+	.expand-chevron.open {
+		transform: rotate(0deg);
+	}
+	.clip-caption {
+		font-size: 0.6875rem;
+		color: var(--text-secondary);
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		line-height: 1.3;
+	}
+</style>