/* find.css — Clip Finder (/find)
   Matches the site's glass design language (translucent dark surfaces over the blue
   gradient) with a cyan accent. Editor-first layout: the video is the hero, the matched
   line + actions sit directly under it, alternatives list below. */

.find-app {
  --fc-accent: #2dd8ff;
  --fc-accent-soft: rgba(45, 216, 255, 0.16);
  --fc-glass: rgba(0, 0, 0, 0.22);
  --fc-glass-2: rgba(255, 255, 255, 0.04);
  --fc-border: rgba(255, 255, 255, 0.09);
  --fc-border-strong: rgba(255, 255, 255, 0.18);
  --fc-text-2: rgba(255, 255, 255, 0.62);

  max-width: 1040px;
  margin: 0 auto;
  padding: .6rem 1rem 1.25rem;
  color: #fff;
}

/* Fix: [hidden] must win over the display rules below */
.find-app [hidden] { display: none !important; }
/* On /s/ the shell is rendered hidden until find.js hydrates (a crawlable list shows meanwhile). */
.find-app-prehydrate { display: none !important; }

/* Header + search */
.find-head { text-align: center; margin-bottom: .9rem; }
.find-title { font-size: 1.7rem; margin: 0 0 .2rem; font-weight: 700; letter-spacing: .2px; }
.find-sub { margin: 0 0 .85rem; color: var(--fc-text-2); font-size: 1rem; }

.find-search {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.find-search-icon {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fc-accent);
  opacity: .75;
  pointer-events: none;
}
#findInput {
  width: 100%;
  box-sizing: border-box;
  height: 3.5rem;
  padding: 0 3.2rem;
  font-size: 1.2rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--fc-border-strong);
  border-radius: 999px;
  outline: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#findInput::placeholder { color: rgba(255, 255, 255, 0.4); }
#findInput:focus {
  border-color: var(--fc-accent);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 4px var(--fc-accent-soft);
}
.find-spinner {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-top-color: var(--fc-accent);
  border-radius: 50%;
  animation: find-spin .7s linear infinite;
}
@keyframes find-spin { to { transform: rotate(360deg); } }

