/* styles/music-player.css — the header MUSIC PLAYER (src/MusicPlayer.jsx), 23 Sep 2026.
   One line on the status-pill line of a music project's header, right-aligned with the round header
   buttons. position:absolute inside .project-header, so it moves no other box; the JSX measures the
   line and sets top / right / width. Colours are tokens only (--leaf is each skin's accent), so all
   twelve skins paint it. The glass recipe is the header's own (.ph-iconbtn / .ph-search-pill). */

.hmp-player {
  --mp-h: 44px;
  --mp-accent: var(--leaf);
  --mp-accent-2: var(--sk-a4, var(--leaf));
  --mp-ink: var(--ink-on-dark);
  --mp-muted: color-mix(in srgb, var(--mp-ink) 64%, transparent);
  color: var(--mp-ink);
  position: absolute;
  /* above .ph-project (z 50), whose subtitle line runs under the player's left end; under the
     header's own dropdowns (--z-header-menu, 250) */
  z-index: 60;
  height: var(--mp-h);
  box-sizing: border-box;
  opacity: 1;
  transition: opacity var(--dur-2) ease, visibility 0s linear 0s;
}
.hmp-player.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-2) ease, visibility 0s linear var(--dur-2);
}
.hmp-player.is-menu-open { z-index: var(--z-header-menu); }

/* 24 Sep 2026 — COMPACT AT REST: the player's box keeps its full width (position:absolute, so it
   moves nothing), but only the BAR takes the pointer, and at rest the bar is only as wide as the
   track pill, at the right end. .hmp-inner is the full row, always laid out at full width and
   right-aligned inside the bar, which clips it: growing the bar reveals the row to the LEFT of the
   pill and nothing inside reflows. */
.hmp-player { pointer-events: none; }
.hmp-bar, .hmp-menus { pointer-events: auto; }
.hmp-player.is-hidden :is(.hmp-bar, .hmp-menus) { pointer-events: none; }
.hmp-bar {
  height: 100%;
  width: 100%;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  overflow: clip;
  transition: width 220ms var(--ease-glide);
  border-radius: var(--r-pill);
  white-space: nowrap;
  position: relative;
  background:
    radial-gradient(120% 160% at 18% 0%, color-mix(in srgb, var(--cream-5) 16%, transparent), color-mix(in srgb, var(--cream-5) 3%, transparent) 70%),
    color-mix(in srgb, var(--shade-5) 4%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    inset 1px 1px 2px color-mix(in srgb, var(--hi) 35%, transparent),
    inset -1px -1px 2px rgba(0, 0, 0, 0.18),
    inset 0 0 14px color-mix(in srgb, var(--hi) 8%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.22);
}
/* the header orbs' foil rim, drawn as a 1px masked ring (header.css .ph-iconbtn::before) */
.hmp-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--hi-3) 55%, transparent) 0%,
    color-mix(in srgb, var(--foil) 18%, transparent) 30%,
    transparent 55%,
    color-mix(in srgb, var(--hi) 14%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
/* a faint accent wash that breathes in while a song plays */
.hmp-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(60% 140% at 8% 50%, color-mix(in srgb, var(--mp-accent) 18%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 600ms ease;
}
.hmp-player.is-playing .hmp-bar::after { opacity: 1; }
.hmp-bar > .hmp-inner {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--mp-full-w, 100%);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 5px;
}
.hmp-inner > * { position: relative; flex-shrink: 0; transition: opacity var(--dur-3) ease; }
/* the pickers go last, so the track pill is the right end of the row and never moves */
.hmp-inner > .hmp-pickers { order: 9; }
.hmp-player.is-compact .hmp-bar { width: var(--mp-rest-w); }
.hmp-player.is-compact .hmp-inner > :not(.hmp-pickers),
.hmp-player.is-compact .hmp-album { opacity: 0; }
/* the tiny wave in the pill while a song plays (the song list's own eq, .hmp-row-live) */
.hmp-pill-live { height: 10px; margin-right: 1px; }
.hmp-track .hmp-q { margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .hmp-bar { transition: none; } }

/* ── transport ───────────────────────────────────────────── */
.hmp-transport { display: flex; align-items: center; gap: 2px; }
.hmp-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mp-muted);
  cursor: pointer;
  transition: color var(--dur-1) ease, background var(--dur-1) ease;
}
.hmp-btn:hover:not(:disabled) { color: var(--mp-ink); background: color-mix(in srgb, var(--mix-light) 8%, transparent); }
.hmp-btn:focus-visible,
.hmp-chip:focus-visible,
.hmp-slider:focus-visible,
.hmp-play:focus-visible { outline: var(--ring-w) solid var(--mp-accent); outline-offset: 2px; }
.hmp-btn:disabled { opacity: 0.35; cursor: default; }

