/* Videos (ADR 0093): the catalogue cards, a video's page with its
   privacy-enhanced player, and the Add / Edit video form. Loaded after
   articles.css, whose GitHub-style card (.article-card) the video card
   reuses. */

/* --- Cards ----------------------------------------------------------------- */

/* YouTube thumbnails are 16:9 under their letterbox bars; cropping to 16:9
   (articles.css's .article-card__image is 3:2) drops the bars. */
.video-card__image {
  aspect-ratio: 16 / 9;
}

/* A decorative play mark on the thumbnail: says "video" at a glance, the
   title and tokens say the rest. White on a near-opaque navy disc, so it
   reads on any picture (at least 11:1 even over white). */
.video-card__play {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: rgba(16, 24, 40, 0.86);
  color: #fff;
  font-size: 1.6rem;
  pointer-events: none;
}

/* --- The player ------------------------------------------------------------ */

/* YouTube's privacy-enhanced player, loaded with the page (videos/_player.html).
   The frame is black while the player loads; no overflow: hidden on it, so the
   iframe's focus ring (2px outside, below) isn't clipped. */
.video-player__frame {
  border-radius: 0.5rem;
  background-color: #000;
}

.video-player__frame > iframe {
  border: 0;
  border-radius: 0.5rem;
}

/* Tabbing into the player: the site's two-tone ring (focus.css). */
.video-player__frame > iframe:focus-visible {
  outline: 2px solid var(--site-focus-ring-color, #0067b8);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

.video-player__missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #eef1f4;
  color: #495862;
  text-align: center;
}

.video-player__missing .bi {
  font-size: 2.5rem;
}

/* #5c6672 on white is 5.9:1. */
.video-player__note {
  margin: 0.6rem 0 0;
  color: #5c6672;
  font-size: 0.9375rem;
}

/* --- A video's page --------------------------------------------------------- */

/* The article page's 800px column (articles/_article_detail_content.html). */
.video-detail {
  max-width: 50rem;
}

.video-detail__title {
  margin-bottom: 0.5rem;
  color: #16233c;
  font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
}

.video-detail__meta {
  margin-bottom: 1rem;
}

.video-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
}

.video-detail__action .bi {
  margin-right: 0.25rem;
}

/* Favorite, pressed: a filled heart (the shape, not only the colour, says
   so) on a light grey fill with a darker edge (#495057 on white, 8.6:1). */
.video-detail__action[aria-pressed="true"] {
  border-color: #495057;
  background-color: #e9ecef;
  color: #212529;
}

/* #495862 on the page background is over 7:1. */
.video-detail__status {
  color: #495862;
  font-size: 0.9375rem;
}

.video-detail__version {
  margin: 0.75rem 0 0;
}

.video-detail__version .bi {
  margin-right: 0.25rem;
}

/* The transcript: a native disclosure right under the player. The summary
   is drawn as a row with an edge (#767676, the site's field border, 4.5:1)
   and a chevron, so it reads as something to open. */
.video-detail__transcript {
  margin-top: 1rem;
  border: 1px solid var(--site-input-border-color, #767676);
  border-radius: 0.5rem;
  background-color: #fff;
}

.video-detail__transcript-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.video-detail__transcript-summary::-webkit-details-marker {
  display: none;
}

.video-detail__transcript-label {
  flex: 1 1 auto;
}

.video-detail__transcript-chevron {
  transition: transform 0.15s ease;
}

.video-detail__transcript[open] .video-detail__transcript-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .video-detail__transcript-chevron {
    transition: none;
  }
}

.video-detail__transcript-body {
  padding: 0.25rem 1rem 1rem;
  border-top: 1px solid #dee2e6;
}

.video-detail__transcript-text {
  padding-top: 0.75rem;
  overflow-wrap: anywhere;
}

.video-detail__about,
.video-detail__access {
  margin-top: 2rem;
}

.video-detail__heading {
  margin-bottom: 0.75rem;
  color: #16233c;
  font-size: 1.35rem;
  font-weight: 700;
}

/* A gap is stated in words under a heading; the icon and the amber edge
   (#946200, 5.2:1 on white) only mark it. */
.video-detail__gaps {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid #946200;
  border-radius: 0.25rem;
  background-color: #fff8e6;
}

.video-detail__gaps .bi {
  color: #946200;
}

.video-detail__facts {
  margin: 0;
}

.video-detail__fact {
  display: grid;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid #dee2e6;
}

