/* RC Widget — TikTok Feed. Scoped under .rcw-tiktok-feed.
   Our own profile card built from a server-side copy (no TikTok script on the
   page); TikTok's player opens in a popup only when a video is tapped. */

/* ===== .rcw-tiktok-feed Salient-proof reset (token bridge) ===== */
.rcw-tiktok-feed{
	--rcw-tt-accent:var(--rcw-color-1,#fe2c55);
	--rcw-tt-text:var(--rcw-text,#161823);
	--rcw-tt-muted:rgba(22,24,35,.6);
	--rcw-tt-line:rgba(22,24,35,.12);
	box-sizing:border-box;
	display:flex;
	width:100%;
	margin:0;
	padding:0;
	color:var(--rcw-tt-text);
	font-family:var(--rcw-font-body,'Poppins',Helvetica,Arial,sans-serif);
	font-size:15px;
	line-height:1.45;
	-webkit-font-smoothing:antialiased;
}
.rcw-tiktok-feed *,
.rcw-tiktok-feed *::before,
.rcw-tiktok-feed *::after{box-sizing:inherit}

/* Full screen: break out of Salient's boxed container to the viewport edges.
   This CSS guess is right for a column centred on the page; script.js then
   measures the real offset and page width (minus scrollbar), so it also lines
   up from a side column. */
.rcw-tiktok-feed--screen{
	width:100vw;
	max-width:none;
	margin-left:calc(50% - 50vw) !important;
	margin-right:0 !important;
}

.rcw-tiktok-feed--align-center{justify-content:center}
.rcw-tiktok-feed--align-left{justify-content:flex-start}
.rcw-tiktok-feed--align-right{justify-content:flex-end}

.rcw-tiktok-feed__card{
	width:100%;
	min-width:0; /* flex item: without this, one long word (an e-mail in the bio) widens the card past the screen */
	padding:24px clamp(16px,3vw,48px);
	background:#fff;
	border:1px solid var(--rcw-tt-line);
	border-radius:10px;
}
.rcw-tiktok-feed--screen .rcw-tiktok-feed__card{border-width:1px 0;border-radius:0}
.rcw-tiktok-feed--wide .rcw-tiktok-feed__card{max-width:780px}
.rcw-tiktok-feed--medium .rcw-tiktok-feed__card{max-width:600px}
.rcw-tiktok-feed--narrow .rcw-tiktok-feed__card{max-width:400px}

/* ---- profile head ---- */
.rcw-tiktok-feed__head{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:16px 20px;
	margin:0 0 20px;
}
.rcw-tiktok-feed__avatar{flex:none;display:block;line-height:0}
.rcw-tiktok-feed__avatar img{
	display:block;
	width:80px;
	height:80px;
	margin:0;
	border-radius:50%;
	object-fit:cover;
	background:#f1f1f2;
}
.rcw-tiktok-feed__who{flex:1 1 240px;min-width:0}
.rcw-tiktok-feed a.rcw-tiktok-feed__name{
	display:inline-block;
	margin:0 0 4px;
	color:var(--rcw-tt-text) !important;
	font-family:var(--rcw-font-heading,inherit);
	font-size:20px;
	font-weight:700;
	line-height:1.2;
	text-decoration:none !important;
}
.rcw-tiktok-feed__stats{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 6px;color:var(--rcw-tt-muted)}
.rcw-tiktok-feed__stats b{color:var(--rcw-tt-text);font-weight:700;margin-right:3px}
.rcw-tiktok-feed .rcw-tiktok-feed__bio{margin:0;padding:0;overflow-wrap:anywhere;color:var(--rcw-tt-text);font-size:14px;line-height:1.5}

.rcw-tiktok-feed a.rcw-tiktok-feed__follow,
.rcw-tiktok-feed .rcw-tiktok-feed__fallback{
	display:inline-block;
	flex:none;
	margin-left:auto;
	padding:11px 24px;
	border-radius:6px;
	background:var(--rcw-tt-accent);
	color:#fff !important;
	font-weight:600;
	line-height:1.2;
	text-decoration:none !important;
	transition:opacity .15s;
}
.rcw-tiktok-feed .rcw-tiktok-feed__fallback{margin:0 16px;border-radius:999px}
.rcw-tiktok-feed a.rcw-tiktok-feed__follow:hover,
.rcw-tiktok-feed .rcw-tiktok-feed__fallback:hover{opacity:.85}

/* ---- video row: one swipeable line, covers load as they scroll into it ---- */
.rcw-tiktok-feed .rcw-tiktok-feed__videos{
	display:flex;
	gap:8px;
	margin:0;
	padding:0 0 6px;
	list-style:none;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;
}
.rcw-tiktok-feed .rcw-tiktok-feed__item{
	flex:0 0 clamp(140px,16vw,210px);
	margin:0;
	padding:0;
	list-style:none;
	scroll-snap-align:start;
}
.rcw-tiktok-feed .rcw-tiktok-feed__item::before{content:none}
.rcw-tiktok-feed__video{
	position:relative;
	display:block;
	aspect-ratio:3/4;
	overflow:hidden;
	border-radius:6px;
	background:#e9e9ea;
	line-height:0;
}
.rcw-tiktok-feed__video img{
	width:100%;
	height:100%;
	margin:0;
	object-fit:cover;
	transition:transform .3s ease;
}
.rcw-tiktok-feed__video:hover img{transform:scale(1.04)}
.rcw-tiktok-feed__video:focus-visible{outline:3px solid var(--rcw-tt-accent);outline-offset:2px}
.rcw-tiktok-feed__plays{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	align-items:center;
	gap:4px;
	padding:24px 10px 8px;
	background:linear-gradient(transparent,rgba(0,0,0,.55));
	color:#fff;
	font-size:14px;
	font-weight:600;
	line-height:1;
}
.rcw-tiktok-feed__plays svg{width:16px;height:16px;fill:currentColor}

@media (max-width:600px){
	.rcw-tiktok-feed__avatar img{width:64px;height:64px}
	.rcw-tiktok-feed a.rcw-tiktok-feed__follow{margin-left:0;width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
	.rcw-tiktok-feed__video img{transition:none}
	.rcw-tiktok-feed__video:hover img{transform:none}
}

/* ---- player popup (added to <body> by script.js, so not under the root) ---- */
.rcw-tiktok-modal{
	position:fixed;
	inset:0;
	z-index:100000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	background:rgba(0,0,0,.8);
}
.rcw-tiktok-modal__frame{
	position:relative;
	height:min(90vh,760px);
	aspect-ratio:9/16;
	max-width:100%;
	background:#000;
	border-radius:10px;
	overflow:hidden;
}
.rcw-tiktok-modal__frame iframe{display:block;width:100%;height:100%;border:0}
.rcw-tiktok-modal__close{
	/* In the screen corner, not on the video: TikTok puts its own logo and
	   buttons in the player's top corners. */
	position:fixed;
	top:14px;
	right:14px;
	z-index:1;
	width:40px;
	height:40px;
	margin:0;
	padding:0;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.15);
	color:#fff;
	font:400 26px/40px Arial,sans-serif;
	text-align:center;
	cursor:pointer;
}
.rcw-tiktok-modal__close:hover{background:rgba(255,255,255,.28)}
.rcw-tiktok-modal__close:focus-visible{outline:2px solid #fff;outline-offset:2px}