/* The docked player bar: its three zones and the scrubber.

   Split out of app.css; load order is the cascade, so this file expects to
   come after the ones before it in index.html. */

/* ── Player bar ───────────────────────────────────────────── */

.player {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--player-h);
  display: grid;
  /* The centre column has to be given width, not left to size to its content:
     as `auto` the scrubber collapsed to a third of the reference's 410px. */
  grid-template-columns: 1fr minmax(0, 560px) 1fr;
  align-items: center;
  padding-inline: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 100;
}

/* ── Player: LEFT zone ────────────────────────────────────── */

.player__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
}

.player__cover {
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-tile);
  background:
    linear-gradient(135deg, #e8927c 0%, #c97b9a 40%, #9a6fb0 100%);
}

.player__track-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
  margin-inline-end: 4px;
}

.player__title {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__artist {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__icon-btn {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s var(--ease-out);
  flex: 0 0 auto;
  position: relative;
}

/* The glyph stays 20px inside 32px, but the tap area reaches 44px. An empty
   overlay changes no pixel of the design. */
.player__icon-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.player__icon-btn:hover {
  color: var(--text);
}

/* Press acknowledgment for the share button: identical to the now-playing
   icon flash, so the same gesture glows the same way in both homes. */
.player__icon-btn.is-flashed {
  color: var(--accent);
}

.player__icon-btn svg {
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* V2f: the transport row is one family at 2px — the play/pause glyph sets the
   weight and the shuffle/prev/next/repeat outlines are brought up to it, not
   down. Scoped to the transport so the utility icons keep the 1.75 language. */
.player__transport .player__icon-btn svg {
  stroke-width: 2;
}

/* ── Player: CENTRE zone ──────────────────────────────────── */

.player__centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  inline-size: 100%;
  max-inline-size: 560px;
}

.player__transport {
  display: flex;
  align-items: center;
  gap: 18px;
}

.player__play-btn {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--page);
  cursor: pointer;
  transition: transform 0.1s var(--ease-out);
  position: relative;
}

/* The 32px siblings reach 44px through ::after above; the 40px play button
   gains the last 2px per side the same way, with no pixel of paint changed.
   Verified with elementFromPoint at the expanded edge (verify-player). */
.player__play-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
}

.player__play-btn:hover {
  transform: scale(1.05);
}

.player__play-btn svg {
  inline-size: 22px;
  block-size: 22px;
  margin-inline-start: 2px;
}

/* ── Scrubber ─────────────────────────────────────────────── */

.player__scrubber {
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 100%;
}

.player__time {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.player__track-bar {
  position: relative;
  flex: 1 1 0;
  block-size: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}

/* The 4px bar keeps its paint; the tap area reaches 44px tall through an
   empty overlay. The bar lives in the fixed player, outside any scrolling
   ancestor, so nothing clips the expansion (verified with elementFromPoint
   in verify-player). Keyboard focus lands on the bar itself (role=slider). */
.player__track-bar::after {
  content: "";
  position: absolute;
  inset: -20px 0;
}

.player__track-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.1s linear;
}

.player__track-knob {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--text);
  transform: translateX(0px) translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s linear;
}

/* ── Player: RIGHT zone ───────────────────────────────────── */

.player__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.player__vol-bar {
  position: relative;
  inline-size: 90px;
  block-size: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}

/* Same 4px-to-44px treatment as the scrubber beside it. */
.player__vol-bar::after {
  content: "";
  position: absolute;
  inset: -20px 0;
}

.player__vol-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left center;
}

.player__vol-knob {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--text);
  transform: translateX(0px) translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}