/* transcript-player.css -- styling for the in-page synced player.
   Deliberately minimal and theme-light, to sit alongside the existing
   unstyled transcript pages without redesigning them. */

#mt-player {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 12px;
}

#mt-player iframe,
#mt-player audio {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Video backends (YouTube, archive.org) share one responsive 16:9 box.
   It scales to the column but is capped so the sticky header cannot eat the
   viewport on a laptop -- and is capped harder in landscape, where vertical
   space is scarcest. */
.mt-video {
  display: block;
  width: 100%;
  max-width: min(880px, 100%);
  aspect-ratio: 16 / 9;
  max-height: 45vh;
  border: 0;
  margin: 0 auto;
  background: #000;
}
#mt-yt iframe { width: 100%; height: 100%; border: 0; }

@media (orientation: landscape) and (max-height: 820px) {
  .mt-video { max-height: 38vh; }
}
@media (max-width: 600px) {
  #mt-player { padding: 4px 0; }
  .mt-controls { font-size: 13px; gap: 6px; }
  .mt-video { max-height: 32vh; }
}
/* If the viewport is really short, un-stick so the player cannot swallow
   the whole screen. */
@media (max-height: 420px) {
  #mt-player { position: static; }
  .mt-video { max-height: none; }
}

/* A transcript line. Cursor hints that clicking seeks, but the underlying
   <a href> still works without JS. */
p.line { cursor: pointer; }

p.line.mt-active {
  background: #fff6d5;
  border-left: 3px solid #e8b500;
  padding-left: 8px;
  margin-left: -11px;
}

/* word-level highlight: only ever present on the active line */
span.w.w-active {
  background: #ffe066;
  border-radius: 2px;
}

@media (prefers-color-scheme: dark) {
  #mt-player { background: #1b1b1b; border-bottom-color: #333; }
  .mt-controls [data-clock], .mt-follow { color: #bbb; }
  p.line.mt-active { background: #3a3320; border-left-color: #b98f00; }
  span.w.w-active { background: #6b5500; }
}

/* right-click correction menu */
.mt-menu {
  position: absolute;
  z-index: 50;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  font: 14px system-ui, sans-serif;
}
.mt-menu button {
  text-align: left;
  padding: 7px 10px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 4px;
}
.mt-menu button:hover { background: #eef2ff; }

.mt-hint {
  font: 12px system-ui, sans-serif;
  color: #666;
  margin-top: 4px;
}

@media (prefers-color-scheme: dark) {
  .mt-menu { background: #232323; border-color: #444; color: #eee; }
  .mt-menu button { color: #eee; }
  .mt-menu button:hover { background: #333; }
  .mt-hint { color: #999; }
}