/* videolib2026 front end — everything scoped under .tc-vl / .tc-vl-dialog / .tc-vl-lib / .tc-vl-page.
   Theme through the custom properties on .tc-vl; a skin file (&skin=) overrides them under .tc-vl-skin-<name>. */

.tc-vl {
    --tc-vl-ratio: 16 / 9;
    --tc-vl-accent: #feb100;
    --tc-vl-play-bg: rgba(0, 0, 0, .7);
    --tc-vl-play-fg: #fff;
    --tc-vl-play-size: 64px;
    --tc-vl-radius: 6px;
    --tc-vl-frame: #111;
    --tc-vl-max-h: 80vh;
    --tc-vl-caption: inherit;
    display: block; margin: 0; max-width: 100%;
}
.tc-vl__stage {
    position: relative; width: 100%; aspect-ratio: var(--tc-vl-ratio); background: var(--tc-vl-frame);
    border-radius: var(--tc-vl-radius); overflow: hidden; margin-inline: auto;
}
@supports not (aspect-ratio: 1) {
    .tc-vl__stage { height: 0; padding-bottom: 56.25%; }
    .tc-vl--portrait .tc-vl__stage { padding-bottom: 177.78%; }
    .tc-vl--square .tc-vl__stage { padding-bottom: 100%; }
    .tc-vl__stage > * { position: absolute; inset: 0; }
}
/* Portrait/square inside a wide column: cap by height and centre. */
.tc-vl--portrait .tc-vl__stage, .tc-vl--square .tc-vl__stage { max-height: var(--tc-vl-max-h); width: auto; max-width: 100%; }
.tc-vl--portrait .tc-vl__stage { width: calc(var(--tc-vl-max-h) * 9 / 16); }
.tc-vl--square .tc-vl__stage { width: min(100%, var(--tc-vl-max-h)); }

