/* VideoVault: video_timeline module, VV-043 (loaded only when it renders; tokens and shared parts are in base.css).
   Without JavaScript the cards are a plain grid; assets/timeline.js adds .is-live and places them on the date axis.
   Layout follows the module's own width (R33): @container vv only. Spacing from --vv-s1..s6 (R24, R34). */
.vvault-front .vvault-vtl{--vv-vtl-cw:15rem;--vv-vtl-rise:2.5rem;--vv-vtl-mark:var(--vv-strong);--vv-vtl-tint:color-mix(in srgb,var(--vv-vtl-mark) 16%,transparent)}

/* ---- Header: kicker, title, dek, then the controls ---- */
.vvault-front .vvault-vtl__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--vv-s4) var(--vv-s6);margin:0 0 var(--vv-s5)}
.vvault-front .vvault-vtl__intro{flex:1 1 20rem;min-width:0}
.vvault-front .vvault-vtl__kicker{margin:0 0 var(--vv-s2)}
.vvault-front .vvault-vtl__title{margin:0;padding:0;border:0;font-family:var(--vv-font-display);font-weight:var(--vv-title-weight);font-size:var(--vv-title);line-height:1.1}
.vvault-front .vvault-vtl__dek{margin:var(--vv-s2) 0 0;font-size:1.0625rem;line-height:1.5}
.vvault-front .vvault-vtl__controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--vv-s3) var(--vv-s4);flex:0 1 26rem;min-width:0}
.vvault-front .vvault-vtl__controls[hidden]{display:none}
.vvault-front .vvault-vtl__topic{display:flex;flex-direction:column;gap:var(--vv-s1);min-width:0}
.vvault-front .vvault-vtl__label{font-family:var(--vv-font-ui);font-size:.9375rem}
.vvault-front .vvault-vtl__topic .vvault-select{display:flex;width:100%}
.vvault-front .vvault-vtl__topic select{min-height:var(--vv-control-h)}
/* Year | Month: the explore page's view switch (one component look), as buttons with aria-pressed. */
.vvault-front .vvault-vtl__zoom{display:inline-flex;grid-column:2;border:1px solid var(--vv-card-line);border-radius:var(--vv-radius-sm);overflow:hidden;background:var(--vv-paper)}
.vvault-front .vvault-vtl__zoom .vvault-vtl__zbtn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--vv-control-h);min-width:5rem;margin:0;padding:0 var(--vv-s4);border:0;border-radius:0;background:var(--vv-paper);color:var(--vv-ink);font-family:var(--vv-font-ui);font-size:1rem;font-weight:400;line-height:1.2;cursor:pointer}
.vvault-front .vvault-vtl__zoom .vvault-vtl__zbtn+.vvault-vtl__zbtn{border-left:1px solid var(--vv-card-line)}
.vvault-front .vvault-vtl__zoom .vvault-vtl__zbtn:is(:hover,:focus-visible){background:var(--vv-soft);color:var(--vv-ink);text-decoration:underline}
.vvault-front .vvault-vtl__zoom .vvault-vtl__zbtn[aria-pressed="true"]{background:var(--vv-vtl-mark);color:var(--vv-on-strong);font-weight:500}
.vvault-front .vvault-vtl__zoom .vvault-vtl__zbtn[aria-pressed="true"]:is(:hover,:focus-visible,:active){background:color-mix(in srgb,var(--vv-vtl-mark) 86%,var(--vv-on-strong));color:var(--vv-on-strong)}
.vvault-front .vvault-vtl__zoom .vvault-vtl__zbtn:focus-visible{outline-offset:-3px}
/* The visible dates, with the buttons that page through time. */
.vvault-front .vvault-vtl__range{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:var(--vv-s3)}
.vvault-front .vvault-vtl__span{margin:0;min-width:12ch;font-size:1.0625rem;line-height:1.3;text-align:center}
.vvault-front .vvault-vtl__round,.vvault-front .vvault-vtl__nudge{--vv-ico-size:1.25rem;display:inline-grid;place-items:center;flex:none;width:var(--vv-control-h);height:var(--vv-control-h);margin:0;padding:0;border:1px solid var(--vv-card-line);border-radius:var(--vv-radius-pill);background:var(--vv-paper);color:var(--vv-ink);cursor:pointer;line-height:0}
.vvault-front .vvault-vtl__nudge{border-color:transparent;background:transparent}
.vvault-front :is(.vvault-vtl__round,.vvault-vtl__nudge) svg{width:var(--vv-ico-size);height:var(--vv-ico-size)}
.vvault-front :is(.vvault-vtl__round,.vvault-vtl__nudge):is(:hover,:focus-visible){background:var(--vv-soft);color:var(--vv-ink);border-color:var(--vv-edge)}
.vvault-front :is(.vvault-vtl__round,.vvault-vtl__nudge):is(:disabled,[aria-disabled="true"]){color:var(--vv-muted);cursor:default;background:transparent;border-color:transparent;opacity:.55}
.vvault-front .vvault-vtl__round:is(:disabled,[aria-disabled="true"]){border-color:var(--vv-card-line)}
.vvault-front .vvault-vtl__nudge:is(:disabled,[aria-disabled="true"]){border-color:transparent}

