/* Video presentation: compact controls, subtle ambient light, TV fit/fill. */
body[data-app-page="tv"] .scene .player-area{top:var(--tv-center,50%)!important}
body[data-app-page="tv"] .scene .tv-tools{
 position:absolute;z-index:9;right:14px;top:calc(var(--tv-center,50%) - var(--tv-half-video) - 52px);
 display:flex;align-items:center;gap:7px;pointer-events:auto;
 transition:opacity var(--duration-state,180ms) var(--ease-out,ease-out),transform var(--duration-state,180ms) var(--ease-out,ease-out),visibility var(--duration-state,180ms);
}
body[data-app-page="tv"] .tv-tool{
 display:inline-flex;align-items:center;justify-content:center;gap:6px;
 min-height:44px;padding:8px 11px;border:1px solid #ffffff1f;border-radius:10px;
 background:#141416b8;color:#ddd;font-size:11px;font-weight:500;line-height:1.2;
}
body[data-app-page="tv"] .tv-tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body[data-app-page="tv"] .tv-tool[aria-pressed="true"]{color:#fff;border-color:#ffffff45}
body[data-app-page="tv"] .tv-tool:disabled{opacity:.4;cursor:default}
body[data-app-page="tv"] .scene .meta-actions{transition:opacity var(--duration-state,180ms) var(--ease-out,ease-out),transform var(--duration-state,180ms) var(--ease-out,ease-out),visibility var(--duration-state,180ms)}
body[data-app-page="tv"] #app.is-watching:not(.controls-visible) :is(.meta-actions,.tv-tools){opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px)}
/* Editorial caption stays visible at every phone height. */
body[data-app-page="tv"] .scene .scene-title{font-size:14px;line-height:1.3;-webkit-line-clamp:2;margin:0 0 7px}
body[data-app-page="tv"] .scene .scene-description{display:-webkit-box!important;-webkit-line-clamp:3!important;font-size:12.5px;line-height:1.4;margin:0;color:#dadadd}
body[data-app-page="tv"] .scene .scene-source{font-size:11px;line-height:1.3;margin:7px 0 0;color:#929297;text-decoration:none}
body[data-app-page="tv"] .scene .artist-chip{text-decoration:none!important}
body[data-app-page="tv"] .scene .scene-copy{min-width:0}
body[data-app-page="tv"] .feed{overflow:hidden;overflow-anchor:none;scroll-snap-type:none!important;touch-action:pan-x pinch-zoom}
body[data-app-page="tv"] .poster-button,body[data-app-page="tv"] .sjr-native-video{touch-action:pan-x pinch-zoom}
/* Keep the colour close to the frame instead of illuminating the entire page. */
body[data-app-page="tv"] .ambient-stage{
 top:calc(var(--tv-center,50%) - var(--tv-half-video) - 110px);bottom:auto;left:-40px;right:-40px;
 height:calc(var(--tv-half-video) * 2 + 220px);inset-inline:-40px;
 background:transparent;
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
 mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
}
body[data-app-page="tv"] .ambient-still{background-image:var(--ambient-art,var(--scene-art));filter:blur(48px) saturate(1.15) brightness(.7);opacity:.24;transform:scale(1.12)}
body[data-app-page="tv"] .ambient-canvas{filter:blur(48px) saturate(1.15) brightness(.9);transform:scale(1.12)}
body[data-app-page="tv"] .has-video-ambient .ambient-canvas{opacity:.56}
body[data-app-page="tv"] .has-video-ambient .ambient-still{opacity:0}
body[data-app-page="tv"] .ambient-stage::after{background:linear-gradient(180deg,#07080b55,transparent 35%,transparent 60%,#07080b66)}
:root[data-tv-ambient="off"] body[data-app-page="tv"] .ambient-stage{display:none!important}
/* Fill is scoped to the existing TV scene; its geometry and feed never change. */
body[data-app-page="tv"] .scene.is-tv-fill .player-area{
 position:absolute;inset:0!important;width:100%!important;height:100%!important;
 min-height:0!important;aspect-ratio:auto!important;transform:none!important;background:#050506!important;
}
body[data-app-page="tv"] .scene.is-tv-fill .sjr-native-video,
body[data-app-page="tv"] .scene.is-tv-fill .poster-button img,
body[data-app-page="tv"] .scene.is-tv-fill .sjr-native-loading img{object-fit:cover!important;object-position:center!important}
body[data-app-page="tv"] .scene.is-tv-fill .ambient-stage{display:none!important}
body[data-app-page="tv"] .scene.is-tv-fill .scene-body::after{
 content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
 background:linear-gradient(180deg,#0008,transparent 25%,transparent 46%,#000b 76%,#000e);
}
body[data-app-page="tv"] .scene.is-tv-fill .scene-meta{z-index:6}
body[data-app-page="tv"] .scene.is-tv-fill .tv-tools{top:calc(env(safe-area-inset-top,0px) + 66px)!important}
/* The top navigation has two rows; keep Fill/Reduce below both rows. */
body[data-app-page="tv"].has-top-navigation .scene.is-tv-fill .tv-tools{top:calc(var(--section-height) + 8px)!important}
body[data-app-page="tv"] .scene.is-tv-fill .scene-glass,
body[data-app-page="tv"] .scene.is-tv-fill .frame-atmosphere{display:none!important}
@media(max-height:620px) and (orientation:portrait){
 body[data-app-page="tv"] .scene .scene-meta{grid-template-columns:minmax(0,1fr) 48px}
 body[data-app-page="tv"] .scene .meta-action{min-height:44px;height:44px;width:44px}
 body[data-app-page="tv"] .scene .scene-description{font-size:12px;line-height:1.35}
 body[data-app-page="tv"] .scene .scene-title{font-size:13px;margin-bottom:5px}
 body[data-app-page="tv"] .scene .scene-source{margin-top:5px}
}
@media(max-height:500px) and (orientation:landscape){
 body[data-app-page="tv"] .scene:not(.is-tv-fill) .player-area{top:76px!important}
 body[data-app-page="tv"] .scene:not(.is-tv-fill) .tv-tools{top:16px;right:16px}
}
@media(prefers-reduced-motion:reduce){body[data-app-page="tv"] :is(.ambient-canvas,.ambient-still,.tv-tools,.meta-actions){transition:none!important}}

body[data-app-page="tv"] .caption-more{display:block;padding:3px 0;min-height:44px;border:0;background:none;color:#eee;font-size:11px;text-align:left;pointer-events:auto;text-decoration:none}
body[data-app-page="tv"] .caption-more[hidden]{display:none}
body[data-app-page="tv"] #tv-caption{width:min(390px,calc(100% - 32px));max-height:75dvh;box-sizing:border-box;margin:auto;padding:24px;border:1px solid #ffffff24;border-radius:16px;background:#151518;color:#ececef;text-align:left;overflow:auto;font-family:inherit;font-size:14px;line-height:1.55}
body[data-app-page="tv"] #tv-caption::backdrop{background:#000b}
body[data-app-page="tv"] #tv-caption h2{font-size:21px;margin:8px 32px 8px 0}
body[data-app-page="tv"] #tv-caption p{font-size:14px;line-height:1.55;margin:12px 0}
body[data-app-page="tv"] #tv-caption .caption-title{color:#b9b9be}
body[data-app-page="tv"] #tv-caption [data-close-caption]{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:none;color:#eee;font-size:27px}

/* Keyboard use keeps the focused controls available even during playback. */
body[data-app-page="tv"] #app.is-watching:not(.controls-visible) .scene:has(:focus-visible) :is(.meta-actions,.tv-tools){opacity:1;visibility:visible;pointer-events:auto;transform:none}
body[data-app-page="tv"] .tv-tool{transition:background-color var(--duration-state,180ms),border-color var(--duration-state,180ms),transform var(--duration-press,120ms) var(--ease-out,ease-out)}
body[data-app-page="tv"] .tv-tool:active{transform:scale(.97)}
body[data-app-page="tv"] .tv-tool:focus-visible{outline:2px solid #fff;outline-offset:3px}