/* play = one of the header's round glass buttons (.ph-iconbtn), a size down, with an accent ring */
.hmp-bar .hmp-play.ph-iconbtn {
  width: 34px; height: 34px;
  color: var(--mp-ink);
  box-shadow:
    inset 1px 1px 2px color-mix(in srgb, var(--hi) 35%, transparent),
    inset -1px -1px 2px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, var(--mp-accent) 55%, transparent),
    0 0 14px color-mix(in srgb, var(--mp-accent) 28%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.22);
}
.hmp-bar .hmp-play.ph-iconbtn svg { margin-left: 1px; }
.hmp-player.is-playing .hmp-play.ph-iconbtn svg { margin-left: 0; }
.hmp-player.is-playing .hmp-bar .hmp-play.ph-iconbtn {
  background:
    radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--mp-accent) 55%, transparent), color-mix(in srgb, var(--mp-accent) 22%, transparent) 75%);
  box-shadow:
    inset 1px 1px 2px color-mix(in srgb, var(--hi) 40%, transparent),
    inset -1px -1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--mp-accent) 80%, transparent),
    0 0 18px color-mix(in srgb, var(--mp-accent) 45%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.22);
}
.hmp-bar .hmp-play.ph-iconbtn:disabled { opacity: 0.45; cursor: default; transform: none; }

/* ── the live wave ───────────────────────────────────────── */
.hmp-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  width: 54px;
}
.hmp-wave-bar {
  display: block;
  flex: 1 1 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--mp-accent-2) 0%, var(--mp-accent) 60%, color-mix(in srgb, var(--mp-accent) 70%, transparent) 100%);
  opacity: 0.45;
  transform-origin: 50% 50%;
  transform: scaleY(0.16);
  will-change: transform;
  transition: opacity 400ms ease;
}
.hmp-wave.is-live .hmp-wave-bar {
  opacity: 1;
  box-shadow: 0 0 6px color-mix(in srgb, var(--mp-accent) 45%, transparent);
}

/* ── album + song pickers ────────────────────────────────── */
.hmp-pickers {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
}
.hmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  min-width: 0;
  padding: 0 8px 0 10px;
  border: none;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mix-light) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-border) 22%, transparent);
  color: var(--mp-ink);
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-1) ease;
}
.hmp-chip:hover,
.hmp-chip.is-open { background: color-mix(in srgb, var(--mix-light) 11%, transparent); }
.hmp-chip-eyebrow {
  font-size: var(--fs-9, 9px);
  letter-spacing: var(--track-16);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
  color: var(--mp-muted);
}
.hmp-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
}
.hmp-album { max-width: 160px; min-width: 88px; flex-shrink: 0.5; }
.hmp-track { max-width: 250px; }
.hmp-track .hmp-chip-text { font-size: var(--fs-13); }
.hmp-player.is-empty .hmp-track .hmp-chip-text { color: var(--mp-muted); font-weight: var(--fw-med); }
.hmp-track-num {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--mp-accent);
  font-feature-settings: var(--tnum);
}
.hmp-caret { display: inline-flex; color: var(--mp-muted); transition: transform var(--dur-2) ease; }
.hmp-chip.is-open .hmp-caret { transform: rotate(180deg); }

