/* The app owns its inner scrollers. Reaching their edges must not rubber-band
   the document (including the floating navigation) or start pull-to-refresh. */
html, body.kinelaro-hosted {
    overscroll-behavior: none;
}
body.kinelaro-hosted.kinelaro-touch-ui .scroll:not(.scroll--horizontal),
body.kinelaro-hosted.kinelaro-touch-ui .kinelaro-social-scroll,
body.kinelaro-hosted.kinelaro-touch-ui .kinelaro-friends-scroll,
body.kinelaro-hosted.kinelaro-touch-ui .kinelaro-friends-panel__body,
body.kinelaro-hosted.kinelaro-touch-ui .kinelaro-appearance-page__scroll,
body.kinelaro-hosted.kinelaro-touch-ui .kinelaro-leaderboards-scroll,
body.kinelaro-hosted.kinelaro-touch-ui .kinelaro-watch-clubs-scroll,
body.kinelaro-hosted.kinelaro-touch-ui .ks-dialog-body,
body.kinelaro-hosted.kinelaro-touch-ui .ks-dialog-footer,
body.kinelaro-hosted.kinelaro-touch-ui .ks-room-people-list,
body.kinelaro-hosted.kinelaro-touch-ui .ks-room-invitations,
body.kinelaro-hosted.kinelaro-touch-ui .kf-dialog,
body.kinelaro-hosted.kinelaro-touch-ui .kc-invite-friends,
body.kinelaro-hosted.kinelaro-touch-ui .kinelaro-frame-dialog,
body.kinelaro-hosted.kinelaro-touch-ui .playlist-panel-body,
body.kinelaro-hosted.kinelaro-touch-ui .kn-notice-body,
body.kinelaro-hosted.kinelaro-touch-ui .modal__body,
body.kinelaro-hosted.kinelaro-touch-ui .navigation-bar__body,
body.kinelaro-hosted.kinelaro-touch-ui .kr-stage {
    overscroll-behavior-y: none !important;
}
/* A vertical swipe over a carousel must still reach the page underneath it. */
body.kinelaro-hosted.kinelaro-touch-ui .scroll--horizontal,
body.kinelaro-hosted.kinelaro-touch-ui .kinelaro-source-carousel__viewport {
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: auto !important;
}

