/* TV / Movies libraries + the Shows view — media/vlib.js.
   Direction: neon-marquee cinema. The Videos split's language carried inside:
   a night-dark stage lit in the library's own colour (--vl-rgb: lime for TV,
   rose for Movies, teal / orchid when Toons / Anime are shown as shows),
   poster-first, backdrops under heavy scrims, heavy tight titles. */

/* ── The view shell: no sidebar, the main column scrolls ─────────────── */
.layout.vlib-view { grid-template-columns: 1fr; }
.vlib-view {
  --vl-rgb: 163, 230, 53;
  --vl: rgb(var(--vl-rgb));
  --vl-card: 170px;
  --vl-ease: cubic-bezier(.2, .8, .2, 1);
  --vl-gutter: 22px;
}
.vlib-main { position: relative; padding: 18px var(--vl-gutter) 64px; scroll-behavior: auto; overflow-x: hidden; }
.vlib-main > .vlane-bar { position: relative; z-index: 5; }
.vlib-root { position: relative; }

/* ── Shared controls ─────────────────────────────────────────────────── */
.vl-btn, .vl-icon-btn, .vl-card, .vl-wide, .vl-seg-btn, .vl-chip, .vl-season-card, .vl-ep-still, .vl-ep-watch, .vl-hero-pick, .vl-result, .vl-type {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.vl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-weight: 700; font-size: 14px; line-height: 1; font-family: inherit; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--vl-ease), background .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease;
}
.vl-btn:hover { transform: translateY(-1px); border-color: rgba(var(--vl-rgb), .7); }
.vl-btn:active { transform: translateY(0) scale(.98); }
.vl-btn:disabled { opacity: .5; cursor: default; transform: none; }
.vl-btn-primary {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(var(--vl-rgb), 1), rgba(var(--vl-rgb), .82));
  color: #0b0d0a;
  box-shadow: 0 8px 26px -8px rgba(var(--vl-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.vl-btn-primary:hover { box-shadow: 0 12px 34px -8px rgba(var(--vl-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .4); }
.vl-btn-glass {
  background: rgba(16, 18, 26, .55);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.vl-btn-lg { min-height: 50px; padding: 0 24px; font-size: 15px; }
.vl-btn svg { flex: none; }

.vl-icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text-dim);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--vl-ease);
}
.vl-icon-btn:hover:not(:disabled) { color: var(--text); border-color: rgba(var(--vl-rgb), .6); transform: translateY(-1px); }
.vl-icon-btn:disabled { opacity: .35; cursor: default; }
.vl-icon-btn-lg { width: 50px; height: 50px; border-radius: 999px; background: rgba(16, 18, 26, .55); border-color: rgba(255, 255, 255, .16); color: var(--text); }

.vl-btn:focus-visible, .vl-icon-btn:focus-visible, .vl-card:focus-visible, .vl-wide:focus-visible,
.vl-seg-btn:focus-visible, .vl-chip:focus-visible, .vl-ep-still:focus-visible,
.vl-ep-watch:focus-visible, .vl-back:focus-visible, .vl-hero-pick:focus-visible, .vl-type:focus-visible,
.vl-result:focus-visible, .vl-more:focus-visible, .vlane-mode-btn:focus-visible, .vlane-add:focus-visible {
  outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 3px;
}

.vl-h2 {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text);
}
.vl-h2-sub { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-mute); text-transform: uppercase; }

.vl-loading { display: flex; align-items: center; gap: 12px; padding: 48px 0; color: var(--text-dim); justify-content: center; }
.vl-ring {
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  border: 2px solid rgba(var(--vl-rgb), .25); border-top-color: rgb(var(--vl-rgb));
  animation: vl-spin .8s linear infinite;
}
@keyframes vl-spin { to { transform: rotate(360deg); } }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.vl-hero {
  position: relative;
  display: grid;
  /* No pull-up under the dock: the dock's own 18px bottom margin is the gap
     under the canister, matching .vlib-main's 18px above it (Rober,
     2026-10-14: the gap above the canister was bigger than the one below). */
  margin: 0 calc(-1 * var(--vl-gutter)) 8px;
  /* A floor, not a height: a long title plus its eyebrow, logo and overview
     grows the hero instead of climbing under the dock. */
  min-height: clamp(360px, 54vh, 580px);
  overflow: hidden;
  isolation: isolate;
}
/* Slides stack in one grid cell, so the hero is as tall as the tallest one
   and a crossfade never collapses it. */
.vl-hero-stage { position: relative; display: grid; }
.vl-hero-slide { position: relative; grid-area: 1 / 1; display: flex; align-items: flex-end; transition: opacity .7s ease; }
.vl-hero-slide.is-entering { opacity: 0; }
.vl-hero-bd { position: absolute; inset: 0; overflow: hidden; }
.vl-hero-bd img {
  position: relative; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  animation: vl-kenburns 26s ease-in-out infinite alternate;
}
.vl-hero-bd.is-thumb img { filter: blur(14px) saturate(1.2) brightness(.7); transform: scale(1.15); animation: none; }
@keyframes vl-kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.vl-hero-bd::after {
  /* Above the image explicitly: the Ken Burns drift promotes the image to its
     own compositor layer, and an implicit order let it paint over the scrim. */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 11, 16, .96) 0%, rgba(10, 11, 16, .78) 32%, rgba(10, 11, 16, .15) 64%, rgba(10, 11, 16, .35) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 11, 16, 0) 38%),
    radial-gradient(60% 80% at 12% 90%, rgba(var(--vl-rgb), .22), transparent 70%);
}
.vl-hero-body {
  position: relative; z-index: 2;
  box-sizing: border-box;
  width: min(640px, 62%);
  padding: 64px 0 44px calc(var(--vl-gutter) + 18px);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.vl-hero-slide .vl-hero-body > * { transition: opacity .6s ease, transform .7s var(--vl-ease); }
.vl-hero-slide.is-entering .vl-hero-body > * { opacity: 0; transform: translateY(14px); }
.vl-hero-slide .vl-hero-body > :nth-child(2) { transition-delay: .06s; }
.vl-hero-slide .vl-hero-body > :nth-child(3) { transition-delay: .12s; }
.vl-hero-slide .vl-hero-body > :nth-child(4) { transition-delay: .18s; }
.vl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: rgb(var(--vl-rgb)); text-shadow: 0 0 18px rgba(var(--vl-rgb), .5);
}
.vl-eyebrow-rule { width: 28px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 10px rgba(var(--vl-rgb), .8); }
.vl-hero-slide .vl-eyebrow-rule { transform-origin: left; transition: transform .7s var(--vl-ease) .1s; }
.vl-hero-slide.is-entering .vl-eyebrow-rule { transform: scaleX(0); }
.vl-hero-title {
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: clamp(34px, 4.4vw, 64px); font-weight: 850; line-height: .98; letter-spacing: -.04em;
  color: #fff; text-wrap: balance;
  text-shadow: 0 0 40px rgba(var(--vl-rgb), .35), 0 3px 18px rgba(0, 0, 0, .6);
}
.vl-hero-title.is-long { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.04; }
.vl-hero-logo { max-width: min(420px, 100%); max-height: 120px; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .6)); }
.vl-hero-overview {
  margin: 0; max-width: 52ch;
  color: rgba(231, 236, 243, .86); font-size: 15px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vl-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.vl-hero-picks {
  position: absolute; right: calc(var(--vl-gutter) + 8px); bottom: 36px; z-index: 2;
  display: flex; gap: 10px; align-items: flex-end;
}
.vl-hero-pick {
  position: relative; width: 52px; height: 78px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; overflow: hidden;
  background: var(--surface); cursor: pointer; opacity: .6;
  transition: opacity .3s ease, transform .35s var(--vl-ease), width .35s var(--vl-ease), height .35s var(--vl-ease), border-color .3s ease, box-shadow .3s ease;
}
.vl-hero-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The auto-advance timer: the active poster's foot fills, and its end turns
   the page (vlib.js). Hovering or focusing the hero pauses it. */
.vl-pick-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, .55); }
.vl-pick-bar::after { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: rgb(var(--vl-rgb)); box-shadow: 0 0 8px rgba(var(--vl-rgb), .9); }
.vl-hero-pick.is-timing .vl-pick-bar::after { animation: vl-pick-fill var(--hero-ms, 9s) linear forwards; }
.vl-hero-pick:not(.active) .vl-pick-bar { opacity: 0; }
.vl-hero:hover .vl-pick-bar::after, .vl-hero:focus-within .vl-pick-bar::after { animation-play-state: paused; }
@keyframes vl-pick-fill { to { transform: scaleX(1); } }
.vl-hero-pick.active:not(.is-timing) .vl-pick-bar::after { transform: scaleX(1); }
.vl-hero-pick:hover { opacity: .9; transform: translateY(-3px); }
.vl-hero-pick.active {
  opacity: 1; width: 64px; height: 96px;
  border-color: rgba(var(--vl-rgb), .9);
  box-shadow: 0 0 0 1px rgba(var(--vl-rgb), .5), 0 10px 28px -6px rgba(var(--vl-rgb), .6);
}

.vl-meta {
  /* Every part carries its separator on its LEFT, 12px out; the row is pulled
     left by the same amount and clipped there, so a part that wraps to the
     start of a line takes its separator into the clipped margin. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  margin-left: -23px; clip-path: inset(-4px -4px -4px 23px);
  color: var(--text-dim); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.vl-meta-part { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-left: 23px; }
.vl-meta-part::before { content: ''; position: absolute; left: -12px; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: rgba(255, 255, 255, .22); }
.vl-rating { color: #fde68a; }
.vl-meta-genres { color: var(--text-mute); }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.vl-toolbar { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; margin: 6px 0 26px; }
.vl-tb-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
/* Only the progress pill is ever seen in the head: idle, the head is gone. */
.vl-tb-head:not(:has(> .vl-job:not(.hidden))) { display: none; }
.vl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Home: the first thing on the control line, the same 40px as its neighbours,
   lit in the library's colour while the shelves are showing. */
.vl-home-btn {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); color: var(--text-dim);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--vl-ease);
}
.vl-home-btn:hover { color: var(--text); border-color: rgba(var(--vl-rgb), .6); transform: translateY(-1px); }
.vl-home-btn.active { color: #fff; border-color: rgba(var(--vl-rgb), .7); background: rgba(var(--vl-rgb), .16); }
.vl-home-btn:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 3px; }
.vl-job {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(var(--vl-rgb), .4); background: rgba(var(--vl-rgb), .08);
  color: var(--text); font-size: 12.5px; font-weight: 600;
}
.vl-job-cur { color: var(--text-dim); max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The control row is ONE line at a pointer width: every control is 40px tall
   and 10px apart, the genre chips take what is left (vlib.js fitChips), and a
   narrower toolbar sheds things on purpose (the @container rules below) —
   never a wrap. A phone lays it out on two lines by design (Phones, below). */
.vl-tb-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; container: vl-tb / inline-size; }
.vl-tb-tools { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }

.vl-seg {
  display: inline-flex; flex: none; padding: 2px; gap: 2px;
  border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--border);
}
.vl-seg-btn {
  min-height: 36px; padding: 0 14px; white-space: nowrap;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--text-dim); font-weight: 650; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.vl-seg-btn:hover { color: var(--text); }
.vl-seg-btn.active { background: rgba(var(--vl-rgb), .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--vl-rgb), .55); }
.vl-seg-wide { display: flex; }
.vl-seg-wide .vl-seg-btn { flex: 1; min-height: 42px; }

.vl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-chip {
  min-height: 34px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text-dim); font-weight: 600; font-size: 12.5px; line-height: 1; font-family: inherit; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.vl-chip:hover { color: var(--text); border-color: var(--border-strong); }
