/* Frontend player — scoped, CSS-variable driven. No Tailwind (keeps the
   frontend bundle lean). */

.trueplayer-mount {
	--tp-accent: #4f46e5;
	--tp-bg: #000;
	--tp-fg: #fff;
	/* The player's own type stack. Declared as a variable and re-applied to the
	   text-bearing children below: a theme rule on a generic selector beats
	   plain inheritance from the stage, which is why the same video rendered
	   with the theme's font on a page and the player's font in the editor. */
	--tp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	width: 100%;
	max-width: 100%;
}

/* Click-to-load poster facade — static HTML shown until the visitor plays, so
   the real player (and its network cost) never loads on page render. */
.tp-facade {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	overflow: hidden;
	background: #000;
	border-radius: var( --tp-radius, 10px );
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
}
.tp-facade.is-audio {
	aspect-ratio: auto;
	height: 120px;
	background: #111827;
}
/* A poster is a cover image for the frame, so it fills it — the convention
   every video platform uses. `contain` was letterboxing author-uploaded
   posters inside the stage, and it also left YouTube's smaller sizes showing
   the black bars baked into their pixels. Off-ratio art is cropped, centred. */
.tp-facade-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center;
	   object-position: center;
	background: #000;
}
.tp-hover-preview {
	-o-object-fit: cover;
	   object-fit: cover;
	animation: tp-preview-in 0.25s ease;
}
@keyframes tp-preview-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.tp-facade-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var( --tp-accent, #4f46e5 );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 14px rgba( 0, 0, 0, 0.35 );
	transition: transform 0.15s ease, filter 0.15s ease;
}
.tp-facade:hover .tp-facade-btn {
	transform: translate( -50%, -50% ) scale( 1.06 );
	filter: brightness( 1.08 );
}
.tp-facade-btn svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
	margin-left: 3px;
}

.tp-stage {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--tp-bg);
	color: var(--tp-fg);
	overflow: hidden;
	border-radius: var(--tp-radius, 10px);
	font-family: var( --tp-font );
	outline: none;
	/* Size container so the control bar can adapt to the player's own width
	   (narrow admin preview panel, small/mobile embeds) instead of the viewport. */
	container-type: inline-size;
}

/* Re-assert the stack on everything that draws text, so a theme's own rules
   can't win over inheritance (see --tp-font). */
.tp-stage .tp-controls,
.tp-stage .tp-time,
.tp-stage .tp-info,
.tp-stage .tp-menu,
.tp-stage .tp-chapter-now,
.tp-stage button,
.tp-stage input,
.tp-stage select {
	font-family: var( --tp-font );
}

/* control-bar style variants */
.tp-bar-solid .tp-controls {
	background: rgba( 0, 0, 0, 0.85 );
}
.tp-bar-minimal .tp-controls {
	background: transparent;
}
.tp-bar-minimal .tp-controls-row {
	background: rgba( 0, 0, 0, 0.45 );
	border-radius: 8px;
	padding: 2px 6px;
}

/* play-button style variants */
.tp-play-square .tp-bigplay {
	border-radius: 8px;
}
.tp-play-soft .tp-bigplay {
	border-radius: 22px;
}

/* sticky (float on scroll) */
/* Reserves the stage's normal footprint once it goes `position: fixed`
   (sticky), and hosts the sentinel the sticky-on-scroll observer watches —
   see the comment in Player.jsx for why this can't be the stage itself. */
