/* TV / webOS mode: 10-foot player layout for /RedditViewer/tv/, ?tv=1, and detected webOS runtimes. */
.tv-mode .title-container {
    height: 96px;
    padding: 0 48px;
}

.tv-mode .header-left,
.tv-mode .header-right {
    flex: 0 0 360px;
}

.tv-mode .header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
}

.tv-mode .title {
    font-size: 3.1em;
    letter-spacing: 8px;
    margin-top: 0;
}

/* TV keeps the compact, content-sized stacked badge (wordmark over picker);
   the wide side-by-side pill is a desktop-only layout. */
.tv-mode .title {
    flex: 0 0 auto;
    max-width: none;
}

.tv-mode .title-badge {
    width: auto;
    flex-direction: column;
    padding: 8px 24px 10px;
    border-radius: 48px;
}

.tv-mode .title-badge-stack {
    flex-direction: column;
}

.tv-mode .subreddit-dropdown-wrap {
    justify-content: center;
}

.tv-mode .subreddit-select {
    max-width: 320px;
    font-size: 18px;
    text-align: center;
    text-align-last: center;
}

.tv-mode .settings-trigger {
    min-height: 56px;
    padding: 8px 22px 10px;
    gap: 10px;
    font-size: 24px;
    letter-spacing: 3px;
    box-sizing: border-box;
}

.tv-mode .settings-trigger svg {
    width: 30px;
    height: 30px;
}

.tv-mode .filter-subreddit,
.tv-mode .filter-politics,
.tv-mode .filter-sort,
.tv-mode .generate-youtube-playlist,
.tv-mode .keyboard-shortcuts,
.tv-mode .clear-history,
.tv-mode .privacy-policy,
.tv-mode .phone-remote {
    min-height: 54px;
    padding: 10px 12px;
    gap: 14px;
    font-size: 20px;
    box-sizing: border-box;
}

.tv-mode .filter-subreddit svg,
.tv-mode .filter-politics svg,
.tv-mode .filter-sort svg,
.tv-mode .generate-youtube-playlist svg,
.tv-mode .keyboard-shortcuts svg,
.tv-mode .clear-history svg,
.tv-mode .privacy-policy svg,
.tv-mode .phone-remote svg {
    width: 24px;
    height: 24px;
}

.tv-mode #last-updated,
.tv-mode .settings-info {
    font-size: 16px;
}

.tv-mode .video-container {
    /* Full-bleed video. The header and control bars are fixed overlays that fade out
       during playback, so the player should fill the whole 16:9 screen rather than
       being letterboxed into the gap between them (which left black bars top/bottom). */
    height: 100%;
    margin-top: 0;
}

.tv-mode .controls-container {
    --overlay-pill-gap: 48px;
    --thumbnail-strip-height: 96px;
    --youtube-pill-height: 58px;
    height: 112px;
    padding: 0 56px;
}

.tv-mode .thread-name {
    font-size: 2.4rem;
    line-height: 1.18;
    max-width: calc(100% - 180px);
}

.tv-mode .scrubber-container {
    bottom: 98px;
    left: 56px;
    width: calc(100% - 112px);
    gap: 24px;
}

.tv-mode .progress-bar {
    height: 8px;
    border-radius: 999px;
}

.tv-mode .progress-bar:hover {
    height: 10px;
}

.tv-mode .progress-bar::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
}

.tv-mode .progress-bar::-moz-range-thumb {
    width: 24px;
    height: 24px;
}

.tv-mode .current-time,
.tv-mode .video-length {
    width: 78px;
    font-size: 20px;
}

.tv-mode .overlay-stack {
    bottom: 154px;
    gap: 24px;
}

.tv-mode .controls-center.overlay-pill {
    width: min(86vw, 880px);
    padding: 0 36px;
    min-height: 84px;
    gap: 32px;
}

.tv-mode .controls-left {
    gap: 24px;
}

.tv-mode .controls-right-group {
    gap: 24px;
}

.tv-mode .controls-nav {
    gap: 42px;
}

.tv-mode .controls-nav > div {
    padding: 10px;
}

.tv-mode .controls-nav svg {
    width: 48px;
    height: 48px;
}

.tv-mode .controls-center .playback-rate-indicator {
    font-size: 36px;
    min-width: 100px;
    padding: 10px 14px;
}

