/* ==========================================================================
   Timer Pro - Video Library (modal player + catalog grid), in the Cremarc language:
   square corners, 1px Track Black rules, Bebas section heads, Plex Mono sub-headings
   and counts, Volt Yellow on hover.
   ========================================================================== */
.videolibrary-intro { max-width: 754px; margin: 0 0 32px; }

/* Page headings: "Video Library Index" above the topic list, "Full Video Library" above
   the search box and the videos. Section-heading component at the H3 (68) size. */
.tp-prose .vl-heading { font-size: var(--tp-h3); margin: 0 0 clamp(24px, 3vw, 40px); scroll-margin-top: 24px; }

/* The page header scrolls away on inner pages, so the search pins to the top. */
.vl-search { position: sticky; top: 0; z-index: 5; margin: 0 0 24px; padding: 0 0 16px; background: var(--tp-white); }
.vl-search-input {
	width: 100%; height: 56px; padding: 0 20px; font: inherit; font-size: var(--tp-body-size);
	border: 1px solid var(--tp-black); border-radius: 0; background: var(--tp-white); color: var(--tp-black);
}
.vl-search-input::placeholder { color: var(--tp-grey); }
.vl-search-input:focus { outline: 3px solid var(--tp-focus); outline-offset: 2px; }

/* Topic links: one per line, in catalog order, separated by 1px Track Black rules (the
   same row language as the FAQ and the Vision AI index), with the video count at the right. */
.tp-prose .vl-toc, .vl-toc { list-style: none; margin: 0 0 clamp(72px, 8vw, 120px); padding: 0; border-top: 1px solid var(--tp-black); }
.tp-prose .vl-toc li, .vl-toc li { margin: 0; padding: 0; border-bottom: 1px solid var(--tp-black); }
.tp-prose .vl-toc li::before, .tp-prose .vl-toc li::marker { content: none; }
.vl-chip {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 12px;
	font-size: 1rem; font-weight: 500; line-height: 1.3;
	color: var(--tp-black); text-decoration: none; transition: background-color .15s ease;
}
.tp-prose a.vl-chip, .vl-chip, .vl-chip span { text-decoration: none; }
.vl-chip:hover, .vl-chip:focus-visible { background: var(--tp-yellow); color: var(--tp-black); }
.vl-chip-count { flex: none; color: var(--tp-blue); font-family: var(--tp-mono); font-size: .875rem; }
.vl-chip:hover .vl-chip-count, .vl-chip:focus-visible .vl-chip-count { color: var(--tp-black); }

/* One numbered section per heading; its sub-headings (the original library's upper-case
   group labels) sit inside it as mono eyebrows in Electric Blue. */
.vl-section { margin: 0 0 72px; scroll-margin-top: 96px; }
.tp-prose .vl-cat, .vl-cat {
	font-family: var(--tp-display); font-weight: 400; font-size: var(--tp-h5); line-height: 1;
	color: var(--tp-black); margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--tp-black);
}
.vl-subsection + .vl-subsection { margin-top: 40px; }
.tp-prose .vl-sub, .vl-sub {
	font-family: var(--tp-mono); font-weight: 400; font-size: 1rem; line-height: 1.2; letter-spacing: 0;
	text-transform: uppercase; color: var(--tp-blue); margin: 0 0 16px;
}
/* "Back to index" closes each section: the tertiary text link. */
.tp-prose .vl-back, .vl-back { display: inline-block; margin-top: 28px; }
.vl-section[hidden], .vl-subsection[hidden], .vl-card[hidden] { display: none; }
/* Videos as a list: one per row, separated by 1px Track Black rules (the same row language
   as the index above), with a mono "Play" label at the right. Volt Yellow on hover. */
.vl-grid { display: block; border-top: 1px solid var(--tp-black); }
.vl-card {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%;
	text-align: left; padding: 0; cursor: pointer;
	background: transparent; border: 0; border-bottom: 1px solid var(--tp-black); border-radius: 0;
	font: inherit; color: var(--tp-black); transition: background-color .15s ease;
}
.vl-card::after {
	content: 'Play'; flex: none; padding-right: 12px;
	font-family: var(--tp-mono); font-size: .875rem; text-transform: uppercase; letter-spacing: .02em; color: var(--tp-blue);
}
.vl-card:hover, .vl-card:focus-visible { background: var(--tp-yellow); }
.vl-card:hover::after, .vl-card:focus-visible::after { color: var(--tp-black); }
.vl-title { display: block; padding: 14px 12px; font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--tp-black); }
/* Video length "(M:SS)": IBM Plex Mono in Electric Blue, at the right before "Play". */
.vl-dur { flex: none; margin-left: auto; font-family: var(--tp-mono); font-size: .875rem; letter-spacing: .02em; color: var(--tp-blue); }
.vl-card:hover .vl-dur, .vl-card:focus-visible .vl-dur { color: var(--tp-black); }
.vl-card { gap: 16px; }