/* Stage: vertical, video as the hero */
.find-stage {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

/* Viewer = prev arrow | player | next arrow — arrows OUTSIDE the video */
.find-viewer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

/* Player sizing is PURE CSS (16:9 of its width, capped) — never sized by JS, so Swiper's
   slide width always equals the container and the next slide can't peek. Mirrors the clip page. */
.find-player-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 74vh;
  background: #000;
  border: 1px solid var(--fc-border);
  border-radius: 14px;
  overflow: hidden;                 /* clips any sub-pixel residue of the neighbouring slide */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
/* Swiper fills the wrap absolutely; slides are forced to exactly 100% so translate is exact. */
.find-swiper { position: absolute; inset: 0; width: 100%; height: 100%; }
.find-swiper .swiper-wrapper { width: 100%; height: 100%; }
.find-swiper .swiper-slide {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}
/* Letterbox any ratio: the slide-filling containers + object-fit:contain centre the video
   with black bars (pillar/letterbox) instead of stretching or cropping. Covers the bare
   <video> AND Plyr's wrapper chain (.plyr > .plyr__video-wrapper > video); padding-bottom:0
   neutralises Plyr's intrinsic aspect-ratio padding so our box wins. */
.find-swiper .swiper-slide video.find-video {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #000;
}
.find-swiper .swiper-slide .plyr {
  width: 100%; height: 100%; margin: 0 auto; background: #000;
  --plyr-color-main: var(--fc-accent);
  /* Plyr fills a control's whole box with the main colour on hover/focus — that's the "huge cyan
     box" look. Use a subtle translucent white instead so the buttons read as icons, not slabs. */
  --plyr-video-control-background-hover: rgba(255, 255, 255, 0.18);
}
.find-swiper .swiper-slide .plyr__video-wrapper {
  width: 100%; height: 100%; padding-bottom: 0 !important; background: #000;
}
.find-swiper .swiper-slide .plyr video {
  width: 100%; height: 100%; object-fit: contain;
}

/* --- Full-width seek bar pinned to the player's bottom edge ----------------
   Pull Plyr's progress out of the control row and stretch it edge-to-edge along
   the very bottom of the player, so the WHOLE bottom edge is the scrubber. The
   play / time / mute / captions / fullscreen buttons stay in the bar above it.
   (find.js uses hideControls:true, so this strip auto-hides with the bar during playback.) */
.find-swiper .swiper-slide .plyr__progress__container {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 4;
}
.find-swiper .swiper-slide .plyr__progress {
  margin: 0;
  padding: 0;
  width: 100%;
  --plyr-range-thumb-height: 0px;   /* no draggable knob — click/tap anywhere along the edge seeks */
  --plyr-range-track-height: 14px;  /* slim strip — just tall enough to hold the small timers */
}
.find-swiper .swiper-slide .plyr__progress input[type="range"] {
  display: block;
  width: 100%;
  height: 14px;
  margin: 0;
  border-radius: 0;                 /* square — no rounded ends */
  cursor: pointer;
}
.find-swiper .swiper-slide .plyr__progress input[type="range"]::-webkit-slider-thumb { opacity: 0; }
.find-swiper .swiper-slide .plyr__progress input[type="range"]::-moz-range-thumb { opacity: 0; border: 0; }
.find-swiper .swiper-slide .plyr__progress input[type="range"]::-webkit-slider-runnable-track { border-radius: 0; }
.find-swiper .swiper-slide .plyr__progress input[type="range"]::-moz-range-track { border-radius: 0; }
.find-swiper .swiper-slide .plyr__progress__buffer {
  top: auto;
  bottom: 0;
  height: 14px;
  margin: 0;
  border-radius: 0;
}
/* The buffer is a <progress> — its rounded ends live on the value pseudo-elements (Plyr sets them
   to 100px), not the element itself, so square those too. */
.find-swiper .swiper-slide .plyr__progress__buffer::-webkit-progress-value { border-radius: 0; }
.find-swiper .swiper-slide .plyr__progress__buffer::-moz-progress-bar { border-radius: 0; }
/* Control row: play pinned bottom-left, the mute / captions / fullscreen group flush bottom-right.
   The inline progress (the old flex spacer) is now the bottom-edge strip, so a single margin-left:
   auto on the first right-hand control opens the gap between the two groups — no spacer hack.
   padding-bottom clears the 14px seek strip below. */
.find-swiper .swiper-slide .plyr__controls {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px 18px;
}
.find-swiper .swiper-slide .plyr__controls > [data-plyr="play"] { margin-right: auto; }

/* Timers sit INSIDE the slim edge strip — vertically centered, current time on the left,
   duration on the right, inset from the corners and overlaying the fill. */
.find-swiper .swiper-slide .plyr__time {
  position: absolute;
  bottom: 0;
  height: 14px;
  display: inline-flex;
  align-items: center;
  z-index: 5;
  margin: 0;
  padding: 0;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
.find-swiper .swiper-slide .plyr__time--current { left: 10px; }
.find-swiper .swiper-slide .plyr__time--duration { right: 10px; }
/* Plyr inserts a "/" before the 2nd time when both show; they're now at opposite ends, so drop it. */
.find-swiper .swiper-slide .plyr__time + .plyr__time::before { content: none; margin: 0; }
.find-player-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  padding: 1.5rem;
  color: rgba(255, 255, 255, 0.38);
  font-size: 1.05rem;
  z-index: 2;
  pointer-events: none;
}
.find-player-empty svg { opacity: .5; }

/* Autoplay safety-net banner — shown over the player once N clips auto-advanced back-to-back with
   no interaction. The whole pill is a button; tapping it (or the player's play control) resumes. */
.find-autoplay-notice {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: calc(100% - 24px);
  padding: .5rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--fc-accent);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  animation: find-notice-in .2s ease-out;
}
.find-autoplay-notice:hover { background: rgba(0, 0, 0, 0.85); }
.find-autoplay-notice svg { color: var(--fc-accent); flex: 0 0 auto; }
@keyframes find-notice-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Prev/next arrows — in the flex row, beside (not over) the video */
.find-nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--fc-glass-2);
  border: 1px solid var(--fc-border-strong);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s, opacity .12s;
}
.find-nav:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--fc-accent); color: var(--fc-accent); }
.find-nav:active { transform: scale(.92); }
.find-nav.swiper-button-disabled,
.find-nav[disabled] { opacity: .3; pointer-events: none; }

