/* TJK-Chess 15.1.225 — video editor composition + cutout refinement. */

/* The editor preview is the final lesson composition, not a separate framed
   chessboard mock-up. Remove the old pale board mat/padding completely. */
.course-editor-live-preview.has-board-video .course-editor-preview-board-wrap {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.course-editor-live-preview.has-board-video .course-editor-preview-board-wrap > video,
.course-editor-live-preview.has-board-video .course-editor-preview-board-wrap > .course-editor-preview-board,
.course-editor-live-preview.has-board-video .course-editor-preview-board-wrap > .course-editor-preview-annotations {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Match Watch Video as well: the selected lesson background is the only area
   around the square board; no grey/white board picture-frame. */
.tjk-video-course-v171 .tjk-video-board-frame {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tjk-video-course-v171 .tjk-video-board-frame > [data-video-board-recording],
.tjk-video-course-v171 .tjk-video-board-frame > .tjk-video-board-wrap {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.tjk-video-course-v171 .tjk-video-coordinate-files {
  left: 0 !important;
  right: 0 !important;
  bottom: -2.2% !important;
  color: rgba(238,244,251,.76) !important;
}
.tjk-video-course-v171 .tjk-video-coordinate-ranks {
  left: -2.0% !important;
  top: 0 !important;
  bottom: 0 !important;
  color: rgba(238,244,251,.76) !important;
}

/* The post-recording editor already has sliders for presenter placement. The
   crop rectangle/grid is an editing aid from the raw-camera panel and made the
   final preview look split through the face; do not draw it here. */
.course-video-editor-panel .course-editor-camera-crop-overlay,
.course-video-editor-panel [data-editor-camera-crop-overlay] {
  display: none !important;
}

/* Preserve a strict 16:9 final composition while allowing arbitrary source
   video formats. AI/chroma cutouts fill the canvas; raw portrait/square/wide
   clips are contained by JS instead of being aggressively cropped. */
.course-editor-live-preview.has-board-video,
.tjk-video-course-v171 .tjk-video-composition.has-presenter {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
.course-editor-live-preview.has-board-video .course-editor-board-pane {
  left: 1.9% !important;
  width: 57% !important;
  height: 94% !important;
}
.course-editor-live-preview.has-board-video .course-editor-preview-board-wrap {
  width: auto !important;
  height: 92% !important;
  max-width: 96% !important;
  aspect-ratio: 1 / 1 !important;
}

/* Do not add a fake halo to a segmented presenter. The v222 drop-shadow made
   otherwise good hair/shoulder edges look like background-removal residue. */
.tjk-person-cutout-canvas {
  filter: none !important;
}

/* If background removal is off and the source is portrait/square/ultrawide,
   letterboxing inherits the chosen lesson background rather than white/grey. */
.course-editor-media-pane[data-presenter-aspect],
.tjk-video-presenter-pane[data-presenter-aspect] {
  background: transparent !important;
}
.course-editor-media-pane[data-presenter-aspect="portrait"] video,
.course-editor-media-pane[data-presenter-aspect="square"] video,
.course-editor-media-pane[data-presenter-aspect="ultrawide"] video,
.tjk-video-presenter-pane[data-presenter-aspect="portrait"] video,
.tjk-video-presenter-pane[data-presenter-aspect="square"] video,
.tjk-video-presenter-pane[data-presenter-aspect="ultrawide"] video {
  background: transparent !important;
}

/* Smaller screens keep the same relationship but give the board a little more
   room; phones fall back to the established stacked layout. */
@media (max-width: 1180px) and (min-width: 761px) {
  .course-editor-live-preview.has-board-video .course-editor-board-pane {
    left: 1.5% !important;
    width: 61% !important;
    height: 92% !important;
  }
  .course-editor-live-preview.has-board-video .course-editor-preview-board-wrap {
    height: 90% !important;
    max-width: 97% !important;
  }
}
@media (max-width: 760px) {
  .course-editor-live-preview.has-board-video {
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }
  .course-editor-live-preview.has-board-video .course-editor-board-pane {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  .course-editor-live-preview.has-board-video .course-editor-preview-board-wrap {
    width: 94% !important;
    height: auto !important;
    max-width: 94% !important;
  }
}