/**
 * 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;
}

/* ------------------------------------------------------------------ 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;
}

.ecvc-stage:fullscreen {
	height: 100%;
	aspect-ratio: auto;
}

/* Theater mode breaks the stage out to the full viewport width. Themes with
   an unusual wrapper may need this overridden. */
.ecvc-stage.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 0 20px;
	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);
	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 {
	width: var(--ecvc-icon);
	height: var(--ecvc-icon);
	fill: currentColor;
	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 */

.ecvc-volume {
	display: flex;
	align-items: center;
}

.ecvc-vol-slider {
	width: 0;
	margin: 0;
	accent-color: var(--ecvc-accent);
	opacity: 0;
	cursor: pointer;
	transition: width .18s ease, opacity .18s ease, margin .18s ease;
}

.ecvc-volume:hover .ecvc-vol-slider,
.ecvc-volume:focus-within .ecvc-vol-slider {
	width: 72px;
	margin: 0 6px 0 2px;
	opacity: 1;
}

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

.ecvc-menu {
	position: relative;
}

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

.ecvc-menu-text {
	font-size: .82em;
	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 */

@media (max-width: 600px) {
	.ecvc-bar--overlay {
		padding: 20px 6px 6px;
	}

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

	.ecvc-time {
		font-size: .72em;
	}

	/* A volume slider is a poor fit for touch; the mute button stays. */
	.ecvc-vol-slider,
	.ecvc-volume:hover .ecvc-vol-slider {
		width: 0;
		margin: 0;
		opacity: 0;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecvc-bar--overlay,
	.ecvc-scrub-track,
	.ecvc-scrub-handle,
	.ecvc-vol-slider,
	.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 {
	min-width: 0;
	min-height: 0;
	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);
	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);
}

/* Themes routinely restyle range inputs; the volume slider is one. */
.ecvc-scope input.ecvc-vol-slider {
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	accent-color: var(--ecvc-accent);
}

/* 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;
}