/*
 * ITEC video library on the website. Same tokens as the case study pages.
 * ITEC Black is the ground, white and ITEC Gray support it, ITEC Green marks
 * calls to action and the active filter. Green never sits on white.
 * Everything is scoped under .itec-vl so the site theme is left alone.
 */

.itec-vl {
	--k: #000000;
	--w: #ffffff;
	--gray: #efefef;
	--g: #00af40;
	--w80: rgba(255, 255, 255, 0.82);
	--w70: rgba(255, 255, 255, 0.72);
	--w55: rgba(255, 255, 255, 0.58);
	--rule: rgba(255, 255, 255, 0.16);
	--fc: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	--fb: "Open Sans", Arial, sans-serif;
	--gut: clamp(24px, 3vw, 48px);
	background: var(--k);
	color: var(--w);
	font-family: var(--fb);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.itec-vl *, .itec-vl *::before, .itec-vl *::after { box-sizing: border-box; }
.itec-vl :where(h1, h2, p, ol, ul, li, figure) { margin: 0; padding: 0; }
.itec-vl :where(ol, ul) { list-style: none; }
.itec-vl img { display: block; max-width: 100%; }
.itec-vl a { color: var(--g); text-underline-offset: 3px; }
.itec-vl :focus-visible { outline: 2px solid var(--w); outline-offset: 3px; }
.itec-vl [hidden] { display: none !important; }
.itec-vl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.itec-vl-wrap { width: 100%; max-width: none; margin: 0; padding: 0 var(--gut); }

.itec-vl { --navh: 52px; --top: 0px; }
/* The library fills the block or column it is placed in, never more. Its layout answers to that width. */
.itec-vl[data-vl] { width: 100%; max-width: none; margin-left: 0; margin-right: 0; container: itecvl / inline-size; }
@media (min-width: 783px) { body.admin-bar .itec-vl { --top: 32px; } }

/* Editorial layout. A masthead line, then two columns. The search, the views and the
   playlist list sit on the left and stay in view. The videos scroll on the right. */
.itec-vl-k { font: 400 12px/1.35 var(--fc); letter-spacing: 0.14em; text-transform: uppercase; color: var(--w55); }
.itec-vl .itec-vl-k { margin: 0; }
.itec-vl-mast { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.itec-vl-mast .itec-vl-k { color: var(--w); }
.itec-vl-body { display: grid; grid-template-columns: clamp(280px, 28%, 340px) minmax(0, 1fr); gap: 0 48px; align-items: start; }

.itec-vl-sidecol { position: relative; align-self: stretch; min-width: 0; }
.itec-vl .itec-vl-side { position: sticky; top: calc(var(--top) + 24px); display: flex; flex-direction: column; gap: 22px; min-width: 0; max-height: calc(100vh - var(--top) - 48px); max-height: calc(100dvh - var(--top) - 48px); padding: 28px 0 0; }
.itec-vl-main { min-width: 0; padding: 28px 0 64px; }

/* Search first. A white search bar. */
.itec-vl-find { display: grid; gap: 14px; flex: none; }
.itec-vl-q { position: relative; display: flex; align-items: center; background: var(--w); border-radius: 2px; }
.itec-vl-q:focus-within { box-shadow: 0 0 0 3px var(--g); }
.itec-vl .itec-vl-q__icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--k); pointer-events: none; }
.itec-vl .itec-vl-q__in { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 56px; margin: 0; padding: 0 52px 0 48px; border: 0; border-radius: 2px; background: var(--w); color: var(--k); font: 400 18px/1.2 var(--fb); box-shadow: none; outline: none; }
.itec-vl .itec-vl-q__in::placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; }
.itec-vl .itec-vl-q__in::-webkit-search-cancel-button, .itec-vl .itec-vl-q__in::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.itec-vl .itec-vl-q__clear { -webkit-appearance: none; appearance: none; position: absolute; right: 8px; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: -20px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--k); cursor: pointer; box-shadow: none; }
.itec-vl .itec-vl-q__clear:hover { background: var(--gray); }
.itec-vl .itec-vl-q__clear svg { width: 20px; height: 20px; }

/* Views. A short stacked menu in the left column, larger and in sentence case so it reads
   apart from the playlist list under it. A sticky bar on tablets and phones. */