.vl-chip.active { color: #fff; border-color: rgba(var(--vl-rgb), .7); background: rgba(var(--vl-rgb), .12); }
.vl-chip-more { color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* At a pointer-sized width the genre row takes whatever the toolbar line has
   left and vlib.js fitChips() fills exactly that: no fixed count, nothing cut
   off, and never a second line. "+N" opens the genre panel (.vl-gp) below. */
/* The padding keeps the chips' focus rings inside the clip. */
.vl-chips-fit { flex: 1 1 0; min-width: 60px; flex-wrap: nowrap; overflow: hidden; padding: 6px; margin: -6px; }
.vl-tb-row .vl-chip { min-height: 40px; padding: 0 14px; }
.vl-chips-fit .vl-chip { flex: none; white-space: nowrap; }
.vl-chips-fit .vl-chip[hidden] { display: none; }
.vl-chip-more[aria-expanded="true"] { color: #fff; border-color: rgba(var(--vl-rgb), .7); background: rgba(var(--vl-rgb), .12); }

/* ── Genre signs (2026-10-13) ──
   Rober: "genre pills take up a ton of room and are visually boring". Each
   genre wears its sign from Hearth's neon family (media/genre-icons-core.js:
   the picture and --g-rgb, the colour of its tubes). A chip is a small glass
   plate, not a ringed pill: 32px tall where the old one was 40, the sign at
   24px and the name tight beside it, so a row holds more genres in less room.
   At rest the sign is dimmed, a sign switched off; pointing at one lights it
   in its own colour; a chosen genre glows that colour and its sign strikes on
   with a neon flicker. Touch keeps its 44px (the coarse and phone rules below). */
.vl-tb-row .vl-chip.vl-gchip, .vl-chip.vl-gchip {
  --g-rgb: var(--vl-rgb);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 10px 0 4px;
  border: 1px solid transparent; border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: var(--text-dim); font-size: 12.5px; font-weight: 650; letter-spacing: .005em;
  transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .3s ease;
}
.vl-gsign {
  flex: none; width: 20px; height: 20px; border-radius: 5px;
  filter: saturate(.9) brightness(.95);
  transition: filter .28s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.vl-gchip-name { white-space: nowrap; }
/* After the plate's display: the fitter hides what does not fit (vlib.js fitChips). */
.vl-chips .vl-chip.vl-gchip[hidden], .vl-chips .vl-chip.vl-chip-more[hidden] { display: none; }
@media (hover: hover) {
  .vl-chip.vl-gchip:hover { color: var(--text); background: rgba(var(--g-rgb), .08); border-color: rgba(var(--g-rgb), .3); }
  .vl-chip.vl-gchip:hover .vl-gsign { filter: drop-shadow(0 0 6px rgba(var(--g-rgb), .6)); transform: translateY(-1px) rotate(-5deg) scale(1.06); }
}
.vl-chip.vl-gchip:focus-visible { outline: 2px solid rgb(var(--g-rgb)); outline-offset: 2px; }
.vl-chip.vl-gchip.active {
  color: #fff;
  border-color: rgba(var(--g-rgb), .62);
  background: linear-gradient(180deg, rgba(var(--g-rgb), .22), rgba(var(--g-rgb), .07));
  box-shadow: 0 0 18px -6px rgba(var(--g-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .08);
  text-shadow: 0 0 10px rgba(var(--g-rgb), .55);
}
.vl-chip.vl-gchip.active .vl-gsign { filter: drop-shadow(0 0 7px rgba(var(--g-rgb), .95)); }
.vl-chip.vl-gchip.is-striking .vl-gsign, .vl-chip.vl-gchip.is-striking .vl-gchip-name { animation: vl-neon-on .7s linear both; }
/* A tube striking: two stutters, then steady. */
@keyframes vl-neon-on {
  0% { opacity: .3; } 12% { opacity: 1; } 20% { opacity: .45; } 34% { opacity: 1; } 46% { opacity: .7; } 60%, 100% { opacity: 1; }
}
/* At a pointer width (the fitted row) an unpicked genre is its sign alone, on a
   square plate: about twice as many genres in the row as when every one
   carried its name (the same answer the dock's tools got, Rober 2026-10-06:
   "this takes a lot of room, make this icons, and inline hover shows text").
   Its name hangs under it on a tag (.vl-gtag, vlib.js showGenreTag) while it
   is pointed at or focused; a PICKED genre shows its name in the row, so the
   filters in force can always be read. A phone row keeps sign and name: it
   scrolls sideways, and a finger has no hover to ask with. */
.vl-chips-fit .vl-chip.vl-gchip:not(.active) .vl-gchip-name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* The sign IS the frame (Rober, 2026-10-13: "can we frame these nicer? Maybe
   more effects bigger image on hover"): no plate behind it, the glass tile it
   was drawn on at 32px, a pool of its own neon on the shelf under it. Pointed
   at, it rises out of the row at half again its size and lights up; its two
   neighbours lean in a little, the way a dock magnifies. A transform moves
   nothing in the row's layout, so the sign being aimed at never runs away
   (the lesson of the dock drawer, 2026-10-12). */
.vl-chips-fit .vl-chip.vl-gchip:not(.active) {
  position: relative; z-index: 0;
  width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center;
  border-color: transparent; background: none; border-radius: 9px;
  transform-origin: 50% 85%;
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), z-index 0s linear .34s;
}
.vl-chips-fit .vl-chip.vl-gchip:not(.active) .vl-gsign {
  width: 32px; height: 32px; border-radius: 7px;
  filter: saturate(.95) brightness(.92);
  box-shadow: 0 5px 12px -6px rgba(0, 0, 0, .9);
}
.vl-chips-fit .vl-chip.vl-gchip:not(.active)::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: -3px; height: 7px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--g-rgb), .6), transparent);
  opacity: .32; pointer-events: none; transition: opacity .3s ease;
}
@media (hover: hover) {
  .vl-chips-fit .vl-chip.vl-gchip:not(.active):hover {
    z-index: 3; background: none; border-color: transparent;
    transform: translateY(-5px) scale(1.5);
    transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), z-index 0s;
  }
  .vl-chips-fit .vl-chip.vl-gchip:not(.active):hover .vl-gsign {
    transform: rotate(-3deg);
    filter: brightness(1.15) saturate(1.2) drop-shadow(0 0 5px rgba(var(--g-rgb), .85)) drop-shadow(0 8px 10px rgba(0, 0, 0, .65));
  }
  .vl-chips-fit .vl-chip.vl-gchip:not(.active):hover::after { opacity: 1; }
  /* The neighbours lean in. */
  .vl-chips-fit .vl-chip.vl-gchip:not(.active):has(+ .vl-chip.vl-gchip:not(.active):hover),
  .vl-chips-fit .vl-chip.vl-gchip:not(.active):hover + .vl-chip.vl-gchip:not(.active) {
    z-index: 2; transform: translateY(-2px) scale(1.18);
    transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), z-index 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vl-chips-fit .vl-chip.vl-gchip:not(.active) { transition: none; }
}
.vl-gtag {
  --g-rgb: 255, 255, 255;
  position: fixed; z-index: 4000; left: 0; top: 0;
  padding: 5px 10px;
  border: 1px solid rgba(var(--g-rgb), .55); border-radius: 7px;
  background: linear-gradient(180deg, rgba(24, 25, 31, .98), rgba(12, 13, 17, .98));
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .8), 0 0 14px -6px rgba(var(--g-rgb), .8);
  color: #fff; font-size: 12px; font-weight: 650; line-height: 1.2; white-space: nowrap;
  text-shadow: 0 0 8px rgba(var(--g-rgb), .5);
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -4px);
  transition: opacity .12s ease, transform .16s cubic-bezier(.2, .8, .2, 1);
}
.vl-gtag.is-on { opacity: 1; transform: translate(-50%, 0); transition-delay: .06s; }
@media (prefers-reduced-motion: reduce) { .vl-gtag { transition: none; } }
/* "+N": the tray's end cap, its count the brightest thing on it. */
.vl-tb-row .vl-chip.vl-chip-more {
  min-height: 36px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: var(--text); font-size: 12.5px; font-weight: 750; letter-spacing: .02em;
}
@media (hover: hover) { .vl-tb-row .vl-chip.vl-chip-more:hover { background: rgba(255, 255, 255, .08); border-color: var(--border-strong); } }
.vl-tb-row .vl-chip.vl-chip-more[aria-expanded="true"] { border-color: rgba(var(--vl-rgb), .7); background: rgba(var(--vl-rgb), .12); }
/* The panel's rows wear the same signs, lit when chosen. */
.vl-gp-opt .vl-gsign { width: 22px; height: 22px; margin-left: -5px; }
/* [data-sign]: these sit above the panel's own rules (later in this file) on purpose. */
.vl-gp-opt[data-sign].active { border-color: rgba(var(--g-rgb), .6); background: rgba(var(--g-rgb), .13); box-shadow: 0 0 14px -8px rgba(var(--g-rgb), .9); }
.vl-gp-opt[data-sign].active .vl-gp-n { color: rgb(var(--g-rgb)); }
.vl-gp-opt[data-sign].active .vl-gsign { filter: drop-shadow(0 0 6px rgba(var(--g-rgb), .9)); }
@media (hover: hover) { .vl-gp-opt:hover .vl-gsign { filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .vl-gsign { transition: none; }
  .vl-chip.vl-gchip.is-striking .vl-gsign, .vl-chip.vl-gchip.is-striking .vl-gchip-name { animation: none; }
}

/* ── The control line in three framed groups (2026-10-13) ──
   Rober: "if we can frame and group stuff to be more orderly in general". At a
   pointer width the line is Home, then three trays of one height and one
   corner: what you are watching (All / Unwatched / In progress / Watched), the
   genres (their signs on a recessed shelf, "+N" its end cap), and the tools
   (search, sort, poster size, options) parted by hairlines instead of each in
   a box of its own — the dock's tools got the same, 2026-10-06: "make them
   feel like stuff on right are one framed". The trays draw their frame with a
   background and an inset ring, never a clip: the search field opens out of
   its tray to the left, over the genres, and a pointed-at sign rises out of
   its shelf. A phone keeps its own two-line layout (Phones, below). */
@media (min-width: 761px) {
  .vl-tb-row { gap: 12px; }
  .vl-tb-row .vl-home-btn { width: 44px; height: 44px; border-radius: 14px; }
  .vl-tb-row .vl-seg { padding: 4px; border-radius: 14px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, .03); }
  .vl-tb-row .vl-seg-btn { border-radius: 10px; }
  /* The genre shelf: recessed, so the signs read as standing in it. */
  .vl-tb-row .vl-chips.vl-chips-fit {
    height: 44px; align-items: center; gap: 6px;
    margin: 0; padding: 0 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .1)), var(--bg-2);
    box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 6px rgba(0, 0, 0, .45);
    overflow-x: clip; overflow-y: visible;
  }
  .vl-tb-row .vl-chips-fit .vl-chip.vl-gchip.active { min-height: 36px; }
  /* The tools tray. */
  .vl-tb-row .vl-tb-tools {
    gap: 2px; height: 44px; padding: 2px;
    border-radius: 14px; background: var(--bg-2);
    box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, .03);
  }
  .vl-tb-tools .vl-find-btn, .vl-tb-tools .vl-sort-btn, .vl-tb-tools > .vl-icon-btn, .vl-tb-tools > .vl-dir {
    height: 40px; min-height: 40px; border-color: transparent; background: transparent; border-radius: 11px;
  }
  @media (hover: hover) {
    .vl-tb-tools .vl-find-btn:hover, .vl-tb-tools .vl-sort-btn:hover, .vl-tb-tools > .vl-icon-btn:hover:not(:disabled), .vl-tb-tools > .vl-dir:hover {
      border-color: transparent; background: rgba(255, 255, 255, .06); transform: none;
    }
  }
  .vl-tb-tools .vl-sort-btn[aria-expanded="true"] { border-color: transparent; background: rgba(var(--vl-rgb), .12); }
  .vl-tb-tools > .vl-dir.active { background: rgba(var(--vl-rgb), .14); }
  .vl-tb-tools .vl-size { width: 104px; height: 40px; margin: 0 8px; }
  .vl-tb-sep { flex: none; width: 1px; height: 22px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .16), transparent); }
}
.vl-tb-sep { display: none; }
@media (min-width: 761px) { .vl-tb-sep { display: block; } }
@container vl-tb (max-width: 1000px) { .vl-tb-sep-size { display: none; } }

/* ── The pinned toolbar (vlib.js seatToolbar, 2026-10-14) ──
   Rober: "a button for this to follow you as you scroll". Pinned, the bar is
   sticky at --vl-tb-top: 8px under the top of the page, or under the lane bar
   when that is pinned too. Once it leaves its resting place it stands on a
   frosted band the full width of the page, so the wall reads as passing under
   it. The band is a pseudo-element: sticking never moves the layout. */