/* ---- Cards (the plain list without JavaScript) ---- */
.vvault-front .vvault-vtl__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--vv-s4);margin:0;padding:0;list-style:none}
.vvault-front .vvault-vtl__item{margin:0;min-width:0}
.vvault-front .vvault-vtl__card{display:flex;flex-direction:column;gap:var(--vv-s2);height:100%;padding:var(--vv-s2);border:1px solid var(--vv-card-line);border-radius:var(--vv-radius-sm);background:var(--vv-paper);color:inherit;text-decoration:none}
.vvault-front .vvault-vtl__card:is(:hover,:focus-visible){border-color:var(--vv-edge);color:inherit}
.vvault-front .vvault-vtl__card:is(:hover,:focus-visible) .vvault-vtl__name{text-decoration:underline}
.vvault-front .vvault-vtl__card[aria-current="true"]{border-color:var(--vv-vtl-mark);box-shadow:0 0 0 1px var(--vv-vtl-mark)}
.vvault-front .vvault-vtl__card .vvault-th{border-radius:var(--vv-radius-sm)}
.vvault-front .vvault-vtl__body{display:flex;flex-direction:column;gap:var(--vv-s1);min-width:0}
.vvault-front .vvault-vtl__date{font-family:var(--vv-font-ui);font-size:.9375rem;line-height:1.3;color:var(--vv-muted)}
/* Titles take two lines in every card, so the cards in a row are one height (R36) and the stems start level. */
.vvault-front .vvault-vtl__name{margin:0;padding:0;border:0;letter-spacing:normal;text-transform:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.5em;font-family:var(--vv-font-display);font-size:1.125rem;font-weight:500;line-height:1.25}
.vvault-front .vvault-vtl__chan{overflow:hidden;font-family:var(--vv-font-ui);font-size:.9375rem;line-height:1.3;color:var(--vv-muted);white-space:nowrap;text-overflow:ellipsis}

/* ---- The timeline (with JavaScript) ---- */
.vvault-front .vvault-vtl.is-live .vvault-vtl__viewport{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;outline-offset:-3px}
.vvault-front .vvault-vtl.is-live .vvault-vtl__viewport::-webkit-scrollbar{display:none}
.vvault-front .vvault-vtl.is-dragging,.vvault-front .vvault-vtl.is-dragging *{cursor:grabbing;user-select:none}
.vvault-front .vvault-vtl.is-live .vvault-vtl__list{display:block;position:relative;min-width:100%}
.vvault-front .vvault-vtl.is-live .vvault-vtl__item{position:absolute;top:0;left:0;width:var(--vv-vtl-cw)}
.vvault-front .vvault-vtl.is-live .vvault-vtl__card{cursor:pointer;-webkit-user-drag:none}
.vvault-front .vvault-vtl.is-live .vvault-vtl__card img{-webkit-user-drag:none;pointer-events:none}
.vvault-front .vvault-vtl__axis{position:relative;min-width:100%;height:0}
.vvault-front .vvault-vtl.is-live .vvault-vtl__axis{height:calc(var(--vv-vtl-rise) + 3rem)}
.vvault-front .vvault-vtl__line{position:absolute;left:0;right:0;top:var(--vv-vtl-rise);height:1px;background:var(--vv-edge)}
.vvault-front .vvault-vtl__tick{position:absolute;top:calc(var(--vv-vtl-rise) - .25rem);width:1px;height:.5rem;background:var(--vv-edge)}
.vvault-front .vvault-vtl__tick--major{top:calc(var(--vv-vtl-rise) - .5rem);height:1rem}
.vvault-front .vvault-vtl__tlabel{position:absolute;top:calc(var(--vv-vtl-rise) + var(--vv-s4));translate:-50% 0;font-family:var(--vv-font-ui);font-size:.9375rem;line-height:1.3;white-space:nowrap}
/* A stem drops straight from each card to the dot on its date. A card moved past its date (videos close
   together) gets a slanted stem from its nearest edge (timeline.js sets the length and the angle). */