/* ----- Full-window modal player ----- */
body.vl-noscroll { overflow: hidden; }
.vl-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 2.4vmin; }
.vl-modal.is-open { display: flex; }
.vl-modal-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,.94); animation: vlFade .2s ease; }
.vl-modal-inner {
	position: relative; z-index: 1; width: 96vw; height: 94vh; display: flex; flex-direction: column;
	align-items: center; justify-content: center; animation: vlPop .24s ease;
}
.vl-modal-title { color: var(--tp-white); font-family: var(--tp-display); font-weight: 400; font-size: var(--tp-h5); text-align: center; margin: 0 0 12px; padding: 0 3rem; max-width: 90vw; }
.vl-modal-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
.vl-video { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #000; outline: none; }
.vl-modal-close {
	position: absolute; top: -6px; right: 0; z-index: 2; width: 48px; height: 48px; border: 3px solid var(--tp-yellow); border-radius: 0;
	background: transparent; color: var(--tp-yellow); font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background-color .15s ease;
}
.vl-modal-close:hover, .vl-modal-close:focus-visible { background: var(--tp-yellow); color: var(--tp-black); }
@keyframes vlFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vlPop { from { opacity: 0; transform: scale(.97) translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
	.vl-title { font-size: .9375rem; padding: 12px; }
	.vl-modal-inner { width: 100vw; height: 100vh; }
}
@media (prefers-reduced-motion: reduce) {
	.vl-modal-backdrop, .vl-modal-inner { animation: none; }
	.vl-card { transition: none; }
}

/* ==========================================================================
   Members: Taylor in the search bar + Continue watching (inc/video-library-eddie.php)
   ========================================================================== */
.vl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 4vw, 56px); align-items: start; }
.vl-main { min-width: 0; }