.tp-stage-slot {
	position: relative;
	width: 100%;
}
.tp-stage-sentinel {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

/* Shown in the stage's normal spot while it's actually floating in a
   Picture-in-Picture window elsewhere. */
.tp-pip-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #0b0d12;
	color: rgba( 255, 255, 255, 0.75 );
	font-size: 13px;
	border-radius: var( --tp-radius, 10px );
}
.tp-pip-return {
	background: var( --tp-accent );
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.tp-sticky {
	position: fixed !important;
	z-index: 99999;
	width: 380px;
	max-width: 46vw;
	aspect-ratio: 16 / 9;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.35 );
}
.tp-sticky-bottom-right { right: 20px; bottom: 20px; }
.tp-sticky-bottom-left { left: 20px; bottom: 20px; }
.tp-sticky-top-right { right: 20px; top: 20px; }
.tp-sticky-top-left { left: 20px; top: 20px; }
.tp-sticky-close {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 10;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
/* Audio: a proper compact player bar, not a short video box. Art tile on the
   left, controls (progress + buttons) fill the rest — no empty picture area. */
.tp-stage.is-audio {
	aspect-ratio: auto;
	height: auto;
	min-height: 72px;
	background: linear-gradient( 180deg, #232838, #171a22 );
	display: flex;
	align-items: center;
	gap: 12px;
	padding-left: 12px;
	overflow: visible; /* let the settings menu pop out of the short bar */
}
.tp-audio-art {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: rgba( 255, 255, 255, 0.08 );
	color: var( --tp-accent );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.tp-audio-art img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
.tp-audio-art svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}
.tp-stage.is-audio .tp-controls {
	position: static;
	background: none;
	flex: 1;
	min-width: 0;
	padding: 8px 14px 8px 0;
}
.tp-audio-title {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba( 255, 255, 255, 0.92 );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}
/* Pseudo-waveform progress bar (audio) */
.tp-stage.is-audio .tp-scrubber {
	padding: 4px 0;
}
.tp-wave {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	height: 26px;
	width: 100%;
}
.tp-wave-bar {
	flex: 1 1 0;
	min-width: 2px;
	min-height: 3px;
	background: rgba( 255, 255, 255, 0.25 );
	border-radius: 1px;
}
.tp-wave-bar.is-played {
	background: var( --tp-accent );
}

.tp-media-container,
.tp-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.tp-media {
	-o-object-fit: contain;
	   object-fit: contain;
	background: #000;
}
.tp-media-container iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Transparent click-shield over embedded players (YouTube/Vimeo): swallows
   pointer events so their in-frame links can't be clicked, while our own
   controls (z-index 5) and big-play button sit above it and stay usable. */
.tp-shield {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
	background: transparent;
}

.tp-poster {
	position: absolute;
	inset: 0;
	background-size: cover; /* see .tp-facade-poster — the poster fills the frame */
	background-position: center;
	background-repeat: no-repeat;
	background-color: #000;
	z-index: 3;
}

.tp-logo {
	position: absolute;
	max-height: 34px;
	max-width: 120px;
	opacity: 0.9;
	z-index: 4;
	pointer-events: none;
}
.tp-logo img {
	max-height: 34px;
	max-width: 120px;
	display: block;
}
.tp-logo.is-link {
	pointer-events: auto;
	cursor: pointer;
}
.tp-logo,
.tp-logo-top-right { top: 12px; right: 12px; }
.tp-logo-top-left { top: 12px; left: 12px; right: auto; }
.tp-logo-bottom-right { top: auto; bottom: 52px; right: 12px; }
.tp-logo-bottom-left { top: auto; bottom: 52px; left: 12px; right: auto; }

/* ---- caption cue styling (html5-backed providers) ---- */
.tp-stage video::cue {
	color: var( --tp-cap-color, #fff );
	background-color: var( --tp-cap-bg, rgba( 0, 0, 0, 0.75 ) );
	font-size: calc( 1em * var( --tp-cap-scale, 1 ) );
}

/* ---- skins ---- */
/* modern: floating-feel solid bar, brighter accents, roomier padding */
.tp-skin-modern .tp-controls {
	background: linear-gradient( transparent, rgba( 10, 12, 20, 0.9 ) );
	padding: 8px 14px 12px;
}
.tp-skin-modern .tp-scrubber-track,
.tp-skin-modern .tp-scrubber-segs {
	height: 6px;
}
.tp-skin-modern .tp-btn {
	border-radius: 8px;
}
.tp-skin-modern .tp-bigplay {
	width: var( --tp-bigplay-size, 84px );
	height: var( --tp-bigplay-size, 84px );
}

/* simple: flat thin bar, no gradient wash */
.tp-skin-simple .tp-controls {
	background: rgba( 0, 0, 0, 0.6 );
	padding: 4px 10px 6px;
}
.tp-skin-simple .tp-scrubber {
	padding: 5px 0;
}
.tp-skin-simple .tp-scrubber-thumb {
	width: 10px;
	height: 10px;
}
.tp-skin-simple .tp-bigplay {
	width: var( --tp-bigplay-size, 64px );
	height: var( --tp-bigplay-size, 64px );
}

/* minimal: scrubber + essentials only; secondary controls hidden */
.tp-skin-minimal .tp-controls {
	background: transparent;
	padding: 4px 10px 8px;
}
.tp-skin-minimal .tp-controls-row {
	background: rgba( 0, 0, 0, 0.5 );
	border-radius: 10px;
	padding: 2px 8px;
}
.tp-skin-minimal .tp-time,
.tp-skin-minimal .tp-volume,
.tp-skin-minimal .tp-chapter-now {
	display: none;
}

/* standard: classic opaque deck, square corners on the bar */
.tp-skin-standard .tp-controls {
	background: rgba( 12, 14, 18, 0.96 );
	padding: 6px 12px 8px;
}
.tp-skin-standard .tp-scrubber-track,
.tp-skin-standard .tp-scrubber-segs,
.tp-skin-standard .tp-scrubber-buffered,
.tp-skin-standard .tp-scrubber-played,
.tp-skin-standard .tp-seg {
	border-radius: 0;
}

/* floating (pro): detached rounded bar hovering above the bottom edge */
.tp-skin-floating .tp-controls {
	left: 12px;
	right: 12px;
	bottom: 12px;
	border-radius: 14px;
	background: rgba( 15, 17, 26, 0.82 );
	backdrop-filter: blur( 10px );
	padding: 6px 14px 8px;
	box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.35 );
}
.tp-skin-floating .tp-info {
	bottom: 4.6rem;
}

/* ambient (pro): blurred poster glow behind the stage */
.tp-ambient-wrap {
	position: relative;
	width: 100%;
}
.tp-ambient-glow {
	position: absolute;
	inset: -28px;
	background-position: center;
	background-size: cover;
	filter: blur( 36px ) saturate( 1.5 );
	opacity: 0.5;
	border-radius: 24px;
	pointer-events: none;
	z-index: 0;
}
.tp-ambient-wrap .tp-stage {
	position: relative;
	z-index: 1;
}

/* ---- "In this video" drawer: chapters + transcript ---- */
.tp-info {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 3.4rem;
	width: min( 340px, 42% );
	z-index: 6;
	display: flex;
	flex-direction: column;
	background: rgba( 18, 18, 18, 0.94 );
	backdrop-filter: blur( 6px );
	color: #fff;
	border-top-left-radius: var( --tp-radius, 8px );
	overflow: hidden;
	animation: tp-info-in 0.2s ease;
}
@keyframes tp-info-in {
	from {
		transform: translateX( 16px );
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}
.tp-info-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 6px 8px 12px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	flex-shrink: 0;
}
.tp-info-tabs {
	display: flex;
	gap: 4px;
}
.tp-info-tab {
	background: transparent;
	border: 0;
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 13px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 6px;
	cursor: pointer;
}
.tp-info-tab:hover {
	color: #fff;
}
.tp-info-tab.is-active {
	color: #fff;
	background: rgba( 255, 255, 255, 0.14 );
}
.tp-info-close {
	background: transparent;
	border: 0;
	color: rgba( 255, 255, 255, 0.7 );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	width: 30px;
	height: 30px;
	border-radius: 6px;
}
.tp-info-close:hover {
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
}
.tp-info-body {
	flex: 1;
	overflow-y: auto;
	padding: 6px;
	scrollbar-width: thin;
}
.tp-info-row {
	display: flex;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	color: #eaeaea;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.4;
	align-items: flex-start;
}
.tp-info-row:hover {
	background: rgba( 255, 255, 255, 0.08 );
}
.tp-info-row.is-active {
	background: rgba( 255, 255, 255, 0.14 );
}
.tp-info-row.is-locked {
	opacity: 0.4;
	cursor: not-allowed;
}
.tp-info-time {
	color: var( --tp-accent );
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	flex-shrink: 0;
	min-width: 44px;
}
.tp-info-cue .tp-info-time {
	color: rgba( 255, 255, 255, 0.45 );
	font-weight: 500;
}
.tp-info-cue.is-active .tp-info-time {
	color: var( --tp-accent );
}
.tp-info-label {
	flex: 1;
}
.tp-info-empty {
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 13px;
	padding: 20px 16px;
	text-align: center;
}
.tp-controls .tp-btn.is-active {
	color: var( --tp-accent );
}
@media ( max-width: 520px ) {
	.tp-info {
		width: 100%;
	}
}

/* ---- controls ---- */
.tp-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 6px 12px 10px;
	background: linear-gradient( transparent, rgba( 0, 0, 0, 0.72 ) );
	transition: opacity 0.25s ease;
	z-index: 5;
}
.tp-stage.is-idle .tp-controls {
	opacity: 0;
	pointer-events: none;
}
/* Nothing has played yet: poster + play button only. Hover doesn't reveal the
   bar either — there is no position to scrub and no sound to set, so the bar
   would only be decoration over the poster. (Set by Player.jsx, which keeps
   audio and big-play-less players out of it.) */
.tp-stage.is-unstarted .tp-controls {
	opacity: 0;
	pointer-events: none;
}

.tp-controls-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tp-spacer {
	flex: 1;
}
.tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #fff;
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
}
.tp-btn:hover {
	background: var(--tp-hover, rgba( 255, 255, 255, 0.15 ));
}
.tp-time {
	font-size: 12px;
	color: #e5e7eb;
	font-variant-numeric: tabular-nums;
}
.tp-volume {
	width: 74px;
	accent-color: var(--tp-accent);
	cursor: pointer;
}

