/* wire-video-page-scroll-locked-rails-channel-flattening-303f1h9178a */

/*
 * h9178 correctly identified that the rails should not move, but implemented
 * that with a nested center overflow scroller. h9178a changes the ownership:
 *
 *   document/browser = the one vertical page scroller
 *   left rail        = fixed
 *   center content   = normal document flow
 *   right rail       = fixed
 *
 * This removes the "page inside a frame" effect.
 */
@media(min-width:761px){

  /* Undo h9178's document lock. */
  html.wire-video-center-scroll-303f1h9178,
  body.wire-video-center-scroll-303f1h9178,
  html.wire-video-studio-center-scroll-303f1h9178,
  body.wire-video-studio-center-scroll-303f1h9178{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }

  body.wire-video-center-scroll-303f1h9178
  .wire-app,
  body.wire-video-center-scroll-303f1h9178
  .wire-app>.content-column,
  body.wire-video-studio-center-scroll-303f1h9178
  .wire-app,
  body.wire-video-studio-center-scroll-303f1h9178
  .wire-app>.content-column{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /*
   * PUBLIC VIDEO SHELL
   * The shell remains the 3-column owner, but its height follows the center
   * content. The document is therefore the vertical scroller.
   */
  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-shell-303e5r:not(
    .wire-creator-studio-specialist-shell-303f1h455
  ){
    height:auto!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:none!important;

    grid-template-rows:
      76px
      auto!important;

    overflow:visible!important;
    overscroll-behavior:auto!important;
  }

  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-shell-303e5r:not(
    .wire-creator-studio-specialist-shell-303f1h455
  )
  >.wire-video-persistent-topbar-303e5r{
    position:sticky!important;
    top:0!important;
    z-index:100!important;
    grid-row:1!important;
  }

  /*
   * h425 already owns the fixed universal left rail. Keep it exactly that way.
   * Its middle navigation can still scroll internally; its account card stays
   * pinned outside that nav scroller.
   */
  body.wire-video-center-scroll-303f1h9178
  aside.wire-video-universal-sidebar-303f1h425{
    position:fixed!important;
    bottom:0!important;
    overflow:hidden!important;
    overscroll-behavior:contain!important;
  }

  body.wire-video-center-scroll-303f1h9178
  aside.wire-video-universal-sidebar-303f1h425
  .wire-video-universal-scroll-303f1h425{
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  /*
   * Center goes back to normal flow. No height:100%, no overflow-y:auto, no
   * nested scrollbar. This is the critical h9178a correction.
   */
  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-shell-303e5r:not(
    .wire-creator-studio-specialist-shell-303f1h455
  )
  >.wire-video-persistent-main-303e5r{
    display:block!important;

    grid-column:2!important;
    grid-row:2!important;

    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;

    overflow:visible!important;
    overscroll-behavior:auto!important;
  }

  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-shell-303e5r:not(
    .wire-creator-studio-specialist-shell-303f1h455
  )
  >.wire-video-persistent-main-303e5r
  >.wire-video-inline-stage-303e5r{
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-shell-303e5r:not(
    .wire-creator-studio-specialist-shell-303f1h455
  )
  >.wire-video-persistent-main-303e5r
  >.wire-video-persistent-content-303e5r{
    box-sizing:border-box!important;

    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;

    overflow-x:hidden!important;
    overflow-y:visible!important;
    overscroll-behavior:auto!important;

    scrollbar-gutter:auto!important;
  }

  /*
   * Right rail: locked to the viewport, while the grid still reserves column 3
   * for it. If its own content is taller than the viewport it scrolls internally.
   */
  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-shell-303e5r:not(
    .wire-creator-studio-specialist-shell-303f1h455
  )
  >.wire-video-persistent-right-303e5r{
    position:fixed!important;
    z-index:82!important;

    top:var(
      --wire-video-sidebar-top-303f1h427,
      76px
    )!important;

    right:0!important;
    bottom:0!important;
    left:auto!important;

    box-sizing:border-box!important;
    width:320px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    margin:0!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
  }

  /*
   * CHANNEL PAGES
   * Native and mirrored channels use the h451 creator-channel presentation.
   * Its max-width:1440px + margin:auto was correct when it was a free-standing
   * page, but inside the Video shell it creates a second framed layer.
   *
   * Flatten it into the middle column. The public shell provides the outer
   * column spacing, and the page/browser remains the only vertical scroll.
   */
  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-content-303e5r
  >.wire-creator-channel-303f1h451:not(
    .wire-channel-studio-preview-303f1h459
  ){
    display:grid!important;

    box-sizing:border-box!important;

    width:100%!important;
    max-width:none!important;
    min-width:0!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    margin:0!important;
    padding:0 0 72px!important;

    overflow:visible!important;
    overscroll-behavior:auto!important;
  }

  /*
   * Tabs were authored for normal page scrolling with a 76px sticky Video
   * topbar. h9178's nested scroller made that offset incorrect. With document
   * scrolling restored, use the original sticky relationship explicitly.
   */
  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-content-303e5r
  >.wire-creator-channel-303f1h451:not(
    .wire-channel-studio-preview-303f1h459
  )
  .wire-channel-tabs-303f1h451{
    position:sticky!important;
    top:76px!important;
    z-index:45!important;
  }

  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-content-303e5r
  >.wire-creator-channel-303f1h451:not(
    .wire-channel-studio-preview-303f1h459
  )
  .wire-channel-panel-303f1h451,
  body.wire-video-center-scroll-303f1h9178
  .wire-video-persistent-content-303e5r
  >.wire-creator-channel-303f1h451:not(
    .wire-channel-studio-preview-303f1h459
  )
  .wire-channel-section-303f1h451{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:visible!important;
  }

  /*
   * FEATURED/YOUTUBE CHANNEL ROUTE
   * h9161a already uses the exact h451 shell. Do not create a special frame for
   * it; simply let the common rule above own width and scroll.
   */
  body.wire-video-center-scroll-303f1h9178
  [data-wire-featured-channel-page-303f1h9161]{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /*
   * CREATOR STUDIO
   * h9177's left/right rails were already designed to be sticky. Undo h9178's
   * body/workspace lock and return the center Studio workspace to page flow.
   * Thus the browser scrollbar moves the center, while left/right remain sticky.
   */
  body.wire-video-studio-center-scroll-303f1h9178
  .wire-video-persistent-shell-303e5r.wire-creator-studio-specialist-shell-303f1h455{
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;

    overflow:visible!important;
    overscroll-behavior:auto!important;
  }

  body.wire-video-studio-center-scroll-303f1h9178
  .wire-video-persistent-shell-303e5r.wire-creator-studio-specialist-shell-303f1h455
  >.wire-video-persistent-main-303e5r,
  body.wire-video-studio-center-scroll-303f1h9178
  .wire-video-persistent-shell-303e5r.wire-creator-studio-specialist-shell-303f1h455
  >.wire-video-persistent-main-303e5r
  >.wire-video-persistent-content-303e5r,
  body.wire-video-studio-center-scroll-303f1h9178
  .wire-creator-studio-shell-303f1h454,
  body.wire-video-studio-center-scroll-303f1h9178
  .wire-creator-studio-frame-303f1h454{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    overflow:visible!important;
    overscroll-behavior:auto!important;
  }

  body.wire-video-studio-center-scroll-303f1h9178
  .wire-creator-studio-workspace-303f1h454{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    overflow-x:hidden!important;
    overflow-y:visible!important;
    overscroll-behavior:auto!important;

    scrollbar-gutter:auto!important;
  }

  body.wire-video-studio-center-scroll-303f1h9178
  .wire-creator-studio-sidebar-303f1h454{
    position:sticky!important;
    top:18px!important;
    align-self:start!important;

    height:calc(100vh - 36px)!important;
    height:calc(100dvh - 36px)!important;
    max-height:calc(100dvh - 36px)!important;

    overflow:hidden!important;
  }

  body.wire-video-studio-center-scroll-303f1h9178
  .wire-creator-studio-right-303f1h9177{
    position:sticky!important;
    top:18px!important;
    align-self:start!important;

    height:calc(100vh - 36px)!important;
    height:calc(100dvh - 36px)!important;
    max-height:calc(100dvh - 36px)!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
}

/*
 * Preserve existing mobile behavior. Mobile remains a normal document-scrolling
 * page with Video drawers/bottom navigation.
 */
@media(max-width:760px){
  .wire-video-persistent-content-303e5r
  >.wire-creator-channel-303f1h451{
    width:100%!important;
    max-width:none!important;
  }
}