/* iPhone / iPad / Android phone. Loaded only by apps/web-player.
   Layout stacking is by viewport. Touch affordances also apply when
   html.touch-web is set (coarse pointer, iOS). */

html.desktop-web {
    --nova-safe-top: env(safe-area-inset-top, 0px);
    --nova-safe-bottom: env(safe-area-inset-bottom, 0px);
    --nova-safe-left: env(safe-area-inset-left, 0px);
    --nova-safe-right: env(safe-area-inset-right, 0px);
}

html.desktop-web.touch-web,
html.desktop-web.touch-web body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.14);
    touch-action: manipulation;
}

html.desktop-web.touch-web button,
html.desktop-web.touch-web .nav-button,
html.desktop-web.touch-web .catalog-lane,
html.desktop-web.touch-web .catalog-shelf-card,
html.desktop-web.touch-web .channel-row,
html.desktop-web.touch-web .category-item,
html.desktop-web.touch-web .primary-button,
html.desktop-web.touch-web .small-button,
html.desktop-web.touch-web .player-control {
    cursor: pointer;
    touch-action: manipulation;
}

html.desktop-web.touch-web #pair-phone-button,
html.desktop-web.touch-web .pair-phone-button {
    display: none !important;
}

html.desktop-web.touch-web.nova-chrome-hidden .topbar,
html.desktop-web.touch-web.nova-chrome-hidden .catalog-screen > .category-rail {
    height: auto !important;
    min-height: 0 !important;
    opacity: 1;
    overflow: visible !important;
    pointer-events: auto;
}

html.desktop-web.touch-web #video-overlay.controls-hidden .player-controls {
    display: flex !important;
    pointer-events: auto !important;
}

html.desktop-web.touch-web #video-overlay.controls-hidden #player-timeline {
    display: none !important;
}

html.desktop-web.touch-web .video-stage.fullscreen .player-shrink-touch {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 96;
    top: calc(12px + var(--nova-safe-top));
    right: calc(12px + var(--nova-safe-right));
    min-width: 96px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    color: #fff;
    background: rgba(10, 17, 26, 0.88);
    font-size: 15px;
    font-weight: 650;
    pointer-events: auto !important;
}

