/* Optional quality upgrades stay separate from the preview's playback controls. */
.hd-status {
  position: absolute;
  z-index: 14;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 3px 6px;
  border: 1px solid #ffffff24;
  border-radius: 3px;
  background: #0a0c0f8c;
  color: #f0eee8;
  font: 10px/1.4 Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .015em;
  text-shadow: 0 1px 4px #0008;
  pointer-events: none;
}
.hd-status[hidden], .hd-status [hidden] { display: none !important; }
.hd-status [data-hd-label] { white-space: nowrap; }
.hd-status [data-hd-percent] { min-width: 24px; font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; }
.hd-status [data-hd-percent]:empty { display: none; }
.hd-status progress { appearance: none; width: 30px; height: 2px; border: 0; border-radius: 1px; background: #ffffff38; accent-color: #e5be88; }
.hd-status progress::-webkit-progress-bar { background: #ffffff38; border-radius: 1px; }
.hd-status progress::-webkit-progress-value { background: #e5be88; border-radius: 1px; }
.hd-status progress::-moz-progress-bar { background: #e5be88; border-radius: 1px; }
.hd-status button {
  pointer-events: auto;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid #ffffff50;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.hd-status button:hover, .hd-status button:focus-visible { border-color: #e5be88; color: #e5be88; }
.hd-status button:focus-visible { outline: 1px solid #e5be88; outline-offset: 2px; }
.home-page .comparison-frame .hd-status { right: clamp(24px, 2.6vw, 48px); bottom: 156px; }
.home-page .cinema-home .workflow-player__picture > .hd-status { right: clamp(24px, 7vw, 130px); bottom: 164px; }
.film-player__picture > .hd-status, .xj-video-shell > .hd-status { bottom: 54px; }
.project-deck.is-strip .hd-status { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  .home-page .comparison-visual > .hd-status {
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
  }
  .home-page .cinema-home .workflow-player__picture > .hd-status { right: 8px; bottom: 8px; }
}