/* Narrow players: shed the widest, least-critical controls so the single-row
   control bar never overflows the (overflow:hidden) stage and gets clipped.
   Keyed to the player's own width via the .tp-stage size container. */
@container (max-width: 480px) {
	.tp-controls-row {
		gap: 4px;
	}
	.tp-volume {
		display: none; /* mute button stays */
	}
	.tp-btn {
		width: 30px;
		height: 30px;
	}
	.tp-time {
		font-size: 11px;
	}
}
@container (max-width: 340px) {
	.tp-btn {
		width: 28px;
		height: 28px;
	}
	.tp-btn svg {
		width: 17px;
		height: 17px;
	}
}

/* ---- scrubber ---- */
.tp-scrubber {
	padding: 8px 0;
	cursor: pointer;
	touch-action: none; /* let a pointer drag scrub instead of scrolling the page */
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}
.tp-scrubber.is-disabled {
	cursor: not-allowed;
}
.tp-scrubber-track {
	position: relative;
	height: 5px;
	background: rgba( 255, 255, 255, 0.28 );
	border-radius: 4px;
}
.tp-scrubber-buffered {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: rgba( 255, 255, 255, 0.4 );
	border-radius: 4px;
}
.tp-scrubber-played {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--tp-accent);
	border-radius: 4px;
}
.tp-scrubber-thumb {
	position: absolute;
	top: 50%;
	width: 13px;
	height: 13px;
	background: #fff;
	border-radius: 50%;
	transform: translate( -50%, -50% );
	box-shadow: 0 0 4px rgba( 0, 0, 0, 0.5 );
}
.tp-scrubber-lockline {
	position: absolute;
	top: -3px;
	bottom: -3px;
	width: 2px;
	background: #f59e0b;
	transform: translateX( -1px );
}
.tp-chapter-marker {
	position: absolute;
	top: 50%;
	width: 3px;
	height: 11px;
	background: #fff;
	transform: translate( -50%, -50% );
	border-radius: 1px;
	opacity: 0.85;
}

