/**
 * Fullscreen player.
 *
 * One component serves both orientations. The rotated form swaps the stage's
 * dimensions with container-query units and rotates it, so the device is never
 * asked to turn.
 */

.player {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
  /* Lets the rotated stage read the frame's height as a width, and vice versa. */
  container-type: size;
}

.player__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  --topics-w: min(34%, 280px);

  /* Portrait: insets map straight through. */
  --pad-top: var(--sat);
  --pad-bottom: var(--sab);
  --pad-start: var(--sal);
  --pad-end: var(--sar);
}

/**
 * Rotated frame.
 *
 * env(safe-area-inset-*) always describes the physical device and does NOT
 * rotate with a CSS transform. After a 90deg clockwise rotation the stage's
 * left edge points at the device's top, its right edge at the device's bottom,
 * its top edge at the device's right, and its bottom edge at the device's
 * left. Reusing the portrait variables here is what puts controls under the
 * home indicator, so the mapping is restated rather than inherited.
 */
.player__stage--rotated {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  transform: translate(-50%, -50%) rotate(90deg);

  --pad-top: var(--sar);
  --pad-bottom: var(--sal);
  --pad-start: var(--sat);
  --pad-end: var(--sab);
}

/*
 * Black, not the tonal gradient this used to carry. That gradient stood in for
 * the video before playback existed; now it shows through wherever the embed
 * letterboxes, reading as a grey wash behind the picture.
 */
.player__media {
  position: absolute;
  inset: 0;
  background: #000;
}

/**
 * Full-bleed.
 *
 * This was briefly fitted to 16:9 to dodge a grey letterbox, but that was
 * specific to iframe.mediadelivery.net, whose pb.css paints `body` grey. The
 * host in use loads no such rule and takes the letterbox colour from the
 * library's custom CSS instead (see docs/bunny-player-head.html), so the frame
 * can fill the stage again -- which is also correct for video that is not 16:9,
 * where a fixed ratio would letterbox inside the frame.
 */
.player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.player__media.is-empty .player__frame {
  display: none;
}

/**
 * Input discipline over the embed.
 *
 * The stage, the media wrapper and the scrim all cover the video edge to edge,
 * and any one of them left interactive swallows every tap meant for the
 * player's own controls. Rather than exempting them one at a time, the stage
 * is transparent to input and the real controls opt back in below.
 */
.player__stage {
  pointer-events: none;
}

.player__frame,
.player__topics,
.player__head button {
  pointer-events: auto;
}

.player__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0) 24%,
    rgba(0, 0, 0, 0) 56%,
    rgba(0, 0, 0, 0.62)
  );
}

/* ---- Header ---- */

.player__head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: calc(var(--pad-top) + var(--space-lg));
  padding-left: calc(var(--pad-start) + var(--space-lg));
  padding-right: calc(var(--pad-end) + var(--space-lg));
}

.player__close {
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-left: calc(var(--space-md) * -1);
  border: 0;
  background: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.player__date {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-wide);
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player__chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.player__chip--icon {
  width: 29px;
  height: 29px;
  padding: 0;
  justify-content: center;
}

.player__stage.is-topics-open .player__chip--topics {
  display: none;
}

/* ---- Topics ---- */

.player__topics {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(34%, 280px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: 13px;
  padding-bottom: var(--pad-bottom);
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform var(--dur-ui) var(--ease-out);
}

.player__stage.is-topics-open .player__topics {
  transform: none;
}

.player__stage--rotated .player__topics {
  left: auto;
  top: 0;
  bottom: 0;
  width: var(--topics-w);
  height: auto;
  padding-top: var(--space-lg);
  padding-right: var(--pad-end);
  border-top: 0;
  border-left: 1px solid var(--line);
  transform: translateX(100%);
}

.player__stage--rotated.is-topics-open .player__topics {
  transform: none;
}

.player__topics-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-inline: var(--space-lg);
}

.player__topics-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1;
  color: #fff;
}

.player__topic-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.player__topics-head .player__chip {
  margin-left: auto;
}

.player__topic-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 12px;
  scrollbar-width: none;
}

.player__topic {
  flex: none;
  display: flex;
  gap: var(--space-md);
  width: 100%;
  padding: 8px var(--space-lg) 8px 13px;
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--dur-ui) var(--ease-out);
}

.player__topic.is-active {
  border-left-color: var(--accent);
  background: rgba(242, 232, 61, 0.08);
}

.player__topic-tc {
  flex: none;
  width: 48px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.player__topic.is-active .player__topic-tc {
  color: var(--accent);
}

.player__topic-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.35;
  color: #fff;
  text-wrap: pretty;
}