/**
 * The theme's Media Chrome skin.
 *
 * Replaces the 59 KB of stock Vidstack CSS (vidstack-theme.css + vidstack-video.css).
 *
 * The layout is a flat, simplified reading of the Vidstack skin recorded in
 * docs/vidstack-baseline — mute and volume top-right, a 45 px circular #FBD50C play
 * button centred, time and title bottom-left, fullscreen bottom-right, seek bar along
 * the bottom. The client confirmed on 2026-07-31 that an exact reproduction of the old
 * control bar is not required, so the settings menu, chapters, AirPlay, Cast and the
 * tooltip layer are not rebuilt. Everything that *is* here matches the measured
 * baseline: the play button geometry, the control colours and the scrim.
 */

/* ---------------------------------------------------------------- the box */

media-controller.tr-player {
	/**
	 * The player never sizes itself; the Tailwind wrapper does — aspect-video,
	 * aspect-[4/3] or aspect-square. Without this the controller collapses.
	 * See docs/media-flow-review.md §10.8.
	 */
	width: 100%;
	height: 100%;
	display: block;

	/**
	 * Vidstack switches to its large arrangement at `width >= 576 && height >= 380`.
	 * Media Chrome's own breakpoints cannot express that — they are computed from
	 * `contentRect.width` alone — so the threshold is reproduced with a container
	 * query, which can test both axes. In practice every surface in this theme is
	 * below it and only fullscreen crosses over.
	 * See docs/vidstack-baseline/README.md.
	 */
	container-type: size;
	container-name: tr-player;

	/* §10.3: the tokens that were in force under Vidstack. */
	--media-background-color: #000;
	--media-primary-color: #f5f5f5;
	--media-secondary-color: transparent;
	--media-text-color: #f5f5f5;
	--media-font-family: sans-serif;
	--media-control-background: transparent;
	--media-control-hover-background: rgb(255 255 255 / 0.2);
	--media-focus-ring: 0 0 0 3px rgb(78 156 246);

	/* §10.2: the theme's three overrides. Border and radius are zero everywhere
	   except fullscreen, which matches today. */
	border: 0;
	border-radius: 0;
	background: #000;
}

media-controller.tr-player :where([slot='media']),
media-controller.tr-player :where([slot='media'] iframe),
media-controller.tr-player :where(video) {
	width: 100%;
	height: 100%;
}

media-controller.tr-player media-poster-image {
	--media-object-fit: cover;
	--media-object-position: center;
}

/* ------------------------------------------------------------- control bars */

media-controller.tr-player media-control-bar {
	--media-control-height: 36px; /* §10.3: --media-button-size, small layout */
	align-items: center;
	padding: 4px 6px;
}

.tr-player .tr-player-spacer {
	flex: 1 1 auto;
}

/* The scrim. §10.3 records
   `linear-gradient(to top, rgb(0 0 0 / .6), 10%, transparent, 95%, rgb(0 0 0 / .3))`
   over the whole controls layer; split across the two bars it reads the same. */
.tr-player .tr-player-top {
	background: linear-gradient(to bottom, rgb(0 0 0 / 0.3), transparent);
}

.tr-player .tr-player-bottom {
	background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent);
	padding-bottom: 0;
	gap: 8px;
}

.tr-player media-time-display,
.tr-player .tr-player-title {
	font-size: 14px; /* §10.3: --video-sm-time-font-size */
	color: #f5f5f5;
	/* §10.3: the 1px four-way dark outline on the time text. */
	text-shadow:
		1px 1px 0 #333,
		-1px 1px 0 #333,
		1px -1px 0 #333,
		-1px -1px 0 #333;
}

.tr-player .tr-player-title {
	/**
	 * media-control-bar sets `line-height: 0` on itself to kill inline-block gaps
	 * between its buttons. A plain <span> slotted into it inherits that and collapses
	 * to zero height — the text is there, laid out, and invisible. Anything that is
	 * not a media-chrome element needs its line-height put back.
	 */
	line-height: 36px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	opacity: 0.9;
}

/**
 * The rail cards are 180 x 135 and the carousel thumbnails not much bigger. Vidstack
 * showed its chapter title at 378px wide inside a 507px player; below roughly that,
 * a title is two ellipsised characters and just crowds the time.
 */
