/* LOVBIRD Shorts feed (6 Nov 2026). Full-screen vertical clips, CSS scroll-snap, one clip per screen.
   Phones: the feed fills the screen above the tab bar. Desktop: a 9:16 column under the normal site header. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html, body.shorts-page { height: 100%; background: #000; overscroll-behavior: none; }
body.shorts-page { overflow: hidden; padding-bottom: 0 !important; }
.shorts-page { --sh-bottom: 0px; --sh-top: 0px; }
@media (max-width: 768px) { .shorts-page { --sh-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } .sh-desktop-nav { display: none !important; } }
@media (min-width: 769px) { .shorts-page { --sh-top: var(--nav-h); } }

.sh-feed {
  position: fixed; left: 0; right: 0; top: var(--sh-top); bottom: var(--sh-bottom);
  overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sh-feed::-webkit-scrollbar { display: none; }
.sh-slide {
  position: relative; height: 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; background: #000; contain: strict;
}
@media (min-width: 769px) {
  .sh-slide { width: min(100%, calc((100vh - var(--nav-h)) * 9 / 16)); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
.sh-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.sh-tap { position: absolute; inset: 0; z-index: 1; -webkit-tap-highlight-color: transparent; }
.sh-slide::after { /* legibility: soft dark fade under the info block, nothing over the faces */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.45) 45%, transparent);
}
.sh-slide.is-paused .sh-tap::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
  background: rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") 56% 50% / 34px no-repeat;
}

/* autoplay refused (iPhone Instagram): the still stays up, one clear button */
.sh-play {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 15px;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.sh-play svg { width: 84px; height: 84px; padding: 22px 18px 22px 26px; border-radius: 50%; background: var(--rose); box-shadow: 0 8px 30px rgba(224,51,95,.45); }

/* "Tap to unmute": big, top-centre, away from the burned captions (≈56% height) and the info block */
.sh-unmute {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  top: calc(var(--sh-top) + env(safe-area-inset-top, 0px) + 58px);
  display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: #111; font-weight: 800; font-size: 16px; letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.sh-unmute:focus-visible { outline: 3px solid var(--rose-2); outline-offset: 3px; }

/* right rail: My List · Episodes · Share (labels, no counts) */
.sh-rail { position: absolute; right: 8px; bottom: 168px; z-index: 3; display: flex; flex-direction: column; gap: 16px; }
.sh-act { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; color: #fff; font-size: 11.5px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.sh-act svg { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sh-act.is-on svg { color: var(--rose-2); fill: var(--rose-2); }
.sh-act:focus-visible svg { outline: 2px solid var(--rose-2); }

/* info block: badge + count, title ›, one-line logline, primary button */
.sh-info { position: absolute; left: 14px; right: 82px; bottom: 16px; z-index: 3; }
.sh-meta { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.sh-title { margin: 0; font-family: var(--font-display); font-size: 25px; line-height: 1.12; font-weight: 600; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.sh-title button { display: inline; text-align: left; font: inherit; color: #fff; }
.sh-title svg { display: inline-block; vertical-align: -2px; margin-left: 4px; }
.sh-line { margin: 5px 0 12px; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.88); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sh-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% + 68px); min-height: 48px; font-size: 16px; font-weight: 700; border-radius: 999px; }
@media (max-height: 640px) { .sh-line { display: none; } .sh-rail { bottom: 132px; gap: 10px; } .sh-title { font-size: 21px; } }
.sh-nowrap { white-space: nowrap; }