/* Search: the input with an Electric Blue "Ask Taylor" button joined to its right edge. */
.vl-search { display: flex; }
.vl-search .vl-search-input { flex: 1; min-width: 0; }
.vl-search-ask { flex: none; height: 56px; padding: 0 22px; border: 1px solid var(--tp-blue); border-left: 0; background: var(--tp-blue); color: var(--tp-white);
	font-family: var(--tp-display); font-size: 1.25rem; letter-spacing: .01em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.vl-search-ask:hover, .vl-search-ask:focus-visible { background: var(--tp-yellow); border-color: var(--tp-black); color: var(--tp-black); }
.vl-search-ask:focus-visible { outline: 3px solid var(--tp-focus); outline-offset: 2px; }
.tp-prose .vl-none, .vl-none { margin: -8px 0 24px; padding: 12px 16px; border-left: 6px solid var(--tp-blue); background: #fff; font-size: 1rem; }

/* Taylor's panel: question, then the written answer (left) and the best moments (right). */
.vl-eddie { margin: 0 0 40px; border: 1px solid var(--tp-black); background: #fff; scroll-margin-top: 96px; animation: vlUp .3s ease-out both; }
.vl-eddie-head { position: relative; padding: 20px 64px 16px 24px; background: var(--tp-black); color: var(--tp-white); border-bottom: 6px solid var(--tp-yellow); }
.tp-prose .vl-eddie-eyebrow, .vl-eddie-eyebrow { margin: 0 0 8px; font-family: var(--tp-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tp-blue); }
.vl-eddie-head .vl-eddie-eyebrow { color: var(--tp-yellow); }
.tp-prose .vl-eddie-q, .vl-eddie-q { margin: 0; font-family: var(--tp-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: .95; text-transform: uppercase; color: var(--tp-white); }
.vl-eddie-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 2px solid var(--tp-yellow); background: transparent; color: var(--tp-yellow); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.vl-eddie-close:hover, .vl-eddie-close:focus-visible { background: var(--tp-yellow); color: var(--tp-black); }
.vl-eddie-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.vl-eddie-answer { padding: 22px 24px; min-width: 0; }
.vl-eddie-right { padding: 22px 24px; border-left: 1px solid var(--tp-black); background: var(--tp-white); min-width: 0; }
.tp-prose .vl-eddie-thinking, .vl-eddie-thinking { margin: 0; font-family: var(--tp-mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tp-black); display: inline-flex; align-items: center; gap: 10px; }
.vl-eddie-thinking::before { content: ""; width: 8px; height: 8px; background: var(--tp-blue); animation: vlPulse 1.1s ease-in-out infinite; }
.tp-prose .vl-eddie-empty, .vl-eddie-empty { margin: 0; color: var(--tp-black); }
.vl-eddie-text p, .vl-eddie-text li { font-size: 1rem; line-height: 1.55; }
.vl-eddie-text p { margin: 0 0 12px; }
.tp-prose .vl-eddie-text ol, .tp-prose .vl-eddie-text ul { margin: 0 0 12px; padding-left: 1.4em; }
.vl-ref { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin: 0 1px 0 3px; padding: 0 4px; border: 0;
	background: var(--tp-blue); color: var(--tp-white); font-family: var(--tp-mono); font-size: .6875rem; line-height: 1; vertical-align: 1px; cursor: pointer; }
span.vl-ref { background: var(--tp-grey); cursor: default; }
button.vl-ref:hover, button.vl-ref:focus-visible { background: var(--tp-yellow); color: var(--tp-black); }
.vl-link { color: var(--tp-blue); overflow-wrap: anywhere; }
.vl-eddie-sources { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--tp-black); }
.vl-source { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 9px 4px; border: 0; border-bottom: 1px solid #dadad3; background: transparent; text-align: left; font: inherit; color: var(--tp-black); cursor: pointer; }
.vl-source:hover, .vl-source:focus-visible { background: var(--tp-yellow); }
.vl-source-n { flex: none; font-family: var(--tp-mono); font-size: .8125rem; color: var(--tp-blue); }
.vl-source-title { flex: 1; font-size: .9375rem; }
.vl-source-time { flex: none; font-family: var(--tp-mono); font-size: .8125rem; color: var(--tp-blue); }
.vl-fb { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.vl-fb-btn { display: inline-grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 1px solid var(--tp-black); background: #fff; color: var(--tp-black); cursor: pointer; transition: transform .15s ease; }
.vl-fb-btn.is-down svg { transform: rotate(180deg); }
.vl-fb-btn:hover { color: var(--tp-blue); border-color: var(--tp-blue); transform: translateY(-1px); }
.vl-fb-btn.is-on { background: var(--tp-yellow); color: var(--tp-black); border-color: var(--tp-black); }
.vl-fb-q { margin-left: 4px; font-family: var(--tp-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }

/* Best moments: one row per moment - title, start time, a line of what is said there. */
.tp-prose .vl-moments, .vl-moments { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tp-black); }
.tp-prose .vl-moments li, .vl-moments li { margin: 0; padding: 0; border-bottom: 1px solid #dadad3; }
.tp-prose .vl-moments li::before, .tp-prose .vl-moments li::marker { content: none; }
.vl-moment { display: block; width: 100%; padding: 10px 6px; border: 0; background: transparent; text-align: left; font: inherit; color: var(--tp-black); cursor: pointer; transition: background-color .15s ease; }
.vl-moment:hover, .vl-moment:focus-visible { background: var(--tp-yellow); }
.vl-moment-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.vl-moment-title { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.vl-moment-time { flex: none; font-family: var(--tp-mono); font-size: .8125rem; color: var(--tp-blue); }
.vl-moment:hover .vl-moment-time { color: var(--tp-black); }
.vl-moment-snip { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.45; color: #45484c; }

/* Continue watching: sticky on the right, one row per video with its progress. */
.vl-aside { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; border-top: 1px solid var(--tp-black); }
.tp-prose .vl-hist-head, .vl-hist-head { margin: 14px 0 12px; font-family: var(--tp-display); font-weight: 400; font-size: var(--tp-h5); line-height: 1; text-transform: uppercase; }
.vl-hist { border-top: 1px solid var(--tp-black); }
.vl-hist-item { display: block; width: 100%; padding: 12px 6px; border: 0; border-bottom: 1px solid #dadad3; background: transparent; text-align: left; font: inherit; color: var(--tp-black); cursor: pointer; transition: background-color .15s ease; animation: vlUp .3s ease-out both; }
.vl-hist-item:hover, .vl-hist-item:focus-visible { background: var(--tp-yellow); }
.vl-hist-title { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.vl-hist-bar { display: block; height: 4px; margin: 8px 0 6px; background: #e6e6e1; }
.vl-hist-bar i { display: block; height: 100%; background: var(--tp-blue); }
.vl-hist-item.is-done .vl-hist-bar i { background: var(--tp-black); }
.vl-hist-meta { display: block; font-family: var(--tp-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: var(--tp-blue); }
.vl-hist-item:hover .vl-hist-meta { color: var(--tp-black); }
.tp-prose .vl-hist-empty, .vl-hist-empty { margin: 0; padding: 12px 0; font-size: .9375rem; color: #45484c; }

@keyframes vlUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vlPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }

@media (max-width: 1000px) {
	.vl-layout { grid-template-columns: minmax(0, 1fr); }
	.vl-aside { position: static; max-height: none; order: -1; margin-bottom: 32px; }
	.vl-hist-item:nth-child(n+5) { display: none; }   /* phones and tablets: the four latest */
	.vl-eddie-cols { grid-template-columns: minmax(0, 1fr); }
	.vl-eddie-right { border-left: 0; border-top: 1px solid var(--tp-black); }
}
@media (max-width: 600px) {
	.vl-search-ask { padding: 0 14px; font-size: 1.0625rem; }
	.vl-eddie-head { padding: 16px 56px 14px 16px; }
	.vl-eddie-answer, .vl-eddie-right { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.vl-eddie, .vl-hist-item, .vl-eddie-thinking::before { animation: none; }
}

/* Trending (under Continue watching): rank in Electric Blue mono, title, plays and viewers. */
.tp-prose .vl-trend-head, .vl-trend-head { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--tp-black); }
.tp-prose .vl-trend-sub, .vl-trend-sub { margin: -6px 0 12px; font-family: var(--tp-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: #45484c; }
.tp-prose .vl-trend, .vl-trend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tp-black); }
.tp-prose .vl-trend li, .vl-trend li { margin: 0; padding: 0; border-bottom: 1px solid #dadad3; }
.tp-prose .vl-trend li::before, .tp-prose .vl-trend li::marker { content: none; }
.vl-trend-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 6px; border: 0; background: transparent; text-align: left; font: inherit; color: var(--tp-black); cursor: pointer; transition: background-color .15s ease; animation: vlUp .3s ease-out both; }
.vl-trend-item:hover, .vl-trend-item:focus-visible { background: var(--tp-yellow); }
.vl-trend-rank { flex: none; width: 26px; font-family: var(--tp-display); font-size: 1.75rem; line-height: .9; color: var(--tp-blue); }
.vl-trend-item:hover .vl-trend-rank { color: var(--tp-black); }
.vl-trend-body { flex: 1; min-width: 0; }
.vl-trend-body .vl-hist-meta { margin-top: 4px; }
.vl-trend-item:hover .vl-hist-meta { color: var(--tp-black); }
@media (prefers-reduced-motion: reduce) { .vl-trend-item { animation: none; } }

/* The library player's size (controls: assets/css/tp-player.css). */
.vlp-box .vl-video { display: block; max-width: 100%; max-height: calc(94vh - 72px); width: auto; height: auto; cursor: pointer; }
.vlp-box.is-full .vl-video { width: 100%; height: 100%; max-height: none; object-fit: contain; }

/* "Copy link" in the player: the video's own link (at the current moment once past 5 s). */
.vl-modal-share { position: absolute; top: -6px; left: 0; z-index: 2; height: 48px; padding: 0 16px; border: 3px solid var(--tp-yellow); border-radius: 0; background: transparent;
	color: var(--tp-yellow); font-family: var(--tp-mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.vl-modal-share:hover, .vl-modal-share:focus-visible, .vl-modal-share.is-done { background: var(--tp-yellow); color: var(--tp-black); }
.vl-modal-title { padding: 0 13rem; }
@media (max-width: 760px) { .vl-modal-title { padding: 0 3rem; margin-top: 52px; } .vl-modal-share { height: 40px; padding: 0 10px; font-size: .75rem; } }