@gentomiyano/optimized-web-audio-player 0.1.0 → 0.2.0

package/dist/ui/player-views.css

@@ -1,654 +1,713 @@
-.player-compact,
-.player-wide,
-.player-detailed,
-.player-podcast,
-.player-mini,
-.player-queue-panel {
-  container-name: player-surface;
-  container-type: inline-size;
-}
-
-.player-compact {
-  max-width: 480px;
-  overflow: visible;
-}
-
-.player-compact__main {
-  display: grid;
-  grid-template-areas:
-    "play artwork metadata volume"
-    "play artwork signal volume";
-  grid-template-columns: auto 48px minmax(0, 1fr) auto;
-  align-items: center;
-  min-width: 0;
-  column-gap: 0.65rem;
-  row-gap: 0.18rem;
-  padding: 0.55rem 0.65rem;
-}
-
-.player-compact__main > .player-play-button {
-  grid-area: play;
-  min-width: var(--player-hit);
-  min-height: var(--player-hit);
-}
-
-.player-compact__artwork {
-  grid-area: artwork;
-  width: 48px;
-  height: 48px;
-}
-
-.player-compact__main > .player-metadata {
-  grid-area: metadata;
-  gap: 0.05rem;
-}
-
-.player-compact .player-collection {
-  display: none;
-}
-
-.player-compact .player-title {
-  font-size: 0.82rem;
-}
-
-.player-compact .player-creator {
-  font-size: 0.63rem;
-}
-
-.player-compact__signal {
-  display: grid;
-  grid-area: signal;
-  grid-template-columns: auto minmax(48px, 1fr) auto;
-  align-items: center;
-  min-width: 0;
-  gap: 0.4rem;
-}
-
-.player-compact__main > .player-volume-popover {
-  grid-area: volume;
-}
-
-.player-compact .player-waveform {
-  height: 14px;
-}
-
-.player-compact .player-status,
-.player-compact .player-time {
-  font-size: 0.52rem;
-  letter-spacing: 0.05em;
-}
-
-.player-compact .player-time {
-  gap: 0.18rem;
-}
-
-.player-wide {
-  max-width: 680px;
-}
-
-.player-wide__grid {
-  min-width: 0;
-}
-
-.player-wide__header {
-  display: grid;
-  grid-template-columns: 96px minmax(0, 1fr);
-  align-items: center;
-  min-width: 0;
-  gap: clamp(0.9rem, 3vw, 1.2rem);
-  padding: 0.9rem 1.1rem;
-  border-bottom: 1px solid var(--player-faint);
-}
-
-.player-wide__artwork {
-  width: 96px;
-  height: 96px;
-}
-
-.player-wide__identity {
-  display: grid;
-  min-width: 0;
-  gap: 0.55rem;
-}
-
-.player-wide[data-appearance="light"] .player-wide__identity {
-  padding: 0.65rem 0.8rem;
-  border: 1px solid var(--player-lcd-rule);
-  background: var(--player-lcd);
-}
-
-.player-wide__identity .player-title {
-  font-size: clamp(1.05rem, 4cqi, 1.42rem);
-  font-weight: 350;
-}
-
-.player-wide__content {
-  display: grid;
-  min-width: 0;
-  gap: 0.35rem;
-  padding: 0.65rem 1.1rem 0.8rem;
-}
-
-.player-wide .player-transport {
-  padding-top: 0.4rem;
-  border-top: 1px solid var(--player-faint);
-}
-
-.player-timeline,
-.player-podcast__timeline {
-  display: grid;
-  grid-template-rows: auto auto auto;
-  min-width: 0;
-}
-
-.player-timeline > .player-waveform,
-.player-podcast__timeline > .player-waveform {
-  grid-row: 1;
-}
-
-.player-timeline > .player-seek,
-.player-podcast__timeline > .player-seek {
-  grid-row: 2;
-}
-
-.player-timeline > .player-wide__timeline-footer,
-.player-podcast__timeline > .player-time {
-  grid-row: 3;
-}
-
-.player-wide .player-waveform {
-  height: 50px;
-  margin-block: 0;
-}
-
-.player-timeline .player-seek,
-.player-podcast__timeline .player-seek {
-  min-height: 30px;
-}
-
-.player-wide__timeline-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-width: 0;
-  gap: 1.5rem;
-}
-
-.player-wide__timeline-footer .player-time {
-  width: min(13rem, 42%);
-}
-
-.player-wide__timeline-footer .player-volume {
-  justify-content: flex-end;
-}
-
-.player-detailed {
-  max-width: 720px;
-}
-
-.player-detailed__display {
-  display: grid;
-  grid-template-columns: 170px minmax(0, 1fr) 126px;
-  min-width: 0;
-  border-bottom: 1px solid var(--player-rule);
-}
-
-.player-detailed__artwork {
-  width: 170px;
-  min-height: 170px;
-}
-
-.player-detailed__primary {
-  display: grid;
-  align-content: center;
-  min-width: 0;
-  gap: 0.25rem;
-  padding: 0.65rem 1.2rem 0.25rem;
-  border-right: 1px solid var(--player-faint);
-}
-
-.player-detailed[data-appearance="light"] .player-detailed__primary {
-  background: var(--player-lcd);
-}
-
-.player-detailed__primary .player-title {
-  font-size: clamp(1.02rem, 3.2cqi, 1.32rem);
-  font-weight: 350;
-}
-
-.player-detailed__primary .player-waveform {
-  height: 28px;
-}
-
-.player-detailed__primary .player-seek {
-  min-height: 30px;
-}
-
-.player-detailed__numbers {
-  display: grid;
-  align-content: center;
-  min-width: 0;
-  gap: 0.55rem;
-  padding: 0.95rem;
-}
-
-.player-detailed__metric {
-  display: grid;
-  min-width: 0;
-  gap: 0.12rem;
-  justify-items: end;
-}
-
-.player-detailed__metric-label {
-  color: var(--player-muted);
-  font-size: 0.5rem;
-  letter-spacing: 0.13em;
-  text-transform: uppercase;
-}
-
-.player-detailed__metric-value {
-  color: var(--player-text);
-  font-family: var(--player-font-digital);
-  font-size: 0.68rem;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.09em;
-}
-
-.player-detailed__transport {
-  padding: 0.4rem 1rem;
-  border-bottom: 1px solid var(--player-rule);
-}
-
-.player-section-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 38px;
-  border-bottom: 1px solid var(--player-faint);
-  color: var(--player-muted);
-  font-size: 0.67rem;
-  letter-spacing: 0.13em;
-  text-transform: uppercase;
-}
-
-.player-detailed__queue {
-  padding: 0 1rem 0.65rem;
-}
-
-.player-detailed__queue ol,
-.player-queue-panel ol {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.player-detailed__queue li,
-.player-queue-panel li {
-  border-bottom: 1px solid var(--player-faint);
-}
-
-.player-detailed__queue li:last-child,
-.player-queue-panel li:last-child {
-  border-bottom: 0;
-}
-
-.player-detailed__queue li[data-current="true"],
-.player-queue-panel li[data-current="true"] {
-  background: var(--player-active-wash);
-}
-
-.player-detailed__queue li[data-current="true"] .player-queue-number,
-.player-detailed__queue li[data-current="true"] .player-queue-title,
-.player-queue-panel li[data-current="true"] .player-queue-number {
-  color: var(--player-brand);
-}
-
-.player-detailed__queue li[data-current="true"] .player-queue-title,
-.player-queue-panel li[data-current="true"] .player-queue-copy strong {
-  font-weight: 650;
-}
-
-.player-detailed__queue li > button {
-  display: grid;
-  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
-  align-items: center;
-  width: 100%;
-  min-height: 38px;
-  padding: 0 0.55rem;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.player-detailed__queue li > button:hover,
-.player-queue-panel li > button:hover {
-  background: var(--player-faint);
-}
-
-.player-detailed__queue time,
-.player-queue-panel time {
-  color: var(--player-muted);
-  font-family: var(--player-font-digital);
-  font-size: 0.66rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.player-queue-title {
-  overflow: hidden;
-  font-size: 0.76rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.player-empty {
-  margin: 0;
-  padding: 1.4rem 0.6rem;
-  color: var(--player-muted);
-  font-size: 0.8rem;
-}
-
-.player-podcast {
-  max-width: 760px;
-}
-
-.player-podcast__header {
-  display: grid;
-  grid-template-columns: 112px minmax(0, 1fr) auto;
-  align-items: center;
-  min-width: 0;
-  gap: clamp(1rem, 4vw, 1.6rem);
-  padding: 1.15rem;
-  border-bottom: 1px solid var(--player-faint);
-}
-
-.player-podcast__artwork {
-  width: 112px;
-  height: 112px;
-}
-
-.player-podcast__header .player-title {
-  font-size: clamp(1.05rem, 3.6cqi, 1.4rem);
-  font-weight: 350;
-}
-
-.player-podcast[data-appearance="light"]
-  .player-podcast__header
-  > .player-metadata {
-  padding: 0.65rem 0.8rem;
-  border: 1px solid var(--player-lcd-rule);
-  background: var(--player-lcd);
-}
-
-.player-podcast__transport {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: clamp(0.15rem, 2vw, 1rem);
-  padding: 0.45rem 1rem;
-  border-top: 1px solid var(--player-rule);
-}
-
-.player-podcast__timeline {
-  padding: 0.75rem 1.15rem 1.1rem;
-}
-
-.player-podcast__timeline .player-waveform {
-  height: 60px;
-}
-
-.player-mini {
-  max-width: 100%;
-  overflow: visible;
-}
-
-.player-mini__main {
-  display: grid;
-  grid-template-columns: 48px minmax(120px, 1fr) auto auto minmax(130px, 0.65fr);
-  align-items: center;
-  min-width: 0;
-  gap: 0.55rem;
-  padding: 0.4rem 0.65rem;
-}
-
-.player-mini__artwork {
-  width: 48px;
-  height: 48px;
-}
-
-.player-mini__controls {
-  display: flex;
-  align-items: center;
-  gap: 0;
-}
-
-.player-mini__timeline {
-  display: grid;
-  min-width: 0;
-}
-
-.player-mini__timeline .player-seek {
-  min-height: 24px;
-}
-
-.player-queue-panel {
-  max-width: 460px;
-}
-
-.player-queue-panel > header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  align-items: center;
-  min-height: 60px;
-  padding: 0.5rem 0.65rem 0.5rem 1rem;
-  border-bottom: 1px solid var(--player-rule);
-}
-
-.player-queue-panel h2 {
-  margin: 0.12rem 0 0;
-  overflow: hidden;
-  font-size: 0.92rem;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.player-queue-panel li > button {
-  display: grid;
-  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
-  align-items: center;
-  width: 100%;
-  min-height: 48px;
-  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.player-queue-copy {
-  display: grid;
-  min-width: 0;
-  gap: 0.08rem;
-}
-
-.player-queue-copy strong,
-.player-queue-copy small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.player-queue-copy strong {
-  font-size: 0.78rem;
-  font-weight: 540;
-}
-
-.player-queue-copy small {
-  color: var(--player-muted);
-  font-size: 0.66rem;
-}
-
-.player-transport .player-icon-button:not(.player-play-button),
-.player-podcast__transport .player-icon-button:not(.player-play-button) {
-  color: var(--player-muted);
-}
-
-.player-transport .player-icon-button[aria-pressed="true"],
-.player-transport .player-icon-button:hover:not(:disabled),
-.player-podcast__transport .player-icon-button:hover:not(:disabled) {
-  color: var(--player-brand);
-}
-
-@container player-surface (max-width: 680px) {
-  .player-detailed__display {
-    grid-template-columns: 104px minmax(0, 1fr);
-  }
-
-  .player-detailed__artwork {
-    width: 104px;
-    height: 104px;
-    min-height: 0;
-    align-self: start;
-  }
-
-  .player-detailed__primary {
-    padding: 0.75rem;
-    border-right: 0;
-  }
-
-  .player-detailed__primary .player-waveform {
-    height: 24px;
-  }
-
-  .player-detailed__numbers {
-    grid-column: 1 / -1;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    align-items: center;
-    padding: 0.5rem 0.75rem;
-    border-top: 1px solid var(--player-faint);
-  }
-
-  .player-detailed__metric {
-    justify-items: start;
-  }
-
-  .player-detailed__transport {
-    padding-inline: 0.5rem;
-  }
-
-  .player-detailed__transport .player-transport {
-    width: 100%;
-    justify-content: space-between;
-    gap: 0;
-  }
-
-  .player-podcast__header {
-    grid-template-columns: 86px minmax(0, 1fr);
-    gap: 0.85rem;
-    padding: 0.85rem;
-  }
-
-  .player-podcast__artwork {
-    width: 86px;
-    height: 86px;
-  }
-
-  .player-podcast__header > .player-status {
-    grid-column: 2;
-  }
-
-  .player-podcast__transport {
-    gap: 0;
-    padding-inline: 0.3rem;
-  }
-
-  .player-mini__main {
-    grid-template-columns: 46px minmax(0, 1fr) auto;
-  }
-
-  .player-mini__controls > .player-volume-popover {
-    display: none;
-  }
-
-  .player-mini__artwork {
-    width: 46px;
-    height: 46px;
-  }
-
-  .player-mini__main > .player-status,
-  .player-mini__timeline {
-    display: none;
-  }
-}
-
-@container player-surface (max-width: 440px) {
-  .player-compact__main {
-    grid-template-areas:
-      "play artwork metadata"
-      "play artwork signal";
-    grid-template-columns: auto 48px minmax(0, 1fr);
-  }
-
-  .player-compact__main > .player-volume-popover {
-    display: none;
-  }
-
-  .player-compact__signal {
-    grid-template-columns: minmax(48px, 1fr) auto;
-  }
-
-  .player-compact .player-status {
-    display: none;
-  }
-
-  .player-wide__header {
-    grid-template-columns: 78px minmax(0, 1fr);
-    gap: 0.85rem;
-    padding: 0.85rem;
-  }
-
-  .player-wide__artwork {
-    width: 78px;
-    height: 78px;
-  }
-
-  .player-wide__identity {
-    gap: 0.55rem;
-  }
-
-  .player-wide__content {
-    padding: 0.7rem 0.85rem 1rem;
-  }
-
-  .player-wide__timeline-footer .player-volume {
-    display: none;
-  }
-
-  .player-wide__timeline-footer .player-time {
-    width: 100%;
-  }
-
-  .player-transport {
-    justify-content: space-between;
-  }
-
-  .player-detailed__queue {
-    padding-inline: 0.5rem;
-  }
-
-  .player-detailed__transport {
-    padding-inline: 0.25rem;
-  }
-
-  .player-queue-panel > header {
-    padding-left: 0.65rem;
-  }
-
-  .player-queue-panel li > button {
-    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
-    padding-inline: 0.45rem;
-  }
-}
+.player-compact,
+.player-bound-compact,
+.player-wide,
+.player-detailed,
+.player-podcast,
+.player-mini,
+.player-queue-panel {
+  container-name: player-surface;
+  container-type: inline-size;
+}
+
+.player-bound-compact {
+  max-width: 480px;
+  overflow: visible;
+}
+
+.player-bound-compact__main {
+  display: grid;
+  grid-template-areas:
+    "play artwork metadata"
+    "play artwork signal"
+    "seek seek seek";
+  grid-template-columns: auto 48px minmax(0, 1fr);
+  align-items: center;
+  min-width: 0;
+  column-gap: 0.65rem;
+  row-gap: 0.3rem;
+  padding: 0.55rem 0.65rem;
+}
+
+.player-bound-compact__main[data-active="true"] {
+  box-shadow: inset 3px 0 0 var(--player-accent);
+}
+
+.player-bound-compact__main > .player-play-button {
+  grid-area: play;
+  min-width: var(--player-hit);
+  min-height: var(--player-hit);
+}
+
+.player-bound-compact__artwork {
+  grid-area: artwork;
+  width: 48px;
+  height: 48px;
+}
+
+.player-bound-compact__main > .player-metadata {
+  grid-area: metadata;
+  gap: 0.05rem;
+}
+
+.player-bound-compact__signal {
+  display: grid;
+  grid-area: signal;
+  grid-template-columns: minmax(48px, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  gap: 0.4rem;
+}
+
+.player-bound-compact__signal .player-waveform {
+  height: 14px;
+}
+
+.player-bound-compact__main > .player-seek {
+  grid-area: seek;
+  min-height: 24px;
+}
+
+.player-compact {
+  max-width: 480px;
+  overflow: visible;
+}
+
+.player-compact__main {
+  display: grid;
+  grid-template-areas:
+    "play artwork metadata volume"
+    "play artwork signal volume";
+  grid-template-columns: auto 48px minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  column-gap: 0.65rem;
+  row-gap: 0.18rem;
+  padding: 0.55rem 0.65rem;
+}
+
+.player-compact__main > .player-play-button {
+  grid-area: play;
+  min-width: var(--player-hit);
+  min-height: var(--player-hit);
+}
+
+.player-compact__artwork {
+  grid-area: artwork;
+  width: 48px;
+  height: 48px;
+}
+
+.player-compact__main > .player-metadata {
+  grid-area: metadata;
+  gap: 0.05rem;
+}
+
+.player-compact .player-collection {
+  display: none;
+}
+
+.player-compact .player-title {
+  font-size: 0.82rem;
+}
+
+.player-compact .player-creator {
+  font-size: 0.63rem;
+}
+
+.player-compact__signal {
+  display: grid;
+  grid-area: signal;
+  grid-template-columns: auto minmax(48px, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  gap: 0.4rem;
+}
+
+.player-compact__main > .player-volume-popover {
+  grid-area: volume;
+}
+
+.player-compact .player-waveform {
+  height: 14px;
+}
+
+.player-compact .player-status,
+.player-compact .player-time {
+  font-size: 0.52rem;
+  letter-spacing: 0.05em;
+}
+
+.player-compact .player-time {
+  gap: 0.18rem;
+}
+
+.player-wide {
+  max-width: 680px;
+}
+
+.player-wide__grid {
+  min-width: 0;
+}
+
+.player-wide__header {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  align-items: center;
+  min-width: 0;
+  gap: clamp(0.9rem, 3vw, 1.2rem);
+  padding: 0.9rem 1.1rem;
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-wide__artwork {
+  width: 96px;
+  height: 96px;
+}
+
+.player-wide__identity {
+  display: grid;
+  min-width: 0;
+  gap: 0.55rem;
+}
+
+.player-wide[data-appearance="light"] .player-wide__identity {
+  padding: 0.65rem 0.8rem;
+  border: 1px solid var(--player-lcd-rule);
+  background: var(--player-lcd);
+}
+
+.player-wide__identity .player-title {
+  font-size: clamp(1.05rem, 4cqi, 1.42rem);
+  font-weight: 350;
+}
+
+.player-wide__content {
+  display: grid;
+  min-width: 0;
+  gap: 0.35rem;
+  padding: 0.65rem 1.1rem 0.8rem;
+}
+
+.player-wide .player-transport {
+  padding-top: 0.4rem;
+  border-top: 1px solid var(--player-faint);
+}
+
+.player-timeline,
+.player-podcast__timeline {
+  display: grid;
+  grid-template-rows: auto auto auto;
+  min-width: 0;
+}
+
+.player-timeline > .player-waveform,
+.player-podcast__timeline > .player-waveform {
+  grid-row: 1;
+}
+
+.player-timeline > .player-seek,
+.player-podcast__timeline > .player-seek {
+  grid-row: 2;
+}
+
+.player-timeline > .player-wide__timeline-footer,
+.player-podcast__timeline > .player-time {
+  grid-row: 3;
+}
+
+.player-wide .player-waveform {
+  height: 50px;
+  margin-block: 0;
+}
+
+.player-timeline .player-seek,
+.player-podcast__timeline .player-seek {
+  min-height: 30px;
+}
+
+.player-wide__timeline-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 1.5rem;
+}
+
+.player-wide__timeline-footer .player-time {
+  width: min(13rem, 42%);
+}
+
+.player-wide__timeline-footer .player-volume {
+  justify-content: flex-end;
+}
+
+.player-detailed {
+  max-width: 720px;
+}
+
+.player-detailed__display {
+  display: grid;
+  grid-template-columns: 170px minmax(0, 1fr) 126px;
+  min-width: 0;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-detailed__artwork {
+  width: 170px;
+  min-height: 170px;
+}
+
+.player-detailed__primary {
+  display: grid;
+  align-content: center;
+  min-width: 0;
+  gap: 0.25rem;
+  padding: 0.65rem 1.2rem 0.25rem;
+  border-right: 1px solid var(--player-faint);
+}
+
+.player-detailed[data-appearance="light"] .player-detailed__primary {
+  background: var(--player-lcd);
+}
+
+.player-detailed__primary .player-title {
+  font-size: clamp(1.02rem, 3.2cqi, 1.32rem);
+  font-weight: 350;
+}
+
+.player-detailed__primary .player-waveform {
+  height: 28px;
+}
+
+.player-detailed__primary .player-seek {
+  min-height: 30px;
+}
+
+.player-detailed__numbers {
+  display: grid;
+  align-content: center;
+  min-width: 0;
+  gap: 0.55rem;
+  padding: 0.95rem;
+}
+
+.player-detailed__metric {
+  display: grid;
+  min-width: 0;
+  gap: 0.12rem;
+  justify-items: end;
+}
+
+.player-detailed__metric-label {
+  color: var(--player-muted);
+  font-size: 0.5rem;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.player-detailed__metric-value {
+  color: var(--player-text);
+  font-family: var(--player-font-digital);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.09em;
+}
+
+.player-detailed__transport {
+  padding: 0.4rem 1rem;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 38px;
+  border-bottom: 1px solid var(--player-faint);
+  color: var(--player-muted);
+  font-size: 0.67rem;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.player-detailed__queue {
+  padding: 0 1rem 0.65rem;
+}
+
+.player-detailed__queue ol,
+.player-queue-panel ol {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.player-detailed__queue li,
+.player-queue-panel li {
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-detailed__queue li:last-child,
+.player-queue-panel li:last-child {
+  border-bottom: 0;
+}
+
+.player-detailed__queue li[data-current="true"],
+.player-queue-panel li[data-current="true"] {
+  background: var(--player-active-wash);
+}
+
+.player-detailed__queue li[data-current="true"] .player-queue-number,
+.player-detailed__queue li[data-current="true"] .player-queue-title,
+.player-queue-panel li[data-current="true"] .player-queue-number {
+  color: var(--player-brand);
+}
+
+.player-detailed__queue li[data-current="true"] .player-queue-title,
+.player-queue-panel li[data-current="true"] .player-queue-copy strong {
+  font-weight: 650;
+}
+
+.player-detailed__queue li > button {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  min-height: 38px;
+  padding: 0 0.55rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.player-detailed__queue li > button:hover,
+.player-queue-panel li > button:hover {
+  background: var(--player-faint);
+}
+
+.player-detailed__queue time,
+.player-queue-panel time {
+  color: var(--player-muted);
+  font-family: var(--player-font-digital);
+  font-size: 0.66rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.player-queue-title {
+  overflow: hidden;
+  font-size: 0.76rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-empty {
+  margin: 0;
+  padding: 1.4rem 0.6rem;
+  color: var(--player-muted);
+  font-size: 0.8rem;
+}
+
+.player-podcast {
+  max-width: 760px;
+}
+
+.player-podcast__header {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  gap: clamp(1rem, 4vw, 1.6rem);
+  padding: 1.15rem;
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-podcast__artwork {
+  width: 112px;
+  height: 112px;
+}
+
+.player-podcast__header .player-title {
+  font-size: clamp(1.05rem, 3.6cqi, 1.4rem);
+  font-weight: 350;
+}
+
+.player-podcast[data-appearance="light"]
+  .player-podcast__header
+  > .player-metadata {
+  padding: 0.65rem 0.8rem;
+  border: 1px solid var(--player-lcd-rule);
+  background: var(--player-lcd);
+}
+
+.player-podcast__transport {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(0.15rem, 2vw, 1rem);
+  padding: 0.45rem 1rem;
+  border-top: 1px solid var(--player-rule);
+}
+
+.player-podcast__timeline {
+  padding: 0.75rem 1.15rem 1.1rem;
+}
+
+.player-podcast__timeline .player-waveform {
+  height: 60px;
+}
+
+.player-mini {
+  max-width: 100%;
+  overflow: visible;
+}
+
+.player-mini__main {
+  display: grid;
+  grid-template-columns: 48px minmax(120px, 1fr) auto auto minmax(130px, 0.65fr);
+  align-items: center;
+  min-width: 0;
+  gap: 0.55rem;
+  padding: 0.4rem 0.65rem;
+}
+
+.player-mini__artwork {
+  width: 48px;
+  height: 48px;
+}
+
+.player-mini__controls {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.player-mini__timeline {
+  display: grid;
+  min-width: 0;
+}
+
+.player-mini__timeline .player-seek {
+  min-height: 24px;
+}
+
+.player-queue-panel {
+  max-width: 460px;
+}
+
+.player-queue-panel > header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  min-height: 60px;
+  padding: 0.5rem 0.65rem 0.5rem 1rem;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-queue-panel h2 {
+  margin: 0.12rem 0 0;
+  overflow: hidden;
+  font-size: 0.92rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-queue-panel li > button {
+  display: grid;
+  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.player-queue-copy {
+  display: grid;
+  min-width: 0;
+  gap: 0.08rem;
+}
+
+.player-queue-copy strong,
+.player-queue-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-queue-copy strong {
+  font-size: 0.78rem;
+  font-weight: 540;
+}
+
+.player-queue-copy small {
+  color: var(--player-muted);
+  font-size: 0.66rem;
+}
+
+.player-transport .player-icon-button:not(.player-play-button),
+.player-podcast__transport .player-icon-button:not(.player-play-button) {
+  color: var(--player-muted);
+}
+
+.player-transport .player-icon-button[aria-pressed="true"],
+.player-transport .player-icon-button:hover:not(:disabled),
+.player-podcast__transport .player-icon-button:hover:not(:disabled) {
+  color: var(--player-brand);
+}
+
+@container player-surface (max-width: 680px) {
+  .player-detailed__display {
+    grid-template-columns: 104px minmax(0, 1fr);
+  }
+
+  .player-detailed__artwork {
+    width: 104px;
+    height: 104px;
+    min-height: 0;
+    align-self: start;
+  }
+
+  .player-detailed__primary {
+    padding: 0.75rem;
+    border-right: 0;
+  }
+
+  .player-detailed__primary .player-waveform {
+    height: 24px;
+  }
+
+  .player-detailed__numbers {
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    border-top: 1px solid var(--player-faint);
+  }
+
+  .player-detailed__metric {
+    justify-items: start;
+  }
+
+  .player-detailed__transport {
+    padding-inline: 0.5rem;
+  }
+
+  .player-detailed__transport .player-transport {
+    width: 100%;
+    justify-content: space-between;
+    gap: 0;
+  }
+
+  .player-podcast__header {
+    grid-template-columns: 86px minmax(0, 1fr);
+    gap: 0.85rem;
+    padding: 0.85rem;
+  }
+
+  .player-podcast__artwork {
+    width: 86px;
+    height: 86px;
+  }
+
+  .player-podcast__header > .player-status {
+    grid-column: 2;
+  }
+
+  .player-podcast__transport {
+    gap: 0;
+    padding-inline: 0.3rem;
+  }
+
+  .player-mini__main {
+    grid-template-columns: 46px minmax(0, 1fr) auto;
+  }
+
+  .player-mini__controls > .player-volume-popover {
+    display: none;
+  }
+
+  .player-mini__artwork {
+    width: 46px;
+    height: 46px;
+  }
+
+  .player-mini__main > .player-status,
+  .player-mini__timeline {
+    display: none;
+  }
+}
+
+@container player-surface (max-width: 440px) {
+  .player-compact__main {
+    grid-template-areas:
+      "play artwork metadata"
+      "play artwork signal";
+    grid-template-columns: auto 48px minmax(0, 1fr);
+  }
+
+  .player-compact__main > .player-volume-popover {
+    display: none;
+  }
+
+  .player-compact__signal {
+    grid-template-columns: minmax(48px, 1fr) auto;
+  }
+
+  .player-compact .player-status {
+    display: none;
+  }
+
+  .player-wide__header {
+    grid-template-columns: 78px minmax(0, 1fr);
+    gap: 0.85rem;
+    padding: 0.85rem;
+  }
+
+  .player-wide__artwork {
+    width: 78px;
+    height: 78px;
+  }
+
+  .player-wide__identity {
+    gap: 0.55rem;
+  }
+
+  .player-wide__content {
+    padding: 0.7rem 0.85rem 1rem;
+  }
+
+  .player-wide__timeline-footer .player-volume {
+    display: none;
+  }
+
+  .player-wide__timeline-footer .player-time {
+    width: 100%;
+  }
+
+  .player-transport {
+    justify-content: space-between;
+  }
+
+  .player-detailed__queue {
+    padding-inline: 0.5rem;
+  }
+
+  .player-detailed__transport {
+    padding-inline: 0.25rem;
+  }
+
+  .player-queue-panel > header {
+    padding-left: 0.65rem;
+  }
+
+  .player-queue-panel li > button {
+    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
+    padding-inline: 0.45rem;
+  }
+}