/* =============================================================================
 * AltSounds frontend search overlay
 *
 * Modal-style search for the public (non-Mothership) site. Container styling
 * mirrors .video-info-overlay on single-gallery EXACTLY: rgba(10,10,10,0.65)
 * + backdrop-filter: blur(8px), centered glass card, max-height 80vh,
 * max-width 1080px, 15px radius.
 *
 * Tiles mimic Mothership search:
 *   - Songs: 16:9 video tile
 *   - Artists / directors: rectangular 4:5 portrait tile with full-bleed
 *     image + gradient + name overlay (NOT circular avatars)
 *   - Genres / decades / years: pills
 *
 * Pairs with frontend-search.js. CSS variables fall back to literals so the
 * file works whether or not the Customizer's :root vars are loaded.
 * ============================================================================= */

/* ----- Overlay shell (mirror .video-info-overlay) ----- */
.alts-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  /* v0.2 — slightly lighter tint (0.65 vs 0.8) so the page colors bleed
     through more visibly via the 8px backdrop-filter, matching the
     "cool blurry color" feel cited from the info modal. */
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* v0.5 — Symmetric padding for true viewport centering. Was
     `padding-top: 90px` to mirror info modal, which on single-gallery
     looks centered because the floating header sits in a different
     visual rhythm there. On non-single-gallery pages the 90/40 split
     left 50px more space above than below — modal felt low. Overlay
     z-index 99999 covers the floating header (z ~999) so we don't
     need top clearance. */
  padding: 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  font-family: Inter, system-ui, sans-serif;
  color: #fff;
}
.alts-fs-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ----- Modal card — liquid-glass treatment (v0.12) -----
   Width scales 60vw capped at 1200px. Liquid-glass recipe layered on:
     - rgba(0,0,0,0.55) base so the backdrop-filter blur shows through
     - 1px white-8% hairline border (the "subtle stroke")
     - 22px corner radius (info modal's "rounder than 15" feel)
     - 30px-80px deep drop shadow underneath
     - 1px inset white-7% highlight at the top edge — the cue your
       eye reads as "this surface has thickness"
     - backdrop-filter blur 24px so content behind shows colored
       through the modal itself, not just the overlay
   This is the look you see on single-gallery's info modal in
   practice (the literal CSS pasted earlier is a minimal
   version; this matches the rendered effect with all v15+ tweaks). */
.alts-fs-modal {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  width: 60vw;
  max-width: 1200px;
  height: 80vh;
  max-height: 80vh;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 30px 80px -10px rgba(0, 0, 0, 0.65),
    0 10px 30px -8px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: translateY(8px) scale(0.99);
  transition: transform 0.22s ease;
}
.alts-fs-overlay.is-open .alts-fs-modal {
  transform: translateY(0) scale(1);
}

/* ----- Header (search input + × close) -----
   v0.14 — Symmetric vertical padding (was 22 / 16) so the 48px
   input and the 48px × chip line up flush. align-items:center on
   the row + matching child heights = true vertical centering. */
.alts-fs-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.alts-fs-input-wrap {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.alts-fs-input-wrap:focus-within {
  border-color: var(--alts-accent, #bbff00);
  box-shadow: 0 0 0 3px rgba(191, 255, 0, 0.18);
}
.alts-fs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
}
.alts-fs-input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font: 500 16px/1.3 Inter, system-ui, sans-serif;
  caret-color: var(--alts-accent, #bbff00);
  /* v0.13 — Vertical padding tuned so the input pill is exactly the
     same 48px height as the .alts-fs-close chip beside it. */
  padding: 13px 12px 13px 0;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
}
.alts-fs-input-wrap { min-height: 48px; }
.alts-fs-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
/* Suppress the native webkit blue-X clear button — we render our own. */
.alts-fs-input::-webkit-search-cancel-button,
.alts-fs-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Custom clear X — mirrors Mothership's .alts-guide__search-clear. Hidden
   by default; visible only when the input has a value (CSS :has() check
   matches modern browsers; the JS toggles a parent class as a defensive
   fallback for older browsers). */
.alts-fs-clear {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: 600 14px/1 sans-serif;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.alts-fs-clear:hover {
  background: rgba(191, 255, 0, 0.35);
  color: #000;
}
.alts-fs-input-wrap:has(.alts-fs-input:not(:placeholder-shown)) .alts-fs-clear,
.alts-fs-input-wrap.has-value .alts-fs-clear {
  display: inline-flex;
}

/* Close — chip-style × matching .alts-guide__xclose recipe exactly:
   44px round glass chip with backdrop blur, 1px white-18% border,
   22px glyph. Hover rotates 90° + flips to lime border + lime glyph.
   Was a bare floating × at 32px which felt too plain next to the new
   liquid-glass modal. */
.alts-fs-close {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(10, 11, 10, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.25s ease;
}
.alts-fs-close > span {
  display: block;
  line-height: 1;
  transform: translateY(-1px);   /* optical-center the × glyph */
}
.alts-fs-close:hover,
.alts-fs-close:focus-visible {
  background: rgba(191, 255, 0, 0.18);
  border-color: var(--alts-accent, #bbff00);
  color: var(--alts-accent, #bbff00);
  transform: scale(1.08) rotate(90deg);
  outline: none;
}

/* ----- Body / scroll viewport ----- */
.alts-fs-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 30px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.alts-fs-body::-webkit-scrollbar { width: 8px; }
.alts-fs-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

/* No-results state */
.alts-fs-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
  padding: 60px 20px;
  font: 400 16px/1.5 Inter, system-ui, sans-serif;
}
.alts-fs-empty em {
  color: var(--alts-accent, #bbff00);
  font-style: normal;
}

/* Skeleton (loading pulse) — v0.9 mirror real result layout */
.alts-fs-skel-shimmer {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: alts-fs-shimmer 1.4s ease-in-out infinite;
}
@keyframes alts-fs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Legacy class kept in case anything still emits it; harmless if unused. */
.alts-fs-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.alts-fs-skel-tile {
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  border-radius: 12px;
  animation: alts-fs-shimmer 1.4s ease-in-out infinite;
}

/* ----- Top hit hero -----
   Mirror Mothership .alts-guide__search-hero layout: full-bleed image,
   text + actions stacked bottom-left, no top-right play orb (the orb
   was getting plowed into by long titles/subtitles and lived outside
   the hero-body which made it feel disconnected). PLAY pill sits
   inline with the rest of the title stack — same affordance as
   Mothership search, same Inter→Montserrat typography. */
.alts-fs-hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000 center / cover no-repeat;
  margin-bottom: 22px;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
}
.alts-fs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 11, 10, 0.20) 0%,
      rgba(10, 11, 10, 0.40) 45%,
      rgba(10, 11, 10, 0.92) 100%),
    linear-gradient(90deg,
      rgba(10, 11, 10, 0.65) 0%,
      rgba(10, 11, 10, 0.20) 55%,
      rgba(10, 11, 10, 0)    100%);
  z-index: 1;
}
.alts-fs-hero-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 28px 32px;
  gap: 8px;
  max-width: 80%;
}
.alts-fs-hero-eyebrow {
  font: 700 11px/1 Montserrat, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(191, 255, 0, 0.95);
}
.alts-fs-hero-title {
  font: 900 clamp(28px, 3.6vw, 48px)/0.95 Montserrat, sans-serif;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
}
.alts-fs-hero-subtitle {
  color: rgba(255, 255, 255, 0.82);
  font: 500 14px/1.3 Montserrat, sans-serif;
  letter-spacing: 0.01em;
}
/* Meta as pill chips (matching .alts-guide__search-hero-meta span). */
.alts-fs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.alts-fs-hero-meta span {
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font: 500 11px/1 Montserrat, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
/* Play affordance — pill button at bottom-left of stack, white text-on-bg
   that flips to lime on hover. Same recipe as .alts-guide__search-hero-play. */
.alts-fs-hero-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 22px;
  background: #fff;
  color: #000;
  border-radius: 999px;
  font: 700 13px/1 Montserrat, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease;
}
.alts-fs-hero:hover .alts-fs-hero-play {
  background: var(--alts-accent, #bbff00);
  transform: translateX(2px);
}

/* ----- Section header ----- */
.alts-fs-section {
  margin-bottom: 28px;
}
.alts-fs-section:last-child {
  margin-bottom: 0;
}
.alts-fs-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.alts-fs-section-title {
  /* v0.3 — match Mothership search-group title eyebrow exactly:
     small uppercase Montserrat with wide tracking + a lime accent
     icon. Reads as a label-eyebrow, not a body header. Same recipe
     applied across the site so search feels like a peer surface. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 11px/1 Montserrat, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
.alts-fs-section-title i {
  color: var(--alts-accent, #bbff00);
  font-size: 12px;
  opacity: 0.95;
}
.alts-fs-section-count {
  font: 600 11px/1 "IBM Plex Mono", Menlo, monospace;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42);
}

.alts-fs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.alts-fs-grid--search {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.alts-fs-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform 0.18s ease, border-color 0.18s ease,
              background 0.18s ease, box-shadow 0.18s ease;
}
.alts-fs-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(191, 255, 0, 0.32);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.6);
}
.alts-fs-tile-thumb {
  position: relative;       /* contain the play orb */
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000 center / cover no-repeat;
  overflow: hidden;
}
/* v0.7 — Play orb matches Mothership .alts-guide__mship-tax-tile-play
   exactly: 48px round, lime 0.95 alpha, dark text, scale 0.9→1.0 on
   hover. Was a unicode ▶ glyph at 52px which rendered visibly smaller
   than the FA icon used elsewhere. Now uses the FA solid play icon
   via an injected ::after with content "\f04b" so we don't need to
   add a real <i> in the JS-rendered markup. */
.alts-fs-tile-thumb::after {
  content: "\f04b";
  font-family: "Font Awesome 6 Free", "FontAwesome", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(191, 255, 0, 0.95);
  color: #0a0d12;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.alts-fs-tile:hover .alts-fs-tile-thumb::after {
  opacity: 1;
  transform: scale(1);
}
.alts-fs-tile-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alts-fs-tile-title {
  /* v0.3 — match Mothership .alts-guide__mship-tax-tile-songname:
     Inter Bold 16px tight tracking. Cleaner than the previous 14px;
     reads like a magazine credit instead of UI chrome. */
  font: 700 16px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.alts-fs-tile-meta {
  /* v0.3 — Inter, not Plex Mono. Matches Mothership tile meta. */
  font: 400 12px/1.3 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.7);
  text-transform: none;
  margin-top: 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.alts-fs-tile-meta-icon {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  margin-right: 2px;
}
.alts-fs-tile-meta-sep {
  margin: 0 6px;
  opacity: 0.5;
}

/* ----- Pills (genre / decade / year) ----- */
.alts-fs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.alts-fs-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font: 500 13px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease;
}
.alts-fs-pill:hover {
  background: rgba(191, 255, 0, 0.15);
  border-color: var(--alts-accent, #bbff00);
  color: var(--alts-accent, #bbff00);
  transform: translateY(-1px);
}
/* Count chip — separate visual element with its own background so it
   reads cleanly on both the rest and hover states. Was getting
   washed out at hover because the lime tint behind it didn't have
   enough contrast against the white-45% text. Now: small dark pill
   nested inside the parent pill, white-on-dark always. */
.alts-fs-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font: 600 10px/1 "IBM Plex Mono", Menlo, monospace;
  letter-spacing: 0.04em;
}
.alts-fs-pill:hover .alts-fs-pill-count {
  background: rgba(0, 0, 0, 0.65);
  color: var(--alts-accent, #bbff00);
}

/* ----- Artist / director rectangular tiles (mirror Mothership) -----
   4:5 portrait card with full-bleed background image, vertical gradient
   from transparent → black at the bottom, name + count overlaid in the
   bottom-left corner. Same visual recipe as .alts-guide__artist-tile in
   the Mothership search dropdown. */
.alts-fs-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.alts-fs-person {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #000 center / cover no-repeat;
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.alts-fs-person:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.6);
}
.alts-fs-person-bg {
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: 0;
  transition: transform 0.5s ease, filter 0.4s ease;
}
.alts-fs-person:hover .alts-fs-person-bg {
  transform: scale(1.05);
}
.alts-fs-person::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 11, 10, 0)   0%,
    rgba(10, 11, 10, 0.05) 45%,
    rgba(10, 11, 10, 0.65) 75%,
    rgba(10, 11, 10, 0.95) 100%);
  z-index: 1;
}
.alts-fs-person-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 14px;
}
.alts-fs-person-name {
  font: 700 15px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.alts-fs-person-count {
  margin-top: 4px;
  font: 500 10px/1 "IBM Plex Mono", Menlo, monospace;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* v0.4 / v0.7 — Director tile is a CINEMA POSTER, not an artist
   portrait. Recipe lifted from Mothership's .alts-guide__director-
   tile-* rules: heavy 48px blur on the background so the face reads
   as a color wash; 8% black letterbox bars top + bottom; centered
   body with "DIRECTED BY" eyebrow in lime mono-spaced Montserrat
   above the director's name in big Montserrat 800. The name does
   the identification work — the blurred photo just provides color
   atmosphere. */
.alts-fs-person-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 9px/1 Montserrat, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(191, 255, 0, 0.9);
  margin-bottom: 8px;
}
.alts-fs-person-eyebrow i { font-size: 10px; opacity: 0.95; }

.alts-fs-person--director {
  /* v0.10 — 21:9 cinematic banner aspect overrides the artist tile's
     4:5 portrait. Was making director "portraits" that didn't match
     the Mothership recipe. Reference: .alts-guide__director-tile in
     guide.css uses aspect-ratio: 21 / 9. */
  aspect-ratio: 21 / 9;
  isolation: isolate;
}
/* Directors grid: wider columns to host the banner without squashing.
   Reference: search-group:has(director-tile-wrap) grid uses
   minmax(360px, 420px). We open the max to 1fr because in a 2-col
   modal grid we want directors to spread, not stay capped. */
.alts-fs-people:has(.alts-fs-person--director),
.alts-fs-people--director {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.alts-fs-person--director::before {
  /* Blurred background image — uses currentBackground inherited from
     the host. We can't reference the host's background-image directly
     in a pseudo, so we paint a uniform dark layer + rely on the host's
     own bg showing through. Easiest path: re-apply the bg on the
     pseudo via JS-set CSS var. Done in renderHealth.peopleGridHtml
     via --director-bg. Falls back to a dark color if missing. */
  content: "";
  position: absolute;
  inset: -8%;
  background-image: var(--director-bg, none);
  background-size: cover;
  background-position: center;
  filter: brightness(0.58) contrast(1.05) saturate(1.15) blur(40px);
  transform: scale(1.04);
  transition: filter 0.35s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1);
  z-index: 0;
}
.alts-fs-person--director:hover::before {
  filter: brightness(0.74) contrast(1.10) saturate(1.20) blur(32px);
  transform: scale(1.07);
}
/* Cinematic letterbox bars — 8% black strips at top and bottom. */
.alts-fs-person--director::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      #000 0%, #000 8%,
      transparent 8%, transparent 92%,
      #000 92%, #000 100%);
}
.alts-fs-person--director .alts-fs-person-body {
  /* Body is centered between the letterbox bars. Inset 8% from top/
     bottom matches the bar height so text never sits ON the bar. */
  inset: 8% 0;
  padding: 16px 18px;
  z-index: 2;
  justify-content: center;
}
.alts-fs-person--director .alts-fs-person-body {
  display: flex;
  flex-direction: column;
}
.alts-fs-person--director .alts-fs-person-name {
  /* Bigger + bolder than artist tiles — this is the headline. */
  font: 800 clamp(18px, 2vw, 26px)/1.05 Montserrat, sans-serif;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  -webkit-line-clamp: 2;
}
.alts-fs-person--director .alts-fs-person-count {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

/* ----- Highlight matched query -----
   <mark> renders as a lime-tinted chip around the matched substring.
   Used in titles + names + pill labels in the active-search state. */
.alts-fs-hl,
mark.alts-fs-hl {
  background: rgba(191, 255, 0, 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 3px;
  font-style: normal;
  font-weight: inherit;
}

/* ----- Recent search chips (v0.11) ----- */
.alts-fs-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-radius: 999px;
  font: 500 13px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease;
}
.alts-fs-recent-chip:hover {
  background: rgba(191, 255, 0, 0.15);
  border-color: var(--alts-accent, #bbff00);
  color: var(--alts-accent, #bbff00);
  transform: translateY(-1px);
}
.alts-fs-recent-text {
  padding: 8px 4px 8px 14px;
  /* Recent queries are user-input text; keep them legible at the
     same body weight as result names. */
}
.alts-fs-recent-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  line-height: 1;
}
.alts-fs-recent-chip:hover .alts-fs-recent-remove {
  color: rgba(0, 0, 0, 0.6);
}
.alts-fs-recent-remove:hover {
  color: #fff !important;
  background: rgba(220, 50, 50, 0.6);
}

/* ----- Now Playing badge on tiles (v0.13) -----
   Mirrors .alts-guide__mship-tax-tile-now exactly: top-left chip
   with an animated 3-bar EQ + lime "Playing" label. Shows on a
   search-result tile when its URL pathname matches the currently-
   playing video's pathname. Keeps the user oriented when a search
   result IS the song they're listening to. */
.alts-fs-tile-now {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(10, 11, 10, 0.75);
  border: 1px solid rgba(191, 255, 0, 0.5);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 3px rgba(191, 255, 0, 0.16),
              0 6px 18px rgba(191, 255, 0, 0.28);
  z-index: 3;
}
.alts-fs-tile-now-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.alts-fs-tile-now-eq span {
  display: inline-block;
  width: 2px;
  background: var(--alts-accent, #bbff00);
  border-radius: 1px;
  animation: alts-fs-now-eq 0.9s ease-in-out infinite;
}
.alts-fs-tile-now-eq span:nth-child(1) { height: 60%;  animation-delay: 0s; }
.alts-fs-tile-now-eq span:nth-child(2) { height: 100%; animation-delay: -0.3s; }
.alts-fs-tile-now-eq span:nth-child(3) { height: 75%;  animation-delay: -0.6s; }
@keyframes alts-fs-now-eq {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1); }
}
.alts-fs-tile-now-label {
  font: 500 10px/1 "IBM Plex Mono", Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alts-accent, #bbff00);
}
@media (prefers-reduced-motion: reduce) {
  .alts-fs-tile-now-eq span { animation: none !important; }
}

/* ----- Load More button (v0.15) -----
   Sits below paginated grids (artists / videos / directors). Shows
   only when there are more rows on the server than currently visible.
   Click bumps the per-kind visible count by its chunk and re-renders
   from the cached payload (no re-fetch). */
.alts-fs-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.alts-fs-load-more {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  padding: 10px 22px;
  border-radius: 999px;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.15s ease;
}
.alts-fs-load-more:hover {
  background: rgba(191, 255, 0, 0.15);
  border-color: var(--alts-accent, #bbff00);
  color: var(--alts-accent, #bbff00);
  transform: translateY(-1px);
}
.alts-fs-load-more-count {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  font: 600 10px/1 "IBM Plex Mono", Menlo, monospace;
  letter-spacing: 0.04em;
}
.alts-fs-load-more:hover .alts-fs-load-more-count {
  color: var(--alts-accent, #bbff00);
}

/* ----- Keyboard-nav focus ring (v0.11) -----
   Up/down keys move .alts-fs-nav-active through visible <a>s; the
   ring makes the current selection obvious. Distinct from the
   browser's focus ring so it's clear it came from keyboard nav. */
.alts-fs-nav-active {
  outline: 2px solid var(--alts-accent, #bbff00);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ----- Mobile ----- */
@media (max-width: 720px) {
  .alts-fs-overlay {
    padding: 16px;   /* symmetric on mobile too */
  }
  .alts-fs-modal {
    border-radius: 12px;
    max-height: calc(100vh - 100px);
    width: 100%;          /* on mobile, ditch 60vw and use full width */
  }
  .alts-fs-header {
    padding: 16px 14px 12px;
  }
  .alts-fs-body {
    padding: 16px;
  }
  .alts-fs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .alts-fs-people {
    grid-template-columns: repeat(2, 1fr);
  }
  .alts-fs-hero {
    aspect-ratio: 16 / 10;
  }
  .alts-fs-hero-title {
    font-size: 22px;
  }
  .alts-fs-hero-play {
    width: 48px;
    height: 48px;
    right: 16px;
    font-size: 16px;
  }
}