/* Live photos (idea 17): the LIVE mark on a card and on a Photos tile, the clip that plays over
   the picture while the mouse rests on it, and the viewer's Live button. public/live.js.

   The mark sits on top of a photograph, not on the app's surface, so it brings its own dark
   ground (as the play disc and the Photos video pill do) and does not take theme colours: a
   themed pill on a photo of snow, or of a red sofa, is a pill nobody can read. The viewer's
   button does take the accent once it is playing, because that is the app answering. */

.live-badge,
.ph-live {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 5px; border-radius: 999px;
  background: rgba(0, 0, 0, .5); color: #fff;
  font-family: var(--font-meta); font-size: 10px; font-weight: var(--fw-medium, 600);
  line-height: 1.4; letter-spacing: .08em;
  pointer-events: none;
  transition: opacity .16s var(--ease);
}
/* The ring-and-dot every phone uses for "live". Drawn, so no icon is needed and it follows
   the text colour. */
.live-badge::before,
.ph-live::before,
.live-btn::before {
  content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid currentColor; box-sizing: border-box;
  background: radial-gradient(circle, currentColor 0 1.6px, transparent 2px);
}

/* A Photos tile keeps its top-left corner for the selection tick, which a phone shows all the
   time; a still has nothing in its top-right (that is a video's corner), so the mark goes there. */
.ph-live { left: auto; right: 6px; }

/* While it is playing the mark would be saying something you can see. */
.card.live-on .live-badge,
.ph-item.playing .ph-live { opacity: 0; }

.card-media .live-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: transparent;
  opacity: 0; transition: opacity .22s var(--ease);
  pointer-events: none; z-index: 1;
}
.card-media .live-play.on { opacity: 1; }

/* ---- the viewer ---- */

.live-btn {
  position: absolute; z-index: 3;
  top: 10px; left: calc(20 * var(--sp) + 10px);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px; border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  font-family: var(--font-meta); font-size: 11px; font-weight: var(--fw-medium, 600);
  letter-spacing: .08em;
}
.live-btn:hover { background: rgba(0, 0, 0, .72); }
.live-btn:focus-visible { outline: 2px solid var(--accent-ring, var(--accent)); outline-offset: 2px; }
.live-btn.on { background: var(--accent); color: var(--accent-ink); }

/* Over the still, the same box the still is drawn in (the stage's own padding). */
.pv-stage video.live-view {
  position: absolute; z-index: 2;
  top: 0; bottom: calc(24 * var(--sp)); left: calc(20 * var(--sp)); right: calc(20 * var(--sp));
  width: calc(100% - 40 * var(--sp)); height: calc(100% - 24 * var(--sp));
  max-width: none; max-height: none;
  object-fit: contain; background: transparent; border-radius: var(--r);
  opacity: 0; transition: opacity .2s var(--ease);
  pointer-events: none;
}
.pv-stage video.live-view.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card-media .live-play, .pv-stage video.live-view, .live-badge, .ph-live { transition: none; }
}