/* [iz_media] — see includes/content/class-media-embed.php. A video is the frame and a caption under
 * it; a recording is one grey card, title first. Grey, not tint, for the inner box (owner, 2026-09-19).
 * Doubled class: a post-scoped `body.postid-N .article-content figure` rule in article.css is (0,2,2). */
.iz-media.iz-media { display: grid; gap: var(--space-2); margin-block: var(--space-5); margin-inline: 0; }
.iz-media.iz-media :is(span, a) { margin: 0; }

.iz-media__frame {
	position: relative; overflow: hidden; aspect-ratio: 16 / 9;
	border-radius: var(--iz-r, var(--radius-card)); background: var(--neutral-dark);
}
.iz-media__frame > :is(iframe, video) {
	position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0;
}

/* a recording: one grey card; the host's player keeps its own height. A recording this site plays
 * itself wears the theme's waveform player (kit.css `.iz-audio--wave`), made for this grey. */
.iz-media--audio.iz-media { gap: var(--space-2); padding: var(--pad-card); border-radius: var(--iz-r, var(--radius-card)); background: var(--iz-sunk, var(--canvas)); }
.iz-media--audio .iz-media__frame { aspect-ratio: auto; height: var(--iz-media-h, auto); border-radius: var(--iz-r-sm, var(--radius-input)); background: transparent; }
.iz-media--audio .iz-media__frame > iframe { position: static; height: var(--iz-media-h, 152px); }
.iz-media--audio audio { display: block; width: 100%; }
.iz-media--own.iz-media--audio .iz-audio__wave { height: 44px; }

/* caption: the title, an optional line, then the facts — start-aligned, not article.css's centred caption */
.article-content .iz-media .iz-media__cap, .iz-media__cap { display: grid; gap: 4px; margin: 0; text-align: start; color: var(--iz-ink-soft, var(--color-text)); font: var(--text-caption); }
.iz-media__title { color: var(--color-heading); font: var(--text-subtitle); font-weight: 600; }
.iz-media__text { color: var(--color-text); font: var(--text-body-s); }
.iz-media__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.iz-media__time { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.iz-media__time::before {
	content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.iz-media__time + .iz-media__out::before { content: "·"; margin-inline-end: var(--space-2); color: var(--iz-line, var(--color-border)); }
.iz-media .iz-media__out { color: var(--primary-700); text-decoration: none; text-underline-offset: 3px; }
.iz-media .iz-media__out:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--iz-focus, 0 0 0 3px var(--color-focus-ring)); }
@media (hover: hover) and (pointer: fine) { .iz-media .iz-media__out:hover { text-decoration: underline; } }