.tc-vl__facade { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; cursor: pointer; }
.tc-vl__facade[hidden] { display: none; }
.tc-vl__poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-vl__poster--none { background: linear-gradient(135deg, #3a4b5c, #1f2a35); }
.tc-vl__play {
    position: absolute; top: 50%; left: 50%; width: var(--tc-vl-play-size); height: var(--tc-vl-play-size);
    transform: translate(-50%, -50%); border-radius: 50%; background: var(--tc-vl-play-bg);
    transition: transform .15s ease, background .15s ease;
}
.tc-vl__play::after {
    content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
    border-style: solid; border-width: calc(var(--tc-vl-play-size) * .16) 0 calc(var(--tc-vl-play-size) * .16) calc(var(--tc-vl-play-size) * .31);
    border-color: transparent transparent transparent var(--tc-vl-play-fg);
}
.tc-vl__facade:hover .tc-vl__play, .tc-vl__facade:focus-visible .tc-vl__play { transform: translate(-50%, -50%) scale(1.08); background: var(--tc-vl-accent); }
.tc-vl__facade:focus-visible { outline: 3px solid var(--tc-vl-accent); outline-offset: -3px; }
.tc-vl__duration { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 3px; background: rgba(0,0,0,.75); color: #fff; font-size: 12px; line-height: 1.4; }
.tc-vl__unavailable { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: rgba(0,0,0,.75); color: #fff; font-size: 13px; text-align: center; }
.tc-vl--unavailable .tc-vl__play, .tc-vl--nosource .tc-vl__play, .tc-vl--unpublished .tc-vl__play { display: none; }
.tc-vl--unavailable .tc-vl__poster, .tc-vl--nosource .tc-vl__poster { filter: grayscale(1) brightness(.6); }
.tc-vl__title { margin: .5rem 0 0; font-size: 1rem; font-weight: 600; color: var(--tc-vl-caption); }
.tc-vl__noscript, .tc-vl__iframe, .tc-vl__player, .tc-vl__player--iframe iframe, .tc-vl__player--iframe video, .tc-vl__player--iframe > div {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
/* Once a player is mounted the stage frame must not show: the Video.js skin rounds its own container
   (--media-border-radius, default 12px), so give it OUR radius and make the stage transparent — otherwise
   the dark frame peeks out at the corners as a black bevel. */
.tc-vl__player { background: transparent; --media-border-radius: var(--tc-vl-radius); border-radius: var(--tc-vl-radius); overflow: hidden; }
.tc-vl__stage.is-mounted { background: transparent; }
.tc-vl__media, video-player, video-skin { width: 100%; height: 100%; }
.tc-vl__stage.is-loading::before { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: tc-vl-spin .8s linear infinite; z-index: 2; }
.tc-vl__stage.is-error::after { content: "This video could not be loaded."; position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: 13px; text-align: center; }
@keyframes tc-vl-spin { to { transform: rotate(360deg); } }

/* text-link mode */
.tc-vl-link { cursor: pointer; }

/* ---- dialog (lightbox) ---- */
.tc-vl-dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; inset: 0; }
.tc-vl-dialog::backdrop { background: rgba(0, 0, 0, .9); }
.tc-vl-dialog[open] { display: flex; align-items: center; justify-content: center; }
.tc-vl-dialog__inner { position: relative; width: min(92vw, calc(88vh * 16 / 9)); }
.tc-vl-dialog--portrait .tc-vl-dialog__inner { width: min(92vw, calc(84vh * 9 / 16)); }
.tc-vl-dialog--square .tc-vl-dialog__inner { width: min(92vw, 84vh); }
.tc-vl-dialog__stage { --tc-vl-radius: 6px; position: relative; width: 100%; aspect-ratio: var(--tc-vl-ratio, 16 / 9); background: #000; border-radius: var(--tc-vl-radius); overflow: hidden; }
.tc-vl-dialog__stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-vl-dialog__caption { margin: 10px 0 0; color: #fff; font-size: 15px; text-align: center; }
.tc-vl-dialog__close {
    position: absolute; top: -44px; right: 0; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 3;
}
.tc-vl-dialog__close:hover, .tc-vl-dialog__close:focus-visible { background: #feb100; color: #111; outline: none; }
@media (max-width: 600px) { .tc-vl-dialog__close { top: 6px; right: 6px; } }
html.tc-vl-lock { overflow: hidden; }

/* ---- library ---- */
.tc-vl-lib__controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; margin: 0 0 16px; }
.tc-vl-lib__search { flex: 1 1 260px; }
.tc-vl-lib__filter { border: 0; padding: 0; margin: 0; min-width: 0; }
.tc-vl-lib__filter-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #5b6b7a; margin: 0 0 4px; padding: 0; width: auto; }
.tc-vl-lib__filter-items { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-vl-lib__toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px; border: 1px solid #c3ced8; background: #fff; cursor: pointer; font-size: 13px; user-select: none; margin: 0; }
.tc-vl-lib__toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.tc-vl-lib__toggle small { color: #5b6b7a; }
.tc-vl-lib__toggle.is-active { background: #3a4b5c; border-color: #3a4b5c; color: #fff; }
.tc-vl-lib__toggle.is-active small { color: #feb100; }
.tc-vl-lib__toggle:focus-within { outline: 2px solid #feb100; outline-offset: 1px; }
.tc-vl-lib__count { align-self: center; color: #5b6b7a; font-size: 13px; white-space: nowrap; }
.tc-vl-lib__item[hidden] { display: none !important; }
.tc-vl-lib__empty { padding: 30px; text-align: center; color: #5b6b7a; }
.tc-vl-lib--nofilters .tc-vl-lib__filter, .tc-vl-lib--nosearch .tc-vl-lib__search { display: none; }
.tc-vl-card .tc-vl { --tc-vl-radius: 0; --tc-vl-play-size: 56px; }
.tc-vl-card .tc-vl__stage { border-radius: .3rem .3rem 0 0; }
.tc-vl-card .tc-vl--portrait .tc-vl__stage { width: 100%; max-height: none; aspect-ratio: 16 / 9; }
.tc-vl-card .tc-vl--portrait .tc-vl__poster { object-fit: contain; background: #111; }
.tc-vl-card__link { color: inherit; text-decoration: none; }
.tc-vl-card__link:hover { text-decoration: underline; }
.tc-vl-card__share.is-copied { background: #3a4b5c; color: #fff; }

/* ---- landing page ---- */
.tc-vl-page__head { margin-bottom: 1rem; }
.tc-vl-page__player .tc-vl { --tc-vl-max-h: 82vh; }
.tc-vl-page__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 1rem 0; font-size: 14px; }
.tc-vl-page__duration { color: #5b6b7a; }
.tc-vl-page__variants a { margin-left: 4px; font-weight: 600; }
.tc-vl-page__description { margin: 1rem 0; }
.tc-vl-related { margin-top: 2.5rem; }
.tc-vl-related__title { font-size: 1.4rem; margin-bottom: .5rem; }
/* Language switch: a small select, visually apart from the tag chips */
.tc-vl-lib__lang { align-self: center; margin-left: auto; padding-left: 16px; border-left: 1px solid #e1e7ec; }
.tc-vl-lib__lang-select { font-size: 13px; padding: 4px 28px 4px 8px; height: auto; width: auto; min-width: 150px; }
@media (max-width: 767px) { .tc-vl-lib__lang { margin-left: 0; padding-left: 0; border-left: 0; } }
/* Filter transitions (FLIP): the grid hosts absolutely-positioned ghosts of leaving cards */
.tc-vl-lib__grid { position: relative; }
.tc-vl-lib__item { will-change: transform, opacity; }
.tc-vl-lib__ghost { z-index: 0; }
/* ---- series header (tc-vl.series + tc-vl.library &series= &header=`1`) ---- */
.tc-vl-series-header { margin: 0 0 1.25rem; }
.tc-vl-series-header__title { margin: 0 0 .35rem; }
.tc-vl-series-header__link { color: inherit; text-decoration: none; }
.tc-vl-series-header__link:hover { text-decoration: underline; }
.tc-vl-series-header__desc { color: #3a4b5c; max-width: 70ch; }
.tc-vl-series-header__meta { margin: .35rem 0 0; color: #5b6b7a; font-size: .9em; }

/* ---- series player (tc-vl.series): main stage + episode list, three layouts ---- */
.tc-vl-sp { --tc-vl-sp-gap: 20px; --tc-vl-sp-thumb-w: 200px; --tc-vl-sp-accent: #feb100; margin: 0 0 2rem; }
.tc-vl-sp__layout { display: grid; gap: var(--tc-vl-sp-gap); grid-template-columns: minmax(0, 1fr); }
.tc-vl-sp__main { min-width: 0; }
.tc-vl-sp__side { min-width: 0; }
.tc-vl-sp__stage { margin: 0; }
.tc-vl-sp__info { margin-top: .9rem; }
.tc-vl-sp__title { font-size: 1.25rem; margin: 0 0 .25rem; }
.tc-vl-sp__subtitle { margin: 0 0 .25rem; color: #5b6b7a; }
.tc-vl-sp__desc { margin: 0 0 .5rem; color: #3a4b5c; }
.tc-vl-sp__links { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; font-size: .95em; }
.tc-vl-sp__share.is-copied { background: #3a4b5c; color: #fff; }
.tc-vl-sp__list-heading { font-size: 1rem; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .04em; color: #5b6b7a; }
.tc-vl-sp__list-heading small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.tc-vl-sp__scroller { position: relative; }
.tc-vl-sp__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.tc-vl-sp__item { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tc-vl-sp__thumb { position: relative; display: block; aspect-ratio: 16 / 9; width: 100%; background: #111; border-radius: 6px; overflow: hidden; color: #fff; text-decoration: none; outline-offset: 2px; }
@supports not (aspect-ratio: 1) { .tc-vl-sp__thumb { height: 0; padding-bottom: 56.25%; } }
.tc-vl-sp__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease, opacity .25s ease; }
.tc-vl-sp__poster--none { background: linear-gradient(135deg, #3a4b5c, #1f2a35); }
.tc-vl-sp__thumb:hover .tc-vl-sp__poster, .tc-vl-sp__thumb:focus-visible .tc-vl-sp__poster { transform: scale(1.04); }
.tc-vl-sp__num { position: absolute; top: 6px; left: 6px; min-width: 22px; padding: 1px 6px; border-radius: 11px; background: var(--tc-vl-sp-accent); color: #111; font-weight: 700; font-size: 12px; line-height: 18px; text-align: center; }
.tc-vl-sp__dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 3px; background: rgba(0,0,0,.75); font-size: 11px; line-height: 1.5; }
.tc-vl-sp__play { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0,0,0,.65); opacity: 0; transition: opacity .2s ease; }
.tc-vl-sp__play::after { content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); border-style: solid; border-width: 6px 0 6px 11px; border-color: transparent transparent transparent #fff; }
.tc-vl-sp__thumb:hover .tc-vl-sp__play, .tc-vl-sp__thumb:focus-visible .tc-vl-sp__play { opacity: 1; }
.tc-vl-sp__playing { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 8px; background: var(--tc-vl-sp-accent); color: #111; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: center; display: none; }
.tc-vl-sp__item.is-active .tc-vl-sp__thumb { box-shadow: 0 0 0 3px var(--tc-vl-sp-accent); }
.tc-vl-sp__item.is-active .tc-vl-sp__playing { display: block; }
.tc-vl-sp__item.is-active .tc-vl-sp__poster { opacity: .85; }
.tc-vl-sp__item.is-active .tc-vl-sp__play { display: none; }
.tc-vl-sp__meta { min-width: 0; font-size: .9em; line-height: 1.3; }
.tc-vl-sp__name { color: inherit; text-decoration: none; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-vl-sp__item.is-active .tc-vl-sp__name { color: #111; }
.tc-vl-sp__sub { display: block; color: #5b6b7a; font-size: .9em; margin-top: 2px; }
.tc-vl-sp__nav { position: absolute; top: calc(var(--tc-vl-sp-thumb-w) * 9 / 32); transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(17,24,39,.85); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; }
.tc-vl-sp__nav:hover, .tc-vl-sp__nav:focus-visible { background: var(--tc-vl-sp-accent); color: #111; outline: none; }
.tc-vl-sp__nav--prev { left: -6px; }
.tc-vl-sp__nav--next { right: -6px; }

/* Strip: horizontal scroll-snap row (slider layout, and every layout on phones). */
.tc-vl-sp--slider .tc-vl-sp__list, .tc-vl-sp--strip .tc-vl-sp__list { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 8px; padding: 4px 4px 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tc-vl-sp--slider .tc-vl-sp__item, .tc-vl-sp--strip .tc-vl-sp__item { flex: 0 0 var(--tc-vl-sp-thumb-w); scroll-snap-align: start; }
.tc-vl-sp--slider .tc-vl-sp__nav { display: flex; }

/* below: wrapping grid of thumbnails under the player */
.tc-vl-sp--below .tc-vl-sp__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 12px; }

/* side: player left, vertical list right (from tablet up) */
@media (min-width: 768px) {
    .tc-vl-sp--side .tc-vl-sp__layout { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); align-items: start; }
    .tc-vl-sp--side .tc-vl-sp__list { flex-direction: column; gap: 10px; max-height: min(72vh, 640px); overflow-y: auto; overscroll-behavior-y: contain; padding: 4px; scrollbar-width: thin; }
    .tc-vl-sp--side .tc-vl-sp__item { flex-direction: row; gap: 10px; align-items: flex-start; flex: 0 0 auto; }
    .tc-vl-sp--side .tc-vl-sp__thumb { flex: 0 0 44%; max-width: 180px; }
    .tc-vl-sp--side .tc-vl-sp__meta { flex: 1 1 auto; padding-top: 2px; }
    .tc-vl-sp--side .tc-vl-sp__num { top: 4px; left: 4px; min-width: 20px; font-size: 11px; line-height: 16px; }
    .tc-vl-sp--side .tc-vl-sp__playing { font-size: 10px; padding: 2px 6px; }
}
@media (min-width: 1200px) { .tc-vl-sp--side .tc-vl-sp__layout { grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); } }
/* side on phones: behave like the strip */
@media (max-width: 767.98px) {
    .tc-vl-sp--side .tc-vl-sp__list { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 8px; padding: 4px 4px 8px; -webkit-overflow-scrolling: touch; }
    .tc-vl-sp--side .tc-vl-sp__item { flex: 0 0 min(var(--tc-vl-sp-thumb-w), 62vw); scroll-snap-align: start; }
    .tc-vl-sp { --tc-vl-sp-thumb-w: 180px; }
}
@media (prefers-reduced-motion: reduce) { .tc-vl-sp__poster, .tc-vl-sp__play { transition: none; } }

/* Series block on landing pages */
.tc-vl-series { margin: 24px 0; padding: 16px 20px; border: 1px solid #e1e7ec; border-radius: var(--tc-vl-radius, 8px); background: #f7f9fb; }
.tc-vl-series__title { font-size: 1.1rem; margin: 0 0 10px; }
.tc-vl-series__link { color: inherit; text-decoration: none; }
.tc-vl-series__link:hover { text-decoration: underline; }
.tc-vl-series__desc { margin: 0 0 10px; color: #3a4b5c; font-size: .95em; }
.tc-vl-series.is-current-series { border-color: #feb100; }
.tc-vl-series__pos { color: #5b6b7a; font-weight: 400; font-size: .85em; margin-left: 6px; }
.tc-vl-series__list { margin: 0; padding-left: 22px; }
.tc-vl-series__item { margin: 4px 0; }
.tc-vl-series__item small { color: #5b6b7a; margin-left: 6px; }
.tc-vl-series__item.is-current > span { font-weight: 600; }
.tc-vl-series__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: .95em; }
.tc-vl-series__also { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #e1e7ec; color: #5b6b7a; font-size: .9em; }
.tc-vl-series__also small { color: #8b98a5; }
.tc-vl-series__next { margin-left: auto; }