.itec-vl-nav { flex: none; display: grid; gap: 10px; }
.itec-vl-nav__row { display: grid; }
.itec-vl .itec-vl-nav__row button { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 40px; min-height: 0; margin: 0; padding: 0 4px 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--w70); font: 400 17px/1 var(--fc); letter-spacing: 0; text-transform: none; text-align: left; white-space: nowrap; cursor: pointer; box-shadow: inset 2px 0 0 var(--rule); }
.itec-vl .itec-vl-nav__row button .c { color: var(--w55); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.itec-vl .itec-vl-nav__row button:hover { color: var(--w); }
.itec-vl .itec-vl-nav__row button.is-on { color: var(--w); font-weight: 700; box-shadow: inset 3px 0 0 var(--g); }

/* The playlist list. It scrolls on its own when it is taller than the window. */
.itec-vl-toc { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; gap: 10px; }
.itec-vl-toc__list { position: relative; min-height: 0; overflow-y: auto; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; padding-bottom: 24px; }
.itec-vl .itec-vl-toc__a { display: flex; align-items: baseline; gap: 12px; padding: 10px 4px 10px 12px; border-top: 1px solid var(--rule); box-shadow: inset 2px 0 0 transparent; color: var(--w70); font: 400 13px/1.3 var(--fc); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.itec-vl .itec-vl-toc__a:last-child { border-bottom: 1px solid var(--rule); }
.itec-vl .itec-vl-toc__a .c { margin-left: auto; color: var(--w55); font-variant-numeric: tabular-nums; }
.itec-vl .itec-vl-toc__a:hover { color: var(--w); }
.itec-vl .itec-vl-toc__a:hover .t { text-decoration: underline; text-decoration-color: var(--g); text-underline-offset: 4px; }
.itec-vl .itec-vl-toc__a.is-on { color: var(--w); font-weight: 700; box-shadow: inset 3px 0 0 var(--g); }
.itec-vl .itec-vl-toc__a.is-on .c { color: var(--w); }

.itec-vl-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding-bottom: 22px; }
.itec-vl .itec-vl-count { margin: 0; font: 400 12px/1.35 var(--fc); letter-spacing: 0.14em; text-transform: uppercase; color: var(--w); }
.itec-vl .itec-vl-reset { -webkit-appearance: none; appearance: none; min-height: 28px; margin: 0; padding: 0 12px; border: 0; border-radius: 14px; background: var(--w); color: var(--k); font: 700 12px/1 var(--fc); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: none; }
.itec-vl .itec-vl-reset:hover { background: var(--gray); }
.itec-vl-hint { margin: -10px 0 22px; font-size: 15px; color: var(--w55); }
.itec-vl .itec-vl-tag { font: 400 13px/1.5 var(--fb); letter-spacing: 0; text-transform: none; color: var(--w55); text-decoration: none; }
.itec-vl .itec-vl-tag:hover { color: var(--w80); text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.itec-vl .itec-vl-tag span { margin-left: 4px; color: var(--w55); }
/* The dot travels with the tag after it, so a line never starts or ends on a lone dot. */
.itec-vl-dot { display: none; }
.itec-vl .itec-vl-dot + .itec-vl-tag::before { content: "\00b7"; margin: 0 7px; color: rgba(255, 255, 255, 0.3); }
.itec-vl mark { background: none; color: var(--w); text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Sections. Each playlist's name and count sit above its videos. */
.itec-vl-list { padding: 0; }
.itec-vl-sec { padding: 0 0 44px; scroll-margin-top: calc(var(--top) + 24px); }
.itec-vl-sec + .itec-vl-sec { padding-top: 0; }
.itec-vl-sec__k { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 0 0 14px; margin-bottom: 28px; border-bottom: 1px solid var(--rule); }
.itec-vl .itec-vl-sec__name { margin: 0; padding: 0; border: 0; background: none; color: var(--w); font: 700 15px/1.35 var(--fc); letter-spacing: 0.1em; text-transform: uppercase; }
.itec-vl .itec-vl-sec__name::before, .itec-vl .itec-vl-sec__name::after { content: none; }
.itec-vl-sec__items { display: grid; }
.itec-vl-item { display: grid; grid-template-columns: minmax(0, min(40%, 480px)) minmax(0, 1fr); gap: 28px; padding: 28px 0; border-top: 1px solid var(--rule); }
.itec-vl-sec__items > .itec-vl-item:first-child { padding-top: 0; border-top: 0; }
.itec-vl-sec__items > .itec-vl-item:last-child { padding-bottom: 0; }
.itec-vl .itec-vl-item__media { position: relative; display: block; align-self: start; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.itec-vl-item__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: transform 0.3s ease, filter 0.3s ease; }
.itec-vl-item__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--w); opacity: 0; transition: opacity 0.2s ease; }
.itec-vl-item__play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 16px solid var(--k); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.itec-vl-item:hover .itec-vl-item__media img, .itec-vl-item:focus-within .itec-vl-item__media img { transform: scale(1.03); filter: grayscale(1) contrast(1.06) brightness(1.12); }
.itec-vl-item:hover .itec-vl-item__play, .itec-vl-item:focus-within .itec-vl-item__play { opacity: 1; }
@media (hover: none) { .itec-vl-item__play { opacity: 0.92; transform: scale(0.75); } }
.itec-vl-item__body { display: grid; align-content: start; gap: 12px; min-width: 0; }
.itec-vl .itec-vl-item__title { margin: 0; padding: 0; border: 0; color: var(--w); font: 700 23px/1.18 var(--fc); letter-spacing: 0; text-transform: none; }
.itec-vl .itec-vl-item__title a { color: var(--w); text-decoration: none; }
.itec-vl .itec-vl-item__title a:hover { text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.itec-vl-item__text { max-width: 720px; color: var(--w70); font: 400 16px/1.6 var(--fb); }
.itec-vl-item__tags { display: block; font: 400 13px/1.45 var(--fb); }
.itec-vl-none { display: grid; gap: 10px; justify-items: start; padding: 28px 0 64px; border-top: 1px solid var(--rule); font-size: 17px; color: var(--w70); }
.itec-vl-none__lead { color: var(--w); font: 700 22px/1.3 var(--fc); }

/* Dropdowns take the place of the views and the playlist list on phones and tablets. */
.itec-vl-dds { display: none; }
.itec-vl .itec-vl-dd { position: relative; display: block; min-width: 0; margin: 0; padding: 0; }
.itec-vl .itec-vl-dd__k { position: absolute; left: 12px; top: 9px; z-index: 1; font: 400 10px/1 var(--fc); letter-spacing: 0.14em; text-transform: uppercase; color: var(--w55); pointer-events: none; }
.itec-vl .itec-vl-dd select { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 52px; min-height: 0; margin: 0; padding: 19px 32px 0 11px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; background: var(--k); color: var(--w); font: 400 16px/1.2 var(--fc); letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: none; outline: none; }
.itec-vl .itec-vl-dd select:focus-visible { border-color: var(--w); box-shadow: 0 0 0 1px var(--w); }
.itec-vl .itec-vl-dd select option { color: var(--k); background: var(--w); }
.itec-vl .itec-vl-dd.is-set select { border-color: var(--w); box-shadow: inset 0 -2px 0 var(--g); }
.itec-vl .itec-vl-more:focus:not(:focus-visible), .itec-vl .itec-vl-dd select:focus:not(:focus-visible) { outline: none; }
.itec-vl .itec-vl-more:focus-visible { outline: 2px solid var(--w); outline-offset: 2px; }
.itec-vl .itec-vl-dd__chev { position: absolute; right: 9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--w); pointer-events: none; }

/* On wide screens the whole card shows. On phones the title shows and More opens the rest. */
.itec-vl .itec-vl-more { display: none; }
.itec-vl-item__more { display: contents; }
.itec-vl-item__dur { display: none; }

/* Every button is white with black text. */
.itec-vl .itec-vl-btn {
	-webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 22px;
	background: var(--w); color: var(--k) !important; border: 0; border-radius: 2px; cursor: pointer; box-shadow: none; text-transform: none;
	font-family: var(--fc); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: 0.01em; text-decoration: none;
}
.itec-vl .itec-vl-btn:hover { background: var(--gray); }
.itec-vl .itec-vl-btn.is-ghost { background: var(--w); color: var(--k) !important; box-shadow: none; }


/* Player. Opens over the page and closes back to the grid. It is moved to the end of
   <body> when the page loads, and every rule here is spelled out, so a theme's heading,
   button and content styles can't change it. */
.itec-vl.itec-vl-player { position: fixed; padding: 0; margin: auto; border: 0; width: min(1440px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); background: var(--k); color: var(--w); overflow: auto; overscroll-behavior: contain; }
.itec-vl-player::backdrop { background: rgba(0, 0, 0, 0.86); }
.itec-vl-player:not([open]) { display: none; }
.itec-vl-player .itec-vl-player__in { position: relative; font-family: var(--fb); }
.itec-vl-player .itec-vl-player__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 52px; padding: 8px 12px 8px 20px; background: var(--k); border-bottom: 1px solid var(--rule); }
.itec-vl-player .itec-vl-player__label { margin-right: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--w); }
/* Video on the left, its words and what comes next on the right. */
.itec-vl-player .itec-vl-player__cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.itec-vl-player .itec-vl-player__main { min-width: 0; }
.itec-vl-player .itec-vl-player__side { border-left: 1px solid var(--rule); max-height: calc(100vh - 101px); max-height: calc(100dvh - 101px); overflow: auto; overscroll-behavior: contain; }
.itec-vl-player .itec-vl-player__next { display: grid; gap: 14px; padding: 22px 24px 26px; border-top: 1px solid var(--rule); }
.itec-vl-player .itec-vl-player__nextlist { display: grid; gap: 14px; }
.itec-vl-player .itec-vl-nx { -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--w); text-align: left; cursor: pointer; box-shadow: none; text-transform: none; }
.itec-vl-player .itec-vl-nx__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.itec-vl-player .itec-vl-nx__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.itec-vl-player .itec-vl-nx__t { display: grid; gap: 6px; font: 400 15px/1.3 var(--fc); }
.itec-vl-player .itec-vl-nx:hover .itec-vl-nx__img img { filter: grayscale(1) contrast(1.06) brightness(1.15); }
.itec-vl-player .itec-vl-player__x,
.itec-vl-player .itec-vl-player__sound { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 0; margin: 0; padding: 0 14px; border-radius: 18px; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0.01em; font: 700 15px/1 var(--fc); }
/* Close is a small X with no fill. Its name comes from the aria-label. */
.itec-vl-player .itec-vl-player__x { justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--w70); font-size: 0; }
.itec-vl-player .itec-vl-player__x::before { content: ""; width: 14px; height: 14px; background: linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%); }
.itec-vl-player .itec-vl-player__x:hover { background: rgba(255, 255, 255, 0.12); color: var(--w); }
.itec-vl-player .itec-vl-player__sound:hover { background: var(--gray); }
.itec-vl-player .itec-vl-player__sound { background: var(--w); color: var(--k); border: 0; }
.itec-vl-player .itec-vl-player__sound[hidden] { display: none; }
.itec-vl-player .itec-vl-player__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.itec-vl-player.is-short .itec-vl-player__frame { aspect-ratio: auto; height: min(78vh, 760px); }
.itec-vl-player .itec-vl-player__frame iframe, .itec-vl-player .itec-vl-player__slot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }
.itec-vl-player .itec-vl-player__meta { margin: 0; padding: 24px; display: grid; gap: 14px; justify-items: start; }
.itec-vl-player .itec-vl-player__title { margin: 0; padding: 0; border: 0; background: none; color: var(--w); font: 700 28px/1.12 var(--fc); letter-spacing: 0; text-transform: none; }
.itec-vl-player .itec-vl-player__opener { margin: 0; padding: 0; color: var(--w70); font: 400 16px/1.6 var(--fb); max-width: 820px; }
.itec-vl-player .itec-vl-player__opener:empty { display: none; }
.itec-vl button { text-transform: none; }

