/**
 * Emily's Custom Vimeo Controls
 *
 * Every visual value is a custom property set by the active template and
 * scoped to .ecvc-scope, so tokens can never leak into the surrounding
 * theme and two players on one page could use different templates.
 *
 * The defaults below are only a safety net for when no template loads.
 */

.ecvc-scope {
	--ecvc-accent: #00adef;
	--ecvc-accent-rgb: 0, 173, 239;
	--ecvc-bar-bg: #0c0e12;
	--ecvc-bar-bg-rgb: 12, 14, 18;
	--ecvc-bar-fg: #fff;
	--ecvc-bar-fg-rgb: 255, 255, 255;
	--ecvc-track: #7f7f7f;
	--ecvc-track-rgb: 127, 127, 127;
	--ecvc-buffer: #c8c8c8;
	--ecvc-buffer-rgb: 200, 200, 200;

	--ecvc-bar-alpha: .82;
	--ecvc-gradient: 1;
	--ecvc-blur: 0px;
	--ecvc-shadow: 0px;
	--ecvc-radius: 6px;

	--ecvc-bar-h: 38px;
	--ecvc-icon: 22px;
	--ecvc-gap: 6px;
	--ecvc-pad-x: 12px;
	--ecvc-inset-x: 0px;
	--ecvc-inset-b: 0px;
	--ecvc-font-scale: 1;

	--ecvc-scrub-h: 5px;
	--ecvc-handle: 13px;
	--ecvc-bigplay: 74px;
	--ecvc-dim: .8;
}

/* ------------------------------------------------------------------ frame */

/* Wraps the stage, and the control bar too when it is docked, so that
   fullscreen captures both. */
.ecvc-frame {
	position: relative;
	width: 100%;
}

/* A host is an ancestor that was sizing the video with a padding-ratio box:
   its ::before reserves the height while the iframe floats on top. Once the
   iframe lives in our own aspect-ratio stage that reserved height becomes a
   large empty block above the video, so it is switched off here.

   !important is deliberate — these rules exist specifically to beat theme
   and WordPress core CSS that we do not control. */
.ecvc-host {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	height: auto !important;
	min-height: 0 !important;
}

.ecvc-host::before {
	display: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	height: 0 !important;
	content: none !important;
}

/* Core also absolutely positions the iframe inside those wrappers; our stage
   positions it itself, so that rule must not reach past the stage. */
.ecvc-host .ecvc-frame,
.ecvc-host .ecvc-stage {
	position: relative !important;
	inset: auto !important;
	width: 100% !important;
	height: auto !important;
}

.ecvc-frame:fullscreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #000;
}

.ecvc-frame:fullscreen .ecvc-stage {
	flex: 1 1 auto;
	min-height: 0;
	aspect-ratio: auto;
}

/* ------------------------------------------------------------------ stage */

.ecvc-stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ecvc-ratio, 1.7778);
	overflow: hidden;
	background: #000;
}

.ecvc-stage > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Theater mode breaks the player out to the full viewport width. Applied to
   the frame so a docked control bar widens with the video. Themes with an
   unusual wrapper may need this overridden. */
