/* The supplied centred/ambient TV layout inside the shared app chrome. */
body[data-app-page="tv"] #app{
 max-width:var(--app-width);height:100dvh;
 --nav:calc(88px + env(safe-area-inset-bottom,0px));
}
body[data-app-page="tv"] .scene{height:100%;min-height:0}
body[data-app-page="tv"] #topbar{
 padding-inline:var(--app-gutter);min-height:0;gap:4px 8px;
}
body[data-app-page="tv"] .topbar :is(button,.app-page-name){pointer-events:auto}
body[data-app-page="tv"] .scene-body{inset:0;transform:none}
body[data-app-page="tv"] .player-area{margin:0;padding:0}
body[data-app-page="tv"] .player-area .sjr-native-video{display:block;width:100%;height:100%;object-fit:contain}
body[data-app-page="tv"] .poster-button{touch-action:pan-y pinch-zoom}
body[data-app-page="tv"] .poster-button img{object-fit:contain}
body[data-app-page="tv"] .scene-meta{margin:0;left:0;right:0}
body[data-app-page="tv"] .artist-avatar{object-fit:cover;object-position:50% 35%}
body[data-app-page="tv"] .story-link svg{color:#ff4a43}
body[data-app-page="tv"] .meta-action.is-liked{color:#ff4a43}
body[data-app-page="tv"] #sjr-app-nav{
 background:linear-gradient(145deg,#ffffff0e,transparent 48%),var(--glass-surface)!important;
}
body[data-app-page="tv"] #sjr-app-nav .current:after{content:none}
body[data-app-page="tv"] .glass-sheet{z-index:1200}
body[data-app-page="tv"] .inline-retry{background:#fff;color:#111;border:0;border-radius:20px;min-height:40px;padding:8px 18px}
body[data-app-page="tv"] .error-link{gap:8px;font-size:12px;padding:14px}
body[data-app-page="tv"] .error-link p{margin:0;max-width:36ch}
body[data-app-page="tv"] .error-link a{padding:6px 12px;border:0;text-decoration:underline;min-height:32px}
@media(min-width:560px){body[data-app-page="tv"] #app{--nav:104px}}
@media(max-height:500px) and (orientation:landscape){
 body[data-app-page="tv"] #app{max-width:none;--nav:84px}
 body[data-app-page="tv"] .scene .player-area{
  top:76px!important;left:16px!important;right:auto!important;
  width:calc((100dvh - 174px) * 16 / 9)!important;
  height:calc(100dvh - 174px)!important;transform:none!important;
 }
 body[data-app-page="tv"] .scene-meta{
  top:76px;bottom:96px;left:calc((100dvh - 174px) * 16 / 9 + 28px);right:16px;
  overflow:auto;padding:4px 6px;align-items:start;gap:10px;
 }
 body[data-app-page="tv"] .scene-artist{margin-bottom:5px}
 body[data-app-page="tv"] .artist-chip strong{font-size:20px}
 body[data-app-page="tv"] .scene-description{font-size:12px;-webkit-line-clamp:3!important}
 body[data-app-page="tv"] .meta-action{width:38px;height:38px}
 body[data-app-page="tv"] #sjr-app-nav{bottom:12px}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 body[data-app-page="tv"] #sjr-app-nav{background:#242427!important}
 body[data-app-page="tv"] .ambient-stage{display:none}
}
@media(prefers-reduced-motion:reduce){
 body[data-app-page="tv"] :is(.scene-meta,.double-heart,.meta-action svg){animation:none!important;transition:none!important}
}
/* A short phone has 104px between the centred frame and the dock. */
@media(max-height:620px) and (orientation:portrait){
 body[data-app-page="tv"] .scene .scene-meta{bottom:calc(var(--nav) + 2px);gap:8px}
 body[data-app-page="tv"] .scene .meta-actions{padding:0 2px;gap:0}
 body[data-app-page="tv"] .scene .meta-action{min-height:32px;height:32px;width:36px;padding:6px}
 body[data-app-page="tv"] .scene .meta-action svg{width:20px;height:20px}
 body[data-app-page="tv"] .scene .scene-description{-webkit-line-clamp:1!important}
 body[data-app-page="tv"] .scene .artist-chip{min-height:30px}
 body[data-app-page="tv"] .scene .artist-chip strong{font-size:18px}
 body[data-app-page="tv"] .scene .scene-title{margin-bottom:4px}
}