/* Watch-only derived timing view; Plyr keeps ownership of seek/progress and media state. */
body.kb-watch-page .plyr--video .kb-player-timecode {
  display: inline-flex;
  min-width: 8.75ch;
  min-height: 32px;
  padding: 4px 6px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

body.kb-watch-page .plyr--video .kb-player-timecode-full {
  display: inline;
}

body.kb-watch-page .plyr--video .kb-player-timecode-compact {
  display: none;
}

body.kb-watch-page .plyr--video .kb-player-timecode:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

body.kb-watch-page .plyr--video .kb-player-timecode:disabled {
  cursor: default;
  opacity: 0.78;
}

body.kb-watch-page .plyr--video.kb-player-timecode-ready .plyr__time--current,
body.kb-watch-page .plyr--video.kb-player-timecode-ready .plyr__time--duration {
  display: none;
}

@media (max-width: 640px) {
  body.kb-watch-page .plyr--video .kb-player-timecode {
    min-width: 9.5ch;
    min-height: 44px;
    padding: 10px 8px;
  }
}

@media (max-width: 359px) {
  /*
   * The full elapsed/remaining sentence is still the button's accessible name.
   * The visual view keeps elapsed/total readable and reduces remaining to its
   * explicit negative value, so the native transport does not clip at 320px.
   */
  body.kb-watch-page .plyr--video .kb-player-timecode {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    min-height: 44px;
    padding: 4px;
    font-size: 12px;
    line-height: 14px;
  }

  body.kb-watch-page .plyr--video .kb-player-timecode-full {
    display: none;
  }

  body.kb-watch-page .plyr--video .kb-player-timecode-compact {
    display: inline;
  }

  body.kb-watch-page .plyr--video .kb-player-timecode[data-kb-player-timecode-mode='remaining'] .kb-player-timecode-compact {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  body.kb-watch-page .plyr--video .kb-player-timecode[data-kb-player-timecode-mode='remaining'] .kb-player-timecode-compact-separator {
    display: none;
  }

  body.kb-watch-page .plyr--video .plyr__controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  body.kb-watch-page .plyr--video .plyr__controls > .plyr__controls__item {
    margin-left: 0;
  }

  body.kb-watch-page .plyr--video .plyr__controls > .plyr__controls__item:first-child {
    margin-right: 0;
  }

  body.kb-watch-page .plyr--video .plyr__controls > .plyr__progress__container {
    order: 10;
    flex: 1 0 100%;
  }
}