@media (min-width: 576px) {
  .video-detail__fact {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

.video-detail__fact dt {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
}

.video-detail__fact dd {
  margin: 0;
}

/* --- The Add / Edit video form --------------------------------------------- */

/* The layout, the Publishing card's parts and their sizes are also in articles.css
   as .article-form__* (the article editor), byte for byte in their declarations;
   a third user moves them to static/shared/css/. */

.video-form__breadcrumb {
  margin-bottom: 0;
}

/* Left-aligned, as on the builder and Edit profile (the standard heading
   is centred, base.html). */
.video-form > .page-heading {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  text-align: left;
}

.video-form > .page-heading .page-heading__subtitle {
  margin-top: 0.5rem;
  margin-inline: 0;
}

.video-form__problem .bi {
  margin-right: 0.25rem;
}

.video-form__layout {
  display: grid;
  gap: 0 1.5rem;
}

@media (min-width: 768px) {
  .video-form__layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
  }
}

@media (min-width: 992px) {
  .video-form__layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
}

/* Beside the fields the card starts level with the first row under the
   Expand / Collapse all line, not with that line. */
@media (min-width: 768px) {
  .video-form__aside {
    margin-top: calc(var(--video-form-toggle-height) + 0.25rem);
  }
}

/* Pinned under the navbar only while the whole card fits the window: a
   sticky card taller than the window would keep its buttons out of view. */
@media (min-width: 768px) and (min-height: 50rem) {
  .video-form__aside {
    position: sticky;
    top: calc(var(--lc-sticky-top, 4rem) + 1rem);
  }
}

/* The Draft / Published token in the Publishing card's subtitle, small enough
   that its header is as tall as Video details'. */
.video-form__publishing .card__token {
  padding: 0 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  vertical-align: middle;
}

/* The builder shell's tighter card strip (assessments.css), since several
   cards run down this page. */
.video-form .builder-form-card .card-header.builder-form-card__header {
  padding: 0.85rem 1.35rem;
  background-color: transparent;
  border-bottom-color: var(--site-input-border-color, #767676);
}

.video-form__publishing,
.video-form__publishing .card-header {
  border-color: var(--site-input-border-color, #767676);
}

.video-form .builder-form-card__title {
  font-size: 1.15rem;
}

.video-form .builder-form-card__subtitle {
  font-size: 0.9375rem;
}

/* A roomier divider than the shared one (cards.css), in the same edge colour
   as the sections and fields. */
.video-form .builder-form-card__divider {
  margin: 1.5rem 0;
  border-top-color: var(--site-input-border-color, #767676);
}

/* The left column is a stack of accordions (native <details>), a copy of
   articles.css's .article-form__section and parts: a bordered row with an
   icon, the section's heading and a chevron that turns when it opens. Black
   and white, no fills; the border is the field colour (fields.css). Both
   start open; the learning path form would be the third user, and these move
   to static/shared/css/ with it. */
.video-form {
  --video-form-toggle-height: 2rem;
}

.video-form__section {
  margin-bottom: 1rem;
  border: 1px solid var(--site-input-border-color, #767676);
  border-radius: 0.5rem;
}

.video-form__toggle-all {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--video-form-toggle-height);
  margin-bottom: 0.25rem;
}

.video-form__collapse-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.video-form__collapse-all-btn:hover,
.video-form__collapse-all-btn:focus-visible {
  text-decoration: underline;
}

.video-form__summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.15rem;
  cursor: pointer;
  list-style: none;
}

.video-form__summary::-webkit-details-marker {
  display: none;
}

.video-form__summary-icon {
  font-size: 1.25rem;
}

.video-form__section-title {
  flex: 1;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #000;
}

.video-form__chevron {
  transition: transform 0.15s ease;
}

[open] > .video-form__summary .video-form__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .video-form__chevron {
    transition: none;
  }
}

.video-form__section-body {
  padding: 0.25rem 1.15rem 1.15rem;
}

.video-form__section-body > :last-child {
  margin-bottom: 0;
}

.video-form__section-intro {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  color: #495862;
}

.video-form__short-field {
  max-width: 24rem;
}

.video-form__count {
  margin: 0.4rem 0 0;
  color: #5c6672;
  font-size: 0.875rem;
}

.video-form__link-status,
.video-form__upload-status {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
}

.video-form__link-status:empty,
.video-form__upload-status:empty {
  display: none;
}

/* #b02a37 on white is 6.4:1. */
.video-form__link-status.is-error,
.video-form__upload-status.is-error {
  color: #b02a37;
}

.video-form__preview {
  max-width: 30rem;
  margin-top: 0.75rem;
}

.video-form__preview-label {
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.video-form__question {
  margin: 0;
}

.video-form__legend {
  float: none;
  width: auto;
  margin-bottom: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
}

.video-form__described[hidden] {
  display: none;
}

.video-form__transcript {
  min-height: 12rem;
}

.video-form__mode-note {
  padding: 0.65rem 0.75rem;
  border-radius: 0.375rem;
  background-color: #eef5fd;
  font-size: 0.9375rem;
}

.video-form__mode-note .bi {
  margin-right: 0.25rem;
  color: #0067b8;
}

.video-form__checklist {
  margin-bottom: 1.25rem;
}

.video-form__check {
  margin-bottom: 0.35rem;
}

/* The checklist's amber "recommended" mark: Bootstrap's warning yellow is
   1.6:1 on white, too faint to see; #946200 is 5.2:1. !important beats
   the .text-warning utility (itself !important). */
.video-form__checklist .bi.text-warning {
  color: #946200 !important;
}

.video-form__check-hint {
  color: #5c6672;
}

.video-form__buttons {
  display: grid;
  gap: 0.6rem;
}

.video-form__delete {
  margin-top: 1rem;
}

/* --- Option cards ----------------------------------------------------------- */

/* "Pick one" cards: a <label> wraps its radio, so the whole card selects
   it with no JS; :has(input:checked) marks the chosen one (the radio's own
   dot says so too, not only the colour). A copy of assessments.css's
   .assessment-builder__mode-option under a generic name, except that the
   edge is the field colour (as .video-form__section's, 4.5:1) where the
   original keeps a pale grey; a third user moves it to static/shared/css/cards.css. */
.choice-cards {
  display: grid;
  gap: 0.6rem;
}

.choice-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--site-input-border-color, #767676);
  border-radius: 0.65rem;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.choice-card:has(input:focus-visible) {
  outline: 2px solid #0067b8;
  outline-offset: 2px;
}

.choice-card:has(input:checked) {
  border-color: #0067b8;
  background-color: #eef5fd;
  box-shadow: inset 0 0 0 1px #0067b8;
}

.choice-card input {
  margin-top: 0.3rem;
  flex-shrink: 0;
}

.choice-card__body {
  min-width: 0;
}

.choice-card__title {
  display: block;
  color: #1d2b45;
  font-size: 1.0625rem;
  font-weight: 600;
}

.choice-card__description {
  display: block;
  color: #495057;
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
  .choice-card {
    transition: none;
  }
}