.vl-tb-mark { height: 0; margin: 0; padding: 0; pointer-events: none; }
.vl-toolbar.is-pinned { position: sticky; top: var(--vl-tb-top, -10px); z-index: 4; }
.vl-toolbar.is-pinned::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -8px calc(-1 * var(--vl-gutter)) -10px;
  background: linear-gradient(180deg, rgba(10, 11, 16, .94), rgba(10, 11, 16, .82));
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(var(--vl-rgb), .22);
  box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .85);
  opacity: 0; transition: opacity .22s ease;
}
.vl-toolbar.is-pinned.is-stuck::before { opacity: 1; }
/* The pin itself: the dock's knob (dock.css .hdock-pin), leaning at rest and
   standing upright, lit in the library's colour, while pushed in. */
.vl-pin-btn .vl-pin-ico {
  width: 20px; height: 20px; opacity: .78; filter: saturate(.6); transform: rotate(38deg);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease, filter .2s ease;
}
.vl-tb-row .vl-tb-tools > .vl-pin-btn.vl-icon-btn[aria-pressed="true"] {
  color: #fff; border-color: rgba(var(--vl-rgb), .55); background: rgba(var(--vl-rgb), .14);
}
.vl-pin-btn[aria-pressed="true"] .vl-pin-ico { opacity: 1; filter: none; transform: rotate(0deg) translateY(1px); }
@media (hover: hover) {
  .vl-pin-btn:hover .vl-pin-ico { opacity: 1; filter: none; transform: rotate(22deg) scale(1.1); }
  .vl-pin-btn[aria-pressed="true"]:hover .vl-pin-ico { transform: rotate(-8deg) translateY(-1px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .vl-pin-btn .vl-pin-ico, .vl-toolbar.is-pinned::before { transition: none; }
}

/* ── The genre panel (vlib.js openGenrePanel) ──
   Every genre as one list of equal rows — name left, how many titles carry it
   right — in columns that read top to bottom, so a short last column is the
   end of the alphabet-less list, not a hole in a grid. Hangs off <body>: the
   scrim is clear at a pointer width (it only catches the click away) and dims
   behind the phone sheet. */
.vl-gp-scrim { position: fixed; inset: 0; z-index: 8800; }
.vl-gp-scrim.is-sheet { background: rgba(5, 6, 10, .55); opacity: 0; transition: opacity .2s ease; }
.vl-gp-scrim.is-sheet.is-open { opacity: 1; }
.vl-gp {
  position: fixed;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 14px; border-radius: 16px;
  border: 1px solid rgba(var(--vl-rgb), .3);
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(var(--vl-rgb), .1), transparent 65%),
    var(--bg-2);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .9), 0 0 60px -30px rgba(var(--vl-rgb), .5);
  color: var(--text);
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity .18s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
}
.vl-gp-scrim.is-open .vl-gp { opacity: 1; transform: none; }
.vl-gp-scrim.is-leaving .vl-gp { opacity: 0; transform: translateY(-4px) scale(.985); transition-duration: .14s; }
.vl-gp-scrim.is-sheet.is-leaving { opacity: 0; }
.vl-gp-scrim.is-leaving { pointer-events: none; }

.vl-gp:focus { outline: none; }
.vl-gp-head { display: flex; align-items: baseline; gap: 10px; }
.vl-gp-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.vl-gp-total { color: var(--text-mute); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.vl-gp-search {
  display: flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 0 6px 0 12px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--bg);
  color: var(--text-mute); cursor: text;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vl-gp-search:focus-within { border-color: rgba(var(--vl-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--vl-rgb), .14); color: var(--text-dim); }
.vl-gp-search svg { flex: none; }
.vl-gp-search input {
  flex: 1; min-width: 0; height: 38px; padding: 0;
  border: 0; outline: 0; background: transparent;
  color: var(--text); font-weight: 600; font-size: 14px; line-height: 1; font-family: inherit;
}
.vl-gp-search input::-webkit-search-cancel-button { display: none; }
.vl-gp-search input::placeholder { color: var(--text-mute); }
.vl-gp-clear {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer;
}
.vl-gp-clear:hover { color: var(--text); background: var(--surface); }
.vl-gp-clear[hidden] { display: none; }

.vl-gp-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 2px 6px 4px; }
.vl-gp-list { column-width: 150px; column-gap: 8px; }
.vl-gp-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 36px; padding: 0 11px; margin-bottom: 4px;
  break-inside: avoid;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  color: var(--text-dim); font-weight: 600; font-size: 13px; line-height: 1.2; font-family: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.vl-gp-opt[hidden] { display: none; }
.vl-gp-opt:hover { background: var(--surface); color: var(--text); }
.vl-gp-opt:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 1px; }
.vl-gp-opt.active { color: #fff; border-color: rgba(var(--vl-rgb), .6); background: rgba(var(--vl-rgb), .13); }
.vl-gp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-gp-n { flex: none; color: var(--text-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.vl-gp-opt.active .vl-gp-n { color: rgba(var(--vl-rgb), 1); }
.vl-gp-scrim.is-open .vl-gp-opt { animation: vl-gp-in .3s var(--vl-ease, ease) both; animation-delay: calc(var(--i, 0) * 9ms + 40ms); }
@keyframes vl-gp-in { from { opacity: 0; transform: translateY(-3px); } }
.vl-gp-empty { margin: 4px 0; padding: 14px 4px; color: var(--text-dim); font-size: 13px; text-align: center; }
.vl-gp-empty[hidden] { display: none; }

.vl-gp-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.vl-gp-status { flex: 1; min-width: 0; color: var(--text-mute); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-gp-reset, .vl-gp-done {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-weight: 700; font-size: 13px; line-height: 1; font-family: inherit; white-space: nowrap; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, opacity .2s ease;
}
.vl-gp-reset { border: 1px solid var(--border); background: transparent; color: var(--text-dim); }
.vl-gp-reset:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.vl-gp-reset:disabled { opacity: .4; cursor: default; }
.vl-gp-done { border: 1px solid rgba(var(--vl-rgb), .7); background: rgba(var(--vl-rgb), .16); color: #fff; }
.vl-gp-done:hover { background: rgba(var(--vl-rgb), .26); }
.vl-gp-reset:focus-visible, .vl-gp-done:focus-visible, .vl-gp-clear:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 2px; }

/* The phone sheet: full width from the bottom edge, its list scrolls inside. */
.vl-gp-scrim.is-sheet .vl-gp {
  left: 0; right: 0; bottom: 0; top: auto;
  max-height: min(76vh, 640px);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0; border-bottom: 0;
  transform: translateY(24px);
}
.vl-gp-scrim.is-sheet .vl-gp::before {
  content: ''; align-self: center; width: 40px; height: 4px; margin: -4px 0 2px;
  border-radius: 4px; background: var(--border-strong);
}
.vl-gp-scrim.is-sheet.is-open .vl-gp { transform: none; }
.vl-gp-scrim.is-sheet.is-leaving .vl-gp { transform: translateY(24px); }
.vl-gp-scrim.is-sheet .vl-gp-search input { font-size: 16px; }
.vl-gp-scrim.is-sheet .vl-gp-opt { min-height: 44px; }
.vl-gp-scrim.is-sheet .vl-gp-list { column-width: 140px; }
.vl-gp-scrim.is-sheet .vl-gp-reset, .vl-gp-scrim.is-sheet .vl-gp-done { min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .vl-gp, .vl-gp-scrim.is-sheet, .vl-gp-scrim.is-sheet .vl-gp { transition: none; }
  .vl-gp-scrim.is-open .vl-gp-opt { animation: none; }
}

.vl-dir {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px 0 11px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text-dim); font-weight: 650; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer; white-space: nowrap;
  touch-action: manipulation;
  transition: color .2s ease, border-color .2s ease, transform .2s var(--vl-ease);
}
.vl-dir:hover { color: var(--text); border-color: rgba(var(--vl-rgb), .6); }
.vl-dir svg { flex: none; color: rgb(var(--vl-rgb)); }
.vl-dir:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 3px; }
.vl-um-n { font-variant-numeric: tabular-nums; }
/* "3 unmatched" reads as one phrase: a word space, not the button's icon gap. */
.vl-um-word { margin-left: -3px; }
.vl-size { flex: none; width: 110px; height: 40px; margin: 0; accent-color: rgb(var(--vl-rgb)); cursor: pointer; }

/* ── Inline search (vlib.js findBox) ──
   A magnifier on the line. Open, its field grows LEFT out of it over the
   genres, and the rest of the line sinks back behind a scrim (the row's
   ::before) while the field has focus. Left with a query in it the field stays
   open, narrower, so the filter in force is seen; emptied, it folds back. */
.vl-tb-row { position: relative; }
.vl-tb-row::before {
  content: ''; position: absolute; inset: -8px -6px; z-index: 3; border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(2px) saturate(.7); -webkit-backdrop-filter: blur(2px) saturate(.7);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.vl-tb-row.is-finding::before { opacity: 1; pointer-events: auto; }
.vl-find { position: relative; flex: none; width: 40px; height: 40px; }
.vl-find-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: rgb(var(--vl-rgb));
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, transform .2s var(--vl-ease);
}
.vl-find-btn:hover { border-color: rgba(var(--vl-rgb), .6); transform: translateY(-1px); }
.vl-find-btn:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 3px; }
.vl-find-field {
  position: absolute; top: 0; right: 0; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  width: 40px; height: 40px; padding: 0 6px 0 12px; overflow: hidden;
  border: 1px solid rgba(var(--vl-rgb), .65); border-radius: 12px;
  background: var(--bg-2); box-shadow: 0 0 0 0 rgba(var(--vl-rgb), 0);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: width .42s var(--vl-ease), opacity .2s ease, box-shadow .3s ease, visibility 0s linear .42s;
}
.vl-find.is-open .vl-find-field {
  width: min(520px, calc(100cqw - 120px));
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: width .42s var(--vl-ease), opacity .16s ease, box-shadow .3s ease, visibility 0s;
}
.vl-find.is-open .vl-find-field:focus-within { box-shadow: 0 0 0 4px rgba(var(--vl-rgb), .14), 0 14px 40px -16px rgba(0, 0, 0, .9); }
.vl-find.has-q:not(:focus-within) .vl-find-field { width: min(260px, calc(100cqw - 120px)); }
.vl-find-glass { flex: none; color: rgb(var(--vl-rgb)); }
.vl-find-input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0; outline: 0; background: transparent;
  color: var(--text); font-weight: 600; font-size: 14px; line-height: 1; font-family: inherit;
}
.vl-find-input::-webkit-search-cancel-button { display: none; }
.vl-find-input::placeholder { color: var(--text-mute); }
.vl-find-n { flex: none; color: var(--text-mute); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-find-n:empty { display: none; }
.vl-find-x {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer;
}
.vl-find-x:hover { color: var(--text); background: var(--surface); }
.vl-find-x:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 1px; }
.vl-find:not(.has-q) .vl-find-x { display: none; }
/* The glass in the field arrives with a small turn as the field opens. */
.vl-find.is-opening .vl-find-glass { animation: vl-find-glass .5s var(--vl-ease) both; }
@keyframes vl-find-glass { from { transform: rotate(-60deg) scale(.6); opacity: 0; } }
@media (pointer: coarse), (max-width: 760px) {
  .vl-find, .vl-find-btn, .vl-find-field { height: 44px; }
  .vl-find, .vl-find-btn { width: 44px; }
  .vl-find-input { font-size: 16px; }
  .vl-find-x { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .vl-tb-row::before, .vl-find-field, .vl-find.is-open .vl-find-field { transition: none; }
  .vl-find.is-opening .vl-find-glass { animation: none; }
}

/* ── The sort trigger + menu (vlib.js sortTrigger / openSortMenu) ──
   "By date added ↓". The menu is the genre panel's box (.vl-gp) holding one
   short list, the sort in force lit in the library's colour with its direction. */
.vl-sort-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 40px; padding: 0 12px 0 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font-weight: 650; font-size: 13px; line-height: 1; font-family: inherit; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, background .2s ease;
}
.vl-sort-btn:hover { border-color: rgba(var(--vl-rgb), .6); }
.vl-sort-btn[aria-expanded="true"] { border-color: rgba(var(--vl-rgb), .7); background: rgba(var(--vl-rgb), .1); }
.vl-sort-btn:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 3px; }
.vl-sort-btn svg { flex: none; color: rgb(var(--vl-rgb)); }
.vl-sort-by { color: var(--text-mute); }
/* On Home nothing is sorted yet: the button is a plain "Sort" title. */
.vl-sort-btn.is-idle { color: var(--text-dim); gap: 8px; }
.vl-sort-btn.is-idle svg { color: inherit; }
.vl-sort-btn.is-idle:hover, .vl-sort-btn.is-idle[aria-expanded="true"] { color: var(--text); }
/* Its two arrows lean apart on hover: an order waiting to be picked. */
.vl-sort-btn .vl-si-up, .vl-sort-btn .vl-si-down { transform-box: fill-box; transition: transform .28s var(--vl-ease); }
.vl-sort-btn.is-idle:hover .vl-si-up, .vl-sort-btn.is-idle[aria-expanded="true"] .vl-si-up { transform: translateY(-2px); }
.vl-sort-btn.is-idle:hover .vl-si-down, .vl-sort-btn.is-idle[aria-expanded="true"] .vl-si-down { transform: translateY(2px); }

