/* NOVA Web Presentation — Phase 2 visual-parity adapter.
   The visual source of truth remains the original extracted Razor CSS. */
[hidden]{display:none!important}

/* Keep shell chrome identical to the current MAUI/Blazor presentation while the
   page body is swapped underneath it. */
#nova-bottom-nav-host{position:relative;z-index:2147483000}
#nova-bottom-nav-host>nav.oscar-bottom-nav.original-bottom-nav{position:fixed!important}
nav.oscar-bottom-nav.original-bottom-nav .nova-shell-icon.oscar-icon,
nav.oscar-bottom-nav.original-bottom-nav .nova-shell-icon>svg{width:100%!important;height:100%!important;color:inherit!important}

/* The extracted component CSS expects a full home hierarchy, not a catalogue-only
   rail. Phase 2 restores its vertical rhythm and cinematic first paint. */
.target-home-reference>[data-nova-home-content]{display:block;width:100%;overflow:hidden}
.target-home-reference .shahid-section-heading h2>span{display:inline}
.target-home-reference .shahid-view-all{cursor:pointer}
.target-home-reference .scroll-arrow{cursor:pointer}
.nova-web-home-ad-anchor{height:clamp(10px,2vw,20px)}
.nova-web-progressive-slot{min-height:160px;display:grid;place-items:center}
.nova-web-progressive-slot .nova-motion-loader{min-height:160px!important;padding:18px!important}

/* SafeImage stand-in must occupy the same containing boxes as the current Razor
   SafeImage component. */
.shahid-short-card>.nova-safe-web-image,
.shahid-person-card>.nova-safe-web-image,
.shahid-ranked-poster>.nova-safe-web-image,
.shahid-live-poster>.nova-safe-web-image,
.shahid-poster-image>.nova-safe-web-image,
.shahid-landscape-image>.nova-safe-web-image,
.nova-editorial-card>.nova-safe-web-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shahid-person-card{overflow:hidden}
.shahid-person-card>.nova-safe-web-image{position:relative}

/* Details has its own native-like reactive header exactly as the current page. */
.nova-web-page[data-nova-page$="details"]{min-height:100dvh;background:#000}
.nova-web-page[data-nova-page$="details"] .details-standard-header{position:fixed!important;top:0;right:0;left:0;z-index:2147482000}
.nova-web-page[data-nova-page$="details"] .details-page-shell{min-height:100dvh}
.nova-web-page[data-nova-page$="details"] [data-nova-details-content]{min-height:100dvh;background:#000}
.nova-web-page[data-nova-page$="details"] .cinematic-details-hero{opacity:.01;transform:scale(1.006);transition:opacity 260ms cubic-bezier(.18,.82,.22,1),transform 480ms cubic-bezier(.16,.86,.25,1)}
.nova-web-page[data-nova-page$="details"].nova-web-details-content-ready .cinematic-details-hero{opacity:1;transform:none}
.nova-web-page[data-nova-page$="details"] .cinematic-details-backdrop-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;background:#000!important}
.nova-web-page[data-nova-page$="details"] .details-motion-loading{position:fixed;inset:0;z-index:150;background:#000}
.nova-web-page[data-nova-page$="details"].nova-web-details-content-ready .details-motion-loading{display:none!important}
.nova-web-watch-panel-button{margin:28px auto;display:flex!important;width:min(360px,92%);justify-content:center}

/* The same markup is emitted for desktop/mobile like Details.razor; existing media
   queries decide which surface is visible. */
.reference-wide-details-grid>[data-details-panel],
.cinematic-mobile-content>[data-details-mobile-panel]{min-width:0}
.nova-web-cast-strip{display:grid;gap:10px}
.nova-web-cast-strip>span{display:grid;gap:3px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025)}
.nova-web-cast-strip strong{font-size:.84rem}.nova-web-cast-strip small{color:rgba(255,255,255,.48);font-size:.68rem}
.reference-details-list{display:grid;gap:0}
.reference-details-list>div{display:grid;grid-template-columns:minmax(92px,.38fr) 1fr;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.reference-details-list span{color:rgba(255,255,255,.48);font-size:.7rem}.reference-details-list strong{font-size:.78rem;font-weight:750}
.reference-details-description{color:rgba(255,255,255,.66);line-height:1.85;font-size:.79rem;margin:16px 0 0}

/* Episode artwork box in the original component is position based. */
.episode-gallery-collapsed-art{position:relative;overflow:hidden}
.episode-gallery-collapsed-art>.nova-safe-web-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Catalogue pages remain secondary to Home but reuse the existing commercial card
   language. World pages receive only identity accents; no redesign is introduced. */
.nova-web-catalog-shell.anime .nova-web-catalog-heading span{color:#14d7ff}
.nova-web-catalog-shell.wrestling .nova-web-catalog-heading span{color:#f04ad8}
.nova-web-catalog-shell.live .nova-web-catalog-heading span{color:#ff375f}

/* Route motion: NovaMotionLoader remains visible until the detail hero image is
   decoded. The new DOM is revealed only after it is paint-ready. */
.sg-route-frame.sg-route-enter-detail .sg-route-surface{transform-origin:50% 42%}
.sg-route-frame.sg-route-return-from-detail .sg-route-surface{transform-origin:50% 0}

@media(max-width:600px){
  .target-home-reference .shahid-section-heading{padding-inline:12px}
  .nova-world-gateway{margin-inline:10px}
  .home-subscribe-cta{z-index:160}
  .nova-web-page[data-nova-page$="details"] .details-standard-header{padding-top:var(--safe-top,0px)}
}
@media(prefers-reduced-motion:reduce){
  .nova-web-page[data-nova-page$="details"] .cinematic-details-hero{transition:none!important;transform:none!important}
}