/* -------------------------------------------------------
   Now-playing chip: pinned flush to the true left edge of
   .site-header itself (NOT inside the centered, padded
   .header-inner), so there is zero gap between it and the
   edge of the browser window regardless of viewport width.
   .header-inner gets matching left padding (below) so the
   logo/nav never sit underneath it. Markup is built by
   js/soundcloud-player.js.

   Shape: a rounded RECTANGLE, not a pill/stadium — corners
   use a small fixed radius, not radius:height/2.
------------------------------------------------------- */

:root {
  --sc-w: 232px;
}

/* NOTE: .site-header already has position:fixed (see style.css) — that alone
   is enough to be the containing block for the absolutely-positioned chip
   below, so we deliberately do NOT touch .site-header's position here.
   (An earlier version of this file set it to `relative`, which — being the
   same selector loaded after style.css — silently overrode the `fixed` rule
   and made the header scroll away with the page instead of staying pinned.) */

.sc-player {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  width: var(--sc-w);
  height: 48px;
  padding: 5px 12px 5px 5px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease), opacity 0.3s var(--ease);
}
.sc-player.is-loading { opacity: 0.6; cursor: default; }
.sc-player.is-playing {
  box-shadow: 0 0 18px -6px var(--accent-soft);
}

/* Header-inner no longer centers itself in a max-width column — that centering
   is what left a big empty gap between the flush-left chip and the logo on
   wide screens. It now spans the full header, with its own left padding pushed
   out by exactly the chip's width plus a small gap, so the logo sits right
   after the chip on any viewport, and its right padding kept as before. */
.header-inner {
  max-width: none;
  margin: 0;
  padding-left: calc(var(--sc-w) + 14px);
}

/* Hidden SoundCloud iframe: still in the DOM and driving playback via the
   Widget API, just not visible. Kept at a real, natural size and hidden with
   clip-path instead of collapsing width/height to ~0 — SoundCloud's own
   widget script builds an internal waveform canvas sized off the iframe's
   real layout dimensions (even with visual=false), and at ~0px that canvas
   throws on every redraw, which disrupts the postMessage bridge SC uses to
   send events (including PLAY_PROGRESS) back to this page. .sc-player above
   has overflow:hidden, so this larger iframe still can't visually spill out
   of the chip or affect page layout. */
.sc-player-frame {
  position: absolute;
  width: 300px;
  height: 166px;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
  border: 0;
}

/* Transparent hit target over the whole chip — toggles play/pause.
   No visible icon by design; the art + bars communicate state instead. */
.sc-player-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

/* Static square "cube" cover slot — holds the real track artwork loaded
   from SoundCloud (see soundcloud-player.js), not a placeholder icon, and
   doesn't spin or dim; only the glow ring reacts to play state. */
.sc-player-art {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #1a1414, #0a0808 70%);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.3s var(--ease), opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

/* Playlist track switch: art + body fade/slide out while the old track is
   torn down and the next one's metadata loads (see switchTo() in
   soundcloud-player.js), then this class is removed and they ease back in.
   0.22s here must match SWITCH_ANIM_MS in that file. */
.sc-player.is-switching .sc-player-art,
.sc-player.is-switching .sc-player-body {
  opacity: 0;
  transform: translateY(3px);
}
.sc-player.is-playing .sc-player-art {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5), 0 0 12px -1px var(--accent-soft);
}
.sc-player-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Fallback glyph (favicon mark), shown only until real artwork loads or
   when a track has none — sized down and dimmed so it reads as a placeholder. */
.sc-player-art img.sc-art-fallback {
  width: 56%;
  height: 56%;
  object-fit: contain;
  inset: 22%;
  opacity: 0.55;
}

/* Right-hand stack: bar visualizer on top, name + timer + progress below. */
.sc-player-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.sc-player-viz {
  display: block;
  width: 100%;
  height: 17px;
  filter: drop-shadow(0 0 3px var(--accent-soft));
}

.sc-player-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.sc-player-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  transition: color 0.2s var(--ease);
}
.sc-player.is-playing .sc-player-name { color: var(--text); }
.sc-player-time {
  flex: 0 0 auto;
  font-size: 9.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.sc-player-progress {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--line-soft);
  overflow: hidden;
}
.sc-player-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-soft);
  transition: width 0.1s linear;
}

@media (max-width: 860px) {
  :root { --sc-w: 190px; }
  .sc-player { height: 44px; }
  .sc-player-art { width: 34px; height: 34px; }
}

@media (max-width: 640px) {
  :root { --sc-w: 150px; }
  .sc-player { padding-right: 10px; }
  .sc-player-viz { display: none; }
  .sc-player-name { font-size: 10px; }
  .sc-player-time { display: none; }
}

/* Below this, the header can't fit the chip and the logo/menu button
   without crowding, so the chip steps aside and header-inner's padding
   reverts to normal. */
@media (max-width: 400px) {
  :root { --sc-w: 0px; }
  .sc-player { display: none; }
  .header-inner { padding-left: var(--edge); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-player,
  .sc-player-art,
  .sc-player-art img,
  .sc-player-body,
  .sc-player-progress-fill { transition: none; animation: none; }
  /* Without the fade transition, skip the invisible frame entirely: swap
     content instantly instead of sitting opacity:0 for SWITCH_ANIM_MS. */
  .sc-player.is-switching .sc-player-art,
  .sc-player.is-switching .sc-player-body { opacity: 1; transform: none; }
}