/* The flourish (vlib.js flourish). A new order: "By" then the sort's name
   rise into place out of a blur, the arrow drops in with a small overshoot,
   and a sheen of the library's colour crosses the button. A reversed order:
   the arrow turns over to its new way and the sheen runs back. Back Home:
   "Sort" rises in the same way. */
.vl-sort-btn { position: relative; overflow: hidden; isolation: isolate; }
.vl-sort-btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(var(--vl-rgb), .32) 50%, transparent 75%);
}
.vl-sort-btn.fl-enter .vl-sort-by, .vl-sort-btn.fl-enter .vl-sort-name,
.vl-sort-btn.fl-idle .vl-sort-name { animation: vl-sort-rise .46s var(--vl-ease) both; }
.vl-sort-btn.fl-enter .vl-sort-name { animation-delay: .06s; }
.vl-sort-btn.fl-enter > svg { animation: vl-sort-drop .56s cubic-bezier(.3, 1.6, .45, 1) .16s both; }
.vl-sort-btn.fl-enter::after { animation: vl-sort-sheen .8s ease .08s both; }
.vl-sort-btn.fl-flip > svg { animation: vl-sort-turn .5s cubic-bezier(.3, 1.4, .45, 1) both; }
.vl-sort-btn.fl-flip::after { animation: vl-sort-sheen .7s ease both reverse; }
.vl-sort-btn.fl-idle > svg { animation: vl-sort-drop .5s cubic-bezier(.3, 1.6, .45, 1) .1s both; }
@keyframes vl-sort-rise { from { opacity: 0; transform: translateY(75%); filter: blur(3px); } }
@keyframes vl-sort-drop { from { opacity: 0; transform: translateY(-9px) scale(.6); } }
@keyframes vl-sort-turn { from { transform: rotate(180deg) scale(.8); } }
@keyframes vl-sort-sheen { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(100%); } }
/* Home lights up with a ring that spreads out from it. */
.vl-home-btn.fl-arrive { animation: vl-home-pop .52s cubic-bezier(.3, 1.5, .45, 1) both; }
.vl-home-btn.fl-arrive svg { animation: vl-sort-drop .5s cubic-bezier(.3, 1.6, .45, 1) .06s both; }
@keyframes vl-home-pop {
  0% { transform: scale(.86); box-shadow: 0 0 0 0 rgba(var(--vl-rgb), .55); }
  60% { transform: scale(1.06); }
  100% { transform: none; box-shadow: 0 0 0 12px rgba(var(--vl-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vl-sort-btn *, .vl-sort-btn::after, .vl-home-btn, .vl-home-btn svg { animation: none !important; transition: none !important; }
}
.vl-sort-name { display: inline-block; }

.vl-gp.vl-sm { gap: 10px; padding: 14px 8px 8px; }
.vl-sm .vl-gp-head { padding: 0 8px; }
.vl-sm .vl-gp-search { margin: 0 4px; }
.vl-sm .vl-gp-scroll { margin: 0; padding: 0 0 2px; }
.vl-sm-list { display: flex; flex-direction: column; gap: 2px; }
.vl-sm-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 36px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--text-dim); font-weight: 600; font-size: 13.5px; line-height: 1.2; font-family: inherit; text-align: left; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease;
}
.vl-sm-opt[hidden], .vl-sm-sep[hidden] { display: none; }
.vl-sm-opt:hover, .vl-sm-opt:focus-visible { background: var(--surface); color: var(--text); }
.vl-sm-opt:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: -2px; }
.vl-sm-opt.active { color: rgb(var(--vl-rgb)); background: rgba(var(--vl-rgb), .1); }
.vl-sm-dir { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 650; color: rgba(var(--vl-rgb), .85); }
.vl-sm-sep { height: 1px; margin: 4px 10px; background: var(--border); }
.vl-gp-scrim.is-sheet .vl-sm-opt { min-height: 44px; }

/* A touch screen wider than a phone (an iPad) keeps the pointer layout but
   gets touch-sized targets: 44px controls and menu rows. */
@media (pointer: coarse) {
  .vl-tb-row .vl-chip, .vl-sort-btn, .vl-tb-row .vl-dir { min-height: 44px; }
  .vl-tb-tools .vl-icon-btn, .vl-home-btn { width: 44px; height: 44px; }
  .vl-tb-row .vl-chip.vl-gchip, .vl-tb-row .vl-chip.vl-chip-more { min-height: 44px; }
  .vl-chips-fit .vl-chip.vl-gchip:not(.active) { width: 44px; }
  .vl-seg-btn { min-height: 40px; }
  .vl-sm-opt, .vl-gp-opt, .vl-gp-search { min-height: 44px; }
}

/* A narrower toolbar sheds, in order: the poster-size slider, then the word
   "unmatched" (its count stays) and the sort's "By". */
@container vl-tb (max-width: 1000px) {
  .vl-size { display: none; }
}
@container vl-tb (max-width: 840px) {
  .vl-um-word, .vl-sort-by { display: none; }
  .vl-sort-name::first-letter { text-transform: uppercase; }
  .vl-seg-btn { padding: 0 11px; }
}

/* ── Rails ───────────────────────────────────────────────────────────── */
.vl-rail { margin: 0 0 30px; }
.vl-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.vl-rail-nav { display: flex; gap: 6px; }
.vl-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(var(--vl-card) * 1.72);
  gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--vl-gutter);
  margin: 0 calc(-1 * var(--vl-gutter)); padding: 4px var(--vl-gutter) 14px;
  scrollbar-width: none;
}
.vl-track::-webkit-scrollbar { display: none; }
.vl-track > * { scroll-snap-align: start; }
.vl-track:has(> .vl-card) { grid-auto-columns: var(--vl-card); }

/* A rail with one or two cards would leave most of its row empty: its cards
   turn into wide "up next" panels — the frame beside the words — that share
   the row between them. */
.vl-rail.is-few .vl-track { grid-auto-flow: row; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
.vl-rail.is-few .vl-wide { display: grid; grid-template-columns: minmax(220px, 46%) minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(90deg, rgba(var(--vl-rgb), .08), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .06); }
.vl-rail.is-few .vl-wide .vl-cap { gap: 6px; }
.vl-rail.is-few .vl-wide .vl-name { font-size: 20px; font-weight: 850; letter-spacing: -.02em; white-space: normal; }
.vl-rail.is-few .vl-wide .vl-sub { font-size: 14px; white-space: normal; }
.vl-wide-ov { display: none; margin: 2px 0 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vl-rail.is-few .vl-wide-ov { display: -webkit-box; }
.vl-wide-go { display: none; margin-top: 8px; align-self: flex-start; pointer-events: none; }
.vl-rail.is-few .vl-wide-go { display: inline-flex; }
.vl-rail.is-few .vl-rail-nav { display: none; }

/* ── Poster card ─────────────────────────────────────────────────────── */
/* These cards are <button>s. Chromium up to 13x — the desktop shell's Electron
   33 is Chromium 130 — gives a button `align-items: flex-start` of its own, so
   the picture box (no content in flow, sized only by aspect-ratio) was never
   stretched: 0 × 0, and every rail and wall was captions with no art. Newer
   Chrome dropped that default, which is why a browser looked right. Say it. */
.vl-card, .vl-wide {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  min-width: 0; padding: 0; margin: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.vl-poster, .vl-still {
  position: relative; overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(120% 80% at 30% 10%, rgba(var(--vl-rgb), .16), transparent 60%),
    var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 26px -12px rgba(0, 0, 0, .8);
  transition: transform .35s var(--vl-ease), box-shadow .35s ease;
}
.vl-poster { aspect-ratio: 2 / 3; }
.vl-still { aspect-ratio: 16 / 9; }
.vl-poster img, .vl-still img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .5s ease, transform .6s var(--vl-ease);
}
.vl-poster img.is-loaded, .vl-still img.is-loaded { opacity: 1; }
.vl-poster img.is-broken, .vl-still img.is-broken { display: none; }
.vl-card:hover .vl-poster, .vl-card:focus-visible .vl-poster,
.vl-wide:hover .vl-still, .vl-wide:focus-visible .vl-still {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(var(--vl-rgb), .65), 0 18px 40px -14px rgba(var(--vl-rgb), .55), 0 12px 30px -10px rgba(0, 0, 0, .85);
}
.vl-card:hover .vl-poster img, .vl-wide:hover .vl-still img { transform: scale(1.04); }

/* An unmatched show: its first frame, dimmed, with the name set on it. */
.vl-poster.is-plain img { object-position: 50% 30%; filter: saturate(.9) brightness(.55); }
.vl-plate {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 36px 12px 14px;
  background: linear-gradient(0deg, rgba(8, 9, 13, .95), rgba(8, 9, 13, 0));
}
.vl-plate::before {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: calc(100% - 30px);
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--vl-rgb)), transparent);
  box-shadow: 0 0 10px rgba(var(--vl-rgb), .8);
}
.vl-plate-name {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  color: #fff; font-size: 17px; font-weight: 850; line-height: 1.08; letter-spacing: -.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

.vl-card-play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(var(--vl-rgb), .95); color: #0b0d0a;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 26px rgba(var(--vl-rgb), .55);
  opacity: 0; transform: scale(.7);
  transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.vl-card-play svg { margin-left: 3px; }
.vl-card:hover .vl-card-play, .vl-card:focus-visible .vl-card-play,
.vl-wide:hover .vl-card-play, .vl-wide:focus-visible .vl-card-play,
.vl-ep-still:hover .vl-card-play, .vl-ep-still:focus-visible .vl-card-play { opacity: 1; transform: none; }

.vl-badge {
  position: absolute; top: 0; right: 0; z-index: 2;
  min-width: 30px; height: 26px; padding: 0 8px;
  display: grid; place-items: center;
  border-bottom-left-radius: 10px;
  background: rgb(var(--vl-rgb)); color: #0b0d0a;
  font-size: 12.5px; font-weight: 850; font-variant-numeric: tabular-nums;
}
.vl-check {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(10, 11, 16, .72); color: rgb(var(--vl-rgb));
  border: 1px solid rgba(var(--vl-rgb), .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vl-prog {
  --p: 0;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 4px; background: rgba(0, 0, 0, .55);
}
.vl-prog::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%);
  background: rgb(var(--vl-rgb)); box-shadow: 0 0 8px rgba(var(--vl-rgb), .8);
}
.vl-unmatched {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(10, 11, 16, .72); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--text-dim); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.vl-unmatched.is-busy { color: rgb(var(--vl-rgb)); border-color: rgba(var(--vl-rgb), .45); }
.vl-poster.is-matching::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(var(--vl-rgb), .16) 50%, transparent 70%);
  background-size: 260% 100%;
  animation: vl-shimmer 1.8s ease-in-out infinite;
}
@keyframes vl-shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.vl-tier {
  position: absolute; left: 8px; bottom: 10px; z-index: 2;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(10, 11, 16, .75); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font-size: 10.5px; font-weight: 850; letter-spacing: .08em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vl-cap { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.vl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--text); }
.vl-sub, .vl-when { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.vl-when { color: var(--text-mute); }
/* A caption line made of parts ("2024 · Season 3 · 20 episodes"). It is one
   line tall and wraps: a part with no room drops out whole instead of ending in
   an ellipsis. The parts are in the DOM last-first and laid right-to-left, so
   the one that gives way is the FIRST (the year), and every part carries its
   divider on its left — the row's own left edge clips the leading one. */
.vl-sub-parts { display: flex; flex-flow: row-reverse wrap; justify-content: flex-end; height: 1.4em; line-height: 1.4; margin-left: -1.1em; clip-path: inset(0 0 0 1.1em); text-overflow: clip; }
.vl-sub-parts > span { flex: none; max-width: calc(100% - 1.1em); overflow: hidden; text-overflow: ellipsis; }
.vl-sub-parts > span::before { content: '·'; display: inline-block; width: 1.1em; text-align: center; }
/* Who asked for it (2026-11-03): the card's last line wears the requester's
   face and name ahead of what the sort says. One line, the name kept whole
   and the date the part that gives way. */
.vl-asked { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-width: 0; height: 18px; margin-top: 2px; line-height: 18px; color: var(--text-dim); text-overflow: clip; }
.vl-asked-face { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1.5px rgba(var(--vl-rgb), .75); }
.vl-asked-name { flex: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); }
/* Too narrow for the date to read (a long name): it drops to the hidden
   second line rather than ending as "Ad…". */
