/* Embedded players (templates/_embed.html, from the `with_embeds` filter
   - content/embeds.py). Loaded by every site template before its own
   stylesheet, so a template can override any of this. As wide as the
   column it sits in; video keeps 16:9, audio players get a fixed height
   inline from the template. */
.post-embed {
  width: 100%;
  margin: 1em 0;
}
.post-embed-video { aspect-ratio: 16 / 9; }
.post-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* An audio attachment (templates/_audio.html): the browser's own player,
   as wide as the column - until static/js/audio_player.js swaps in the
   block player below, which hides it. */
.post-audio {
  display: block;
  width: 100%;
  margin: 1em 0;
}
.audio-block + .post-audio { display: none; }

/* The block player: a play/pause square, and the rest of the bar is the
   timeline - the whole thing a big target for a thumb. Outlined in the
   template's own text colour, filling with its accent (--accent, or a tint
   of the text colour where a template has none) as it plays (--p). */
.audio-block {
  display: flex;
  align-items: stretch;
  height: 44px;
  margin: 1em 0;
  border: 1px solid currentColor;
  box-sizing: border-box;
  font-size: 0.85em;
}
.audio-block-play {
  all: unset;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border-right: 1px solid currentColor;
  color: inherit;
  cursor: pointer;
}
.audio-block-play svg { width: 14px; height: 14px; fill: currentColor; }
.audio-block-play .i-pause, .audio-block.is-playing .i-play { display: none; }
.audio-block.is-playing .i-pause { display: block; }
.audio-block-play:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.audio-block-seek { position: relative; flex: 1; min-width: 0; }
.audio-block-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  /* The accent at full strength; a template with no accent gets a light
     tint of its text colour instead (solid would hide the time). */
  background: var(--accent, color-mix(in srgb, currentColor 30%, transparent));
  pointer-events: none;
}
.audio-block-time {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* The file's name: from just after the play button to just before the
   time (room for "88:88"), never over either. One line, "…" when it's
   too long - then, while playing or hovered, it slides across to show
   the rest (--shift and --slide set by audio_player.js) and back. */
.audio-block-name {
  position: absolute;
  left: 0;
  padding-left: 0.35em; /* just off the button's edge */
  right: calc(20px + 5ch);
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.audio-block-name > span { display: inline-block; }
.audio-block-name.is-long { text-overflow: clip; }
.audio-block-name.is-long > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.audio-block.is-playing .audio-block-name.is-long > span,
.audio-block:hover .audio-block-name.is-long > span {
  max-width: none;
  overflow: visible;
  animation: audio-name-slide var(--slide, 6s) linear 0.8s infinite alternate;
}
@keyframes audio-name-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--shift, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .audio-block-name.is-long > span { animation: none !important; max-width: 100% !important; overflow: hidden !important; }
}
.audio-block-time { width: 5ch; text-align: right; }

/* The real slider, invisible, over the whole bar: does the seeking. */
.audio-block-seek input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
}
.audio-block-seek:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }

/* A video attachment (templates/_video.html): as wide as the column, like
   an embedded YouTube player, at the video's own shape - a tall phone video
   stops at most of the screen's height, letterboxed. */
.post-video {
  display: block;
  width: 100%;
  max-height: 85vh;
  margin: 1em 0;
  background: #000;
}