.iz-media__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* an HLS stream this browser cannot play: said over the frame, not left as a dead player */
.iz-media__fail[hidden] { display: none; }
.iz-media .iz-media__fail { position: absolute; inset-inline: 0; inset-block-end: 0; margin: 0; padding: var(--space-1) var(--space-2); background: rgb(20 46 55 / .85); color: #fff; font: var(--text-caption); text-align: center; }
.iz-media--audio .iz-media__fail { position: static; margin-top: var(--space-1); border-radius: var(--iz-r-sm, var(--radius-input)); }

/* ---------------------------------------------------------------- the video player
 * assets/js/media-embed.js. The audio player's clothes on a dark frame: the round eucalyptus play
 * button, a slim white timeline filling left to right, Persian tabular digits. Motion is feedback
 * only — press scale, controls fading out of the way while it plays — on one curve, under 220ms,
 * transform and opacity only, none of the movement under reduced motion. */
.iz-video {
	--played: 0%; --buffered: 0%; --ease: var(--iz-ease-out, cubic-bezier(.23, 1, .32, 1));
	container-type: inline-size; isolation: isolate; color: #fff; user-select: none; -webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.iz-media__frame.iz-video > .iz-video__el { object-fit: contain; background: var(--neutral-dark); cursor: pointer; }
.iz-video.is-idle, .iz-video.is-idle .iz-video__el { cursor: none; }
.iz-video.is-full { border-radius: 0; aspect-ratio: auto; }

.iz-video__ui { position: absolute; inset: 0; pointer-events: none; }
/* the scrim sits only under the controls, so the picture is never dimmed */
.iz-video__ui::before {
	content: ""; position: absolute; inset: auto 0 0; height: 128px; z-index: -1;
	background: linear-gradient(to top, rgb(20 46 55 / .92), rgb(20 46 55 / .62) 40%, rgb(20 46 55 / .2) 75%, transparent);
	transition: opacity 200ms var(--ease);
}
.iz-video:not(.has-played) .iz-video__ui::before, .iz-video.is-idle .iz-video__ui::before { opacity: 0; }

/* the big play button: centred, the same green as every play button on the site */
.iz-video__big {
	position: absolute; inset: 0; margin: auto; display: grid; place-items: center;
	width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%; pointer-events: auto; cursor: pointer;
	background: var(--secondary-500); color: #fff;
	box-shadow: 0 0 0 8px rgb(255 255 255 / .16), 0 10px 28px rgb(20 46 55 / .4);
	transition: transform 160ms var(--ease), opacity 200ms var(--ease), background-color 160ms ease;
}
.iz-video__big svg { width: 30px; height: 30px; margin-left: 4px; } /* the triangle's optical centre */
.iz-video__big:active { transform: scale(.95); }
.iz-video__big:focus-visible { outline: none; box-shadow: 0 0 0 8px rgb(255 255 255 / .16), 0 0 0 11px rgb(255 255 255 / .7); }
.iz-video.is-playing .iz-video__big, .iz-video.is-waiting .iz-video__big { opacity: 0; transform: scale(.9); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
	.iz-video__big:hover { background: var(--secondary-600); transform: scale(1.04); }
	.iz-video__big:hover:active { transform: scale(.95); }
}

/* the length on the poster, before the first play */
.iz-video__chip {
	position: absolute; inset-block-end: 12px; left: 12px; direction: ltr;
	padding: 4px 10px; border-radius: 999px; background: rgb(20 46 55 / .72); color: #fff;
	font: 600 var(--text-micro-size)/1.4 var(--font-body); font-variant-numeric: tabular-nums;
	transition: opacity 200ms var(--ease);
}
.iz-video__chip[hidden] { display: none; }
.iz-video.has-played .iz-video__chip { opacity: 0; }

/* buffering: a quiet ring, only while the video waits for data */
.iz-video__spin {
	position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%;
	border: 3px solid rgb(255 255 255 / .28); border-top-color: #fff; opacity: 0;
	transition: opacity 160ms ease;
}
.iz-video.is-waiting .iz-video__spin { opacity: 1; animation: iz-video-spin 800ms linear infinite; }
@keyframes iz-video-spin { to { transform: rotate(360deg); } }

/* the control bar — left to right on this right-to-left page, like the audio player's timeline */
.iz-video__bar {
	position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 2px;
	padding: 0 8px 6px; direction: ltr; pointer-events: auto;
	transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.iz-video:not(.has-played) .iz-video__bar, .iz-video.is-idle .iz-video__bar { opacity: 0; transform: translateY(6px); pointer-events: none; }
.iz-video__btn {
	display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: #fff; cursor: pointer;
	transition: transform 140ms var(--ease), background-color 160ms ease;
}
.iz-video__btn svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45)); } /* holds on a light frame */
.iz-video__btn:active { transform: scale(.92); }
.iz-video__btn:focus-visible, .iz-video__seek:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(255 255 255 / .6); }
.iz-video__speed { width: auto; min-width: 40px; padding: 0 10px; border-radius: 999px; font: 600 var(--text-micro-size)/1 var(--font-body); text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.iz-video.is-fast .iz-video__speed { background: rgb(255 255 255 / .18); }
@media (hover: hover) and (pointer: fine) { .iz-video__btn:hover { background: rgb(255 255 255 / .14); } }

.iz-video__time { flex: none; min-width: 3.4em; padding: 0 4px; color: rgb(255 255 255 / .92); font: 600 var(--text-micro-size)/1 var(--font-body); font-variant-numeric: tabular-nums; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.iz-video__track { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 36px; margin: 0 6px; }
.iz-video__seek {
	width: 100%; height: 4px; margin: 0; padding: 0; border-radius: 999px; cursor: pointer;
	-webkit-appearance: none; appearance: none;
	background: linear-gradient(to right, #fff var(--played), rgb(255 255 255 / .5) var(--played), rgb(255 255 255 / .5) var(--buffered), rgb(255 255 255 / .24) var(--buffered));
	transition: height 140ms var(--ease);
}
.iz-video__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgb(85 122 102 / .9), 0 1px 4px rgb(0 0 0 / .4); transition: transform 140ms var(--ease); }
.iz-video__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgb(85 122 102 / .9); }
@media (hover: hover) and (pointer: fine) {
	.iz-video__track:hover .iz-video__seek { height: 6px; }
	.iz-video__track:hover .iz-video__seek::-webkit-slider-thumb { transform: scale(1.15); }
}

/* a narrow frame keeps what a phone needs: play, time, timeline, speed, full screen */
@container (max-width: 440px) {
	.iz-video__time--total, .iz-video__btn[data-act="mute"] { display: none; }
	.iz-video__big { width: 60px; height: 60px; }
	.iz-video__big svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.iz-video__big, .iz-video__bar, .iz-video__btn, .iz-video__seek, .iz-video__seek::-webkit-slider-thumb { transition-property: opacity, background-color; }
	.iz-video.is-playing .iz-video__big, .iz-video:not(.has-played) .iz-video__bar, .iz-video.is-idle .iz-video__bar { transform: none; }
	.iz-video.is-waiting .iz-video__spin { animation-duration: 2.4s; }
}


/* a stream that could not load: the note speaks, and the controls stop offering a dead play */
.iz-media.is-failed :is(.iz-video__big, .iz-video__bar, .iz-video__spin, .iz-video__chip) { display: none; }
.iz-media.is-failed .iz-media__audio { opacity: .5; pointer-events: none; }