.vl-asked-when { flex: 1 0 6.5em; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-mute); }
.vl-asked-when::before { content: '·'; margin-right: 6px; color: var(--text-mute); }
/* The title page: everyone who asked, faces overlapping, newest first. */
.vl-asked-row { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 68ch; }
.vl-asked-faces { display: flex; flex: none; padding-left: 6px; }
.vl-asked-faces .vl-asked-face { width: 30px; height: 30px; margin-left: -6px; box-shadow: 0 0 0 2px rgba(10, 12, 18, .9), 0 0 0 3.5px rgba(var(--vl-rgb), .7); }
.vl-asked-words { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.vl-asked-l { color: var(--text-mute); font-weight: 700; white-space: nowrap; }
.vl-asked-v { color: var(--text); font-weight: 750; overflow-wrap: anywhere; }
.vl-asked-d { color: var(--text-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vl-still-poster {
  position: absolute !important; left: 10px; bottom: 12px; top: auto !important;
  width: 44px !important; height: 66px !important; border-radius: 5px; z-index: 2;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .2);
}

/* ── The wall ────────────────────────────────────────────────────────── */
.vl-wall-sec { margin-top: 6px; }
.vl-wall-sec > .vl-rail-head { margin-bottom: 16px; }
/* "All movies · 3041 · Newest releases" is one line: a narrow wall cuts the
   order's name short rather than wrapping it under the count. */
.vl-wall-sec .vl-h2 { min-width: 0; white-space: nowrap; }
.vl-wall-sec .vl-h2-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── The pager (vlib.js pager) ──
   One under the wall — ‹ 1 … 4 5 6 … 64 › and the range — and a compact one
   beside the wall's heading (range + arrows), so a page can be turned from
   either end without scrolling. */
.vl-pager { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.vl-pager:not(.is-compact) { justify-content: center; flex-wrap: wrap; margin: 34px 0 6px; row-gap: 10px; }
.vl-pager.is-compact { flex: none; }
.vl-pager-range { color: var(--text-mute); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.vl-pager:not(.is-compact) .vl-pager-range { flex-basis: 100%; text-align: center; }
.vl-pager.is-compact .vl-pager-range { margin-right: 4px; }
.vl-pager-nums { display: flex; align-items: center; gap: 4px; }
.vl-pager-arrow, .vl-pager-num {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text-dim); font-weight: 700; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--vl-ease);
}
.vl-pager-arrow { padding: 0; width: 40px; }
.vl-pager-arrow:hover:not(:disabled), .vl-pager-num:hover:not(.active) { color: var(--text); border-color: rgba(var(--vl-rgb), .6); transform: translateY(-1px); }
.vl-pager-arrow:disabled { opacity: .35; cursor: default; }
.vl-pager-num.active { color: #fff; border-color: rgba(var(--vl-rgb), .7); background: rgba(var(--vl-rgb), .16); cursor: default; }
.vl-pager-arrow:focus-visible, .vl-pager-num:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 2px; }
.vl-pager-gap { min-width: 22px; text-align: center; color: var(--text-mute); font-weight: 700; }
.vl-pager-where { display: none; color: var(--text-dim); font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) {
  .vl-pager-nums { display: none; }
  .vl-pager-where { display: inline; padding: 0 10px; }
  .vl-pager-arrow, .vl-pager-num { min-width: 44px; width: 44px; height: 44px; }
  /* The heading keeps the room; the pager under the wall turns the page. */
  .vl-pager.is-compact { display: none; }
  /* Home / Library spans the line under the title, like the watch switch. */
}
@media (pointer: coarse) {
  .vl-pager-arrow, .vl-pager-num { min-width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .vl-pager-arrow, .vl-pager-num { transition: none; }
}
.vl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--vl-card), 1fr));
  gap: 26px 18px;
}
/* A wall is hundreds to thousands of cards and only a screenful is ever looked
   at. Cards outside the viewport are not styled, laid out or painted
   (content-visibility), which is what keeps a 700-show wall scrolling and makes
   a redraw cost a screenful instead of the whole library. `--vl-card-h` is the
   height of a real card (vlib.js measures the first one), so the scrollbar is
   right before a card has ever been drawn; `auto` then remembers each card's
   own. Paint containment would clip the hover lift and glow at the card's edge,
   so this is only on where the clip can be pushed out (overflow-clip-margin):
   elsewhere the wall is drawn whole, as before. */
@supports (content-visibility: auto) and (overflow-clip-margin: 1px) {
  .vl-grid > .vl-card {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--vl-card-h, calc(var(--vl-card) * 1.5 + 62px));
    overflow-clip-margin: 72px;
  }
}
.vl-none { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 0; color: var(--text-dim); }
.vl-none p { margin: 0; }

/* ── Empty library ───────────────────────────────────────────────────── */
.vl-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  max-width: 560px; margin: 8vh auto 0; padding: 0 12px;
}
.vl-empty-icon { width: 120px; height: 120px; filter: drop-shadow(0 12px 36px rgba(var(--vl-rgb), .5)); animation: vl-float 6s ease-in-out infinite; }
@keyframes vl-float { 50% { transform: translateY(-8px) rotate(-2deg); } }
.vl-empty-title { margin: 6px 0 0; font-size: 28px; font-weight: 850; letter-spacing: -.03em; color: #fff; }
.vl-empty-sub { margin: 0 0 10px; color: var(--text-dim); line-height: 1.6; }

/* ── Detail pages (show / movie) ─────────────────────────────────────── */
.vl-detail { position: relative; padding-top: 8px; }
.vl-detail-bd {
  position: absolute; z-index: 0;
  top: -18px; left: calc(-1 * var(--vl-gutter)); right: calc(-1 * var(--vl-gutter));
  height: min(78vh, 720px); overflow: hidden; pointer-events: none;
}
.vl-detail-bd img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: .55; }
.vl-detail-bd.is-thumb img { filter: blur(22px) saturate(1.3); transform: scale(1.2); opacity: .45; }
.vl-detail-bd::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, var(--bg) 4%, rgba(10, 11, 16, .72) 46%, rgba(10, 11, 16, .35) 100%),
    linear-gradient(90deg, rgba(10, 11, 16, .9) 0%, rgba(10, 11, 16, .2) 70%),
    radial-gradient(50% 60% at 18% 40%, rgba(var(--vl-rgb), .18), transparent 70%);
}
.vl-back {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 0 14px 0 8px; margin: 4px 0 18px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: rgba(16, 18, 26, .55); color: var(--text);
  font-weight: 650; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .2s ease, transform .2s var(--vl-ease);
}
.vl-back:hover { border-color: rgba(var(--vl-rgb), .7); transform: translateX(-2px); }
.vl-detail-head {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: clamp(170px, 20vw, 270px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px); align-items: end;
  min-height: min(58vh, 520px);
}
.vl-aside {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 16px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(160deg, rgba(var(--vl-rgb), .1), rgba(16, 18, 26, .72) 45%);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
}
.vl-aside-l { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--vl-rgb)); }
.vl-aside .vl-dl { margin: 0; gap: 9px 18px; }
.vl-aside .vl-dl dt { font-size: 10.5px; }
.vl-aside-file { margin-top: auto; font: 500 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-mute); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── The "now" strip (2026-11-03) ──
   Resume (or The file) and The scores, one row the full width of the page under
   the header. They stood in the header's third column as two tall boxes beside
   empty space ("huge … tons of blank space around it", Rober). Now each card is
   laid out sideways — the still beside its words, the scores side by side — so
   the pair is one still tall, and the two cards end together. */