.vvault-front .vvault-vtl__stem{position:absolute;top:0;width:1px;height:var(--vv-vtl-rise);background:var(--vv-edge);translate:-50% 0;transform-origin:50% 0}
.vvault-front .vvault-vtl__dot{position:absolute;top:var(--vv-vtl-rise);width:.75rem;height:.75rem;border-radius:50%;background:var(--vv-vtl-mark);translate:-50% -50%}
.vvault-front .vvault-vtl__stem.is-selected{width:2px;background:var(--vv-vtl-mark)}
.vvault-front .vvault-vtl__dot.is-selected{width:1rem;height:1rem;box-shadow:0 0 0 .5rem var(--vv-vtl-tint)}

/* The scrollbar under the axis: its own track and thumb (the native one is hidden), with arrows either side. */
.vvault-front .vvault-vtl__scroll{display:flex;align-items:center;gap:var(--vv-s2);margin:var(--vv-s2) 0 0}
.vvault-front .vvault-vtl__scroll[hidden]{display:none}
.vvault-front .vvault-vtl__track{position:relative;flex:1 1 auto;height:.75rem;border-radius:var(--vv-radius-pill);background:var(--vv-soft);box-shadow:inset 0 0 0 1px var(--vv-card-line);cursor:pointer;touch-action:none}
.vvault-front .vvault-vtl__thumb{position:absolute;top:0;bottom:0;left:0;width:2rem;border-radius:var(--vv-radius-pill);background:var(--vv-edge);cursor:grab}
.vvault-front .vvault-vtl__hint{margin:var(--vv-s2) 0 0;font-size:.9375rem;line-height:1.4;color:var(--vv-muted)}
.vvault-front .vvault-vtl__hint[hidden]{display:none}

/* ---- Overview: every year, and the brush that sets the visible dates ---- */
.vvault-front .vvault-vtl__overview{margin:var(--vv-s5) 0 0;padding:var(--vv-s3) var(--vv-s5);border:1px solid var(--vv-card-line);border-radius:var(--vv-radius-sm);background:var(--vv-paper)}
.vvault-front .vvault-vtl__overview[hidden]{display:none}
.vvault-front .vvault-vtl__years{position:relative;height:1.5rem}
.vvault-front .vvault-vtl__ylabel{position:absolute;top:0;translate:-50% 0;font-family:var(--vv-font-ui);font-size:.9375rem;font-weight:600;line-height:1.5;white-space:nowrap}
.vvault-front .vvault-vtl__ylabel--start{translate:0 0}
.vvault-front .vvault-vtl__brush{position:relative;height:2.5rem;touch-action:none;cursor:pointer}
.vvault-front .vvault-vtl__ticks{position:absolute;inset:0}
.vvault-front .vvault-vtl__otick{position:absolute;top:50%;width:1px;height:.75rem;background:var(--vv-edge);translate:0 -50%}
.vvault-front .vvault-vtl__otick--year{height:1.25rem}
.vvault-front .vvault-vtl__window{position:absolute;top:var(--vv-s1);bottom:var(--vv-s1);min-width:2px;border-radius:var(--vv-radius-pill);background:var(--vv-vtl-tint);cursor:grab}
.vvault-front .vvault-vtl__handle{position:absolute;top:50%;width:1rem;height:1.75rem;border-radius:var(--vv-radius-pill);background:var(--vv-vtl-mark);translate:-50% -50%;cursor:ew-resize;touch-action:none}
.vvault-front .vvault-vtl__handle:focus-visible{outline:3px solid var(--vv-ring,var(--vv-ink));outline-offset:2px}

