/* PNR "Listen Now" footer playbar. Uses the design-system tokens from ds.css so
   it tracks light/dark themes and the gallery/print look (hard borders, mono type,
   one chartreuse accent). */

.pnrm-player {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-toast);
  background: var(--surface);
  border-top: var(--border-3) solid var(--border-strong);
  box-shadow: 0 -4px 0 0 var(--hairline);
}
.pnrm-player[hidden] { display: none; }

/* Keep the fixed bar from covering page content when it's open. */
.pnr-has-player .pnrm__main { padding-bottom: 96px; }

.pnrm-player__wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding: 10px 20px;
}

/* Cover swatch */
.pnrm-player__cover {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border: var(--border-2) solid var(--border-strong);
  border-radius: var(--radius-xs);
  display: flex; align-items: flex-end;
  padding: 5px;
  overflow: hidden;
}
.pnrm-player__cat {
  font-family: var(--font-mono);
  font-size: 8px; font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}

/* Track meta */
.pnrm-player__meta { flex: 1 1 180px; min-width: 0; }
.pnrm-player__title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pnrm-player__sub {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-muted);
  letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

/* Transport */
.pnrm-player__transport { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.pnrm-player__btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: var(--border-2) solid transparent;
  border-radius: var(--radius-full);
  background: transparent; color: var(--text);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.pnrm-player__btn svg { width: 22px; height: 22px; display: block; }
.pnrm-player__btn:hover { background: var(--surface-2); }
.pnrm-player__btn:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.pnrm-player__btn:disabled { opacity: .35; cursor: default; }
.pnrm-player__btn:disabled:hover { background: transparent; }

.pnrm-player__btn--play {
  width: 44px; height: 44px;
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hard-sm);
}
.pnrm-player__btn--play svg { width: 26px; height: 26px; }
.pnrm-player__btn--play:hover { background: var(--accent-hover); transform: translate(-1px,-1px); box-shadow: var(--shadow-hard); }
.pnrm-player__btn--play:active { transform: translate(0,0); box-shadow: var(--shadow-hard-sm); }

/* Show play vs pause glyph based on state. */
.pnrm-player__ico {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
}
.pnrm-player__ico--play { display: flex; }
.pnrm-player.is-playing .pnrm-player__ico--play { display: none; }
.pnrm-player.is-playing .pnrm-player__ico--pause { display: flex; }

/* Seek bar */
.pnrm-player__seek { flex: 2 1 240px; display: flex; align-items: center; gap: 10px; min-width: 120px; }
.pnrm-player__time {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto; min-width: 34px;
}
.pnrm-player__time:last-of-type { text-align: right; }

.pnrm-player__bar {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto;
  height: 6px;
  background: var(--surface-3);
  border: var(--border-1) solid var(--border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.pnrm-player__bar::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  background: var(--accent);
  border: var(--border-2) solid var(--border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.pnrm-player__bar::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--accent);
  border: var(--border-2) solid var(--border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.pnrm-player__bar:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }

.pnrm-player__btn--close { flex: 0 0 auto; width: 30px; height: 30px; color: var(--text-muted); }

/* Turnstile mount (invisible/managed). Positioned so a visible challenge, if ever
   required, appears just above the bar rather than disrupting layout. */
.pnrm-player__turnstile {
  position: absolute;
  right: 16px; bottom: calc(100% + 8px);
}
.pnrm-player__turnstile:empty { display: none; }

/* Narrow screens: drop the seek time labels and let it wrap. */
@media (max-width: 720px) {
  .pnrm-player__wrap { gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
  .pnrm-player__cover { width: 40px; height: 40px; }
  .pnrm-player__meta { flex: 1 1 100%; order: -1; }
  .pnrm-player__seek { flex: 1 1 100%; }
  .pnr-has-player .pnrm__main { padding-bottom: 140px; }
}

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