.tv-mode .controls-center .pill-icon-btn,
.tv-mode .controls-center .fullscreen-btn {
    padding: 10px 14px;
}

.tv-mode .controls-center .pill-icon-btn svg,
.tv-mode .controls-center .fullscreen-btn svg {
    width: 38px;
    height: 38px;
}

.tv-mode .settings-dropdown {
    min-width: 330px;
    padding: 14px;
    gap: 8px;
    border-radius: 14px;
}

.tv-mode .thumbnail-carousel.overlay-pill {
    max-width: min(86vw, 880px);
    min-height: var(--thumbnail-strip-height);
    padding: 10px 16px;
    border-radius: 20px;
}

.tv-mode .thumbnail-strip {
    gap: 14px;
}

.tv-mode .thumbnail-item {
    width: 136px;
    height: 76px;
    border-radius: 10px;
}

.tv-mode .thumbnail-tooltip {
    width: 360px;
    font-size: 18px;
    padding: 14px 16px;
}

.tv-mode .shortcut-overlay-panel {
    width: min(880px, 88vw);
    max-height: min(78vh, 760px);
    padding: 34px 38px 30px;
    border-radius: 18px;
}

.tv-mode .shortcut-overlay-panel h2 {
    font-size: 44px;
    margin-bottom: 22px;
}

.tv-mode .shortcut-grid {
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
    row-gap: 18px;
    column-gap: 28px;
}

.tv-mode .shortcut-key,
.tv-mode .shortcut-desc {
    font-size: 22px;
}

.tv-mode .shortcut-key kbd {
    min-width: 42px;
    padding: 7px 12px;
    font-size: 18px;
}

.tv-mode .shortcut-overlay-hint,
.tv-mode .qr-overlay-url,
.tv-mode .qr-diagnostics-link {
    font-size: 18px;
}

.tv-mode .shortcut-overlay-close {
    width: 46px;
    height: 46px;
}

.tv-mode .shortcut-overlay-close svg {
    width: 24px;
    height: 24px;
}

.tv-mode .qr-overlay-panel {
    width: min(520px, 86vw);
}

.tv-mode .qr-code-wrap {
    width: 360px;
    height: 360px;
    padding: 16px;
}

.tv-mode .qr-connected-state p {
    font-size: 26px;
}

/* TV control-bar trim: the fullscreen and YouTube pills aren't useful on a TV, so
   drop them and surface the phone-remote QR in the control bar where fullscreen sat.
   The QR moves out of the header (it's not reachable by the D-pad focus ring up there). */
.controls-center .tv-qr-control {
    display: none;
}

.tv-mode #youtube-link,
.tv-mode #fullscreen-btn,
.tv-mode #playback-rate-indicator,
.tv-mode .header-right #qr-trigger {
    display: none;
}

.tv-mode .tv-qr-control {
    display: inline-flex;
    align-items: center;
}

/* Remote focus ring: highlight the control the D-pad is pointing at. */
.tv-mode .tv-focus {
    outline: 3px solid var(--color-reddit-orange);
    outline-offset: 4px;
    border-radius: 14px;
    box-shadow: 0 0 0 6px rgba(var(--color-reddit-orange-rgb), 0.28),
        0 0 24px rgba(var(--color-reddit-orange-rgb), 0.5);
    position: relative;
    z-index: 3;
}

.tv-mode .thumbnail-item.tv-focus {
    outline-offset: 2px;
    border-radius: 10px;
}

.tv-mode .subreddit-select.tv-focus {
    outline-offset: 2px;
    border-radius: 6px;
}

.tv-mode #progress-bar.tv-focus {
    outline-offset: 8px;
    border-radius: 999px;
}

/* Hide settings options that are not valid in TV mode */
.tv-mode #generate-youtube-playlist,
.tv-mode #keyboard-shortcuts,
.tv-mode #privacy-policy {
    display: none;
}

/* Red/orange outline hover state on settings cog button in TV mode */
.tv-mode #settings-trigger.tv-focus,
.tv-mode #settings-trigger:hover {
    outline: 3px solid var(--color-reddit-orange) !important;
    outline-offset: 4px;
    border-radius: 14px;
    box-shadow: 0 0 0 6px rgba(var(--color-reddit-orange-rgb), 0.28),
        0 0 24px rgba(var(--color-reddit-orange-rgb), 0.5);
    position: relative;
    z-index: 3;
}