.video {
	/* this is for the fallback below */
	container-type: inline-size;
	overflow: hidden;
}

.video.glue-video-external-controls { overflow:visible !important; }
.video.glue-video-external-controls > .glue-video-controls { --glue-video-control-bottom:10px !important; --glue-video-control-side:10px !important; }
.glue-video-media-mask { border-radius:inherit; height:100%; inset:0; overflow:hidden; position:absolute; width:100%; }
.glue-video-media-mask > video,
.glue-video-media-mask > audio { border-radius:inherit; height:100%; width:100%; }
.video.glue-video-external-controls video::-webkit-media-controls,
.video.glue-video-external-controls video::-webkit-media-controls-enclosure,
.video.glue-video-external-controls audio::-webkit-media-controls,
.video.glue-video-external-controls audio::-webkit-media-controls-enclosure { display:none !important; }

/* Audio has no picture area: its object is the retro control panel itself.
   Keeping the panel inside the object makes selection, dragging and touch
   targets line up with what the visitor can actually see. */
.video.audio > .glue-video-media-mask { height:0; overflow:hidden; }
.video.audio > .glue-video-controls {
	left:0;
	min-width:0;
	top:0;
	transform:none;
	width:100%;
}

/* Centered pages preserve their authored composition by scaling the canvas
   down on narrow screens. Controls are interaction chrome, so counter that
   scale: their 44px targets and the requested 19px media gap remain physical
   CSS pixels instead of becoming tiny along with the artwork. The max-width
   is calculated in the canvas coordinate space by centered_layout_init(). */
.hg-centered-fit #hg-centered-wrapper .video.glue-video-external-controls > .glue-video-controls {
	max-width: var(--hg-page-control-max, calc(100vw - 16px));
	top: calc(100% + 19px * var(--hg-page-inverse-scale, 1));
	transform: translateX(-50%) scale(var(--hg-page-inverse-scale, 1));
	transform-origin: top center;
}

.hg-centered-fit #hg-centered-wrapper .video.audio.glue-video-external-controls > .glue-video-controls {
	left: 50%;
	top: 0;
	transform: translateX(-50%) scale(var(--hg-page-inverse-scale, 1));
	transform-origin: top center;
}

.glue-video-controls {
	background-color: rgba(12, 12, 12, .92);
	background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.045) 3px 4px);
	border-top: 2px solid #fff;
	bottom: auto;
	box-sizing: border-box;
	color: white;
	display: grid;
	gap: 4px;
	grid-template-areas: "seek" "time" "buttons";
	grid-template-columns: minmax(0, 1fr);
	left: 50%;
	padding: 8px var(--glue-video-control-side, 14px) var(--glue-video-control-bottom, 18px);
	min-width: min(220px, calc(100vw - 16px));
	position: absolute;
	top: calc(100% + 19px);
	transform: translateX(-50%);
	width: max(100%, min(220px, calc(100vw - 16px)));
	z-index: 2;
}

.glue-video-control-row { align-items:center; display:flex; gap:4px; grid-area:buttons; min-width:0; width:100%; }
.glue-video-controls:has(.glue-video-download) { min-width:min(264px, calc(100vw - 16px)); width:max(100%, min(264px, calc(100vw - 16px))); }
.glue-video-controls button, .glue-video-controls a { align-items:center; background:#111; border:2px solid #fff; border-radius:0; box-sizing:border-box; color:white; cursor:pointer; display:flex; flex:0 0 44px; height:44px; justify-content:center; padding:8px; touch-action:manipulation; }
.glue-video-controls button:focus-visible, .glue-video-controls a:focus-visible { background:#ef3232; color:#000; outline:2px solid #000; }
@media (hover:hover) {
	.glue-video-controls button:hover, .glue-video-controls a:hover { background:#ef3232; color:#000; outline:2px solid #000; }
}
.glue-video-controls button:active, .glue-video-controls a:active { box-shadow:inset 3px 3px 0 #000; transform:translate(2px,2px); }
.glue-video-controls svg { fill:currentColor; height:22px; shape-rendering:crispEdges; width:22px; }
.glue-video-seek, .glue-video-volume { appearance:none; background:transparent; cursor:pointer; height:28px; margin:0; touch-action:pan-x; }
.glue-video-seek { grid-area:seek; width:100%; }
.glue-video-volume { flex:1 1 54px; min-width:42px; }
.glue-video-seek::-webkit-slider-runnable-track, .glue-video-volume::-webkit-slider-runnable-track { background:#fff; border:2px solid #111; height:8px; }
.glue-video-seek::-webkit-slider-thumb, .glue-video-volume::-webkit-slider-thumb { appearance:none; background:#ef3232; border:2px solid #111; border-radius:0; height:20px; margin-top:-8px; width:14px; }
.glue-video-seek::-moz-range-track, .glue-video-volume::-moz-range-track { background:#fff; border:2px solid #111; height:6px; }
.glue-video-seek::-moz-range-thumb, .glue-video-volume::-moz-range-thumb { background:#ef3232; border:2px solid #111; border-radius:0; height:16px; width:12px; }
.glue-video-time { font:700 14px/1.2 "Courier New",monospace; grid-area:time; letter-spacing:-.5px; text-align:center; text-shadow:2px 2px 0 #000; white-space:nowrap; }
.glue-video-control-spacer { flex:1 1 auto; min-width:0; }
.video:fullscreen { background:#000; border-radius:0 !important; height:100vh !important; left:0 !important; top:0 !important; transform:none !important; width:100vw !important; }
.video:fullscreen > .glue-video-media-mask > video { object-fit:contain; }
.video:fullscreen > .glue-video-controls { bottom:0; left:0; min-width:0; padding-bottom:14px; padding-left:24px; padding-right:24px; top:auto; transform:none; width:100%; }
.video:fullscreen .glue-video-volume,
.video.glue-video-fullscreen .glue-video-volume { flex:0 0 120px; }

@container (min-width: 361px) {
	.glue-video-controls { grid-template-areas:"seek seek" "time buttons"; grid-template-columns:auto minmax(230px,1fr); }
	.glue-video-time { align-self:center; margin-right:10px; text-align:left; }
}


.video-fallback {
	/* displayed when the browser can't interpret the video tag */
	height: 100%;
	margin-top: -25px;
	min-height: 50px;
	overflow: hidden;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 100%;
}

.video-processing {
	/* Persist the upload-progress visual at the video's saved canvas position
	   while a background encode/trim is still in progress. */
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	overflow: hidden;
	width: 100%;
}

.video-processing-statusbar {
	background: #ddd;
	height: 7px;
	max-width: calc(100% - 20px);
	width: 200px;
}

.video-processing-statusbar-done {
	background: green;
	border-radius: 3px;
	height: 100%;
	width: 100%;
}

.video-processing-label {
	color: #333;
	font: 400 16px/24px sans-serif !important;
	text-align: center;
}