/*
 * <VideoEndOverlay/> styles. All selectors carry the `.video-end-`
 * prefix so they don't collide via CSS hoisting.
 *
 * The chrome (replay, next, toc) is hand-tuned white alphas because the
 * overlay always sits on the dark theater, whatever the page theme. The
 * primary action is NOT hand-tuned: it takes --accent/--accent-ink like
 * every other primary button on the site. It used to carry its own blue
 * with white on top, which is 2.87:1 and fails WCAG AA at this size, and
 * 2.26:1 on hover. The tokens are the pair the theme picks per mode for
 * contrast: white on blue-700 in light (6.27:1), blue-950 on blue-500 in
 * dark (7.17:1).
 *
 * Sizing is driven by CONTAINER queries on the overlay, not by viewport
 * media queries. The overlay fills a 16:9 theater, so the space it has
 * is set by the theater's width, which is not the viewport's: a phone in
 * portrait gives it 390x219, a phone in landscape 693x390, a desktop
 * window 1200x675. Height is what runs out, and only the container knows
 * it. Sized off the viewport instead, the four controls needed 245px in a
 * 219px box on a phone: Install was clipped above the top edge, the email
 * row fell below the bottom one, and the pinned Replay button landed on
 * top of Sign up.
 */

.video-end-overlay {
  position: absolute;
  inset: 0;
  /* Above .post-theater-placeholder (z:2) AND .post-theater-duration
     pill (z:3). Without this the timestamp pill bleeds over the
     replay button corner. */
  z-index: 5;
  /* The query container for every rule below. `size` rather than
     `inline-size` because height is the axis that decides the layout,
     and inset:0 already gives this box a definite size in both. */
  container-type: size;
  container-name: video-end;
  display: flex;
  flex-direction: column;
  /* `safe` center, plus the scroll, is the floor under every size below:
     if a combination ever outgrows its box anyway, the stack pins to the
     top and scrolls instead of overflowing off both edges, where the
     theater's overflow:hidden would eat it. */
  justify-content: safe center;
  align-items: center;
  overflow-y: auto;
  /* No padding here. A size container is queried on its CONTENT box, so
     padding on the overlay is subtracted from every `max-height` below
     and the tiers fire a step early. The inset lives on .video-end-actions
     instead, where the tiers can also change it. Replay is unaffected:
     an absolute box is placed against the padding box either way. */
  padding: 0;
  color: #fff;
  /* Match the dark topbar + theater so the overlay reads as the
     same shell, not a stacked panel. Pure #000 reserved for things
     like video letterboxing, not chrome. */
  background: var(--theater-bg);
  font-family: var(--font-sans);
  opacity: 0;
  animation: video-end-overlay-in 250ms cubic-bezier(0.2, 0.7, 0.2, 1) 100ms forwards;
}

.video-end-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  /* 380 of content plus the 24 inset on each side. */
  max-width: 428px;
  box-sizing: border-box;
  padding: 24px;
  flex-shrink: 0;
  opacity: 0;
  /* Opacity only, deliberately: this stack contains Replay, which on a
     wide overlay is absolutely positioned against the theater's corner.
     An animation on `transform` resolves to a value rather than `none`
     and, with fill-mode forwards, keeps resolving to one after it ends,
     which makes this element the containing block for that Replay and
     drags it up onto the Next row. The 6px rise the other elements get
     is not worth that. */
  animation: video-end-fade 250ms ease-out 200ms forwards;
}

/* Install, the nav row, and the email capture are three separate
   decisions, not one control group. They get room to read as such.
   Margin rather than `gap`, because the tail collapses to nothing for a
   signed-in viewer and a gap would still reserve a row for it. */
.video-end-actions > * + * {
  margin-top: 20px;
}

.video-end-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 48px;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
  line-height: 1;
}
.video-end-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.video-end-nav-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.video-end-button-toc {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
  padding: 0;
  text-decoration: none;
}
.video-end-button-toc:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.03);
}

.video-end-button-next {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.video-end-button-next:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.03);
}

.video-end-button-next-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  overflow: hidden;
}

.video-end-button-next-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
  line-height: 1;
  transition: color 180ms ease;
}

.video-end-button-next-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  transition: color 180ms ease;
}

.video-end-button-next-chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.35);
  transition: transform 180ms ease, color 180ms ease;
}

/* On hover, brighten Next text up to full white. */
.video-end-button-next:hover .video-end-button-next-title   { color: #fff; }
.video-end-button-next:hover .video-end-button-next-eyebrow { color: rgba(255, 255, 255, 0.55); }
.video-end-button-next:hover .video-end-button-next-chevron {
  color: rgba(255, 255, 255, 0.85);
  transform: translateX(2px);
}

/* Wide overlay: Replay is lifted out of the stack and pinned to the
   bottom-right corner of the theater. Absolute, so it is out of flow
   and the row it would otherwise close costs nothing. */
.video-end-button-replay {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 12px;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  opacity: 0;
  animation: video-end-fade-up 250ms ease-out 350ms forwards;
}
.video-end-button-replay:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
}

/*
 * Short overlay — every phone in portrait, and any window short enough
 * that the 16:9 cap squeezes the theater. A 320pt phone gets a box 180px
 * tall; the same controls at full size need more than that. Everything
 * steps down a notch.
 *
 * Replay stays in its corner here too. It can, now that the stack is two
 * rows: the padding-bottom below is the corner's height reserved out of
 * the stack's own box, so the two are centered against each other
 * instead of colliding. Sizing it up to 40px puts it within a couple of
 * pixels of Install, which is the point — at 30px it read as a caption
 * next to two full-height controls.
 */
@container video-end (max-height: 320px) {
  .video-end-actions {
    padding: 14px;
    padding-bottom: 64px;
    max-width: 408px;
  }
  .video-end-actions > * + * { margin-top: 10px; }

  .video-end-primary { height: 42px; font-size: 14px; }

  .video-end-button-toc { width: 46px; height: 46px; }

  .video-end-button-next { height: 46px; padding: 0 14px; gap: 10px; }
  .video-end-button-next-title { font-size: 14px; }

  .video-end-button-replay {
    bottom: 12px;
    right: 12px;
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }
}

@keyframes video-end-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes video-end-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes video-end-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}