/* ---- YouTube-style segmented chapters ---- */
.tp-scrubber-segs {
	position: relative;
	height: 5px;
	transition: height 0.1s ease;
}
.tp-scrubber:hover .tp-scrubber-segs {
	height: 7px;
}
.tp-seg {
	position: absolute;
	top: 0;
	height: 100%;
	background: rgba( 255, 255, 255, 0.28 );
	border-radius: 3px;
	overflow: hidden;
}
.tp-seg-buffered {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: rgba( 255, 255, 255, 0.4 );
}
.tp-seg-played {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: var(--tp-accent);
}
.tp-chapter-tip {
	position: absolute;
	bottom: 22px;
	transform: translateX( -50% );
	background: rgba( 17, 24, 39, 0.95 );
	color: #fff;
	font-size: 12px;
	padding: 4px 9px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tp-chapter-now {
	font-size: 12px;
	color: #d1d5db;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- settings menu ---- */
.tp-menu-wrap {
	position: relative;
}
.tp-menu {
	position: absolute;
	bottom: 42px;
	right: 0;
	min-width: 150px;
	max-height: 260px;
	overflow-y: auto;
	background: rgba( 17, 24, 39, 0.97 );
	border-radius: 8px;
	padding: 6px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.4 );
}
.tp-menu-section {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #9ca3af;
	padding: 6px 8px 2px;
}
.tp-menu-item {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	color: #e5e7eb;
	padding: 7px 8px;
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
}
.tp-menu-item:hover {
	background: rgba( 255, 255, 255, 0.1 );
}
.tp-menu-item.is-active {
	color: #fff;
	font-weight: 600;
}
.tp-menu-item.is-active::after {
	/* Masked SVG tick rather than a text glyph, so it renders identically
	   everywhere and still takes the player's accent colour. */
	content: '';
	width: 13px;
	height: 13px;
	margin-left: auto;
	flex: none;
	background-color: var(--tp-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- timed text overlays ---- */
.tp-text-overlay {
	position: absolute;
	z-index: 4;
	max-width: 60%;
	padding: 8px 14px;
	border-radius: 8px;
	color: #fff;
	font-size: 14px;
	line-height: 1.45;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	animation: tp-cta-in 0.25s ease;
}
.tp-text-overlay-title {
	font-size: 15px;
	font-weight: 700;
}
.tp-pos-top-left { top: 14px; left: 14px; }
.tp-pos-top-center { top: 14px; left: 50%; transform: translateX( -50% ); text-align: center; }
.tp-pos-top-right { top: 14px; right: 14px; text-align: right; }
.tp-pos-middle-left { top: 50%; left: 14px; transform: translateY( -50% ); }
.tp-pos-middle-center { top: 50%; left: 50%; transform: translate( -50%, -50% ); text-align: center; }
.tp-pos-middle-right { top: 50%; right: 14px; transform: translateY( -50% ); text-align: right; }
.tp-pos-bottom-left { bottom: 64px; left: 14px; }
.tp-pos-bottom-center { bottom: 64px; left: 50%; transform: translateX( -50% ); text-align: center; }
.tp-pos-bottom-right { bottom: 64px; right: 14px; text-align: right; }

/* ---- action bar ---- */
.tp-actionbar {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 8px 14px;
	background: var( --tp-accent );
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}
.tp-actionbar-top { top: 0; }
.tp-actionbar-bottom { bottom: 0; }
/* When the control bar is visible, lift a bottom action bar above it. */
.tp-stage:not( .is-idle ) .tp-actionbar-bottom {
	bottom: 3.6rem;
}
.tp-stage.is-audio .tp-actionbar {
	display: none; /* the compact audio bar has no room for it */
}
.tp-actionbar-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tp-actionbar-btn {
	flex-shrink: 0;
	background: rgba( 255, 255, 255, 0.18 );
	border: 1px solid rgba( 255, 255, 255, 0.5 );
	color: #fff;
	border-radius: 6px;
	padding: 4px 14px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}
.tp-actionbar-btn:hover {
	background: rgba( 255, 255, 255, 0.3 );
	color: #fff;
}

/* ---- description under the player ---- */
.tp-description {
	margin-top: 12px;
	font-size: 14.5px;
	line-height: 1.6;
	color: inherit;
}

/* ---- interactive layers (pro) ---- */
.tp-layers {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}
.tp-layer {
	pointer-events: auto;
}
.tp-hotspot {
	position: absolute;
	display: block;
	cursor: pointer;
	border-radius: 8px;
}
.tp-hotspot-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: var( --tp-accent );
	box-shadow: 0 0 0 0 var( --tp-accent );
	animation: tp-hotspot-pulse 1.8s infinite;
}
@keyframes tp-hotspot-pulse {
	0% { box-shadow: 0 0 0 0 rgba( 255, 255, 255, 0.5 ); }
	70% { box-shadow: 0 0 0 14px rgba( 255, 255, 255, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 255, 255, 255, 0 ); }
}
.tp-hotspot-tip {
	position: absolute;
	bottom: calc( 50% + 18px );
	left: 50%;
	transform: translateX( -50% );
	background: rgba( 17, 24, 39, 0.95 );
	color: #fff;
	font-size: 12px;
	padding: 4px 9px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
.tp-hotspot:hover .tp-hotspot-tip {
	opacity: 1;
}
.tp-banner {
	position: absolute;
	max-width: 70%;
}
.tp-banner img {
	max-width: 100%;
	max-height: 110px;
	display: block;
	border-radius: 8px;
}
.tp-shortcode-layer {
	position: absolute;
	max-width: 80%;
	background: rgba( 255, 255, 255, 0.96 );
	color: #111827;
	border-radius: 10px;
	padding: 14px 16px;
}
.tp-form-layer {
	position: absolute;
	background: rgba( 17, 24, 39, 0.92 );
	backdrop-filter: blur( 4px );
	border-radius: 12px;
	padding: 14px 16px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: min( 360px, 84% );
}
.tp-form-layer-title {
	font-size: 14px;
}
.tp-form-layer-row {
	display: flex;
	gap: 6px;
}
.tp-form-layer-row input {
	flex: 1;
	min-width: 0;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	background: rgba( 255, 255, 255, 0.1 );
	color: #fff;
	border-radius: 7px;
	padding: 8px 10px;
	font-size: 13px;
}
.tp-form-layer-row button {
	background: var( --tp-accent );
	color: #fff;
	border: 0;
	border-radius: 7px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.tp-form-layer-error {
	font-size: 12px;
	color: #fca5a5;
}
.tp-form-layer-thanks {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
}

/* ---- dynamic watermark (pro) ---- */
.tp-watermark {
	position: absolute;
	top: 12%;
	left: 8%;
	z-index: 4;
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.03em;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.8 );
	pointer-events: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	white-space: nowrap;
}
.tp-watermark.is-drifting {
	animation: tp-wm-drift 46s linear infinite;
}
@keyframes tp-wm-drift {
	0% { top: 12%; left: 8%; }
	25% { top: 70%; left: 62%; }
	50% { top: 24%; left: 70%; }
	75% { top: 76%; left: 12%; }
	100% { top: 12%; left: 8%; }
}

/* ---- overlays ---- */
.tp-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.6 );
	z-index: 6;
	padding: 16px;
}

/* ---- popup (lightbox) ---- */
.trueplayer-popup {
	display: inline-block;
}
.trueplayer-popup-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var( --tp-accent, #008dff );
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: filter 0.15s ease;
}
.trueplayer-popup-trigger:hover {
	filter: brightness( 1.08 );
}
.tp-popup-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 0, 0, 0, 0.82 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: tp-cta-in 0.18s ease;
}
.tp-popup-dialog {
	position: relative;
	width: min( 900px, 92vw );
}
.tp-popup-close {
	position: absolute;
	top: -38px;
	right: 0;
	background: none;
	border: 0;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
}
.tp-popup-close:hover {
	opacity: 1;
}
.tp-popup-player {
	width: 100%;
}