/* ITEC control bar. YouTube's own controls are switched off and this bar sits under the
   video, never on top of it. The cover shows only while YouTube loads, then is removed
   before the video is shown or plays. */
.itec-vl-player .itec-vl-player__stage { position: relative; background: #000; }
.itec-vl-player .itec-vl-player__frame.is-loading iframe { opacity: 0; }
.itec-vl-player .itec-vl-cover { position: absolute; inset: 0; overflow: hidden; background: #000; }
.itec-vl-player .itec-vl-cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.55); }
.itec-vl-player .itec-vl-cover__ring { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.22); border-top-color: var(--g); animation: itec-vl-spin 0.9s linear infinite; }
@keyframes itec-vl-spin { to { transform: rotate(360deg); } }
.itec-vl-player .itec-vl-ctl { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; background: var(--k); border-top: 1px solid var(--rule); color: var(--w); }
.itec-vl-player .itec-vl-ctl[hidden] { display: none; }
.itec-vl-player .itec-vl-ctl__btn { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--w); cursor: pointer; box-shadow: none; }
.itec-vl-player .itec-vl-ctl__btn:hover { background: rgba(255, 255, 255, 0.12); }
.itec-vl-player .itec-vl-ctl__btn svg { display: block; width: 18px; height: 18px; fill: currentColor; }
.itec-vl-player .itec-vl-ctl .i-play, .itec-vl-player .itec-vl-ctl .i-muted, .itec-vl-player .itec-vl-ctl .i-exit { display: none; }
.itec-vl-player .itec-vl-ctl[data-playing="0"] .i-pause { display: none; }
.itec-vl-player .itec-vl-ctl[data-playing="0"] .i-play { display: block; }
.itec-vl-player .itec-vl-ctl[data-muted="1"] .i-sound { display: none; }
.itec-vl-player .itec-vl-ctl[data-muted="1"] .i-muted { display: block; }
.itec-vl-player .itec-vl-ctl[data-full="1"] .i-full { display: none; }
.itec-vl-player .itec-vl-ctl[data-full="1"] .i-exit { display: block; }
.itec-vl-player .itec-vl-ctl__time { flex: none; min-width: 36px; font: 400 14px/1 var(--fc); color: var(--w70); font-variant-numeric: tabular-nums; }
.itec-vl-player .itec-vl-ctl__time.is-dur { text-align: right; }
.itec-vl-player .itec-vl-ctl__seek { --p: 0%; -webkit-appearance: none; appearance: none; flex: 1; min-width: 60px; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.itec-vl-player .itec-vl-ctl__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--g) var(--p), rgba(255, 255, 255, 0.28) var(--p)); }
.itec-vl-player .itec-vl-ctl__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--w); }
.itec-vl-player .itec-vl-ctl__seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
.itec-vl-player .itec-vl-ctl__seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--g); }
.itec-vl-player .itec-vl-ctl__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--w); }
.itec-vl-player .itec-vl-ctl__seek:focus-visible { outline: 2px solid var(--w); outline-offset: 2px; }
.itec-vl-player .itec-vl-player__stage:fullscreen { display: flex; flex-direction: column; width: 100%; height: 100%; }
.itec-vl-player .itec-vl-player__stage:fullscreen .itec-vl-player__frame { flex: 1; aspect-ratio: auto; height: auto; }
.itec-vl-player .itec-vl-player__stage:-webkit-full-screen { display: flex; flex-direction: column; width: 100%; height: 100%; }
.itec-vl-player .itec-vl-player__stage:-webkit-full-screen .itec-vl-player__frame { flex: 1; aspect-ratio: auto; height: auto; }
.itec-vl-player.is-full .itec-vl-player__stage { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; }
.itec-vl-player.is-full .itec-vl-player__frame { flex: 1; aspect-ratio: auto; height: auto; }

