/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the stage: native video, gestures, the frozen hold frame. */

/* The player's chrome on Vidstack's primitives (vendor/base.css carries the library's own layout
   rules; this file is every look). One theme: the tokens in css/tokens.css, never the library's
   defaults. Vidstack paints state as data attributes (data-visible, data-dragging, data-checked,
   data-open, data-edge ...) and the slider fill as --slider-fill; the rules below read those. */

/* ---- the player fills the stage; the one <video> keeps its picture whole (letterboxed) ---- */
#player {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: #000;
  contain: none;
  overflow: visible;
  --media-focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}
#player media-provider {
  display: block;
  width: 100%;
  height: 100%;
}
#player media-provider video,
#video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: #000;
}
#player[data-fullscreen] {
  border-radius: 0;
}
/* The native player under the page: while a shell draws the
   picture on its own surface beneath the WebView, the page's black grounds go clear where the picture
   shows, the element's own video (empty on that path) is hidden, and the cue line the shell forwards
   draws where the element's captions would. js/player.js sets the attribute when the shell says so. */
html[data-native-video],
html[data-native-video] body,
html[data-native-video] #stage,
html[data-native-video] #player,
html[data-native-video] #player media-provider video,
html[data-native-video] #video {
  background: transparent;
}
html[data-native-video] #player media-provider video,
html[data-native-video] #video {
  visibility: hidden;
}
/* The guide's live preview under native video: the picture is a surface UNDER the WebView, so it
   shows through the preview frame only where the page paints nothing - the guide layer, the frame and the
   frame's poster all step aside while the slot is the picture's frame (js/guide-preview.js mountPreviewInto ->
   js/player.js setPreviewSlot, which marks the slot data-native-slot and tells the shell the slot's
   rectangle). The window behind the page is the brand ground (#0A0A0C, the shell's windowBackground), the
   same colour --bg paints, so a transparent layer looks exactly as it did. */
html[data-native-video] #guide.layer,
html[data-native-video] #ondemand,
html[data-native-video] #guidePreview,
html[data-native-video] #odPreview {
  background: transparent;
}
/* The layer's ground is painted by its own backdrop with ONE hole cut out - the preview frame's rectangle,
   written as --hole-* by js/player-native.js writePreviewHole - so the picture shows in the frame and nowhere
   else. With no frame mounted (an item playing full screen under this layer) there is no ground at all:
   the picture is the stage and the layer stays clear. */
/* The search page, and Networks or Settings with the preview hidden, mount no frame and are not a
   full-screen item either: the layer paints the whole ground itself, or the picture under it shows
   through the page. */
html[data-native-video] #guide.layer.mode-frameless {
  background: var(--bg);
}
/* A network's page holding a preview in its picture slot (js/network-preview.js): the hole ground below paints the
   page's ground, and the card is cut the same hole, so the surface shows in the slot. */
html[data-native-video] #guide.layer.mode-frameless[data-hole] {
  background: transparent;
}
/* Channel 0: nothing plays under the broadcast guide - the shell's surface holds the LAST channel's frozen
   frame (a TextureView keeps its last picture after stop), so the layer paints its whole ground here too. */
html[data-native-video] #guide.layer.broadcast {
  background: var(--bg);
}
html[data-native-video] #guide.layer[data-hole]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}
/* The band's own picture and its fade paint above that ground, so they take the same hole, measured
   from the band's corner (js/player-native.js writes the band its own --hole-*): the picture fills the
   band around the frame as it does in a browser, and the frame shows the surface. The hole is cut
   with the frame's own corner, --radius, five points a corner (at 0, 22.5, 45, 67.5 and 90 degrees),
   so the ground fills the frame's corners and nothing square shows round it. */