/* Safari uses the visible viewport; safe areas belong to controls, not video. */
html.kinelaro-ios-web {
    height: 100%;
    min-height: 100%;
    background: #070707;
    --kinelaro-safe-top: env(safe-area-inset-top, 0rem);
    --kinelaro-safe-right: env(safe-area-inset-right, 0rem);
    --kinelaro-safe-bottom: env(safe-area-inset-bottom, 0rem);
    --kinelaro-safe-left: env(safe-area-inset-left, 0rem);
    -webkit-text-size-adjust: 100%;
}
/* A fixed body can leave WebKit's touch viewport at its keyboard offset. */
html.kinelaro-ios-web body {
    position: absolute !important;
    height: var(--kinelaro-web-height, 100%) !important;
}
html.kinelaro-ios-web body.kinelaro-hosted .player.player {
    height: var(--kinelaro-web-height, 100%) !important;
}
html.kinelaro-ios-web body.kinelaro-hosted .head {
    box-sizing: border-box;
    height: auto !important;
    padding-top: var(--kinelaro-safe-top);
    padding-left: var(--kinelaro-safe-left);
    padding-right: var(--kinelaro-safe-right);
    background-color: #070707;
}
/* Standalone WebKit's fixed-position viewport can end above the app canvas.
   Anchor navigation to the same measured body canvas as the player instead. */
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted.kinelaro-mobile-page-nav:not(.kinelaro-side-navigation) .navigation-bar.kinelaro-mobile-navigation {
    position: absolute !important;
    overflow: visible !important;
    bottom: max(.35rem, var(--kinelaro-safe-bottom)) !important;
    padding: .25rem .5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted.kinelaro-mobile-page-nav:not(.kinelaro-side-navigation) .navigation-bar__body {
    height: 3.2rem !important;
    padding: .0625rem .3rem !important;
    overflow: hidden !important;
}
html.kinelaro-ios-web.kinelaro-pwa {
    --kinelaro-rail-safe-left: var(--kinelaro-safe-left);
    --kinelaro-rail-safe-right: var(--kinelaro-safe-right);
}
/* Landscape rails share the header's usable edges instead of adding a
   second safe-area offset to the navigation buttons. */
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .navigation-bar.kinelaro-mobile-navigation {
    right: max(.5rem, var(--kinelaro-safe-right)) !important;
    bottom: max(.35rem, var(--kinelaro-safe-bottom)) !important;
    background: transparent !important;
}
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted.kinelaro-hosted.kinelaro-tablet-ui .wrap__left,
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted.kinelaro-hosted.menu--open .wrap__left {
    left: calc(.4rem + var(--kinelaro-safe-left)) !important;
    max-width: calc(100vw - var(--kinelaro-safe-left) - var(--kinelaro-safe-right) - .8rem) !important;
}
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted.kinelaro-tablet-ui .activity {
    padding-left: calc(var(--kinelaro-tablet-rail-space, 5rem) + var(--kinelaro-safe-left)) !important;
}
/* Match the profile hit target to the adjacent header icons on iOS. */
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-touch-ui .head__actions .kinelaro-header-profile {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 max(2.75rem, 3.15em) !important;
    width: max(2.75rem, 3.15em) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: max(2.75rem, 3.15em) !important;
    min-height: 0 !important;
    padding: .3em !important;
    gap: 0 !important;
}
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-touch-ui .head__actions .kinelaro-header-profile__name {
    display: none !important;
}
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-touch-ui .head__actions .kinelaro-header-profile__avatar {
    margin: 0 !important;
}
/* The menu lives inside the padded header; the brand is positioned outside it. */
html.kinelaro-ios-web body.kinelaro-hosted .kinelaro-host-brand {
    margin-left: var(--kinelaro-safe-left) !important;
}
html.kinelaro-ios-web body.kinelaro-hosted .player.player .player-video__video,
html.kinelaro-ios-web body.kinelaro-hosted .player.player .player-video__overlay {
    position: absolute;
}
html.kinelaro-ios-web body.kinelaro-hosted .player.player .player-panel {
    position: absolute !important;
}
html.kinelaro-ios-web body.kinelaro-hosted .player.player .player-panel__header {
    top: max(calc(var(--kinelaro-player-unit, 1rem) * .6), var(--kinelaro-safe-top));
    left: max(calc(var(--kinelaro-player-edge) - var(--kinelaro-player-back-outset)), var(--kinelaro-safe-left));
    right: max(var(--kinelaro-player-edge), var(--kinelaro-safe-right));
}
html.kinelaro-ios-web body.kinelaro-hosted .player.player .player-panel__footer {
    left: max(var(--kinelaro-player-edge), var(--kinelaro-safe-left));
    right: max(var(--kinelaro-player-edge), var(--kinelaro-safe-right));
    bottom: max(calc(var(--kinelaro-player-unit, 1rem) * .2), var(--kinelaro-safe-bottom));
}
html.kinelaro-ios-web body.kinelaro-hosted .kinelaro-playback-preparing__back {
    top: calc(var(--kinelaro-player-unit, 1rem) * 1.2 + var(--kinelaro-safe-top));
    margin-left: var(--kinelaro-safe-left);
}
.kinelaro-pwa-install { font-size: 1rem; line-height: 1.5; color: #c7c7ce; }
.kinelaro-pwa-install__icon { display: block; width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: .8rem; }
.kinelaro-pwa-install p { margin: 0 0 1rem; }
.kinelaro-pwa-install ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.kinelaro-pwa-install li + li { margin-top: .6rem; }
.kinelaro-pwa-install b { color: #fff; }
.kinelaro-pwa-install__button { display: block; min-height: 2.75rem; margin: 1.25rem auto 0; padding: .65rem 1.25rem; border: .0625rem solid #72727c; border-radius: .55rem; background: #2a2a30; color: #fff; font: inherit; cursor: pointer; }
.kinelaro-pwa-install__button.focus, .kinelaro-pwa-install__button:focus-visible { outline: .125rem solid #fff; outline-offset: .15rem; }
body.kinelaro-hosted .modal.modal--kinelaro-pwa {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: calc(1rem + var(--kinelaro-safe-top, 0rem)) calc(1rem + var(--kinelaro-safe-right, 0rem)) calc(1rem + var(--kinelaro-safe-bottom, 0rem)) calc(1rem + var(--kinelaro-safe-left, 0rem));
    background: #000b;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.kinelaro-hosted .modal.modal--kinelaro-pwa .modal__content {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 30rem !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: .0625rem solid #494950;
    border-radius: .9rem !important;
    background: #111114 !important;
}
body.kinelaro-hosted .modal.modal--kinelaro-pwa .modal__head {
    position: relative;
    flex: 0 0 auto;
    min-height: 4rem;
    margin: 0;
    padding: 1.2rem 4rem 1.2rem 1.25rem;
    border-bottom: .0625rem solid #35353d;
}
body.kinelaro-hosted .modal.modal--kinelaro-pwa .modal__title { font-size: 1.2rem !important; line-height: 1.3; }
body.kinelaro-hosted .modal.modal--kinelaro-pwa .modal__close-button {
    top: .7rem !important;
    right: .7rem !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: .65rem !important;
    transform: none !important;
    border: .0625rem solid #74747c !important;
    border-radius: 50%;
    background: #222227;
}
body.kinelaro-hosted .modal.modal--kinelaro-pwa .modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1.25rem; }
body.kinelaro-hosted .modal.modal--kinelaro-pwa .scroll__content { max-height: none !important; padding: 0 !important; }

/* Rotated carousels retain off-screen cards until their next layout pass.
   Clip those horizontal bounds at the app canvas so WebKit cannot expand its
   layout viewport and zoom the PWA out on the return to portrait. */
html.kinelaro-ios-web.kinelaro-pwa {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}
@supports (height: clamp(3rem, 8vh, 3.4rem)) {
    html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted.kinelaro-mobile-page-nav:not(.kinelaro-side-navigation) .navigation-bar__body {
        height: clamp(3rem, 8vh, 3.4rem) !important;
    }
}
/* Only the rounded controls have a surface. The floating wrapper and the
   safe-area gap stay transparent and let touches reach the content below. */
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted .navigation-bar.kinelaro-mobile-navigation {
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted .navigation-bar.kinelaro-mobile-navigation::before,
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted .navigation-bar.kinelaro-mobile-navigation::after {
    content: none !important;
    display: none !important;
}
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted .navigation-bar__body {
    pointer-events: auto !important;
}

/* Source lists use the measured installed-app canvas, not Safari's larger vh.
   Their final item must clear the floating controls, including the raised gap. */
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted.kinelaro-hosted.kinelaro-theme .activity.kinelaro-source-cards .explorer {
    height: calc(var(--kinelaro-web-height, 100vh) - var(--kinelaro-header-height, 4rem) - var(--kinelaro-navigation-footer-space, 0rem)) !important;
}
html.kinelaro-ios-web.kinelaro-pwa body.kinelaro-hosted.kinelaro-hosted.kinelaro-theme .activity.kinelaro-source-cards .explorer__files-body > .scroll > .scroll__content {
    padding-bottom: max(.75rem, var(--kinelaro-source-footer-clearance, 0rem)) !important;
}

/* The header body already starts after the camera inset. Its menu uses local
   coordinates, while the fixed wordmark uses viewport coordinates. */
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-hosted.kinelaro-theme.kinelaro-theme.kinelaro-touch-ui .head .kinelaro-mobile-menu-toggle {
    left: .75rem !important;
}
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-hosted.kinelaro-theme.kinelaro-theme.kinelaro-touch-ui .kinelaro-host-brand {
    left: calc(var(--kinelaro-safe-left) + 4rem) !important;
    margin-left: 0 !important;
}
/* Landscape phones have no permanent left rail. Reserve the camera inset
   once at the activity boundary and the measured right controls separately. */
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-hosted.kinelaro-hosted.kinelaro-theme.kinelaro-side-navigation .activity.activity {
    box-sizing: border-box !important;
    left: 0 !important;
    width: 100% !important;
    padding-left: var(--kinelaro-safe-left) !important;
    padding-right: var(--kinelaro-navigation-side-space, 4.5rem) !important;
    min-width: 0 !important;
}
@media (orientation: landscape) and (max-height: 30rem) {
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .kinelaro-full {
        --kinelaro-landscape-cover-height: clamp(10rem, calc(var(--kinelaro-web-height, 100vh) - var(--kinelaro-header-height, 4rem) - 3rem - var(--kinelaro-safe-bottom)), 16rem);
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new {
        margin-bottom: 1.25rem !important;
        padding-top: .5rem !important;
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new__body {
        display: flex !important;
        align-items: flex-start !important;
        min-height: 0 !important;
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new__left {
        flex: 0 0 auto !important;
        width: calc(var(--kinelaro-landscape-cover-height) * .666667) !important;
        margin: 0 1.25rem 0 0 !important;
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new__poster {
        height: var(--kinelaro-landscape-cover-height) !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new__right {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new__title {
        font-size: clamp(1.6rem, 6vh, 2.25rem) !important;
        line-height: 1.1 !important;
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new__rate-line {
        margin-bottom: .65rem !important;
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new__tagline {
        font-size: 1rem !important;
        margin: .25rem 0 .65rem !important;
    }
}

html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .wrap.wrap,
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .wrap__content.wrap__content {
    width: 100% !important;
}
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start__background {
    position: fixed !important;
    left: 0 !important;
    top: var(--kinelaro-header-height, 4rem) !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(var(--kinelaro-web-height, 100vh) - var(--kinelaro-header-height, 4rem)) !important;
    object-fit: cover !important;
}
@media (orientation: landscape) and (max-height: 30rem) {
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .kinelaro-card-navigation {
        margin-bottom: .4rem !important;
        padding-bottom: .4rem !important;
        min-height: 0 !important;
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new__head {
        margin-bottom: .4rem !important;
    }
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .full-start-new__details {
        margin-bottom: .5rem !important;
    }
}
@media (orientation: landscape) and (max-height: 30rem) {
    html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .kinelaro-full > .scroll > .scroll__content {
        padding-top: .75rem !important;
    }
}

/* The shadow belongs to the full header, including both camera gutters. */
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .head {
    border-bottom: .0625rem solid #ffffff0d !important;
    box-shadow: 0 .8em 2em #0008 !important;
}
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .head__body {
    border-bottom: 0 !important;
    box-shadow: none !important;
}
/* Keep the wordmark on the same installed-app canvas as the header while
   WebKit changes its fixed-position viewport during rotation. */
html.kinelaro-ios-web body.kinelaro-hosted.kinelaro-side-navigation .kinelaro-host-brand {
    position: absolute !important;
}

/* iPhone reports a symmetric landscape safe area even on the edge opposite
   the camera. Keep the full inset next to the camera, but use a rounded-corner
   gutter on the plain right edge. Content still reserves the measured rail. */
html.kinelaro-ios-web.kinelaro-camera-left body.kinelaro-hosted.kinelaro-side-navigation .navigation-bar.kinelaro-mobile-navigation {
    right: max(.75rem, min(1.25rem, var(--kinelaro-safe-right))) !important;
}