@container tr-player (max-width: 400px) {
	.tr-player .tr-player-title {
		display: none;
	}
}

/* The volume slider expands on hover, as it did in the large Vidstack layout. */
.tr-player media-volume-range {
	--media-range-track-height: 3px;
	--media-range-thumb-height: 10px;
	--media-range-thumb-width: 10px;
	width: 0;
	overflow: hidden;
	transition:
		width 150ms ease,
		opacity 150ms ease;
	opacity: 0;
}

.tr-player .tr-player-top:hover media-volume-range,
.tr-player media-volume-range:focus-within {
	width: 72px; /* §10.3: --video-volume-slider-max-width */
	opacity: 1;
}

/* -------------------------------------------------------- the play button */

/**
 * Pinned to the whole player box, not to the gap between the bars.
 *
 * `centered-chrome` is slotted into Media Chrome's `vertical-layer`, which is a flex
 * column holding the top bar, the centred slot and the bottom bar in sequence. Left in
 * flow the button therefore centres in the space *between* the bars, which put it 50 px
 * below the middle of the player — visibly low, and on YouTube it sat under the
 * provider's own play button instead of over it. The layer is `position: absolute`, so
 * taking the button out of flow against it gives a true centre.
 */
.tr-player .tr-player-center {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/**
 * 56 px, centred.
 *
 * The Vidstack baseline measured 45 x 45 with `translateY(25%)` and `margin-bottom: 2px`
 * — reproduced faithfully at first, and both are deliberately dropped here. The client
 * asked on 2026-08-01 for it centred and bigger so it would cover YouTube's own play
 * button, then a size back down from the 68 px that produced. 56 px still hides
 * YouTube's 68 x 48 button on the sizes this theme renders, because the provider scales
 * its button down with the embed.
 */
.tr-player .tr-player-play {
	--media-control-background: #fbd50c;
	--media-control-hover-background: #fbd50c;
	--media-primary-color: #2a2d36;
	--media-button-icon-width: 24px;

	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 100%;
	overflow: hidden;
	pointer-events: auto;
	transition: filter 150ms ease;
}

/**
 * The most-viewed rail is 180 x 135 and the smallest thumbnails smaller still; the full
 * size there would be a third of the width of the card.
 */
@container tr-player (max-width: 300px) {
	.tr-player .tr-player-play {
		--media-button-icon-width: 18px;
		width: 40px;
		height: 40px;
	}
}

.tr-player .tr-player-play:hover {
	filter: brightness(1.05);
}

/* ------------------------------------------------------------- the seek bar */

.tr-player .tr-player-seek {
	--media-range-track-height: 4px;
	--media-range-track-color: rgb(255 255 255 / 0.3);
	--media-range-bar-color: #f5f5f5; /* §10.3: --video-brand */
	--media-range-track-pointer-background: rgb(255 255 255 / 0.5);
	--media-range-thumb-height: 12px;
	--media-range-thumb-width: 12px;
	--media-range-thumb-background: #f5f5f5;

	width: 100%;
	height: 24px;
	background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent);
}

/* ------------------------------------------------ the large arrangement */

/**
 * Fullscreen, in practice. Vidstack's large layout drops the centred play button into
 * the control bar and loses the yellow — `--video-sm-play-button-bg` applies only to
 * `[data-sm]`, a detail §10.2 flags as easy to get wrong.
 */


/* 20260801: use yellow style */
/*
@container tr-player (min-width: 576px) and (min-height: 380px) {
	.tr-player .tr-player-play {
		--media-control-background: transparent;
		--media-control-hover-background: rgb(255 255 255 / 0.2);
		--media-primary-color: #f5f5f5;
		--media-button-icon-width: 24px;

		width: 36px;
		height: 36px;
		border-radius: 4px;
	}

	.tr-player media-time-display,
	.tr-player .tr-player-title {
		font-size: 16px; /* §10.3: --video-fullscreen-time-font-size */
	}
}
*/

/* ------------------------------------------------------------ the mini player */

/**
 * §10.7: fixed bottom-right, w-80 (320px), intrinsic height. The container is
 * footer.php's and is unchanged; only its contents are.
 */
media-controller.tr-player--mini {
	aspect-ratio: 16 / 9;
	height: auto;
}