.ecvc-frame.is-theater {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Transparent click target over the iframe. */
.ecvc-catch {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.ecvc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------- bar */

.ecvc-bar {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--ecvc-bar-fg);
}

.ecvc-bar--overlay {
	position: absolute;
	right: var(--ecvc-inset-x);
	bottom: var(--ecvc-inset-b);
	left: var(--ecvc-inset-x);
	z-index: 3;
	padding: 26px var(--ecvc-pad-x) 10px;
	font-size: calc(1em * var(--ecvc-font-scale));
	transition: opacity .25s ease, transform .25s ease;
}

/* Once the bar is inset from the video edges it reads as a floating panel,
   so it takes the corner radius and the shadow. Flush to the edge it should
   not, or the rounding clips against the frame. */
.ecvc-bar--overlay::before,
.ecvc-bar--overlay::after {
	border-radius: var(--ecvc-radius);
}

.ecvc-bar--overlay::after {
	-webkit-backdrop-filter: blur(var(--ecvc-blur));
	backdrop-filter: blur(var(--ecvc-blur));
	box-shadow: 0 calc(var(--ecvc-shadow) / 3) var(--ecvc-shadow) rgba(0, 0, 0, .45);
}

/* Two stacked backgrounds: a gradient and a flat fill, cross-faded by the
   --ecvc-gradient token so one slider covers both looks. */
.ecvc-bar--overlay::before,
.ecvc-bar--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ecvc-bar--overlay::before {
	background: linear-gradient(to top,
		rgba(var(--ecvc-bar-bg-rgb), var(--ecvc-bar-alpha)) 0%,
		rgba(var(--ecvc-bar-bg-rgb), calc(var(--ecvc-bar-alpha) * .55)) 52%,
		rgba(var(--ecvc-bar-bg-rgb), 0) 100%);
	opacity: var(--ecvc-gradient);
}

.ecvc-bar--overlay::after {
	background: rgba(var(--ecvc-bar-bg-rgb), var(--ecvc-bar-alpha));
	opacity: calc(1 - var(--ecvc-gradient));
}

.ecvc-stage.is-idle .ecvc-bar--overlay {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

.ecvc-stage.is-idle .ecvc-catch {
	cursor: none;
}

/* Docked under the video. */
.ecvc-bar:not(.ecvc-bar--overlay) {
	padding: 9px var(--ecvc-pad-x) 10px;
	margin: 0;
	font-size: calc(1em * var(--ecvc-font-scale));
	background: rgba(var(--ecvc-bar-bg-rgb), var(--ecvc-bar-alpha));
	border-radius: 0 0 var(--ecvc-radius) var(--ecvc-radius);
}

.ecvc-row {
	display: flex;
	gap: var(--ecvc-gap);
	align-items: center;
}

.ecvc-spacer {
	flex: 1 1 auto;
}

/* ---------------------------------------------------------------- buttons */

.ecvc-btn {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	min-width: var(--ecvc-bar-h);
	min-height: var(--ecvc-bar-h);
	padding: 0 8px;
	font: inherit;
	font-size: .9em;
	font-weight: 600;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--ecvc-radius);
	opacity: var(--ecvc-dim);
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease;
}

.ecvc-btn svg {
	display: block;
	width: var(--ecvc-icon);
	height: var(--ecvc-icon);
	fill: currentColor;
	pointer-events: none;
}

.ecvc-btn svg .ecvc-skip-n {
	fill: currentColor;
	font-family: inherit;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.ecvc-btn-label {
	font-size: .72em;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.ecvc-btn:hover:not([disabled]) {
	opacity: 1;
	background: rgba(127, 127, 127, .22);
}

.ecvc-btn.is-on {
	color: var(--ecvc-accent);
	opacity: 1;
}

.ecvc-btn[disabled] {
	opacity: .3;
	cursor: default;
}

.ecvc-btn:focus-visible,
.ecvc-scrub:focus-visible {
	outline: 2px solid var(--ecvc-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(var(--ecvc-accent-rgb), .28);
}

.ecvc-time {
	padding: 0 4px;
	font-size: .8em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: var(--ecvc-dim);
}

/* --------------------------------------------------------------- big play */

.ecvc-bigplay {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: var(--ecvc-bigplay);
	height: var(--ecvc-bigplay);
	padding: 0;
	color: var(--ecvc-bar-fg);
	background: rgba(var(--ecvc-bar-bg-rgb), .6);
	border: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}

.ecvc-bigplay svg {
	width: calc(var(--ecvc-bigplay) * .46);
	height: calc(var(--ecvc-bigplay) * .46);
	margin-left: 3px;
	fill: currentColor;
}

.ecvc-bigplay:hover {
	background: var(--ecvc-accent);
	transform: translate(-50%, -50%) scale(1.06);
}

.ecvc-bigplay[hidden] {
	display: none;
}

.ecvc-scope[style*="--ecvc-bigplay: 0"] .ecvc-bigplay,
.ecvc-stage[style*="--ecvc-bigplay: 0"] .ecvc-bigplay {
	display: none;
}

/* --------------------------------------------------------------- scrubber */

.ecvc-scrub {
	position: relative;
	height: calc(var(--ecvc-scrub-h) + 12px);
	cursor: pointer;
	touch-action: none;
}

.ecvc-scrub-track {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: var(--ecvc-scrub-h);
	background: rgba(var(--ecvc-track-rgb), .38);
	border-radius: 99px;
	transform: translateY(-50%);
	transition: height .12s ease;
}

.ecvc-scrub:hover .ecvc-scrub-track,
.ecvc-scrub:focus-visible .ecvc-scrub-track {
	height: calc(var(--ecvc-scrub-h) + 2px);
}

.ecvc-scrub-buffer,
.ecvc-scrub-played {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	border-radius: 99px;
}

.ecvc-scrub-buffer {
	background: rgba(var(--ecvc-buffer-rgb), .32);
}

.ecvc-scrub-played {
	background: var(--ecvc-accent);
}

.ecvc-scrub-handle {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--ecvc-handle);
	height: var(--ecvc-handle);
	background: var(--ecvc-accent);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform .12s ease;
	pointer-events: none;
}

.ecvc-scrub:hover .ecvc-scrub-handle,
.ecvc-scrub:focus-visible .ecvc-scrub-handle {
	transform: translate(-50%, -50%) scale(1);
}

.ecvc-scrub-marks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ecvc-scrub-mark {
	position: absolute;
	top: 0;
	width: 2px;
	height: 100%;
	background: rgba(0, 0, 0, .55);
}

.ecvc-scrub-tip {
	position: absolute;
	bottom: 100%;
	padding: 3px 7px;
	font-size: .72em;
	font-variant-numeric: tabular-nums;
	color: #fff;
	white-space: nowrap;
	background: rgba(12, 14, 18, .92);
	border-radius: 4px;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity .12s ease;
	pointer-events: none;
}

.ecvc-scrub.is-hovering .ecvc-scrub-tip {
	opacity: 1;
}

/* ----------------------------------------------------------------- volume */

/* The slider opens in its own layer above the button. The bar's layout
   never changes, so the button stays under the pointer. It stays a plain
   horizontal range: rotating one with a transform breaks pointer mapping
   in Chromium and reads as "the volume just went silent". */
.ecvc-vol-pop {
	position: absolute;
	left: 50%;
	bottom: 100%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 144px;
	height: 34px;
	padding: 0 12px 2px; /* bottom padding bridges the gap to the button */
	box-sizing: border-box;
	/* A neutral plate, not the bar's tint: over pink or pale footage the
	   tinted version dissolved into a blur with the slider floating in it. */
	background: rgba(18, 18, 20, .78);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	transform: translateX(-50%) translateY(4px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

.ecvc-volume:hover .ecvc-vol-pop,
.ecvc-volume:focus-within .ecvc-vol-pop {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* A right-aligned volume control near the edge would push its panel
   outside the video; pin it to the button's right edge instead. */
.ecvc-volume:last-child .ecvc-vol-pop,
.ecvc-volume:nth-last-child(2) .ecvc-vol-pop {
	left: auto;
	right: 0;
	transform: translateY(4px);
}

.ecvc-volume:last-child:hover .ecvc-vol-pop,
.ecvc-volume:last-child:focus-within .ecvc-vol-pop,
.ecvc-volume:nth-last-child(2):hover .ecvc-vol-pop,
.ecvc-volume:nth-last-child(2):focus-within .ecvc-vol-pop {
	transform: translateY(0);
}

.ecvc-vol-slider {
	width: 100%;
	height: 20px;
	margin: 0;
	cursor: pointer;
}

/* ------------------------------------------------------------------ menus */

/* Wrapper divs (menus, volume) must not introduce a line box of their own:
   a block wrapper takes the theme's line-height and sits its button on the
   text baseline, which lands icon buttons and text buttons at different
   heights. Same flex centring as the row, same height as a button. */
.ecvc-menu,
.ecvc-volume {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--ecvc-bar-h);
	line-height: 1;
}

.ecvc-menu[hidden] {
	display: none;
}

.ecvc-menu-text {
	display: block;
	font-size: .82em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ecvc-menu-list {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	z-index: 6;
	min-width: 150px;
	max-height: 260px;
	padding: 4px;
	overflow-y: auto;
	color: #fff;
	background: rgba(18, 20, 26, .96);
	border-radius: var(--ecvc-radius);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}

.ecvc-bar:not(.ecvc-bar--overlay) .ecvc-menu-list {
	top: calc(100% + 8px);
	bottom: auto;
}

.ecvc-menu-item {
	position: relative;
	display: block;
	width: 100%;
	padding: 8px 10px 8px 26px;
	font: inherit;
	font-size: .82em;
	color: inherit;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.ecvc-menu-item:hover,
.ecvc-menu-item:focus-visible {
	background: rgba(255, 255, 255, .12);
	outline: none;
}

.ecvc-menu-item.is-active::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 12px;
	width: 6px;
	height: 6px;
	background: var(--ecvc-accent);
	border-radius: 50%;
	transform: translateY(-50%);
}

/* ------------------------------------------------------- resume and toast */

.ecvc-resume {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 10px 12px;
	font-size: .9em;
	border-radius: var(--ecvc-radius);
}

.ecvc-stage > .ecvc-resume {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	color: var(--ecvc-bar-fg);
	background: rgba(var(--ecvc-bar-bg-rgb), .92);
}

.ecvc-resume .ecvc-btn {
	height: 32px;
	border: 1px solid currentColor;
}

.ecvc-toast {
	position: absolute;
	bottom: 84px;
	left: 50%;
	z-index: 5;
	padding: 8px 14px;
	font-size: .85em;
	color: #fff;
	background: rgba(12, 14, 18, .92);
	border-radius: var(--ecvc-radius);
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.ecvc-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------- help */

.ecvc-helpbox {
	padding: 14px 16px;
	font-size: .88em;
	border-radius: var(--ecvc-radius);
}

.ecvc-stage > .ecvc-helpbox {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 7;
	max-height: 80%;
	overflow-y: auto;
	color: #fff;
	background: rgba(18, 20, 26, .96);
	transform: translate(-50%, -50%);
}

.ecvc-helplist {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	margin: 10px 0 0;
}

.ecvc-helplist dt,
.ecvc-helplist dd {
	margin: 0;
}

.ecvc-helplist kbd {
	padding: 2px 6px;
	font-size: .9em;
	background: rgba(127, 127, 127, .22);
	border-radius: 3px;
}

.ecvc-helpclose {
	margin-top: 12px;
	border: 1px solid currentColor;
}

/* -------------------------------------------------------------- buffering */

.ecvc-stage.is-buffering::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border: 3px solid rgba(255, 255, 255, .25);
	border-top-color: var(--ecvc-accent);
	border-radius: 50%;
	animation: ecvc-spin .8s linear infinite;
}

@keyframes ecvc-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ small */

/* Compact layout. The script adds .ecvc-compact to the frame when the
   player is narrower than the compact width and rebuilds the bar docked
   under the video, so nothing here has to fight an overlay. */
.ecvc-compact .ecvc-bar {
	padding: 6px 6px 8px;
	border-radius: 0 0 var(--ecvc-radius) var(--ecvc-radius);
}

/* The row may still need two lines with every control on; docked under
   the picture that is fine. Left cluster, spacer, right cluster on the
   first line; overflow aligns right on the next. */
.ecvc-compact .ecvc-row {
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2px max(2px, calc(var(--ecvc-gap) / 2));
}

.ecvc-compact .ecvc-btn {
	min-width: calc(var(--ecvc-bar-h) - 6px);
	min-height: calc(var(--ecvc-bar-h) - 6px);
	padding: 0 4px;
}

.ecvc-compact .ecvc-menu,
.ecvc-compact .ecvc-volume {
	min-height: calc(var(--ecvc-bar-h) - 6px);
}

.ecvc-compact .ecvc-time {
	padding: 0 2px;
	font-size: .72em;
}

/* The skip interval is drawn inside the arrows; the optional text beside
   them is dead weight at this size. */
.ecvc-compact .ecvc-btn-label {
	display: none;
}

/* A volume slider is a poor fit for touch; the mute button stays. */
.ecvc-compact .ecvc-vol-pop,
.ecvc-compact .ecvc-volume:hover .ecvc-vol-pop,
.ecvc-compact .ecvc-volume:focus-within .ecvc-vol-pop {
	display: none;
}

/* Menus open upward from a docked bar; keep them inside the frame. */
.ecvc-compact .ecvc-menu-list {
	max-height: 40vh;
	overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
	.ecvc-bar--overlay,
	.ecvc-scrub-track,
	.ecvc-scrub-handle,
	.ecvc-vol-pop,
	.ecvc-toast,
	.ecvc-bigplay {
		transition: none;
	}

	.ecvc-stage.is-buffering::after {
		animation-duration: 2s;
	}
}

/* ==========================================================================
   Diagnostics
   Admin-only, and deliberately styled without any --ecvc-* token: if the
   template variables are the thing that is broken, the panel reporting it
   must not break with them.
   ========================================================================== */

.ecvc-diag-open {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 20;
	padding: 6px 12px;
	font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #14161c;
	background: #ffd479;
	border: 1px solid #d9a441;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	cursor: pointer;
}

.ecvc-diag-open:hover {
	background: #ffdf9a;
}

.ecvc-diag-panel {
	position: absolute;
	inset: 8px;
	z-index: 21;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font: 12px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #e7eaf1;
	text-align: left;
	background: rgba(14, 16, 21, .97);
	border: 1px solid #2a2f3d;
	border-radius: 8px;
}

.ecvc-diag-head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid #2a2f3d;
}

.ecvc-diag-tally {
	font-size: 11px;
	color: #8891a3;
}

.ecvc-diag-list {
	flex: 1 1 auto;
	padding: 6px 0;
	overflow-y: auto;
}

.ecvc-diag-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 7px 14px;
}

.ecvc-diag-row + .ecvc-diag-row {
	border-top: 1px solid #1b1f29;
}

.ecvc-diag-badge {
	flex: 0 0 auto;
	min-width: 44px;
	padding: 2px 6px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	border-radius: 3px;
}

.ecvc-diag-row.is-pass .ecvc-diag-badge { color: #0d2f18; background: #6cc48a; }
.ecvc-diag-row.is-warn .ecvc-diag-badge { color: #3a2a05; background: #e0b455; }
.ecvc-diag-row.is-fail .ecvc-diag-badge { color: #3a0f0f; background: #e0736a; }
.ecvc-diag-row.is-info .ecvc-diag-badge { color: #17222e; background: #7fa8cc; }

.ecvc-diag-body {
	min-width: 0;
}

.ecvc-diag-label {
	font-weight: 600;
}

.ecvc-diag-detail {
	margin: 3px 0 0;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	line-height: 1.5;
	color: #97a0b2;
	white-space: pre-wrap;
	word-break: break-word;
}

.ecvc-diag-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 10px 14px;
	border-top: 1px solid #2a2f3d;
}

.ecvc-diag-btn {
	padding: 7px 14px;
	font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #e7eaf1;
	background: #232833;
	border: 1px solid #2f3543;
	border-radius: 6px;
	cursor: pointer;
}

.ecvc-diag-btn.is-primary {
	color: #14161c;
	background: #ffd479;
	border-color: #d9a441;
}

.ecvc-diag-only {
	margin-left: auto;
	font-size: 10.5px;
	color: #5c6474;
}

/* ==========================================================================
   Theme hardening

   The player renders inside post content, where themes style buttons, inputs
   and links freely. A rule like `.entry-content button { color: #0073aa }`
   is specificity 0,1,1 and beats a bare `.ecvc-btn` at 0,1,0 — and because
   the icons are drawn with `fill: currentColor`, losing `color` turns every
   icon the theme's link colour.

   Everything below re-asserts the player's own values at 0,2,0 or higher,
   qualified by .ecvc-scope, which sits on the stage and on any element that
   can be inserted outside it. These are last in the file so they also win
   on ties.

   This block deliberately duplicates values from above. That is the cost of
   living inside someone else's stylesheet.
   ========================================================================== */

.ecvc-scope button.ecvc-btn,
.ecvc-scope button.ecvc-bigplay,
.ecvc-scope button.ecvc-menu-item {
	margin: 0;
	font-family: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.ecvc-scope .ecvc-btn {
	min-width: var(--ecvc-bar-h);
	min-height: var(--ecvc-bar-h);
	padding: 0 8px;
	color: var(--ecvc-bar-fg);
	background: transparent;
	border: 0;
	border-radius: var(--ecvc-radius);
	opacity: var(--ecvc-dim);
}

.ecvc-scope .ecvc-btn:hover:not([disabled]) {
	color: var(--ecvc-bar-fg);
	background: rgba(127, 127, 127, .22);
	opacity: 1;
}

.ecvc-scope .ecvc-btn.is-on {
	color: var(--ecvc-accent);
	opacity: 1;
}

.ecvc-scope .ecvc-btn[disabled] {
	opacity: .3;
}

.ecvc-scope .ecvc-btn svg,
.ecvc-scope .ecvc-bigplay svg {
	fill: currentColor;
	stroke: none;
}

.ecvc-scope .ecvc-btn svg {
	width: var(--ecvc-icon);
	height: var(--ecvc-icon);
}

.ecvc-scope .ecvc-bigplay {
	color: var(--ecvc-bar-fg);
	background: rgba(var(--ecvc-bar-bg-rgb), .6);
	border: 0;
	border-radius: 50%;
}

.ecvc-scope .ecvc-bigplay:hover {
	color: var(--ecvc-bar-fg);
	background: var(--ecvc-accent);
}

.ecvc-scope .ecvc-time {
	color: var(--ecvc-bar-fg);
	opacity: var(--ecvc-dim);
}

.ecvc-scope .ecvc-menu-item {
	color: #fff;
	background: transparent;
	border: 0;
}

.ecvc-scope .ecvc-menu-item:hover,
.ecvc-scope .ecvc-menu-item:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, .12);
}

/* The played portion and handle must not inherit a theme accent. */
.ecvc-scope .ecvc-scrub-played,
.ecvc-scope .ecvc-scrub-handle {
	background: var(--ecvc-accent);
}

/* Wrapper divs stay flex-centred even where a theme styles content divs. */
.ecvc-scope div.ecvc-menu,
.ecvc-scope div.ecvc-volume {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	min-height: var(--ecvc-bar-h);
	line-height: 1;
}

.ecvc-scope .ecvc-btn svg {
	display: block;
	vertical-align: middle;
}

/* Muted reads as a state, not just a different glyph. */
.ecvc-scope .ecvc-mute.is-muted {
	opacity: .55;
}

.ecvc-scope .ecvc-mute.is-muted:hover,
.ecvc-scope .ecvc-mute.is-muted:focus-visible {
	opacity: 1;
}

/* The volume slider is drawn entirely by the plugin, for both engines.
   Themes commonly reset range inputs with appearance:none and then style
   only the WebKit parts, which leaves Firefox with an invisible control
   and Chrome with the theme's look. Nothing here is left to the browser. */
.ecvc-scope input[type="range"].ecvc-vol-slider {
	--ecvc-vol: 100%;
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 20px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	cursor: pointer;
}

.ecvc-scope input[type="range"].ecvc-vol-slider:focus-visible {
	outline: 2px solid var(--ecvc-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* WebKit / Blink */
.ecvc-scope input[type="range"].ecvc-vol-slider::-webkit-slider-runnable-track {
	height: 6px;
	border: 0;
	border-radius: 3px;
	background: linear-gradient(
		to right,
		var(--ecvc-accent) 0 var(--ecvc-vol),
		rgba(255, 255, 255, .22) var(--ecvc-vol) 100%
	);
}

.ecvc-scope input[type="range"].ecvc-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -4px; /* centre on a 6px track */
	border: 2px solid rgba(0, 0, 0, .35);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
}

/* Firefox */
.ecvc-scope input[type="range"].ecvc-vol-slider::-moz-range-track {
	height: 6px;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, .22);
}

.ecvc-scope input[type="range"].ecvc-vol-slider::-moz-range-progress {
	height: 6px;
	border: 0;
	border-radius: 3px;
	background: var(--ecvc-accent);
}

.ecvc-scope input[type="range"].ecvc-vol-slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(0, 0, 0, .35);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
}

.ecvc-scope input[type="range"].ecvc-vol-slider::-moz-focus-outer {
	border: 0;
}

/* A theme link colour must not bleed into the resume prompt or help panel. */
.ecvc-scope.ecvc-resume,
.ecvc-scope.ecvc-helpbox,
.ecvc-scope.ecvc-resume .ecvc-btn,
.ecvc-scope.ecvc-helpbox .ecvc-btn {
	color: var(--ecvc-bar-fg);
}

.ecvc-stage.ecvc-scope .ecvc-resume,
.ecvc-stage.ecvc-scope .ecvc-helpbox {
	color: #fff;
}

/* ==========================================================================
   Watermark

   An overlay in the page, not part of the video stream: it will not show in
   picture-in-picture and it is not protection. Inert by design — it must
   never intercept a click meant for the video.
   ========================================================================== */

.ecvc-watermark {
	position: absolute;
	z-index: 2;
	display: flex;
	width: var(--ecvc-wm-size, 14%);
	opacity: var(--ecvc-wm-opacity, .7);
	transition: opacity .25s ease;
	pointer-events: none;
}

.ecvc-watermark img {
	display: block;
	width: 100%;
	height: auto;
	/* A soft shadow keeps a light logo legible over blown-out footage
	   without needing a second asset. */
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}

/* Nine anchor points, driven by the template's edge-margin token. */
.ecvc-watermark[data-pos="tl"] { top: var(--ecvc-wm-margin, 16px); left: var(--ecvc-wm-margin, 16px); }
.ecvc-watermark[data-pos="tc"] { top: var(--ecvc-wm-margin, 16px); left: 50%; transform: translateX(-50%); }
.ecvc-watermark[data-pos="tr"] { top: var(--ecvc-wm-margin, 16px); right: var(--ecvc-wm-margin, 16px); }

.ecvc-watermark[data-pos="ml"] { top: 50%; left: var(--ecvc-wm-margin, 16px); transform: translateY(-50%); }
.ecvc-watermark[data-pos="mc"] { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ecvc-watermark[data-pos="mr"] { top: 50%; right: var(--ecvc-wm-margin, 16px); transform: translateY(-50%); }

.ecvc-watermark[data-pos="bl"] { bottom: var(--ecvc-wm-margin, 16px); left: var(--ecvc-wm-margin, 16px); }
.ecvc-watermark[data-pos="bc"] { bottom: var(--ecvc-wm-margin, 16px); left: 50%; transform: translateX(-50%); }
.ecvc-watermark[data-pos="br"] { bottom: var(--ecvc-wm-margin, 16px); right: var(--ecvc-wm-margin, 16px); }

/* Bottom anchors are lifted clear of the control bar while it is showing,
   then settle back down once it fades. Without this the logo sits behind
   the buttons on every bottom placement. */
.ecvc-stage:not(.is-idle) .ecvc-watermark[data-pos="bl"],
.ecvc-stage:not(.is-idle) .ecvc-watermark[data-pos="bc"],
.ecvc-stage:not(.is-idle) .ecvc-watermark[data-pos="br"] {
	bottom: calc(var(--ecvc-wm-margin, 16px) + var(--ecvc-bar-h) + var(--ecvc-scrub-h) + 22px);
}

.ecvc-watermark[data-pos="bl"],
.ecvc-watermark[data-pos="bc"],
.ecvc-watermark[data-pos="br"] {
	transition: opacity .25s ease, bottom .25s ease;
}

/* Optional: fade the watermark out with the controls, so a viewer gets a
   clean frame once they stop moving the pointer. */
.ecvc-stage.is-idle .ecvc-watermark.is-fading {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ecvc-watermark {
		transition: none;
	}
}

/* Optional backing plate. Reuses the template's own bar colour and corner
   radius, so the watermark reads as part of the same player rather than a
   sticker dropped on top. Padding scales with the mark so it stays
   proportional at any size. */
.ecvc-watermark.has-plate {
	box-sizing: content-box;
	padding: clamp(5px, 1.1vw, 12px);
	background: rgba(var(--ecvc-bar-bg-rgb), calc(var(--ecvc-bar-alpha) * .8));
	border-radius: var(--ecvc-radius);
	-webkit-backdrop-filter: blur(var(--ecvc-blur));
	backdrop-filter: blur(var(--ecvc-blur));
}

/* With a plate behind it the drop shadow is redundant and muddies the edge. */
.ecvc-watermark.has-plate img {
	filter: none;
}