/* Playlist-watch queue, transcript, category pills. Default template only (body.ov-page). */
body.ov-page .playlist-container {
  background: color-mix(in srgb, var(--ov-brand) 10%, var(--ov-surface));
  border: 0.5px solid var(--ov-border);
  border-radius: var(--ov-radius-card);
  overflow: hidden;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}
body.ov-page .playlist-container-header {
  padding: 10px 12px;
  font-size: var(--ov-fs-meta);
  font-weight: 500;
  border-bottom: 0.5px solid var(--ov-border);
  flex-shrink: 0;
}
body.ov-page .playlist-container-header h5 {
  margin: 0;
  font-size: var(--ov-fs-body);
  font-weight: 500;
}
body.ov-page .playlist-container-header a {
  color: inherit;
  text-decoration: none;
}
body.ov-page .ov-queue-sub {
  margin: 4px 0 0;
  font-size: var(--ov-fs-caption);
  color: var(--ov-text-secondary);
  font-weight: 400;
}
body.ov-page .transcript-time {
  cursor: pointer;
  color: var(--ov-brand);
}
body.ov-page .playlist-item-container {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
body.ov-page .playlist-items {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
body.ov-page .playlist-items .side-video {
  padding: 8px 10px !important;
  background: transparent !important;
}
body.ov-page .playlist-items.is-current .side-video,
body.ov-page .playlist-items[aria-current="true"] .side-video {
  background: color-mix(in srgb, var(--ov-brand) 16%, var(--ov-surface)) !important;
}
body.ov-page .playlist-items.is-current .playlist-index-container,
body.ov-page .playlist-items.is-current .side-video-title,
body.ov-page .playlist-items[aria-current="true"] .playlist-index-container,
body.ov-page .playlist-items[aria-current="true"] .side-video-title {
  color: var(--ov-brand) !important;
}
body.ov-page .ov-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
body.ov-page .ov-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--ov-fs-caption);
  color: var(--ov-text-secondary);
  background: var(--ov-surface-sunken);
  border: 0.5px solid var(--ov-border);
  border-radius: var(--ov-radius-pill);
  padding: 4px 10px;
}
body.ov-page .ov-transcript { margin-top: 8px; }
body.ov-page .ez-playlist-up-next,
body.ov-page .next-video-container {
  border-radius: var(--ov-radius-media);
  font-size: var(--ov-fs-body);
}
body.ov-page .next-video-container .up-next-text {
  font-size: var(--ov-fs-meta);
  font-weight: 500;
}
body.ov-page .next-video-card {
  border-radius: var(--ov-radius-media);
  border: 0.5px solid var(--ov-border);
}
@media (max-width: 767.98px) {
  /* video_task #340 (2026-09-24 revision): on mobile the page stacks into
     one column (custom-main-layout.scss <=767px), which drops the queue --
     it lives in #video-row-right -- below the entire left column, i.e.
     under Latest Videos at the very bottom of the page. This revision's
     target sequence is player -> title -> actions -> description -> tags
     -> queue -> Latest Videos -> ad -> comments -> spans: the queue sits
     below the description card and above Latest Videos, already open, with
     no tap-to-expand affordance (supersedes the #271 collapsed-bar-under-
     the-player spec). Flattening the four wrappers between #video-row and
     the player/queue makes them siblings of one flex container, so `order`
     declarations alone place the queue; no markup move, no JS, and desktop
     (>=768px) is not reached by this query. The breakpoint must stay in
     step with the column-stack breakpoint: if the queue's range is narrower
     than the stack's range there is a band with no queue and a full-height
     one at the page bottom (video_task #340 E6). */
  body.ov-page .ov-row--playlist,
  body.ov-page .ov-row--playlist > #video-row-left,
  body.ov-page .ov-row--playlist > #video-row-left > main,
  body.ov-page .ov-row--playlist > #video-row-left > main > section.mb-2,
  body.ov-page .ov-row--playlist > #video-row-right {
    display: contents;
  }
  body.ov-page .ov-row--playlist #default-mode-container {
    order: -2;
  }
  /* The queue cannot reach its new position by lowering only its own
     `order` -- everything sourced from #video-row-left > main (title,
     actions, description, tags) sits at the flex default `order: 0`, so any
     queue value low enough to clear Latest Videos would also clear the
     description. Push the three trailing #video-row-right siblings (the ad
     placeholder, comments, and the two trailing spans) down instead, then
     override the queue back above them. Without the catch-all those three
     would jump above the queue at their default `order: 0` -- moving the ad
     slot, which is out of scope. */
  body.ov-page .ov-row--playlist > #video-row-right > * {
    order: 3;
  }
  body.ov-page .ov-row--playlist > #video-row-right > aside {
    order: 1;
  }
  body.ov-page .ov-row--playlist > #video-row-left > aside {
    order: 2;
  }
  /* section.mb-2 carried the gap between #video-actions-row and the
     description; flattening it away drops that 8px gap (video_task #340 E8,
     finding 1). */
  body.ov-page .ov-row--playlist #video-actions-row {
    margin-bottom: .5rem;
  }

  /* Always open on mobile -- no tap-to-expand control exists anymore.
     `height: auto` is load-bearing: it is what beats the fixed 400px
     height custom-body.scss:1312 declares on .playlist-container (the
     shared legacy sheet compiled from src/assets/css/custom-body.scss).
     Without it the queue renders as an empty bordered box that size
     (video_task #340 E4). `max-height: min(60vh, 420px)` keeps the open
     queue bounded so a long list scrolls inside .playlist-item-container's
     own inner scroller instead of growing the page (video_task #340 E8: an
     unbounded 25-item queue measured scrollHeight 2366px). */
  body.ov-page .ov-row--playlist .playlist-container {
    height: auto;
    max-height: min(60vh, 420px);
    min-width: 0;
  }
}