/* Media Player demo app — measured on win2k-pro_window_media-player.png (client origin (4, 23)). */
.mp { position: relative; flex: 1; }
.mp > *, .mp__controls > *, .mp__btn > * { position: absolute; }
.mp > .mp__menu { left: 0; top: -1px; right: 0; }
.mp > .mp__rule { left: 0; right: 0; top: 19px; }   /* under the menu bar */
:is(.mp, .mp__controls) > .mp__btn { position: static; margin: 0; border: 0; padding: 0; background: none; font: inherit; color: inherit; outline: none; } /* allow: Media Player 6.4 skin buttons — images that draw nothing themselves (AUDYT.md C) */
.mp__link > span { top: 25px; white-space: pre; }
/* The video area: a 1px sunken line around black, the logo while nothing plays. */
/* Sizing the window: the video area takes the size gained; the controls under it keep to the bottom (they are laid out
   in the client's default 286×402, anchored to its bottom) and the seek bar, strip and panel take the width (knowledge). */
.mp > .mp__video { left: 0; top: 43px; right: 0; bottom: 172px; background: var(--color-mplayer-video); }   /* allow: the video area's own black, in a static edge (frame.css) */
.mp__logo { position: absolute; left: calc((100% - 146px) / 2); top: calc((100% - 113px) / 2); }   /* 70, 37 at the default size */
.mp > .mp__controls { left: 0; right: 0; bottom: 0; height: 402px; pointer-events: none; }
.mp__controls > * { pointer-events: auto; }
/* The seek bar: one tick at the start, the thumb, a channel shadowed on top and lit on the right and bottom. */
.mp__controls > .mp__tick { left: 6px; top: 230px; width: 1px; height: 1px; background: var(--sys-btn-hilight); }   /* allow: Media Player 6.4's own skin (AUDYT.md C) */
.mp__controls > .mp__seek { left: 2px; top: 234px; right: 8px; height: 15px; }
.mp__seek::before { content: ""; position: absolute; left: 13px; right: 0; top: 4px; height: 7px;   /* allow: Media Player 6.4's own skin (AUDYT.md C) */
  background: linear-gradient(var(--sys-btn-shadow), var(--sys-btn-shadow)) 0 0 / calc(100% - 1px) 1px no-repeat,
    linear-gradient(var(--sys-btn-hilight), var(--sys-btn-hilight)) 100% 1px / 1px calc(100% - 1px) no-repeat,
    linear-gradient(var(--sys-btn-hilight), var(--sys-btn-hilight)) 0 100% / 100% 1px no-repeat; }
.mp__thumb { position: absolute; left: 0; top: 0; z-index: 1; }
.mp__controls > .mp__sep { top: 253px; width: 2px; height: 21px; background: url("../../assets/apps/mplayer-sep.png"); }   /* allow: Media Player 6.4's own skin (AUDYT.md C) */
.mp__controls > .mp__volume { left: 234px; top: 253px; width: 49px; height: 21px; background: url("../../assets/apps/mplayer-volume.png"); }   /* allow: Media Player 6.4's own skin (AUDYT.md C) */
.mp__mute[aria-pressed="true"] > img { opacity: .5; }
/* The status strip: a ButtonHilight rectangle with a drop-down arrow at its right. */
.mp__controls > .mp__strip { left: 4px; top: 282px; right: 3px; height: 15px; box-sizing: border-box; border: 1px solid var(--sys-btn-hilight); }   /* allow: Media Player 6.4's own skin (AUDYT.md C) */
.mp__strip > img { position: absolute; right: 2px; top: 5px; }
/* The clip information panel: white labels right-aligned on black, two shadow rules (after Show and Copyright). */
.mp__controls > .mp__info { left: 0; top: 304px; right: 0; height: 98px; box-shadow: inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-shadow);   /* allow: Media Player 6.4's own skin (AUDYT.md C) */
  background: linear-gradient(var(--sys-btn-shadow), var(--sys-btn-shadow)) 1px 21px / calc(100% - 2px) 1px no-repeat,
    linear-gradient(var(--sys-btn-shadow), var(--sys-btn-shadow)) 1px 74px / calc(100% - 2px) 1px no-repeat, var(--color-mplayer-video);
  color: var(--color-mplayer-text); }
.mp__info > * { position: absolute; white-space: pre; }
.mp__label { left: 0; width: 78px; text-align: right; }   /* right-aligned to x 78 */
.mp__value { left: 84px; }
.mp__info > :nth-child(1), .mp__info > :nth-child(2) { top: 3px; }
.mp__info > :nth-child(3), .mp__info > :nth-child(4) { top: 24px; }
.mp__info > :nth-child(5), .mp__info > :nth-child(6) { top: 40px; }
.mp__info > :nth-child(7), .mp__info > :nth-child(8) { top: 56px; }