.vl-now {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch;
  margin-top: clamp(22px, 3vw, 34px);
}
.vl-now[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.vl-now > .vl-aside[data-reveal]:nth-child(2) { transition-delay: .38s; }

/* Resume: the still on the left, the words down the right, the show's meter at the foot. */
.vl-aside-resume { padding: 14px; }
.vl-aside-play {
  flex: 1; display: grid; grid-template-columns: clamp(180px, 40%, 340px) minmax(0, 1fr); gap: 18px; align-items: stretch;
  padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.vl-aside-play .vl-still { display: block; width: 100%; align-self: center; }
.vl-aside-play:hover .vl-still, .vl-aside-play:focus-visible .vl-still { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(var(--vl-rgb), .65), 0 16px 34px -14px rgba(var(--vl-rgb), .55); }
.vl-aside-play:hover .vl-card-play, .vl-aside-play:focus-visible .vl-card-play { opacity: 1; transform: none; }
.vl-aside-play:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 4px; border-radius: 10px; }
.vl-aside-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 2px 4px 0 0; }
.vl-aside-body .vl-aside-l { margin-bottom: 2px; }
.vl-aside-ep { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.25; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vl-aside-sub { font-size: 12.5px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-aside-ov { max-width: 68ch; font-size: 13px; line-height: 1.5; color: var(--text-dim); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vl-aside-meter { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 10px; }
.vl-meter { --p: 0; position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.vl-meter::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: 6px; background: linear-gradient(90deg, rgba(var(--vl-rgb), .6), rgb(var(--vl-rgb))); box-shadow: 0 0 10px rgba(var(--vl-rgb), .7); }
.vl-meter-l { font-size: 12px; font-weight: 650; color: var(--text-mute); font-variant-numeric: tabular-nums; }

/* The scores: the Cinema's scorecard (cinema.css) without a box of its own
   (the card is the box), its sources side by side in equal columns, each one
   source / number / bar / context, so a fourth source just adds a column.
   Hearth's ratings rule stands: each source on its own scale. */
.vl-aside-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.vl-scores-note { min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-aside-scores .vl-scores { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vl-aside-scores .cinema-scorecard {
  flex: 1; display: flex; flex-direction: column;
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.vl-aside-scores .cinema-scorecard-heading { display: none; }
.vl-aside-scores .cinema-scorecard-list { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; padding: 0; }
.vl-aside-scores .cinema-score-row {
  grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 10px; height: 100%;
  padding: 4px 18px; border: 0; border-left: 1px solid rgba(255, 255, 255, .07);
}
.vl-aside-scores .cinema-score-row:first-child { padding-left: 0; border-left: 0; }
.vl-aside-scores .cinema-score-row:last-child { padding-right: 0; }
.vl-aside-scores .cinema-score-source { justify-self: start; display: flex; align-items: center; min-height: 22px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vl-aside-scores .cinema-score-value { justify-content: flex-start; }
.vl-aside-scores .cinema-score-value b { font-size: clamp(28px, 2.6vw, 38px); }
.vl-aside-scores .cinema-score-value > span { font-size: 11px; }
.vl-aside-scores .cinema-score-measure { height: 3px; }
.vl-aside-scores .cinema-score-context { display: block; font-size: 11.5px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-aside-scores .cinema-scores-empty { align-self: center; color: var(--text-mute); font-size: 13px; }
.vl-detail > .vl-rail-like { position: relative; z-index: 1; margin-top: 40px; }
.vl-detail-poster {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 60px -20px rgba(var(--vl-rgb), .6);
}
.vl-detail-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.vl-detail-poster img.is-loaded { opacity: 1; }
.vl-detail-poster.is-plain img { filter: saturate(.9) brightness(.55); }
.vl-detail-info { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; padding-bottom: 6px; }
.vl-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--vl-rgb)); }
.vl-detail-title {
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: clamp(34px, 4.6vw, 70px); font-weight: 850; line-height: .96; letter-spacing: -.045em;
  color: #fff; text-wrap: balance; text-shadow: 0 0 40px rgba(var(--vl-rgb), .3), 0 3px 20px rgba(0, 0, 0, .6);
}
.vl-detail-title.is-long { font-size: clamp(30px, 3.6vw, 54px); line-height: 1.02; }
.vl-detail-logo { max-width: min(480px, 100%); max-height: 150px; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .7)); }
.vl-overview {
  margin: 0; max-width: 68ch; color: rgba(231, 236, 243, .88); font-size: 15px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.vl-overview.is-open { -webkit-line-clamp: unset; }
.vl-more {
  margin-top: -8px; padding: 4px 0; min-height: 32px;
  border: 0; background: none; color: rgb(var(--vl-rgb)); font-weight: 700; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer;
}
.vl-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; max-width: 100%; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(16, 18, 26, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vl-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 18px; }
.vl-fact-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-fact + .vl-fact { border-left: 1px solid rgba(255, 255, 255, .08); }
.vl-fact-v { font-size: 20px; font-weight: 850; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.vl-fact-l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.vl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vl-cast { margin: 0; max-width: 68ch; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; }
.vl-cast-l { color: var(--text-mute); font-weight: 700; }
.vl-nag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 14px; max-width: 68ch;
  border: 1px dashed rgba(var(--vl-rgb), .45); border-radius: 12px; background: rgba(var(--vl-rgb), .06);
  color: var(--text-dim); font-size: 13.5px;
}
.vl-nag > span { flex: 1 1 260px; }

/* Seasons + episodes: a carousel of the seasons' own posters, the chosen
   season's heading under it, then its episodes (2026-11-03). */
.vl-seasons { position: relative; z-index: 1; margin-top: clamp(30px, 4vw, 48px); }
.vl-season-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-bottom: 6px; }
.vl-season-tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.vl-season-tools .vl-toggle { margin-left: 0; }
.vl-season-tools .vl-rail-nav[hidden] { display: none; }
.vl-season-rail {
  --sw: clamp(128px, 11vw, 168px);
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--sw); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 var(--vl-gutter);
  margin: 0 calc(-1 * var(--vl-gutter)); padding: 12px var(--vl-gutter) 18px;
  scrollbar-width: none;
  /* The rail fades out at an edge that has more behind it. */
  --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.vl-season-rail:not(.at-start) { --fl: 48px; }
.vl-season-rail:not(.at-end) { --fr: 64px; }
.vl-season-rail::-webkit-scrollbar { display: none; }
.vl-season-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0;
  padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  scroll-snap-align: start;
}
.vl-season-art {
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 30px -18px rgba(0, 0, 0, .9);
  transition: transform .4s var(--vl-ease), box-shadow .35s ease, filter .3s ease;
}
/* The plate: the show's art, dimmed, with the season's number set on it —
   what a season with no poster of its own shows, and what shows until it lands. */
.vl-season-plate { position: absolute; inset: 0; }
.vl-season-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: saturate(.75) brightness(.4) blur(1.5px); }
.vl-season-num {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 4px; padding: 30px 12px 12px;
  background: linear-gradient(0deg, rgba(10, 11, 16, .92), transparent);
  transition: opacity .4s ease;
}
.vl-season-num small { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--vl-rgb)); }
.vl-season-num b { font-size: clamp(38px, 3.4vw, 52px); font-weight: 850; line-height: .88; letter-spacing: -.05em; color: #fff; text-shadow: 0 4px 22px rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.vl-season-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .7s var(--vl-ease); }
.vl-season-poster.is-loaded { opacity: 1; transform: none; }
.vl-season-art.has-poster .vl-season-num { opacity: 0; }
.vl-season-art .vl-check, .vl-season-art .vl-prog { z-index: 3; }
.vl-season-cap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vl-season-name { font-size: 14.5px; font-weight: 800; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; }
.vl-season-sub { font-size: 12px; font-weight: 600; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.vl-season-card:hover .vl-season-art { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 20px 36px -18px rgba(0, 0, 0, .95); }
.vl-season-card:hover .vl-season-name { color: var(--text); }
.vl-season-card.active .vl-season-art { transform: translateY(-6px); box-shadow: 0 0 0 2px rgb(var(--vl-rgb)), 0 20px 42px -16px rgba(var(--vl-rgb), .6); }
.vl-season-card.active .vl-season-name { color: #fff; }
.vl-season-card.is-missing .vl-season-art { filter: grayscale(.9) brightness(.7); }
.vl-season-card.is-missing .vl-season-name { color: var(--text-mute); }
.vl-season-card:focus-visible { outline: none; }
.vl-season-card:focus-visible .vl-season-art { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 3px; }
/* The chosen season, named over its episodes. */
.vl-season-now {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 4px 0 16px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.vl-season-now-t { margin: 0; font-size: 22px; font-weight: 850; letter-spacing: -.02em; color: #fff; }
.vl-season-now-sub { min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-mute); font-variant-numeric: tabular-nums; }

.vl-toggle { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px; }
.vl-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vl-toggle-ui { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--surface-3); transition: background .2s ease; }
.vl-toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .25s var(--vl-ease); }
.vl-toggle input:checked + .vl-toggle-ui { background: rgb(var(--vl-rgb)); }
.vl-toggle input:checked + .vl-toggle-ui::after { transform: translateX(16px); background: #0b0d0a; }
.vl-toggle input:focus-visible + .vl-toggle-ui { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 3px; }

.vl-eps { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
@media (min-width: 1360px) {
  /* A row is a still plus a paragraph; at this width one row per line leaves
     half the screen empty, so the season reads across two columns instead. */
  .vl-eps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-eps .vl-ep { grid-template-columns: clamp(170px, 13vw, 230px) minmax(0, 1fr) auto; }
  .vl-eps .vl-ep:nth-child(2)::before { display: none; }
  .vl-eps .vl-ep:nth-child(2) + .vl-ep::before { display: block; }
}
.vl-ep {
  position: relative;
  /* A long-running show is hundreds of rows; skip painting the ones off screen. */
  content-visibility: auto; contain-intrinsic-size: auto 176px;
  display: grid; grid-template-columns: clamp(170px, 18vw, 256px) minmax(0, 1fr) auto;
  gap: 20px; align-items: start;
  padding: 16px 12px; margin: 0 -12px;
  border-radius: 14px;
  transition: background .25s ease;
}
.vl-ep + .vl-ep::before, .vl-eps > .vl-ep:nth-child(n+3)::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: rgba(255, 255, 255, .06); }
.vl-ep:hover { background: rgba(255, 255, 255, .03); }
.vl-ep.is-flash { animation: vl-flash 1.6s ease 1; }
@keyframes vl-flash { 0%, 60% { background: rgba(var(--vl-rgb), .14); } 100% { background: transparent; } }
.vl-ep-still {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; padding: 0;
  border: 0; border-radius: 10px; background: var(--surface); cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9);
  transition: transform .3s var(--vl-ease), box-shadow .3s ease;
}
.vl-ep-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.vl-ep-still img.is-loaded { opacity: 1; }
.vl-ep-still img.is-broken { display: none; }
.vl-ep-still:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--vl-rgb), .6), 0 14px 30px -12px rgba(var(--vl-rgb), .45); }
.vl-ep-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 2px; }
.vl-ep-top { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.vl-ep-n { flex: none; min-width: 2ch; font-size: 22px; font-weight: 850; letter-spacing: -.03em; color: rgba(var(--vl-rgb), .9); font-variant-numeric: tabular-nums; }
.vl-ep-title { font-size: 16px; font-weight: 750; color: var(--text); line-height: 1.3; }
.vl-ep-facts {
  /* Same trick as .vl-meta: separators sit in a clipped left margin, so a
     fact that wraps never starts its line with one. */
  display: flex; flex-wrap: wrap; gap: 4px 0;
  margin-left: -19px; clip-path: inset(-4px -4px -4px 19px);
  color: var(--text-mute); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.vl-ep-facts > span { position: relative; margin-left: 19px; }
.vl-ep-facts > span::before { content: ''; position: absolute; left: -10px; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: rgba(255, 255, 255, .18); }
.vl-ep-left { color: rgb(var(--vl-rgb)); }
.vl-ep-miss { color: var(--text-dim); }
.vl-ep-ov { margin: 0; max-width: 78ch; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vl-ep-watch {
  display: grid; place-items: center; width: 44px; height: 44px; margin-top: 2px;
  border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-mute); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.vl-ep-watch:hover { color: var(--text); border-color: var(--border-strong); }
.vl-ep-watch.on { color: #0b0d0a; background: rgb(var(--vl-rgb)); border-color: transparent; box-shadow: 0 0 16px rgba(var(--vl-rgb), .45); }
.vl-ep-watch:active { transform: scale(.9); }
.vl-ep.is-missing .vl-ep-still { cursor: default; opacity: .38; filter: grayscale(.8); background: repeating-linear-gradient(135deg, var(--surface) 0 10px, var(--bg-2) 10px 20px); }
.vl-ep.is-missing .vl-ep-still:hover { transform: none; box-shadow: none; }
.vl-ep.is-missing .vl-ep-title, .vl-ep.is-missing .vl-ep-n { color: var(--text-mute); }
.vl-ep.is-missing .vl-ep-ov { opacity: .7; }

.vl-file { position: relative; z-index: 1; margin-top: 40px; max-width: 760px; }
.vl-dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 26px; margin: 14px 0 0; }
.vl-dl dt { color: var(--text-mute); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.vl-dl dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ── Dialogs ─────────────────────────────────────────────────────────── */
.vl-dlg-scrim {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center; padding: 16px;
  background: rgba(5, 6, 10, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: vl-fade .2s ease both;
}
.vl-dlg-scrim.is-leaving { opacity: 0; transition: opacity .18s ease; }
@keyframes vl-fade { from { opacity: 0; } }
.vl-dlg {
  --vl-rgb: 163, 230, 53;
  display: flex; flex-direction: column; gap: 14px;
  width: min(540px, 100%); max-height: min(86vh, 820px);
  padding: 24px; border-radius: 18px;
  border: 1px solid rgba(var(--vl-rgb), .28);
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(var(--vl-rgb), .1), transparent 60%),
    var(--bg-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 70px -30px rgba(var(--vl-rgb), .55);
  animation: vl-pop .32s cubic-bezier(.2, 1.1, .3, 1) both;
}
.vl-dlg-wide { width: min(780px, 100%); }
@keyframes vl-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.vl-dlg-title { margin: 0; font-size: 22px; font-weight: 850; letter-spacing: -.03em; color: #fff; }
.vl-dlg-body { overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; margin: 0 -6px; padding: 0 6px; }
.vl-dlg-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.vl-dlg-lead { margin: 0; color: var(--text-dim); line-height: 1.55; }
/* ── The icon a library wears (vlib.js iconDialog) ──
   A wall of equal tiles: the default, Hearth's neon set, and one for a
   picture of your own. Five across, three on a phone: fifteen tiles is whole
   rows either way, so the wall never ends on a gap (a filtered wall is the
   one exception, and it says so by being a search result). The chosen tile
   takes the library's colour. */
.vl-dlg-icon { width: min(700px, 100%); }
.vl-icon-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 4px 2px; }
.vl-icon-pick {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
  padding: 14px 6px 12px; border-radius: 14px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .025);
  color: var(--text-dim); font-weight: 650; font-size: 12.5px; line-height: 1.25; font-family: inherit; cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, background .2s ease, color .2s ease, box-shadow .25s ease;
  animation: vl-icon-in .42s cubic-bezier(.2, .9, .3, 1) both;
}
.vl-icon-pick[hidden] { display: none; }
.vl-icon-pick:nth-child(5n+2) { animation-delay: 30ms; }
.vl-icon-pick:nth-child(5n+3) { animation-delay: 60ms; }
.vl-icon-pick:nth-child(5n+4) { animation-delay: 90ms; }
.vl-icon-pick:nth-child(5n+5) { animation-delay: 120ms; }
.vl-icon-wall.is-filtered .vl-icon-pick { animation: none; }
.vl-icon-pic { display: grid; place-items: center; width: 72px; height: 72px; flex: none; }
.vl-icon-pic img { width: 72px; height: 72px; object-fit: contain; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.vl-icon-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-icon-pick:hover { transform: translateY(-2px); border-color: rgba(var(--vl-rgb), .55); color: var(--text); }
.vl-icon-pick:hover .vl-icon-pic img { transform: scale(1.1) rotate(-4deg); }
.vl-icon-pick:focus-visible { outline: 2px solid rgb(var(--vl-rgb)); outline-offset: 2px; }
.vl-icon-pick.is-on {
  color: #fff; border-color: rgba(var(--vl-rgb), .9);
  background: linear-gradient(180deg, rgba(var(--vl-rgb), .2), rgba(var(--vl-rgb), .06));
  box-shadow: 0 10px 26px -12px rgba(var(--vl-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.vl-icon-own:not(.has-pic) { border-style: dashed; border-color: var(--border-strong); }
.vl-icon-own:not(.has-pic) .vl-icon-pic { border-radius: 16px; background: rgba(var(--vl-rgb), .1); color: rgb(var(--vl-rgb)); }
.vl-icon-own.has-pic .vl-icon-pic img { border-radius: 12px; }
.vl-icon-none { margin: 2px 0 0; color: var(--text-dim); line-height: 1.5; }
.vl-icon-none.hidden { display: none; }
@keyframes vl-icon-in { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@media (max-width: 560px) {
  .vl-icon-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vl-icon-pick { padding: 12px 4px 10px; }
  .vl-icon-pic, .vl-icon-pic img { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .vl-icon-pick, .vl-icon-pic img { animation: none; transition: none; }
  .vl-icon-pick:hover, .vl-icon-pick:hover .vl-icon-pic img { transform: none; }
}
.vl-field { display: flex; flex-direction: column; gap: 8px; }
.vl-field-l { margin-top: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.vl-input {
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg);
  color: var(--text); font-weight: 600; font-size: 16px; line-height: 1; font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vl-input:focus { outline: none; border-color: rgba(var(--vl-rgb), .8); box-shadow: 0 0 0 3px rgba(var(--vl-rgb), .18); }
.vl-select { padding-right: 30px; font-size: 14px; }
.vl-err { margin: 0; color: #fca5a5; font-size: 13.5px; }
.vl-err.hidden { display: none; }

.vl-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vl-type {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 16px; min-height: 180px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .25s ease, background .25s ease, box-shadow .3s ease, transform .25s var(--vl-ease);
}
.vl-type img { width: 64px; height: 64px; filter: drop-shadow(0 8px 20px rgba(var(--vl-rgb), .45)); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.vl-type:hover { transform: translateY(-2px); border-color: rgba(var(--vl-rgb), .5); }
.vl-type:hover img { transform: rotate(-6deg) scale(1.08); }
.vl-type.active { border-color: rgba(var(--vl-rgb), .9); background: rgba(var(--vl-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--vl-rgb), .5), 0 16px 36px -18px rgba(var(--vl-rgb), .8); }
.vl-type-text { display: flex; flex-direction: column; gap: 4px; }
.vl-type-title { font-size: 17px; font-weight: 850; letter-spacing: -.02em; }
.vl-type-sub { color: var(--text-dim); font-size: 13px; line-height: 1.45; }

.vl-gather { display: flex; flex-direction: column; gap: 10px; }
.vl-g { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.vl-g-head { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; cursor: pointer; background: rgba(255, 255, 255, .02); }
.vl-g-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.vl-g-n { color: var(--text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vl-g-from { padding: 2px 8px; border-radius: 6px; background: rgba(232, 121, 249, .12); color: #f0abfc; font-size: 11px; font-weight: 700; }
.vl-g-items { display: flex; flex-direction: column; max-height: 220px; overflow: auto; border-top: 1px solid var(--border); }
.vl-g-item { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 14px 0 38px; cursor: pointer; font-size: 13.5px; }
.vl-g-item:hover { background: rgba(255, 255, 255, .03); }
.vl-g-tag { flex: none; min-width: 56px; color: rgb(var(--vl-rgb)); font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; }
.vl-g-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.vl-g input, .vl-g-head input { width: 18px; height: 18px; accent-color: rgb(var(--vl-rgb)); flex: none; }

.vl-match-form { display: grid; grid-template-columns: 1fr 96px 150px auto; gap: 8px; }
.vl-input-year { font-variant-numeric: tabular-nums; }
.vl-results { display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.vl-result {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 10px; border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  animation: vl-rise .35s var(--vl-ease) var(--d, 0ms) both;
  transition: background .2s ease, border-color .2s ease;
}
.vl-result:hover { background: rgba(var(--vl-rgb), .07); border-color: rgba(var(--vl-rgb), .35); }
.vl-result.is-busy { opacity: .6; }
.vl-result-poster { position: relative; width: 68px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 7px; background: var(--surface); }
.vl-result-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-result-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vl-result-top { display: flex; align-items: baseline; gap: 10px; }
.vl-result-title { font-weight: 800; font-size: 15px; }
.vl-result-year { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 13px; }
.vl-result-src { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-mute); font-size: 12px; font-weight: 600; }
.vl-result-prov { color: rgb(var(--vl-rgb)); font-weight: 800; }
.vl-result-score { font-variant-numeric: tabular-nums; }
.vl-result-ov { margin: 2px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Entrances + scroll reveals ──────────────────────────────────────────
   Each section carries its own choreography (data-reveal): the rails slide in
   from the right with their cards staggered, the wall's posters rise in column
   waves, the detail poster lifts while the text beside it staggers up, the
   episode list wipes in from the left. Everything is visible without JS. */
@keyframes vl-rise { from { opacity: 0; transform: translateY(18px); } }
.vl-page { animation: vl-fade .35s ease both; }
.vl-page.no-enter, .vl-page.no-enter * { animation: none !important; }

.vl-toolbar[data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s var(--vl-ease); }
.vl-toolbar[data-reveal].is-in { opacity: 1; transform: none; }

.vl-rail[data-reveal] .vl-rail-head { opacity: 0; transform: translateX(-16px); transition: opacity .5s ease, transform .6s var(--vl-ease); }
.vl-rail[data-reveal] .vl-track > * { opacity: 0; transform: translateX(46px); transition: opacity .55s ease var(--d, 0ms), transform .75s var(--vl-ease) var(--d, 0ms); }
.vl-rail[data-reveal].is-in .vl-rail-head,
.vl-rail[data-reveal].is-in .vl-track > * { opacity: 1; transform: none; }

.vl-card[data-reveal] { opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .5s ease var(--d, 0ms), transform .7s var(--vl-ease) var(--d, 0ms); }
.vl-card[data-reveal].is-in { opacity: 1; transform: none; }

.vl-aside[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease .25s, transform .8s cubic-bezier(.2, 1, .3, 1) .25s; }
.vl-aside[data-reveal].is-in { opacity: 1; transform: none; }
.vl-detail-poster[data-reveal] { opacity: 0; transform: translateY(30px) rotate(-1.5deg) scale(.96); transition: opacity .6s ease, transform .9s cubic-bezier(.2, 1, .3, 1); }
.vl-detail-poster[data-reveal].is-in { opacity: 1; transform: none; }
.vl-detail-info[data-reveal] > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .65s var(--vl-ease); }
.vl-detail-info[data-reveal].is-in > * { opacity: 1; transform: none; }
.vl-detail-info[data-reveal] > :nth-child(2) { transition-delay: .06s; }
.vl-detail-info[data-reveal] > :nth-child(3) { transition-delay: .12s; }
.vl-detail-info[data-reveal] > :nth-child(4) { transition-delay: .18s; }
.vl-detail-info[data-reveal] > :nth-child(5) { transition-delay: .24s; }
.vl-detail-info[data-reveal] > :nth-child(n+6) { transition-delay: .3s; }
.vl-detail-bd img { animation: vl-bd-in 1.4s ease both; }
@keyframes vl-bd-in { from { opacity: 0; transform: scale(1.06); } }

.vl-seasons[data-reveal] { opacity: 0; transition: opacity .5s ease; }
.vl-seasons[data-reveal].is-in { opacity: 1; }
/* The season posters are dealt in from the right, one after another. */
.vl-seasons[data-reveal] .vl-season-card { opacity: 0; transform: translateX(28px) rotate(1.5deg); }
.vl-seasons[data-reveal].is-in .vl-season-card { animation: vl-deal .7s var(--vl-ease) var(--d, 0ms) both; }
@keyframes vl-deal { from { opacity: 0; transform: translateX(28px) rotate(1.5deg) scale(.97); } to { opacity: 1; transform: none; } }
.vl-season-now { animation: vl-rise .45s var(--vl-ease) both; }
.vl-eps.is-swap .vl-ep { animation: vl-wipe .5s var(--vl-ease) var(--d, 0ms) both; }
@keyframes vl-wipe { from { opacity: 0; transform: translateX(-18px); clip-path: inset(0 100% 0 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
.vl-file[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s var(--vl-ease); }
.vl-file[data-reveal].is-in { opacity: 1; transform: none; }
.vl-empty[data-reveal] { animation: vl-rise .6s var(--vl-ease) both; }

/* Under ~1000px the halves are too narrow for a still beside its words and
   three scores side by side: the cards take a row each. */
@media (max-width: 1020px) {
  .vl-now { grid-template-columns: minmax(0, 1fr); }
  .vl-now > .vl-aside[data-reveal]:nth-child(2) { transition-delay: .25s; }
}

/* ── Phones ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .vlib-view { --vl-gutter: 16px; --vl-card: 132px !important; }
  .vl-hero { min-height: 62vh; }
  /* Text runs the full width on a phone, so the scrim rises from the bottom
     instead of fading in from the left. */
  .vl-hero-bd::after {
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(10, 11, 16, .9) 42%, rgba(10, 11, 16, .45) 72%, rgba(10, 11, 16, .25) 100%),
      radial-gradient(80% 50% at 20% 100%, rgba(var(--vl-rgb), .2), transparent 70%);
  }
  .vl-hero-body { width: 100%; padding: 56px var(--vl-gutter) 104px; }
  .vl-hero-overview { -webkit-line-clamp: 2; font-size: 14px; }
  .vl-hero-picks { left: var(--vl-gutter); right: auto; bottom: 20px; }
  .vl-hero-pick { width: 40px; height: 60px; }
  .vl-hero-pick.active { width: 48px; height: 72px; }
  /* Two lines on purpose: the watch switch across the top, then the genre
     scroller with the tools at its end. The scroller keeps room for a couple
     of chips: when the tools (an owner's unmatched count, a long sort name,
     the options) would leave it less, they drop to a line of their own,
     right-aligned (margin-left: auto), instead of crushing it to half a chip. */
  .vl-tb-row { flex-wrap: wrap; gap: 10px; }
  /* Home and the watch switch share the first line. */
  .vl-seg { flex: 1 1 0; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .vl-home-btn { width: 44px; height: 44px; }
  .vl-seg-btn { flex: 1; padding: 0 11px; }
  .vl-chips { flex: 1 0 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .vl-chip { flex: none; white-space: nowrap; }
  .vl-size { display: none; }
  /* Touch-sized: 44px rows. */
  .vl-seg-btn { min-height: 44px; }
  .vl-tb-row .vl-chip, .vl-sort-btn, .vl-tb-row .vl-dir { min-height: 44px; }
  .vl-tb-tools .vl-icon-btn { width: 44px; height: 44px; }
  .vl-tb-row .vl-chip.vl-gchip, .vl-tb-row .vl-chip.vl-chip-more { min-height: 44px; }
  .vl-grid { gap: 20px 12px; grid-template-columns: repeat(auto-fill, minmax(var(--vl-card), 1fr)); }
  .vl-track { grid-auto-columns: 74vw; gap: 12px; }
  .vl-rail.is-few .vl-track { grid-template-columns: 1fr; }
  .vl-rail.is-few .vl-wide { grid-template-columns: 1fr; }
  .vl-hero-title.is-long { font-size: 28px; }
  .vl-track:has(> .vl-card) { grid-auto-columns: 36vw; }
  .vl-rail-nav { display: none; }
  .vl-detail-head { grid-template-columns: 1fr; min-height: 0; gap: 18px; }
  /* Resume on a phone: a smaller still beside the episode, its story left to the list below. */
  .vl-aside-play { grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
  .vl-aside-ep { font-size: 15px; }
  .vl-aside-ov { display: none; }
  /* Three scores across a phone: the names may take two lines, all of them the same height. */
  .vl-aside-scores .cinema-score-row { padding: 2px 10px; row-gap: 8px; }
  .vl-aside-scores .cinema-score-source { min-height: 2.5em; white-space: normal; line-height: 1.2; }
  .vl-aside-scores .cinema-score-row[data-source=imdb] .cinema-score-source { min-height: 0; margin-block: .35em; }
  .vl-aside-scores .cinema-score-context { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .vl-aside-top { flex-direction: column; gap: 2px; }
  .vl-season-rail { --sw: 116px; gap: 12px; }
  .vl-season-tools .vl-rail-nav { display: none; }
  .vl-season-now-t { font-size: 19px; }
  .vl-um-word { display: none; }
  .vl-dir { padding: 0 11px; }
  /* The tools line leads with the sort, the way the eye reads it, and the
     genre scroller fades out at its edge so a cut chip reads as "swipe". */
  .vl-tb-tools { flex: 1 1 100%; justify-content: flex-start; }
  .vl-tb-tools .vl-sort-btn { order: -1; margin-right: auto; }
  .vl-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .vl-detail-poster { width: 46vw; max-width: 200px; }
  .vl-detail-bd { height: 70vh; }
  .vl-fact { padding: 8px 10px; }
  .vl-fact-l { font-size: 10px; letter-spacing: .04em; }
  .vl-fact-v { font-size: 17px; }
  .vl-ep { grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
  .vl-ep-watch { grid-column: 2; justify-self: start; width: 40px; height: 40px; margin-top: -4px; }
  .vl-ep-ov { -webkit-line-clamp: 3; }
  .vl-ep-n { font-size: 18px; }
  .vl-ep-title { font-size: 14.5px; }
  .vl-toggle { margin-left: 0; }
  .vl-types { grid-template-columns: 1fr; }
  .vl-type { min-height: 0; flex-direction: row; align-items: center; }
  .vl-match-form { grid-template-columns: 1fr 1fr; }
  .vl-match-form .vl-input:first-child { grid-column: 1 / -1; }
  .vl-dlg { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .vlib-view *, .vl-dlg-scrim, .vl-dlg-scrim * { animation: none !important; transition: none !important; }
  .vl-aside[data-reveal],
  .vl-toolbar[data-reveal], .vl-rail[data-reveal] .vl-rail-head, .vl-rail[data-reveal] .vl-track > *,
  .vl-card[data-reveal], .vl-detail-poster[data-reveal], .vl-detail-info[data-reveal] > *,
  .vl-seasons[data-reveal], .vl-file[data-reveal], .vl-seasons[data-reveal] .vl-season-card { opacity: 1 !important; transform: none !important; }
  .vl-seasons[data-reveal].is-in .vl-season-card, .vl-season-now { animation: none !important; }
  .vl-season-art, .vl-season-poster { transition: none !important; }
}

/* ── The Videos split: created libraries as panels ───────────────────── */
.vsplit-lib-shows  { --lane: #a3e635; --lane-2: #4ade80; --lane-rgb: 163, 230, 53; }
.vsplit-lib-movies { --lane: #fb7185; --lane-2: #f43f5e; --lane-rgb: 251, 113, 133; }
/* The per-key hover rules in video-lanes.css name the built-in lanes; a
   created library is lit through .is-hover instead. */
.vsplit-stage[data-hover] .vsplit-panel.is-hover { flex-grow: 1.55; filter: none; }
.vsplit-stage[data-hover] .vsplit-panel.is-hover .vsplit-wall { filter: blur(0) saturate(1.05) brightness(.62); transform: skewX(calc(-1 * var(--vs-skew))) scale(1.14); }
.vsplit-stage[data-hover] .vsplit-panel.is-hover .vsplit-halo { opacity: 1; transform: scale(1.18); }
.vsplit-stage[data-hover] .vsplit-panel.is-hover .vsplit-icon {
  animation: vsplit-bounce .7s cubic-bezier(.3, 1.6, .5, 1) both, vsplit-float 5.5s ease-in-out .7s infinite;
  filter: drop-shadow(0 14px 40px rgba(var(--lane-rgb), .8)) brightness(1.08);
}
.vsplit-stage[data-hover] .vsplit-panel.is-hover .vsplit-enter { opacity: 1; transform: none; }
/* Five or more panels: everything in the centre stack steps down a size. */
.vsplit[data-panels="5"] .vsplit-title { font-size: clamp(30px, 3.2vw, 54px); }
.vsplit[data-panels="5"] .vsplit-icon { width: 122px; height: 122px; }
.vsplit[data-panels="5"] .vsplit-body { padding-left: 40px; padding-right: 40px; }
.vsplit:is([data-panels="6"], [data-panels="7"], [data-panels="8"], [data-panels="9"]) .vsplit-title { font-size: clamp(24px, 2.4vw, 42px); }
.vsplit:is([data-panels="6"], [data-panels="7"], [data-panels="8"], [data-panels="9"]) .vsplit-icon { width: 96px; height: 96px; }
.vsplit:is([data-panels="6"], [data-panels="7"], [data-panels="8"], [data-panels="9"]) .vsplit-body { padding-left: 24px; padding-right: 24px; }
.vsplit:is([data-panels="6"], [data-panels="7"], [data-panels="8"], [data-panels="9"]) .vsplit-kicker { letter-spacing: .12em; }
.vsplit-new {
  --lane-rgb: 163, 230, 53;
  top: 72px;
  border-style: dashed;
  padding-left: 8px;
}
.vsplit-new-plus {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(var(--lane-rgb), .16); color: rgb(var(--lane-rgb));
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.vsplit-new:hover .vsplit-new-plus, .vsplit-new:focus-visible .vsplit-new-plus { transform: rotate(90deg) scale(1.08); }
@media (max-width: 760px) {
  /* Beside the VR pill, not under it: below it sits on the first seam's mark. */
  .vsplit-new { top: 10px; right: 100px; }
  .vsplit-new .vsplit-mini-title { display: none; }
  .vsplit-new { padding: 4px; }
  .vsplit[data-panels] .vsplit-title { font-size: 24px; }
  .vsplit[data-panels] .vsplit-icon { width: 52px; height: 52px; }
  .vsplit:is([data-panels="6"], [data-panels="7"], [data-panels="8"], [data-panels="9"]) .vsplit-count { display: none; }
}

/* ── Lane bar: library pills, the Shelves / Shows switch, New ───────────
   DOM order IS the bar order now (video-lanes.js fillLanePills builds the
   groups, the + and the divider in place) — no flex `order` juggling. */
.vlane-mode {
  display: inline-flex; padding: 3px; gap: 2px; margin-left: 4px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2);
}
.vlane-mode.hidden { display: none; }
.vlane-mode-btn {
  min-height: 34px; padding: 0 13px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--text-dim); font-weight: 700; font-size: 12.5px; line-height: 1; font-family: inherit; cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.vlane-mode-btn:hover { color: var(--text); }
.vlane-mode-btn.active { color: #fff; background: rgba(var(--lane-rgb, 163, 230, 53), .18); box-shadow: inset 0 0 0 1px rgba(var(--lane-rgb, 163, 230, 53), .6); }
.vlane-add {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--accent-warm); border-radius: var(--dock-plaque, 9px); background: var(--surface);
  color: var(--accent-warm); cursor: pointer; touch-action: manipulation;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.vlane-add svg { width: 20px; height: 20px; stroke-width: 2.8; }
.vlane-add:hover { color: var(--text); border-color: var(--accent-warm); background: var(--surface-2); transform: translateY(-1px); }
.vlane-add:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 3px; }
.vlane-add:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .vlane-add { transition: none; }
  .vlane-add:hover, .vlane-add:active { transform: none; }
}

/* ── Loading: artwork slots shimmer until their picture lands ─────────── */
.vl-poster:not(:has(img.is-loaded)):not(.is-plain),
.vl-still:not(:has(img.is-loaded)),
.vl-ep-still:not(:has(img.is-loaded)) {
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%) 0 0 / 250% 100%,
    radial-gradient(120% 80% at 30% 10%, rgba(var(--vl-rgb), .14), transparent 60%),
    var(--surface);
  animation: vl-loading 1.6s ease-in-out infinite;
}
@keyframes vl-loading { from { background-position: 130% 0, 0 0, 0 0; } to { background-position: -130% 0, 0 0, 0 0; } }

/* ── Hover preview on 16:9 frames (videos.js attachHoverScrub) ────────── */
.vl-still .tile-scrub, .vl-ep-still .tile-scrub {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background-repeat: no-repeat; background-color: #000; pointer-events: none;
  opacity: 1; transition: opacity 1.3s ease-out;
}
.vl-still .tile-scrub.lingering, .vl-ep-still .tile-scrub.lingering { opacity: 0; }
.vl-still .tile-scrub-pos, .vl-ep-still .tile-scrub-pos {
  position: absolute; bottom: 0; z-index: 2; width: 2px; height: 14px; border-radius: 1px;
  background: rgb(var(--vl-rgb)); box-shadow: 0 0 6px rgba(var(--vl-rgb), .9);
  transform: translateX(-50%); pointer-events: none; transition: left .05s linear;
}
.vl-still:has(.tile-scrub:not(.lingering)) .vl-card-play,
.vl-ep-still:has(.tile-scrub:not(.lingering)) .vl-card-play { opacity: 0 !important; }

/* ── Poster → page morph (View Transitions) ──────────────────────────── */
::view-transition-group(vl-poster-morph) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(vl-poster-morph), ::view-transition-new(vl-poster-morph) { height: 100%; object-fit: cover; overflow: clip; border-radius: 12px; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

/* ── Edit episode info / toolbar extras ──────────────────────────────── */
.vl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vl-hint { margin: 0; color: var(--text-mute); font-size: 12.5px; }
.vl-unmatched-btn.active { color: #fff; border-color: rgba(var(--vl-rgb), .7); background: rgba(var(--vl-rgb), .14); }

/* ── Player: "Up next" countdown card (videos.js startUpNext) ─────────── */
.video-upnext {
  --un-rgb: 163, 230, 53;
  position: absolute; right: 24px; bottom: 84px; z-index: 30;
  display: grid; grid-template-columns: 192px minmax(0, 1fr); gap: 16px; align-items: center;
  width: min(520px, calc(100% - 48px));
  padding: 14px; border-radius: 16px;
  border: 1px solid rgba(var(--un-rgb), .35);
  background: linear-gradient(135deg, rgba(var(--un-rgb), .12), rgba(12, 13, 19, .92) 45%);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9), 0 0 50px -24px rgba(var(--un-rgb), .8);
  color: #e7ecf3; font-family: inherit;
  /* The player's stage zeroes line-height for the video; the card's words
     need their own. */
  line-height: 1.35; text-align: left;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, 1, .3, 1);
}
.video-upnext.in { opacity: 1; transform: none; }
.vun-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #161924; }
.vun-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* styles.css `.modal.media-fullscreen img` lifts every image in the player to z 5,
   which put the still over its own countdown: the card's id outranks it. */
#video-upnext .vun-frame img { position: static; z-index: auto; }
.vun-ring { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(8, 9, 13, .55) 0, rgba(8, 9, 13, .55) 30px, transparent 34px); }
.vun-ring svg { position: absolute; width: 56px; height: 56px; transform: rotate(-90deg); }
.vun-track { fill: rgba(8, 9, 13, .6); stroke: rgba(255, 255, 255, .18); stroke-width: 3; }
.vun-fill {
  fill: none; stroke: rgb(var(--un-rgb)); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  animation: vun-count var(--un-dur, 10s) linear forwards;
  filter: drop-shadow(0 0 4px rgba(var(--un-rgb), .9));
}
@keyframes vun-count { to { stroke-dashoffset: 0; } }
.vun-sec { position: relative; font-size: 18px; font-weight: 850; font-variant-numeric: tabular-nums; }
.vun-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vun-l { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--un-rgb)); }
.vun-title { font-size: 15.5px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vun-sub { font-size: 12.5px; color: #9aa3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vun-actions { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 6px; }
.vun-actions button {
  min-height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-weight: 750; font-size: 13px; line-height: 1; font-family: inherit; touch-action: manipulation;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #e7ecf3;
}
.vun-actions .vun-play { border-color: transparent; background: rgb(var(--un-rgb)); color: #0b0d0a; box-shadow: 0 8px 22px -8px rgba(var(--un-rgb), .8); }
/* Paused during the credits: the ring waits with the countdown (videos.js). */
.video-upnext.is-held .vun-fill { animation-play-state: paused; }
.video-upnext.is-held .vun-sec { opacity: .55; }
/* "Are you still watching?": no countdown, the question leads. */
.video-upnext.is-still .vun-title { font-size: 17px; -webkit-line-clamp: 3; }
.video-upnext.is-still .vun-frame img { filter: saturate(.85) brightness(.8); }
@media (prefers-reduced-motion: reduce) { .video-upnext { transition: opacity .2s ease; transform: none; } }
.vun-actions button:focus-visible { outline: 2px solid rgb(var(--un-rgb)); outline-offset: 3px; }
@media (max-width: 640px) {
  .video-upnext { left: 12px; right: 12px; bottom: 72px; width: auto; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .vun-ring svg { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-upnext { transition: none; }
  .vun-fill { animation: none; stroke-dashoffset: 0; }
  .vl-poster, .vl-still, .vl-ep-still { animation: none !important; }
  ::view-transition-group(vl-poster-morph), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}