/* ---- CTA / end-screen overlay ---- */
.tp-cta-card {
	position: relative;
	background: #fff;
	color: #111827;
	border-radius: 14px;
	padding: 28px 28px 24px;
	max-width: 460px;
	width: 100%;
	text-align: center;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.35 );
	animation: tp-cta-in 0.2s ease;
}
@keyframes tp-cta-in {
	from { transform: translateY( 8px ) scale( 0.98 ); opacity: 0; }
	to { transform: none; opacity: 1; }
}
.tp-cta-close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
}
.tp-cta-close:hover { color: #374151; }
.tp-cta-img {
	max-height: 96px;
	max-width: 100%;
	margin: 0 auto 14px;
	border-radius: 10px;
	-o-object-fit: cover;
	   object-fit: cover;
}
.tp-cta-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
}
.tp-cta-text {
	font-size: 14px;
	line-height: 1.5;
	color: #4b5563;
	margin: 0 0 18px;
}
.tp-cta-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.tp-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --tp-accent );
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 8px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.15s ease;
}
.tp-cta-btn:hover { filter: brightness( 1.08 ); }
.tp-cta-secondary {
	background: #f3f4f6;
	color: #374151;
}
.tp-bigplay {
	position: absolute;
	inset: 0;
	margin: auto;
	/* Size is author-controllable via --tp-bigplay-size; each skin keeps its own
	   fallback when the control is left on "Auto". */
	width: var( --tp-bigplay-size, 78px );
	height: var( --tp-bigplay-size, 78px );
	border-radius: 50%;
	border: 0;
	/* Accent-driven on every skin (matches the poster facade button). Skins may
	   still override size/shape, but the accent color stays. */
	background: var( --tp-accent, #4f46e5 );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
}
/* Icon scales with the button so larger sizes stay proportional. */
.tp-bigplay svg {
	width: 48%;
	height: 48%;
}
.tp-bigplay:hover {
	filter: brightness( 1.08 );
}

.tp-lock-card,
.tp-quiz-card {
	background: #fff;
	color: #111827;
	border-radius: 12px;
	padding: 24px;
	max-width: 480px;
	width: 100%;
	max-height: 90%;
	overflow-y: auto;
	text-align: center;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.3 );
}
.tp-lock-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 4px;
	opacity: 0.9;
}
.tp-quiz-card {
	text-align: left;
}
.tp-quiz-title {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
}
.tp-quiz-q {
	margin-bottom: 16px;
}
.tp-quiz-prompt {
	font-weight: 600;
	margin: 0 0 8px;
}
.tp-quiz-num {
	color: var(--tp-accent);
}
.tp-quiz-opts {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tp-quiz-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
}
.tp-quiz-opt.is-picked {
	border-color: var(--tp-accent);
	background: rgba( 79, 70, 229, 0.06 );
}
.tp-quiz-feedback {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	margin: 8px 0;
}
.tp-quiz-feedback.tp-pass {
	color: #16a34a;
}
.tp-quiz-feedback.tp-fail {
	color: #dc2626;
}
.tp-quiz-submit {
	margin-top: 8px;
	background: var(--tp-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 11px 20px;
	font-weight: 600;
	cursor: pointer;
}
.tp-quiz-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- opt-in / subscribe ---- */
.tp-optin-card {
	background: #fff;
	color: #111827;
	border-radius: 12px;
	padding: 26px;
	max-width: 420px;
	width: 100%;
	text-align: center;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.3 );
}
.tp-optin-title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
}
.tp-optin-desc {
	margin: 0 0 16px;
	color: #6b7280;
	font-size: 14px;
}
.tp-optin-input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	margin-bottom: 10px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
}
.tp-optin-input:focus {
	outline: none;
	border-color: var(--tp-accent);
}
.tp-optin-error {
	color: #dc2626;
	font-size: 13px;
	margin: 0 0 10px;
}
.tp-optin-skip {
	display: block;
	margin: 12px auto 0;
	background: none;
	border: 0;
	color: #6b7280;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* ---- spinner ---- */
.tp-spinner {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 44px;
	height: 44px;
	border: 4px solid rgba( 255, 255, 255, 0.25 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: tp-spin 0.8s linear infinite;
	z-index: 5;
}
@keyframes tp-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* ---- playlists ---- */
.trueplayer-playlist {
	--tp-accent: #4f46e5;
	--tp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	width: 100%;
	font-family: var( --tp-font );
}
/* Query the playlist's own width, not the viewport — the video must stack the
   list below it whenever the container (not the screen) is narrow, e.g. inside
   a narrow content column, sidebar, or page-builder cell. */
.tp-pl {
	container-type: inline-size;
	width: 100%;
}
.tp-pl-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 12px;
	color: #111827;
}
/* Cap the stage the way the standalone embed does — but as a *max*, not a
   hard width. A fixed width overflows any content column narrower than the cap
   (a theme's column is commonly ~650px), which is what pushed the sidebar list
   out of the row entirely. */
.tp-pl-main {
	width: 100%;
	max-width: min(960px, calc((100vh - 100px) * 16 / 9));
}
.tp-pl-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tp-pl-sidebar .tp-pl-body {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
}
/* 450px stage. Kept as a shrinkable basis rather than a hard `width` so a
   content column narrower than 450 + gap + list can't be overflowed — that
   fixed width is what broke this layout in the first place. `min-width: 0` is
   required or the video refuses to shrink below its intrinsic size. */
.tp-pl-sidebar .tp-pl-main {
	flex: 0 1 450px;
	max-width: 450px;
	min-width: 0;
}
.tp-pl-sidebar .tp-pl-list {
	/* Basis 0 so the list claims only the room the 450px stage leaves, rather
	   than competing with it for width and shrinking it below 450. The floor
	   makes the stage yield instead of starving the list in a mid-width column;
	   the cap stops a wide container handing the list half the row. */
	flex: 1 1 0;
	min-width: 150px;
	max-width: 300px;
	gap: 6px;
	max-height: 70vh;
	overflow-y: auto;
	padding-right: 4px;
}
.tp-pl-grid .tp-pl-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tp-pl-grid .tp-pl-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 12px;
}
.tp-pl-item {
	display: flex;
	gap: 10px;
	align-items: center;
	text-align: left;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 6px;
	cursor: pointer;
	color: #1f2937;
	width: 100%;
}
.tp-pl-item:hover {
	background: rgba( 0, 0, 0, 0.04 );
}
/* Clicking an item leaves it focused, and a theme's default button ring on a
   picked row reads as a rendering glitch — drop it. `:focus-visible` then puts
   the ring back for keyboard navigation only, so arrowing/tabbing through the
   list still shows where you are. */