/* What replaces the player when a video ends. */
.itec-vl-end { position: absolute; inset: 0; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 18px; background: var(--k); overflow: auto; }
.itec-vl-end__k { font: 400 15px/1 var(--fc); color: var(--w55); }
.itec-vl-end__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.itec-vl-end__list button { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: var(--w); text-align: left; cursor: pointer; }
.itec-vl-end__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.itec-vl-end__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.itec-vl-end__t { display: block; margin-top: 8px; font: 400 16px/1.25 var(--fc); }
.itec-vl-end__list button:hover .itec-vl-end__t { text-decoration: underline; text-decoration-color: var(--g); }
.itec-vl-end__acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* Narrow layouts go by the width of the library's own box, so it fits any column. */
@container itecvl (max-width: 1020px) {
	.itec-vl-wrap { --navh: 70px; }
	/* One column. The search sits above the videos. */
	.itec-vl-body { display: block; }
	.itec-vl-sidecol, .itec-vl .itec-vl-side { display: contents; }
	.itec-vl-find { padding: 24px 0; }
	/* Two dropdowns stand in for the views and the playlist list, and they stay in view. Nothing scrolls sideways. */
	.itec-vl-nav { position: sticky; top: var(--top); z-index: 5; display: block; margin: 0 calc(var(--gut) * -1); padding: 8px var(--gut); background: var(--k); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
	.itec-vl-nav__k, .itec-vl-nav__row, .itec-vl .itec-vl-toc { display: none; }
	.itec-vl-dds { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; max-width: 720px; }
	.itec-vl-main { padding: 24px 0 56px; }
	.itec-vl-sec { scroll-margin-top: calc(var(--top) + var(--navh) + 12px); }
}
@container itecvl (max-width: 760px) {
	.itec-vl-wrap { --gut: 16px; font-size: 16px; }
	.itec-vl .itec-vl-q__in { height: 56px; padding-left: 48px; font-size: 17px; }
	.itec-vl .itec-vl-q__icon { left: 15px; width: 20px; height: 20px; margin-top: -10px; }
	.itec-vl-mast { padding: 16px 0; }
	.itec-vl-find { padding: 20px 0; }
	.itec-vl-dds { max-width: none; }
	.itec-vl-main { padding-top: 20px; }
	.itec-vl-sec { padding-bottom: 32px; }
	.itec-vl-sec__k { margin-bottom: 0; }
	/* The video leads. The picture runs the full width with a small play and time marker in its corner,
	   the title sits under it, and More opens the opening lines and the playlists. */
	.itec-vl-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0 4px; border-top: 0; }
	.itec-vl-sec__items > .itec-vl-item:first-child { padding-top: 20px; }
	.itec-vl .itec-vl-item__media { margin: 0 calc(var(--gut) * -1); }
	.itec-vl-item__play { display: none; }
	.itec-vl-item__dur { position: absolute; left: var(--gut); bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 11px; border-radius: 15px; background: rgba(0, 0, 0, 0.82); color: var(--w); font: 700 13px/1 var(--fc); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
	.itec-vl-item__dur::before { content: ""; border-left: 10px solid var(--g); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
	.itec-vl .itec-vl-item__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.itec-vl-item__body { gap: 2px; }
	.itec-vl .itec-vl-item__title { font-size: 20px; line-height: 1.22; }
	.itec-vl .itec-vl-more { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 34px; min-height: 0; margin: 0; padding: 0 12px 0 0; border: 0; border-radius: 0; background: none; color: var(--g); font: 700 12px/1 var(--fc); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; box-shadow: none; }
	.itec-vl .itec-vl-more::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease; }
	.itec-vl .itec-vl-more[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(225deg); }
	.itec-vl-item:not(.is-open) .itec-vl-item__more { display: none; }
	.itec-vl-item.is-open .itec-vl-item__more { display: grid; gap: 10px; padding: 2px 0 4px; }
	/* One playlist or one set of results. The count line above already names it, so its heading steps aside. */
	.itec-vl-list.is-one .itec-vl-sec__k { display: none; }
	.itec-vl-list.is-one .itec-vl-sec__items > .itec-vl-item:first-child { padding-top: 0; }
	.itec-vl-item__text { font-size: 15px; line-height: 1.55; }
	.itec-vl .itec-vl-tag, .itec-vl-item__tags { font-size: 13px; }
	.itec-vl .itec-vl-dot + .itec-vl-tag::before { margin: 0 5px; }
}
/* Browsers without container queries go by the window instead. */
@supports not (container-type: inline-size) {
	@media (max-width: 1020px) {
		.itec-vl-wrap { --navh: 70px; }
		/* One column. The search sits above the videos. */
		.itec-vl-body { display: block; }
		.itec-vl-sidecol, .itec-vl .itec-vl-side { display: contents; }
		.itec-vl-find { padding: 24px 0; }
		/* Two dropdowns stand in for the views and the playlist list, and they stay in view. Nothing scrolls sideways. */
		.itec-vl-nav { position: sticky; top: var(--top); z-index: 5; display: block; margin: 0 calc(var(--gut) * -1); padding: 8px var(--gut); background: var(--k); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
		.itec-vl-nav__k, .itec-vl-nav__row, .itec-vl .itec-vl-toc { display: none; }
		.itec-vl-dds { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; max-width: 720px; }
		.itec-vl-main { padding: 24px 0 56px; }
		.itec-vl-sec { scroll-margin-top: calc(var(--top) + var(--navh) + 12px); }
	}
	@media (max-width: 760px) {
		.itec-vl-wrap { --gut: 16px; font-size: 16px; }
		.itec-vl .itec-vl-q__in { height: 56px; padding-left: 48px; font-size: 17px; }
		.itec-vl .itec-vl-q__icon { left: 15px; width: 20px; height: 20px; margin-top: -10px; }
		.itec-vl-mast { padding: 16px 0; }
		.itec-vl-find { padding: 20px 0; }
		.itec-vl-dds { max-width: none; }
		.itec-vl-main { padding-top: 20px; }
		.itec-vl-sec { padding-bottom: 32px; }
		.itec-vl-sec__k { margin-bottom: 0; }
		/* The video leads. The picture runs the full width with a small play and time marker in its corner,
		   the title sits under it, and More opens the opening lines and the playlists. */
		.itec-vl-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0 4px; border-top: 0; }
		.itec-vl-sec__items > .itec-vl-item:first-child { padding-top: 20px; }
		.itec-vl .itec-vl-item__media { margin: 0 calc(var(--gut) * -1); }
		.itec-vl-item__play { display: none; }
		.itec-vl-item__dur { position: absolute; left: var(--gut); bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 11px; border-radius: 15px; background: rgba(0, 0, 0, 0.82); color: var(--w); font: 700 13px/1 var(--fc); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
		.itec-vl-item__dur::before { content: ""; border-left: 10px solid var(--g); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
		.itec-vl .itec-vl-item__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
		.itec-vl-item__body { gap: 2px; }
		.itec-vl .itec-vl-item__title { font-size: 20px; line-height: 1.22; }
		.itec-vl .itec-vl-more { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 34px; min-height: 0; margin: 0; padding: 0 12px 0 0; border: 0; border-radius: 0; background: none; color: var(--g); font: 700 12px/1 var(--fc); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; box-shadow: none; }
		.itec-vl .itec-vl-more::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease; }
		.itec-vl .itec-vl-more[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(225deg); }
		.itec-vl-item:not(.is-open) .itec-vl-item__more { display: none; }
		.itec-vl-item.is-open .itec-vl-item__more { display: grid; gap: 10px; padding: 2px 0 4px; }
		/* One playlist or one set of results. The count line above already names it, so its heading steps aside. */
		.itec-vl-list.is-one .itec-vl-sec__k { display: none; }
		.itec-vl-list.is-one .itec-vl-sec__items > .itec-vl-item:first-child { padding-top: 0; }
		.itec-vl-item__text { font-size: 15px; line-height: 1.55; }
		.itec-vl .itec-vl-tag, .itec-vl-item__tags { font-size: 13px; }
		.itec-vl .itec-vl-dot + .itec-vl-tag::before { margin: 0 5px; }
	}
}
/* The player always fills the window, so it goes by the window. */
@media (max-width: 1020px) {
	.itec-vl-player .itec-vl-player__cols { grid-template-columns: minmax(0, 1fr); }
	.itec-vl-player .itec-vl-player__side { border-left: 0; border-top: 1px solid var(--rule); max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
	.itec-vl.itec-vl-player { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; inset: 0; }
	.itec-vl-player .itec-vl-player__bar { min-height: 48px; padding: 6px 12px; }
	.itec-vl-player .itec-vl-player__meta { padding: 18px 16px 22px; }
	.itec-vl-player .itec-vl-player__next { padding: 18px 16px 24px; }
	.itec-vl-player .itec-vl-player__bar { padding-left: 16px; }
	.itec-vl-player .itec-vl-player__title { font-size: 22px; }
	.itec-vl-player.is-short .itec-vl-player__frame { height: 62vh; height: 62dvh; }
	.itec-vl-player .itec-vl-ctl { height: 52px; gap: 6px; padding: 0 8px; }
	.itec-vl-player .itec-vl-ctl__time { min-width: 32px; font-size: 13px; }
	.itec-vl-end { position: relative; inset: auto; padding: 20px 16px; min-height: 100%; }
	.itec-vl-player__frame:has(.itec-vl-end) { aspect-ratio: auto; }
	.itec-vl-end__list { grid-template-columns: 1fr; gap: 12px; }
	.itec-vl-end__list button { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; }
	.itec-vl-end__t { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.itec-vl-item__media img, .itec-vl-item__play, .itec-vl .itec-vl-more::after { transition: none; }
	.itec-vl-player .itec-vl-cover__ring { animation: none; border-color: var(--g); }
}