/* the dropdowns are the header's own menu (.ph-episode-menu), opened to the right edge */
.hmp-menus { position: static; }
.hmp-menu.ph-episode-menu {
  left: auto;
  right: 0;
  top: calc(100% + 2px);             /* from the player's bottom now (was the pickers', 8 px higher) */
  width: 320px;
  max-width: 80vw;
  transform-origin: top right;
  white-space: normal;
}
.hmp-menu-list {
  max-height: min(56vh, 460px);
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hmp-row :is(.ph-menu-row-title, .ph-menu-row-sub) { display: block; }
/* 24 Sep 2026 — the Master / Demo tag rides the title's line (shorter than the line, so no row
   grows); a long title gives way with an ellipsis, the tag never wraps */
.hmp-row .hmp-row-title { display: flex; align-items: center; gap: 6px; }
.hmp-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hmp-q {
  flex: none;
  padding: 2px 5px;
  border-radius: var(--r-xs);
  font-size: var(--fs-9);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--track-01);
  text-transform: uppercase;
  color: var(--ink-on-dark-muted);
  background: color-mix(in srgb, var(--mix-light) 8%, transparent);
}
.hmp-q--master { color: var(--mp-accent); background: color-mix(in srgb, var(--mp-accent) 16%, transparent); }
.hmp-row .ph-episode-num { min-width: 28px; display: inline-flex; align-items: center; }
.hmp-row-icon { color: var(--mp-accent); }
.hmp-row.is-missing { cursor: default; opacity: 0.55; }
.hmp-row.is-missing:hover { background: none; }
.hmp-row-live { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.hmp-row-live i { width: 3px; height: 40%; border-radius: 1px; background: var(--mp-accent); }
.hmp-row-live.is-playing i { animation: hmp-eq 900ms ease-in-out infinite; }
.hmp-row-live.is-playing i:nth-child(2) { animation-delay: -300ms; }
.hmp-row-live.is-playing i:nth-child(3) { animation-delay: -600ms; }
@keyframes hmp-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.hmp-menu-hint,
.hmp-menu-empty {
  padding: 8px 10px 6px;
  font-size: var(--fs-11);
  line-height: 1.45;
  color: var(--ink-on-dark-muted);
}
.hmp-menu-hint { border-top: 1px solid color-mix(in srgb, var(--card-border) 18%, transparent); margin-top: 4px; }
.hmp-menu-albums { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px 6px; }
.hmp-menu-album {
  border: none;
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font: inherit;
  font-size: var(--fs-11);
  color: var(--ink-on-dark-muted);
  background: color-mix(in srgb, var(--mix-light) 6%, transparent);
  cursor: pointer;
}
.hmp-menu-album.is-active { color: var(--ink-on-dark); background: color-mix(in srgb, var(--leaf) 18%, transparent); }

/* ── progress + time ─────────────────────────────────────── */
.hmp-progress {
  flex: 1 1 auto;
  min-width: 150px;                 /* the pickers give way first (ellipsis), the seek bar keeps a length */
  display: flex;
  align-items: center;
  gap: 8px;
}
.hmp-time {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--mp-muted);
  font-feature-settings: var(--tnum);
  min-width: 34px;
  text-align: right;
}
.hmp-time--total { text-align: left; }

.hmp-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  border-radius: var(--r-pill);
}
.hmp-slider-track {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mix-light) 16%, transparent);
  transition: height var(--dur-1) ease;
}
.hmp-slider:hover .hmp-slider-track { height: 5px; }
.hmp-slider-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mp-accent-2), var(--mp-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--mp-accent) 40%, transparent);
}
/* the thumb shows on hover only; it sits on the fill's end and adds no width */
.hmp-slider-fill::after {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--mp-ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mp-accent) 70%, transparent);
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
.hmp-slider:hover .hmp-slider-fill::after,
.hmp-slider:focus-visible .hmp-slider-fill::after { opacity: 1; }

