/* The player with a wave of lines: a minimal podcast player on a black page. One hairline card, the episode set in
   Roboto Flex, a waveform made of thin vertical lines on a canvas and one accent for what has been heard. */
:root {
  --page: #000000;          /* the page */
  --card: #0a0a0a;          /* the card */
  --edge: #1f1f1f;          /* the card's hairline */
  --ink: #f2efe8;           /* the writing, the play button and the line playing */
  --muted: #77736b;         /* the smaller writing */
  --dim: #34322e;           /* the lines not heard yet */
  --lit: #a8a397;           /* the lines not heard yet, under the lens */
  --accent: #ff6b3d;        /* the lines already heard */
  --ring: rgb(242 239 232 / 0.22);         /* the hairline round the buttons */
  --ring-strong: rgb(242 239 232 / 0.6);   /* the same hairline under the pointer */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px 16px;
}

.player {
  position: relative;
  width: min(380px, 100%);
  padding: 30px 24px 30px;
  border: 1px solid var(--edge);
  border-radius: 28px;
  background: var(--card);
  user-select: none;
  -webkit-user-select: none;
}

.player :where(p, h2) {
  margin: 0;
}

/* ---------------------------------------------------------------- the episode */
.head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.head__meta {
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.title {
  margin-top: 64px;
  font-size: 34px;
  font-weight: 360;
  font-stretch: 84%;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.title .w {
  display: inline-block;
  will-change: transform;
}

.guest {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 420;
  font-stretch: 96%;
  color: var(--muted);
}

/* ---------------------------------------------------------------- the wave, the lens and the time above it */
.scope {
  --band: 46px;             /* the room above the lines where the time rides */
  --lines: 124px;           /* the height of the lines' strip */
  --ticks: 16px;            /* the room below for the chapter marks */
  position: relative;
  height: calc(var(--band) + var(--lines) + var(--ticks));
  margin-top: 48px;
}

.scope__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.wave {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--band);
  height: var(--lines);
  border-radius: 6px;
  outline: none;
  cursor: col-resize;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.wave:focus-visible {
  box-shadow: 0 0 0 1px var(--card), 0 0 0 2px var(--muted);
}

html[data-using='pointer'] .wave:focus-visible {
  box-shadow: none;
}

.readout {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform, opacity;
}

.readout__time {
  font-size: 17px;
  font-weight: 320;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.readout__chapter {
  font-size: 11px;
  font-weight: 450;
  font-stretch: 92%;
  line-height: 1.2;
  color: var(--muted);
}

/* ---------------------------------------------------------------- the controls */
.controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.play {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--ring);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.play svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  overflow: visible;
}

@media (hover: hover) {
  .play:hover {
    border-color: var(--ring-strong);
  }
}

.now {
  min-width: 0;
  flex: 1 1 auto;
}

.now__clock {
  font-size: 15px;
  font-weight: 430;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.now__of {
  margin: 0 6px;
  color: var(--muted);
}

.now__clock > span:last-child {
  color: var(--muted);
}

/* each figure of the time is its own little window, so a changing figure can roll */
.digits {
  display: inline-flex;
}

/* the window fades at its top and bottom, so a figure half way through its roll melts instead of being cut */
.digits .d {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.4em;
  margin: -0.1em 0;
  line-height: 1.4em;
  vertical-align: bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}

.digits .d > span {
  display: block;
}

.digits .d > span + span {
  position: absolute;
  left: 0;
  top: 0;
}

.now__chapter {
  margin-top: 2px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 420;
  font-stretch: 92%;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.speed {
  flex: none;
  min-width: 48px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 460;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.speed__in {
  display: inline-block;
}

@media (hover: hover) {
  .speed:hover {
    border-color: var(--ring);
  }
}

.play:focus-visible,
.speed:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

html[data-using='pointer'] .play:focus-visible,
html[data-using='pointer'] .speed:focus-visible {
  outline: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .play,
  .speed {
    transition: none;
  }
}