/* ============================================================
   PLAYER — Figma 25:5218: ▶ (10×11) · line 167px · "0:00 / 0:48" 16px
   ============================================================ */

.player {
  display: flex;
  align-items: center;
  gap: 1rem;                     /* 16px line → time */
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.player__controls {
  display: flex;
  align-items: center;
  gap: 9px;                      /* Figma: triangle ends at 13px, line starts at 22px */
  width: 189px;                  /* Figma "Group 5" */
}

.player__play {
  all: unset;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  flex: none;
}
.player__play:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.player__play svg { width: 13px; height: 13px; fill: currentColor; }
.player__play .icon-pause { display: none; }
.player.is-playing .icon-play { display: none; }
.player.is-playing .icon-pause { display: block; }

/* The line is the track; the elapsed part is drawn thicker on top of it.
   (Progress/pause states aren't in Figma — kept minimal.) */
.player__track {
  position: relative;
  flex: 1;
  height: 13px;                  /* comfortable click area; the line is 1px */
}
.player__track::before,
.player__progress {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  background: currentColor;
}
.player__track::before { height: 1px; transform: translateY(-50%); }
.player__progress {
  height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  margin-top: -1.5px;
}
.player__track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.player__time { white-space: nowrap; font-variant-numeric: tabular-nums; }