/* Action belt under the video: a slim row holding just the position counter + Download CTA.
   The matched line/movie used to live here, but it duplicated the highlighted row in the
   results list below, so it was removed — the active .find-result IS the "now playing". */
.find-belt {
  padding: 2px;
}

/* Actions */
.find-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center;}
.find-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1rem;
  font-size: .95rem;
  color: #fff;
  background: var(--fc-glass-2);
  border: 1px solid var(--fc-border-strong);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .08s;
}
.find-btn:hover { background: rgba(255, 255, 255, 0.1); }
.find-btn:active { transform: translateY(1px); }
/* Orange — matches the site's .orangeButton (the download dialog's CTA) */
.find-btn-primary {
  background: linear-gradient(180deg, #ff7d18 1%, #e98639 60%);
  border-color: #ff7d18;
  color: #fff;
  font-weight: 700;
}
.find-btn-primary:hover { background: linear-gradient(180deg, #ff892e 1%, #fb8328 60%); border-color: #ff892e; }
.find-btn.is-copied { border-color: #4caf50; color: #9be7a0; }
/* Autoplay toggle — sits left of Download. Same neutral look as the open-clip link to its right;
   on/off is conveyed by swapping the icon (play=on / pause=off), one shown at a time. */
.find-btn-toggle { flex: 0 0 auto; color: var(--fc-text-2); }
.find-btn-toggle .find-autoplay-icon-off { display: none; }
.find-btn-toggle[aria-pressed="false"] .find-autoplay-icon-on { display: none; }
.find-btn-toggle[aria-pressed="false"] .find-autoplay-icon-off { display: block; }

/* Icon-only secondary action (open the clip page in a new tab) — square, never grows. */
.find-btn-icon { flex: 0 0 auto; padding: .6rem; color: var(--fc-text-2); }
.find-btn-icon:hover { color: var(--fc-accent); }
.find-btn-icon svg { display: block; }

/* Results list (below the hero, full stage width) */
.find-results {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  max-height: 38vh;          /* internally scrollable so the list never grows the page */
  overflow-y: auto;
  padding-right: .15rem;
}
.find-results-head {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.45);
  padding: .2rem .1rem .35rem;
}
.find-hint {
  color: rgba(255, 255, 255, 0.45);
  padding: 1.75rem 1rem;
  text-align: center;
  font-size: 1.02rem;
}
.find-result {
  position: relative;
  flex: 0 0 auto;            /* never let the scrollable column squish a row (would clip the text) */
  display: flex;
  align-items: stretch;
  min-height: 64px;
  background: var(--fc-glass-2);
  border: 1px solid var(--fc-border);
  border-left: 3px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.find-result-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .55rem .95rem;
}
.find-result:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--fc-border-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.find-result.is-selected {
  background:
    linear-gradient(90deg, rgba(45, 216, 255, 0.16) 0%, rgba(45, 216, 255, 0.04) 60%, transparent 100%),
    var(--fc-glass-2);
  border-color: var(--fc-border-strong);
  border-left-color: var(--fc-accent);
}
.find-result-line {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.02rem;
  line-height: 1.4;
  color: #eef2f5;
  /* Clamp to two lines so every row keeps a uniform height. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.find-result-line mark {
  background: var(--fc-accent-soft);
  color: #b6ecff;
  padding: 0 .12em;
  border-radius: 3px;
}
/* Movie name + season/episode on one line, bullet-separated like the clip page. The whole thing is
   secondary, so keep it quiet; the name truncates while the S/E stays intact on the right. */
.find-result-meta {
  flex: 0 0 auto;
  max-width: 38%;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 0;
  color: var(--fc-text-2);
  font-size: .8rem;
}
.find-result-meta .find-movie {
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.find-result-meta .find-se {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.5);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}
.find-result-meta .find-se::before {
  content: "\2022";          /* bullet, matching the clip page */
  margin: 0 .4em;
  color: rgba(255, 255, 255, 0.32);
}

/* Mobile */
@media (max-width: 720px) {
  .find-app { padding: .4rem .7rem 1.25rem; }
  .find-head { margin-bottom: .6rem; }
  .find-title { font-size: 1.5rem; }
  .find-sub { font-size: .95rem; margin-bottom: .65rem; }
  #findInput { height: 3.1rem; font-size: 1.05rem; }
  /* On touch the video goes full width and the arrows become an OVERLAID swipe affordance on the
     player edges: they signal "there's more" and double as tap-to-navigate. setArrows() still
     reveals them only when there's more than one match. */
  .find-viewer { gap: 0; position: relative; }
  .find-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.32);
    border: 0;                              /* no ring — disrupt the video as little as possible */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .find-nav svg { width: 18px; height: 18px; }
  .find-nav-prev { left: 1px; }            /* hug the very edge */
  .find-nav-next { right: 1px; }
  .find-nav:hover { background: rgba(0, 0, 0, 0.32); color: #fff; }  /* kill sticky cyan on touch */
  .find-nav:active { transform: translateY(-50%) scale(.9); }
  /* Plyr's controls are oversized for a phone-width video. Plyr HARDCODES the control svg to 18px
     (it doesn't read --plyr-control-icon-size for these), so we override the elements directly —
     our 3-class selectors outrank Plyr's, so this wins even though Plyr's CSS loads lazily after. */
  .find-swiper .swiper-slide .plyr__controls { padding: 2px 4px 18px; gap: 0; }
  .find-swiper .swiper-slide .plyr__control { padding: 8px; }
  .find-swiper .swiper-slide .plyr__control svg { width: 15px; height: 15px; }
  .find-swiper .swiper-slide .plyr__control--overlaid { padding: 9px; }
  .find-swiper .swiper-slide .plyr__control--overlaid svg { width: 17px; height: 17px; }
  .find-swiper .swiper-slide .plyr__time { font-size: 9px; padding: 0; }
  .find-swiper .swiper-slide .plyr__volume { max-width: 62px; }
  .find-swiper .swiper-slide .plyr__menu__container { font-size: 13px; }
  /* Belt on phones: keep all three actions on ONE row. Autoplay collapses to its play/pause icon
     (the label is too long for a phone row — e.g. Spanish "Reproducción automática"); Download stays
     the primary CTA but is sized to its content instead of stretching the full width. */
  .find-belt { padding: 2px }

  .find-actions { display: flex; flex-wrap: nowrap; justify-content: center; gap: .45rem; }
  /* Keep the Autoplay LABEL (the play/pause icon alone is unclear) — but allow it to ellipsize on the
     tightest screens / long translations (Spanish "Reproducción automática") so it never breaks the
     single row. It's the only button that shrinks; Download & the icon keep their size. */
  .find-btn-toggle { flex: 0 1 auto; min-width: 0; padding: .65rem .85rem; }
  .find-btn-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Download is the primary CTA — content-sized (not stretched full-width), keeps its full label. */
  #findDownload { flex: 0 0 auto; justify-content: center; padding: .65rem 1.15rem; font-size: 1rem; }
  /* Match the Download height; stays a compact square beside it. */
  .find-btn-icon { flex: 0 0 auto; padding: .65rem; }
  /* Results scroll internally so the highlight follows the active clip without page scroll */
  .find-results { max-height: 50vh; }
  /* Stack the quote above the movie-name chip; chip aligns to the right of the row. */
  .find-result-body {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .4rem;
  }
  .find-result-meta {
    max-width: 100%;
    text-align: right;
  }
  .find-result-meta .find-movie { font-size: .72rem; }
}

/* Movie-name dropdown — a familiar autocomplete under the search box. Picking a row loads that
   movie's clips into the finder (in-page). position:fixed because the box lives in a fixed header;
   find.js positions it from the input's rect. */
.find-moviedrop {
  position: fixed;
  z-index: 9999;
  max-height: 56vh;
  overflow-y: auto;
  background: #0b2236;
  border: 1px solid var(--fc-border-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  padding: 5px;
}
.find-moviedrop-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 6px 8px;
  margin-bottom: 2px;
  background: #0b2236;
  border-bottom: 1px solid var(--fc-border);
}
.find-moviedrop-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fc-text-2);
}
.find-moviedrop-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fc-text-2);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.find-moviedrop-close:hover,
.find-moviedrop-close:focus-visible { background: var(--fc-accent-soft); color: #fff; }
.find-moviedrop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: #fff;
}
.find-moviedrop-row:hover,
.find-moviedrop-row:focus-visible,
.find-moviedrop-row.is-active { background: var(--fc-accent-soft); }
.find-moviedrop-poster {
  flex: 0 0 auto;
  width: 34px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  display: block;
}
.find-moviedrop-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .95rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.find-moviedrop-year { opacity: .6; }

/* ----- Matched-movies strip (above the player) ----------------------------------------------- */
/* Slim, horizontally-scrollable row of poster cards for movies whose TITLE matches the term. */
.find-moviestrip {
  display: flex;
  gap: .55rem;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 2px 2px 6px;
  margin: 0;
}
.find-moviestrip[hidden] { display: none; }
.find-moviestrip::-webkit-scrollbar { height: 6px; }
.find-moviestrip::-webkit-scrollbar-thumb { background: var(--fc-border-strong); border-radius: 3px; }
.find-moviestrip-card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 230px;
  padding: 5px 10px 5px 5px;
  background: #0b2236;
  border: 1px solid var(--fc-border);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.find-moviestrip-card:hover,
.find-moviestrip-card:focus-visible { background: var(--fc-accent-soft); border-color: var(--fc-border-strong); }
.find-moviestrip-poster {
  flex: 0 0 auto;
  width: 30px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  display: block;
}
/* Title + year stacked vertically (year UNDER the title) to keep cards narrow. */
.find-moviestrip-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.find-moviestrip-name {
  font-size: .88rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.find-moviestrip-year {
  font-size: .72rem;
  line-height: 1.1;
  opacity: .6;
}

/* ----- Loading bar (the only load affordance on /s/) ----------------------------------------- */
.find-loading {
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--fc-border);
  position: relative;
}
.find-loading[hidden] { display: none; }
.find-loading::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--fc-accent);
  animation: find-loadbar 1.1s ease-in-out infinite;
}
@keyframes find-loadbar {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ----- Related-search chips (one horizontally-scrollable row, to save vertical space) -------- */
.find-related {
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
  padding: 2px 2px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.find-related[hidden] { display: none; }
.find-related::-webkit-scrollbar { height: 6px; }
.find-related::-webkit-scrollbar-thumb { background: var(--fc-border-strong); border-radius: 3px; }
.find-related-chip {
  flex: 0 0 auto;
  display: inline-block;
  padding: .3rem .7rem;
  font-size: .85rem;
  color: #fff;
  text-decoration: none;
  background: var(--fc-glass-2);
  border: 1px solid var(--fc-border-strong);
  border-radius: 999px;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.find-related-chip:hover,
.find-related-chip:focus-visible { background: var(--fc-accent-soft); border-color: var(--fc-accent); color: var(--fc-accent); }

/* ----- "Did you mean?" (empty result set) ---------------------------------------------------- */
.find-dym { margin-top: 1rem; }
.find-dym-head {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fc-text-2);
  margin-bottom: .5rem;
}

/* ----- View toolbar + Player/Grid toggle ----------------------------------------------------- */
.find-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.find-toolbar-count {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fc-text-2);
  font-variant-numeric: tabular-nums;
}
.find-viewtoggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--fc-glass-2);
  border: 1px solid var(--fc-border-strong);
  border-radius: 11px;
}
.find-vt {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  font-size: .9rem;
  color: var(--fc-text-2);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.find-vt:hover { color: #fff; }
.find-vt.is-active { background: var(--fc-accent-soft); color: var(--fc-accent); }
.find-vt svg { display: block; flex: 0 0 auto; }

/* ----- Grid (thumbnail) view — mirrors the actor-page card design, responsive ----------------- */
.find-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 18px 16px;
  align-content: start;
  /* No max-height/overflow: the grid flows in the page so there's a single page scroll, not a
     nested scrollbar inside the stage. */
  padding: 2px;
  animation: find-fade .18s ease;
}
.find-grid-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: filter .2s ease, transform .08s ease;
}
.find-grid-card:hover { filter: brightness(1.12); }
.find-grid-card:active { transform: translateY(1px); }
.find-grid-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 225;     /* overridden inline per clip resolution to avoid CLS */
  background: #0b1a28;
  border: 1px solid var(--fc-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.find-grid-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.find-grid-movie {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  max-width: 78%;
  padding: 5px 8px;
  font-size: .8rem;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(0, 0, 0, 0.46);
  border-radius: 0 0 10px 0;
  text-shadow: 1px 1px 1px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.find-grid-se {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 2;
  padding: 3px 7px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.find-grid-dur {
  position: absolute;
  bottom: 6px; right: 6px;
  z-index: 2;
  padding: 3px 8px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 5px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 2px #000;
}
.find-grid-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 4px 2px;
  font-size: .92rem;
  line-height: 1.35;
  color: #eef2f5;
}
.find-grid-title mark { background: var(--fc-accent-soft); color: #b6ecff; padding: 0 .12em; border-radius: 3px; }

/* Smooth, no-refresh swap between the two views — the grid fades in when shown (Player→Grid).
   The player viewer is NOT animated: re-showing a display:none element replays a CSS animation, so
   animating .find-viewer made it flash/fade in on every Grid→Player toggle. */
@keyframes find-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 720px) {
  .find-vt span { display: none; }     /* icons only — keep the toggle compact on phones */
  .find-vt { padding: .48rem .72rem; }
  .find-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 10px; }
  .find-grid-title { font-size: .85rem; padding: 6px 2px 2px; }
  .find-grid-movie { font-size: .72rem; }
}

/* ----- /s/ : the normal HEADER search bar, just a bit larger ---------------------------------
   The search lives in the header (consistent with the rest of the site) and stays in its normal
   position; find.js binds to it. We only make it a touch bigger here — we do NOT reposition it
   (the logo group is position:fixed, so absolute-centering the bar collides with it). The filter
   panel stays closed unless a filter is pre-filled; the cogwheel opens it (main.js
   initializeSearchFilter). */
body.clipfinder-page #searchbox { max-width: 520px; }
body.clipfinder-page #searchinclips { font-size: 17px; padding: 8px 14px; }

/* The Dialogue/Scene scope toggle doesn't apply to the finder (it's dialogue/phrase based), so
   hide those checkboxes on /s/ — only the wired field filters (movie/actor/…/year/duration) show. */
body.clipfinder-page .searchFilters label[for^="onlyCaption"],
body.clipfinder-page .searchFilters label[for^="onlyTranscript"] { display: none; }

/* When advanced filters are opened on /s/, make the dropdown OPAQUE (a clean panel) rather than
   the semi-transparent overlay that looked like it "covered" the player. */
body.clipfinder-page nav .searchFilters {
  background: #0b2236;
  -webkit-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}