html[data-native-video] #guide.layer[data-hole]::before,
html[data-native-video] #guide.layer[data-hole] .upper-backdrop,
html[data-native-video] #guide.layer[data-hole] .upper-fade,
html[data-native-video] #guide.layer[data-hole] #networksDetailFace {
  clip-path: polygon(
    evenodd,
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    var(--hole-l, 0px) calc(var(--hole-t, 0px) + var(--radius) * 1),
    calc(var(--hole-l, 0px) + var(--radius) * 0.0761) calc(var(--hole-t, 0px) + var(--radius) * 0.6173),
    calc(var(--hole-l, 0px) + var(--radius) * 0.2929) calc(var(--hole-t, 0px) + var(--radius) * 0.2929),
    calc(var(--hole-l, 0px) + var(--radius) * 0.6173) calc(var(--hole-t, 0px) + var(--radius) * 0.0761),
    calc(var(--hole-l, 0px) + var(--radius) * 1) var(--hole-t, 0px),
    calc(var(--hole-r, 0px) - var(--radius) * 1) var(--hole-t, 0px),
    calc(var(--hole-r, 0px) - var(--radius) * 0.6173) calc(var(--hole-t, 0px) + var(--radius) * 0.0761),
    calc(var(--hole-r, 0px) - var(--radius) * 0.2929) calc(var(--hole-t, 0px) + var(--radius) * 0.2929),
    calc(var(--hole-r, 0px) - var(--radius) * 0.0761) calc(var(--hole-t, 0px) + var(--radius) * 0.6173),
    var(--hole-r, 0px) calc(var(--hole-t, 0px) + var(--radius) * 1),
    var(--hole-r, 0px) calc(var(--hole-b, 0px) - var(--radius) * 1),
    calc(var(--hole-r, 0px) - var(--radius) * 0.0761) calc(var(--hole-b, 0px) - var(--radius) * 0.6173),
    calc(var(--hole-r, 0px) - var(--radius) * 0.2929) calc(var(--hole-b, 0px) - var(--radius) * 0.2929),
    calc(var(--hole-r, 0px) - var(--radius) * 0.6173) calc(var(--hole-b, 0px) - var(--radius) * 0.0761),
    calc(var(--hole-r, 0px) - var(--radius) * 1) var(--hole-b, 0px),
    calc(var(--hole-l, 0px) + var(--radius) * 1) var(--hole-b, 0px),
    calc(var(--hole-l, 0px) + var(--radius) * 0.6173) calc(var(--hole-b, 0px) - var(--radius) * 0.0761),
    calc(var(--hole-l, 0px) + var(--radius) * 0.2929) calc(var(--hole-b, 0px) - var(--radius) * 0.2929),
    calc(var(--hole-l, 0px) + var(--radius) * 0.0761) calc(var(--hole-b, 0px) - var(--radius) * 0.6173),
    var(--hole-l, 0px) calc(var(--hole-b, 0px) - var(--radius) * 1),
    var(--hole-l, 0px) calc(var(--hole-t, 0px) + var(--radius) * 1)
  );
}
#guidePreview[data-native-slot] .preview-poster,
#odPreview[data-native-slot] .preview-poster,
#guidePreview[data-native-slot] .art-missing,
#odPreview[data-native-slot] .art-missing {
  display: none;
}
#guidePreview[data-native-slot][data-loading="1"]::before {
  display: none;
}
/* The inline detail panel and a library's grid sit over the surface the same way: each one's own
   ground spans the frame's column ABOVE the layer's hole ground, so an opaque one would blank the
   frame. While a frame holds the picture they draw no ground of their own - the hole ground behind
   them is the page's one opaque ground. A browser keeps them: there the frame is the moved <video>,
   painted over them. */
html[data-native-video] #guide.layer[data-hole] #odAll,
html[data-native-video] #guide.layer[data-hole] #odDetail {
  background: transparent;
}
/* The line's insets are fractions of the picture the shell fitted (js/player-native.js placeCueLine
   writes --picture-*); without a report the picture is the whole stage. */
#player .native-cue {
  position: absolute;
  left: calc(var(--picture-left, 0%) + var(--picture-width, 100%) * 0.08);
  right: calc(100% - var(--picture-left, 0%) - var(--picture-width, 100%) * 0.92);
  bottom: calc(100% - var(--picture-top, 0%) - var(--picture-height, 100%) * 0.9);
  text-align: center;
  font-size: var(--type-title);
  line-height: 1.3;
  color: #fff;
  text-shadow:
    0 0 6px #000,
    0 2px 2px #000;
  white-space: pre-line;
  pointer-events: none;
}
#player .native-cue:empty {
  display: none;
}

/* Vidstack's own idle rule hides the pointer over a started player with no controls up; the
   picture keeps that, the surfaces above it never do. */
.gesture {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.gesture-left,
.gesture-right {
  width: 20%;
  z-index: 1;
}
.gesture-right {
  left: auto;
  right: 0;
}

/* A frozen last frame, held over #video while js/guide.js re-parents it (js/player.js's own
   reparent guard). Sized and placed in JS, to the exact box the video just had - a canvas has no
   object-fit to lean on, so only position and stacking live here. Above the buffering ring and the
   captions (both below z-index 3): nothing under a move should show through the hold either. */
.hold-frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
}