/* ── volume ──────────────────────────────────────────────── */
.hmp-volume { display: flex; align-items: center; gap: 4px; }
.hmp-vol { width: 64px; flex: 0 0 64px; }

/* ── narrow widths: drop parts, never wrap (tiers from MusicPlayer.jsx) ── */
.hmp-t4 :is(.hmp-volume, .hmp-chip-eyebrow) { display: none; }
.hmp-t3 :is(.hmp-volume, .hmp-album, .hmp-chip-eyebrow) { display: none; }
.hmp-t2 :is(.hmp-volume, .hmp-album, .hmp-progress) { display: none; }
.hmp-t2 .hmp-pickers { flex: 1 1 auto; }
.hmp-t2 .hmp-track { max-width: none; }
.hmp-t1 :is(.hmp-volume, .hmp-album, .hmp-progress, .hmp-wave, .hmp-prev, .hmp-next) { display: none; }
.hmp-t1 .hmp-pickers { flex: 1 1 auto; }
.hmp-t1 .hmp-track { max-width: none; }
.hmp-t0 { display: none; }

/* the phone header has no status-pill line to sit on: no player there */
body[data-ui-tier="s"] .hmp-player { display: none; }

/* ── skins ───────────────────────────────────────────────── */
/* glass family: the bar is a small PANEL of the skin (its surface + its panel ink), the pairing every
   skin keeps readable — a skin's orbs may carry pale glyphs on pale stone (maya-dark-01), a song
   title may not. The catch-light and shadows are the header orbs' own (skin-glass.css ~3590). */
body[data-skin-family="glass"] .hmp-player {
  --mp-ink: var(--sk-ink, var(--ink-on-dark));
}
body[data-skin-family="glass"] .hmp-bar {
  background:
    radial-gradient(120% 160% at 18% 0%, color-mix(in srgb, var(--sk-light, var(--hi)) 9%, transparent), transparent 70%),
    color-mix(in srgb, var(--sk-surface, var(--shade-5)) calc(66% + var(--sk-panels-solid, 0) * 30%), transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sk-light, var(--hi)) 22%, transparent),
    inset -1px -1px 2px color-mix(in srgb, var(--sk-dark, var(--black)) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sk-line, var(--card-border)) 22%, transparent),
    0 1px 2px color-mix(in srgb, var(--sk-dark, var(--black)) 16%, transparent),
    0 6px 16px color-mix(in srgb, var(--sk-dark, var(--black)) 22%, transparent);
}
body[data-skin-family="glass"] .hmp-chip { background: color-mix(in srgb, var(--mp-ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mp-ink) 14%, transparent); }
body[data-skin-family="glass"] .hmp-slider-track { background: color-mix(in srgb, var(--mp-ink) 18%, transparent); }
body[data-skin-family="glass"] .hmp-bar::before {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--sk-line, var(--card-border)) 60%, transparent) 0%,
    color-mix(in srgb, var(--sk-line, var(--card-border)) 18%, transparent) 50%,
    color-mix(in srgb, var(--sk-line, var(--card-border)) 40%, transparent) 100%);
}
/* paper family with gilt header buttons: the play disc wears the same gilt as the orbs above it */
@container style(--sk-header-buttons: gilt) {
  body[data-skin-family="paper"] .hmp-bar .hmp-play.ph-iconbtn {
    background:
      radial-gradient(circle at 30% 26%, var(--sk-header-button-hi-1, color-mix(in oklab, var(--gilt) 55%, transparent)), transparent 70%),
      var(--sk-header-button-1, color-mix(in oklab, var(--gilt-lo) 45%, var(--sk-page)));
    color: var(--gilt-sheen);
  }
  body[data-skin-family="paper"] .hmp-bar .hmp-play.ph-iconbtn::before {
    background: linear-gradient(160deg, var(--gilt-sheen) 0%, var(--gilt-rim) 55%, color-mix(in oklab, var(--gilt-rim) 70%, var(--gilt-lo)) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hmp-row-live.is-playing i { animation: none; height: 70%; }
}