/* ---- Preview: the chosen video, playing in place ---- */
.vvault-front .vvault-vtl__preview{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:var(--vv-s4);margin:var(--vv-s5) 0 0;padding:var(--vv-s3);border:1px solid var(--vv-card-line);border-radius:var(--vv-radius-sm);background:var(--vv-paper)}
.vvault-front .vvault-vtl__media{min-width:0}
.vvault-front .vvault-vtl__media .vvault-embed{border-radius:var(--vv-radius-sm)}
/* No local picture: the plate fills the player (the play button sits on it). */
.vvault-front .vvault-vtl__embed .vvault-plate{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--vv-accent,currentColor) 7%,var(--vv-panel,var(--vv-soft)))}
.vvault-front .vvault-vtl__embed .vvault-plate__mark{translate:0 -3.5rem}
/* The board's round play button. */
.vvault-front .vvault-vtl .vvault-embed__icon{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%}
.vvault-front .vvault-vtl .vvault-embed__icon svg{width:1.75rem;height:1.75rem}
.vvault-front .vvault-vtl__info{min-width:0}
.vvault-front .vvault-vtl__ptitle{margin:0 0 var(--vv-s2);font-family:var(--vv-font-display);font-weight:var(--vv-title-weight);font-size:clamp(1.375rem,1.1rem + 1.2cqi,1.875rem);line-height:1.2}
.vvault-front .vvault-vtl__pchan{margin:0 0 var(--vv-s2);font-family:var(--vv-font-ui);font-size:1.0625rem;line-height:1.4}
.vvault-front .vvault-vtl__pmeta{display:flex;flex-direction:column;gap:var(--vv-s1);margin:0 0 var(--vv-s4);font-size:1.0625rem;line-height:1.4}
.vvault-front .vvault-vtl__watch{gap:var(--vv-s2)}
.vvault-front .vvault-vtl__note{margin:var(--vv-s3) 0 0;font-size:.9375rem;line-height:1.4;color:var(--vv-muted)}

@container vv (min-width:720px){
	.vvault-front .vvault-vtl__preview{grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:var(--vv-s5)}
}
/* Narrow: the controls stack under the heading, the range spans the row, about two cards show. */
@container vv (max-width:599px){
	.vvault-front .vvault-vtl__controls{flex-basis:100%}
	.vvault-front .vvault-vtl__range{justify-content:space-between}
	.vvault-front .vvault-vtl__span{flex:1 1 auto}
	.vvault-front .vvault-vtl__zoom .vvault-vtl__zbtn{min-width:4.5rem;padding:0 var(--vv-s3)}
	.vvault-front .vvault-vtl__overview{padding:var(--vv-s3)}
	.vvault-front .vvault-vtl__watch{width:100%}
	.vvault-front .vvault-vtl__name{font-size:1.0625rem}
}
/* No topic menu: the zoom sits alone, at the end of its row. */
.vvault-front .vvault-vtl__controls:not(:has(.vvault-vtl__topic)) .vvault-vtl__zoom{grid-column:1/-1;justify-self:end}
@container vv (max-width:599px){
	.vvault-front .vvault-vtl__controls:not(:has(.vvault-vtl__topic)) .vvault-vtl__zoom{justify-self:stretch}
	.vvault-front .vvault-vtl__controls:not(:has(.vvault-vtl__topic)) .vvault-vtl__zbtn{flex:1 1 0}
}

/* Appearances: Cinema is a dark panel, so the cards and panels take its surface; Compact drops the panels' fill. */
.vvault-front .vvault-module--cinema .vvault-vtl__card,.vvault-front .vvault-module--cinema :is(.vvault-vtl__overview,.vvault-vtl__preview){background:var(--vv-panel)}
.vvault-front .vvault-module--compact :is(.vvault-vtl__overview,.vvault-vtl__preview){background:transparent}

@media (prefers-reduced-motion:reduce){
	.vvault-front .vvault-vtl *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}