.tp-pl-item:focus {
	outline: none;
}
.tp-pl-item:focus-visible {
	outline: 2px solid var( --tp-accent );
	outline-offset: 2px;
}
.tp-pl-item.is-active {
	background: rgba( 0, 0, 0, 0.06 );
	border-color: var(--tp-accent);
}
/* Compact icon used in the sidebar list (keeps rows slim vs. a poster thumb). */
.tp-pl-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 6px;
	background: rgba( 0, 0, 0, 0.06 );
	color: #4b5563;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tp-pl-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}
.tp-pl-item.is-active .tp-pl-icon {
	background: var( --tp-accent );
	color: #fff;
}
.tp-pl-thumb {
	width: 72px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 6px;
	background: #111827 center/cover no-repeat;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.tp-pl-item-title {
	font-size: 13px;
	line-height: 1.3;
}
.tp-pl-grid .tp-pl-item {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}
.tp-pl-grid .tp-pl-thumb {
	width: 100%;
	height: 96px;
}
/* ---- sidebar rows ---- */
.tp-pl-sidebar .tp-pl-item {
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
}
.tp-pl-sidebar .tp-pl-item.is-active {
	background: rgba( 0, 0, 0, 0.06 );
	border-color: var( --tp-accent );
}
.tp-pl-sidebar .tp-pl-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba( 0, 0, 0, 0.06 );
	color: #111827;
}
.tp-pl-sidebar .tp-pl-icon svg {
	width: 13px;
	height: 13px;
}
.tp-pl-sidebar .tp-pl-item-title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: #111827;
	/* A long title wraps to two lines instead of stretching the row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@container ( max-width: 520px ) {
	.tp-pl-sidebar .tp-pl-body {
		flex-direction: column;
		align-items: stretch; /* full-width video when stacked */
	}
	/* Stacked, the body is a COLUMN flex container — flex-basis maps to
	   HEIGHT, so the row-mode `flex: 1 1 0` collapsed this list to 0px tall
	   (items clipped, area looked empty) and `flex: 0 1 450px` gave the
	   stage a 450px height basis. Reset both to content sizing. */
	.tp-pl-sidebar .tp-pl-main {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}
	.tp-pl-sidebar .tp-pl-list {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		min-width: 0;
		flex-direction: row;
		overflow-x: auto;
		max-height: none;
	}
	/* Stacked, the rows scroll sideways — size each to its content instead
	   of letting them share the width and truncate to a few characters. */
	.tp-pl-sidebar .tp-pl-item {
		flex: 0 0 auto;
		width: auto;
		max-width: 220px;
	}
	.tp-pl-sidebar .tp-pl-item-title {
		-webkit-line-clamp: 1;
		white-space: nowrap;
	}
}
/* Fallback for browsers without container queries: stack on a narrow viewport. */
@supports not ( container-type: inline-size ) {
	@media ( max-width: 520px ) {
		.tp-pl-sidebar .tp-pl-body {
			flex-direction: column;
			align-items: stretch;
		}
		/* Stacked, the body is a COLUMN flex container — flex-basis maps to
		   HEIGHT, so the row-mode `flex: 1 1 0` collapsed this list to 0px tall
		   (items clipped, area looked empty) and `flex: 0 1 450px` gave the
		   stage a 450px height basis. Reset both to content sizing. */
		.tp-pl-sidebar .tp-pl-main {
			flex: 0 0 auto;
			width: 100%;
			max-width: none;
		}
		.tp-pl-sidebar .tp-pl-list {
			flex: 0 0 auto;
			width: 100%;
			max-width: none;
			min-width: 0;
			flex-direction: row;
			overflow-x: auto;
			max-height: none;
		}
		/* Stacked, the rows scroll sideways — size each to its content instead
		   of letting them share the width and truncate to a few characters. */
		.tp-pl-sidebar .tp-pl-item {
			flex: 0 0 auto;
			width: auto;
			max-width: 220px;
		}
		.tp-pl-sidebar .tp-pl-item-title {
			-webkit-line-clamp: 1;
			white-space: nowrap;
		}
	}
}

.tp-stage:fullscreen {
	border-radius: 0;
}
.tp-stage:fullscreen .tp-media,
.tp-stage:fullscreen .tp-media-container {
	-o-object-fit: contain;
	   object-fit: contain;
}

/* Timed content region (pro): swaps below the player with the timeline. */
.tp-timed-content {
	margin-top: 12px;
	padding: 14px 16px;
	border: 1px solid var(--tp-line, #e5e7eb);
	border-radius: var(--tp-radius, 8px);
	background: var(--tp-timed-bg, rgba(0, 0, 0, 0.02));
	animation: tp-timed-in 0.25s ease;
}
@keyframes tp-timed-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }