/* The Squeeze: the podcast masthead, the phone handoff card, and the
   episode list. */

.squeeze-masthead {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.squeeze-cover {
  width: 8.25rem;
  height: 8.25rem;
  border-radius: 1rem;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow) 18%, transparent);
}

.squeeze-kicker {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.squeeze-title {
  font-family: var(--display);
}

/* A white tile keeps the code scannable on the dark theme too. */
.squeeze-qr {
  width: 8.25rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: #ffffff;
}

.squeeze-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Out of the small print and up next to the title, where a glance finds it. */
.squeeze-episode .badge {
  font-size: 0.78rem;
}

/* The on-air light: an episode still in the studio blinks while it records. */
.squeeze-pulse {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: currentColor;
  animation: squeeze-pulse 1.6s ease-in-out infinite;
}

@keyframes squeeze-pulse {
  50% {
    opacity: 0.25;
  }
}

.squeeze-subscribe {
  max-width: 26rem;
}

/* Read along: the chapter under the needle stays lit as it plays. */
.squeeze-transcript summary {
  cursor: pointer;
}

.squeeze-transcript-chapter {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.squeeze-transcript-chapter.active {
  background: var(--bs-primary-bg-subtle);
}

/* The speaker bills outside the selectable text, so selecting dialogue to
   clip it can only ever pick up the spoken line. */
.squeeze-transcript-line {
  cursor: text;
}

.squeeze-transcript-line::before {
  content: attr(data-speaker);
  font-weight: 600;
  margin-right: 0.25rem;
}

@media (max-width: 575.98px) {
  .squeeze-cover {
    width: 6rem;
    height: 6rem;
  }
}