html.desktop-web.touch-web .zap-list {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

html.desktop-web.touch-web .timeline-bar::before {
    top: -18px;
    bottom: -18px;
}

html.desktop-web.touch-web .timeline-thumb {
    width: 18px !important;
    height: 18px !important;
    transform: translate(-9px, -9px) !important;
}

/* Shared phone + tablet (covers iPhone, iPad portrait, small Androids). */
@media (max-width: 1200px) {
    html.desktop-web,
    html.desktop-web body,
    html.desktop-web #app-shell {
        height: auto !important;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html.desktop-web .topbar {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        align-content: flex-start;
        gap: 8px 10px;
        height: auto !important;
        max-height: none !important;
        min-height: 52px !important;
        overflow: visible !important;
        padding: calc(8px + var(--nova-safe-top)) 12px 8px !important;
        grid-template-columns: none;
    }

    html.desktop-web .brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    html.desktop-web .brand-lockup-compact .brand-symbol {
        width: 32px !important;
        height: 32px !important;
    }

    html.desktop-web .brand-lockup-compact .brand-word {
        font-size: 16px !important;
        margin-left: 8px !important;
    }

    html.desktop-web .brand #clock {
        display: none !important;
    }

    html.desktop-web .main-nav {
        order: 3;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        justify-content: stretch !important;
    }

    html.desktop-web .nav-button {
        flex: 1 1 0;
        min-width: 0 !important;
        height: 40px !important;
        font-size: 15px !important;
        padding: 0 6px !important;
    }

    html.desktop-web .topbar-actions {
        flex: 0 0 auto;
        gap: 6px;
    }

    html.desktop-web .browser-fullscreen-button {
        display: none !important;
    }

    html.desktop-web .language-button,
    html.desktop-web .source-button {
        height: 40px !important;
        font-size: 13px !important;
    }

    html.desktop-web .language-button {
        width: 56px !important;
        min-width: 56px;
    }

    html.desktop-web .source-button {
        min-width: 0;
        max-width: 42vw;
        padding: 0 10px !important;
    }

    html.desktop-web .source-button span {
        display: none;
    }

    html.desktop-web .login-screen {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 100dvh;
        align-items: start;
        padding: calc(56px + var(--nova-safe-top)) 20px
            calc(28px + var(--nova-safe-bottom)) !important;
        gap: 20px !important;
        overflow: visible !important;
    }

    html.desktop-web .login-language-button {
        top: calc(10px + var(--nova-safe-top)) !important;
        right: calc(12px + var(--nova-safe-right)) !important;
        height: 40px !important;
    }

    html.desktop-web[dir='rtl'] .login-language-button {
        right: auto !important;
        left: calc(12px + var(--nova-safe-left)) !important;
    }

    html.desktop-web .welcome-copy h1 {
        font-size: 28px !important;
        margin: 10px 0 12px !important;
    }

    html.desktop-web .welcome-copy p {
        font-size: 16px !important;
        max-width: none !important;
    }

    html.desktop-web .brand-lockup-hero .brand-symbol {
        width: 52px !important;
        height: 52px !important;
    }

    html.desktop-web .brand-lockup-hero .brand-word {
        font-size: 28px !important;
    }

    html.desktop-web .login-card {
        max-width: none;
        padding: 22px !important;
        border-radius: 16px !important;
    }

    html.desktop-web .login-card h2 {
        font-size: 22px !important;
    }

    html.desktop-web .login-card input,
    html.desktop-web .rail-search,
    html.desktop-web .catalog-search,
    html.desktop-web #channel-search {
        font-size: 16px !important;
    }

    html.desktop-web .live-screen {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: calc(100dvh - 96px);
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    html.desktop-web .live-screen > .category-rail {
        flex: 0 0 auto;
        width: auto !important;
        height: auto !important;
        max-height: none;
        padding: 8px 12px !important;
        overflow: visible;
    }

    html.desktop-web .live-screen .category-list {
        display: flex;
        flex-direction: row;
        flex: none;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    html.desktop-web .live-screen .category-item {
        flex: 0 0 auto;
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 14px;
        white-space: nowrap;
    }

    html.desktop-web .live-screen .category-item span {
        font-size: 14px !important;
    }

    html.desktop-web .live-main {
        flex: 1 1 auto;
        height: auto !important;
        overflow: visible;
        padding: 8px 12px 16px !important;
    }

    html.desktop-web .preview-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html.desktop-web .video-stage,
    html.desktop-web .program-panel {
        max-height: none;
    }

    html.desktop-web .video-stage {
        border-radius: 10px !important;
    }

    html.desktop-web .program-panel {
        padding: 14px 16px !important;
    }

    html.desktop-web .program-panel h2 {
        font-size: 20px !important;
    }

    html.desktop-web .guide-panel {
        min-height: 220px;
        height: auto !important;
        overflow: visible;
    }

    html.desktop-web .channel-guide {
        overflow: visible !important;
        height: auto !important;
    }

    html.desktop-web .channel-row {
        height: 64px !important;
    }

    html.desktop-web .channel-identity {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    html.desktop-web .catalog-screen {
        height: auto !important;
        min-height: calc(100dvh - 96px);
        overflow: auto !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        -webkit-overflow-scrolling: touch;
    }

    html.desktop-web .catalog-screen > .category-rail {
        height: auto !important;
        min-height: 56px !important;
        padding: 8px 12px !important;
    }

    html.desktop-web .catalog-lane {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 14px !important;
        padding: 0 12px !important;
        flex: 0 0 auto;
    }

    html.desktop-web .catalog-feature {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        flex: none !important;
        opacity: 0;
    }

    html.desktop-web .catalog-shelves {
        min-height: 0 !important;
        overflow: visible !important;
        padding: 8px 14px 40px !important;
    }

    html.desktop-web .catalog-shelf h2 {
        font-size: 18px !important;
        margin: 0 0 8px !important;
    }

    html.desktop-web .catalog-shelf-card {
        flex: 0 0 132px !important;
        width: 132px !important;
        max-width: 132px !important;
        margin-right: 10px !important;
    }

    html.desktop-web .catalog-shelf-card img,
    html.desktop-web .catalog-shelf-card .placeholder {
        height: 186px !important;
    }

    html.desktop-web .catalog-header {
        padding: 8px 14px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    html.desktop-web .catalog-search {
        width: 100% !important;
        height: 44px !important;
    }

    html.desktop-web .movie-screen,
    html.desktop-web .series-screen,
    html.desktop-web .detail-screen {
        height: auto !important;
        min-height: calc(100dvh - 96px);
        overflow: auto !important;
    }

    html.desktop-web .detail-body {
        padding: 16px 16px calc(28px + var(--nova-safe-bottom)) !important;
    }

    html.desktop-web .detail-copy,
    html.desktop-web .detail-plot {
        max-width: none !important;
    }

    html.desktop-web .detail-copy h1,
    html.desktop-web .detail-copy-movie h1 {
        font-size: 26px !important;
    }

    html.desktop-web .detail-backdrop.hero-art-poster {
        display: none !important;
    }

    html.desktop-web .detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    html.desktop-web .detail-actions .primary-button {
        flex: 1 1 160px;
        min-height: 48px !important;
    }

    html.desktop-web .episode-list,
    html.desktop-web .episode-grid {
        grid-template-columns: 1fr !important;
    }

    html.desktop-web .dialog,
    html.desktop-web .accounts-dialog {
        width: min(520px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 24px);
    }

    html.desktop-web .video-stage.fullscreen {
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        padding: 0;
    }

    html.desktop-web .video-stage.fullscreen .video-overlay {
        padding-bottom: calc(12px + var(--nova-safe-bottom));
        pointer-events: none;
    }

    html.desktop-web .video-stage.fullscreen .player-controls {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        max-width: calc(100% - 16px);
        pointer-events: auto !important;
    }

    html.desktop-web .video-stage.fullscreen .player-control {
        min-width: 44px !important;
        width: auto !important;
        height: 44px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    html.desktop-web .video-stage.fullscreen .player-control span {
        display: none !important;
    }

    html.desktop-web .zap-panel {
        width: min(420px, 100%) !important;
        padding-top: var(--nova-safe-top);
        padding-bottom: var(--nova-safe-bottom);
    }

    html.desktop-web .image-settings {
        min-width: 0 !important;
        width: min(360px, calc(100vw - 24px)) !important;
        left: 12px !important;
        right: 12px !important;
    }
}

/* iPhone and narrow Android — video first, compact guide. */
@media (max-width: 767px) {
    html.desktop-web .topbar {
        flex-wrap: nowrap !important;
        height: calc(48px + var(--nova-safe-top)) !important;
        min-height: calc(48px + var(--nova-safe-top)) !important;
        padding: calc(6px + var(--nova-safe-top)) 8px 6px !important;
    }

    html.desktop-web .brand-lockup-compact .brand-word {
        display: none !important;
    }

    html.desktop-web .main-nav {
        order: 0;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
        height: 36px !important;
    }

    html.desktop-web .nav-button {
        height: 36px !important;
        font-size: 13px !important;
    }

    html.desktop-web .source-button {
        max-width: 72px;
        padding: 0 8px !important;
    }

    html.desktop-web .source-button strong {
        max-width: 64px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px !important;
    }

    html.desktop-web .live-screen .rail-heading {
        display: none !important;
    }

    html.desktop-web .catalog-lane {
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    html.desktop-web .lane-flag {
        width: 28px !important;
        height: 18px !important;
        margin-right: 6px !important;
    }

    html.desktop-web .lane-flag svg {
        width: 28px !important;
        height: 18px !important;
    }

    html.desktop-web .welcome-copy h1 {
        font-size: 22px !important;
        margin: 8px 0 !important;
    }

    html.desktop-web .welcome-copy p {
        font-size: 15px !important;
    }

    html.desktop-web .login-card {
        padding: 16px !important;
    }

    html.desktop-web .login-card input {
        height: 44px !important;
    }

    html.desktop-web .login-card .primary-button {
        min-height: 48px !important;
    }

    html.desktop-web .time-ruler span:nth-child(n + 2),
    html.desktop-web .epg-track {
        display: none !important;
    }

    html.desktop-web .channel-copy strong {
        font-size: 16px !important;
    }

    html.desktop-web .channel-copy span {
        font-size: 13px !important;
    }

    html.desktop-web .zap-panel {
        width: 100% !important;
    }

    html.desktop-web .catalog-shelf-card {
        flex: 0 0 112px !important;
        width: 112px !important;
        max-width: 112px !important;
    }

    html.desktop-web .catalog-shelf-card img,
    html.desktop-web .catalog-shelf-card .placeholder {
        height: 158px !important;
    }

    html.desktop-web .nav-icon {
        display: none;
    }

    html.desktop-web #pair-phone-button,
    html.desktop-web .pair-phone-button {
        display: none !important;
    }
}

/* iPad — keep a two-pane Direct in landscape, stack in portrait. */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
    html.desktop-web .login-screen {
        grid-template-columns: minmax(240px, 1fr) minmax(340px, 480px) !important;
        align-items: center;
        height: 100dvh !important;
        min-height: 100dvh;
        padding: 28px 36px !important;
        gap: 28px !important;
    }

    html.desktop-web .live-screen {
        display: grid !important;
        grid-template-columns: 220px minmax(0, 1fr) !important;
        height: calc(100dvh - 88px) !important;
        overflow: hidden !important;
    }

    html.desktop-web .live-screen > .category-rail {
        height: 100% !important;
        max-height: none;
        overflow: hidden;
    }

    html.desktop-web .live-screen .category-list {
        display: block;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        flex: 1 1 auto;
    }

    html.desktop-web .live-screen .category-item {
        white-space: nowrap;
        width: 100%;
    }

    html.desktop-web .live-main {
        height: 100% !important;
        overflow: hidden;
    }

    html.desktop-web .preview-row {
        grid-template-columns: minmax(0, 1.15fr) minmax(180px, 0.85fr) !important;
    }

    html.desktop-web .video-stage,
    html.desktop-web .program-panel {
        max-height: 46vh;
    }

    html.desktop-web .channel-guide {
        overflow-y: auto !important;
        min-height: 0;
        flex: 1 1 auto;
    }

    html.desktop-web .guide-panel {
        overflow: hidden;
        min-height: 0;
        flex: 1 1 auto;
    }

    html.desktop-web .epg-track {
        display: block !important;
    }

    html.desktop-web .time-ruler span:nth-child(n + 2) {
        display: inline !important;
    }

    html.desktop-web .catalog-screen {
        height: calc(100dvh - 88px) !important;
        overflow: hidden !important;
    }

    html.desktop-web .catalog-shelves {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    html.desktop-web .catalog-shelf-card {
        flex: 0 0 148px !important;
        width: 148px !important;
        max-width: 148px !important;
    }

    html.desktop-web .catalog-shelf-card img,
    html.desktop-web .catalog-shelf-card .placeholder {
        height: 210px !important;
    }
}

/* Landscape phone: picture takes the page, chrome stays thin. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    html.desktop-web .topbar {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    html.desktop-web .main-nav {
        height: 36px !important;
    }

    html.desktop-web .nav-button {
        height: 32px !important;
        font-size: 13px !important;
    }

    html.desktop-web .login-screen {
        padding-top: calc(48px + var(--nova-safe-top)) !important;
    }

    html.desktop-web .video-stage {
        max-height: 72dvh;
    }

    html.desktop-web .program-panel {
        display: none;
    }
}

/* Never let a display:flex !important un-hide a .hidden node (login topbar). */
html.desktop-web .hidden,
html.desktop-web .topbar.hidden,
html.desktop-web .login-screen.hidden,
html.desktop-web .app-screen.hidden,
html.desktop-web .dialog-backdrop.hidden {
    display: none !important;
}

html.desktop-web:has(#login-screen:not(.hidden)) .topbar {
    display: none !important;
}