/* Bottom menus only: the mode pill and the player. Covers, the page, nav, and the turntable stay as they are. */

body.playlists-page .playlist-modeBar__color{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin:0 2px 0 0;
  padding:0;
  border:2px solid currentColor;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 22px;
  cursor:pointer;
  background:#1a1a1a;
}

body.playlists-page .playlist-modeBar__color input[type="color"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

body.playlists-page .playlist-modeBar__color input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0;
}

body.playlists-page .playlist-modeBar__color input[type="color"]::-webkit-color-swatch{
  border:0;
  border-radius:50%;
}

body.playlists-page .playlist-modeBar__colorReset{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin-right:2px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:inherit;
  font:700 14px/1 sans-serif;
  cursor:pointer;
  flex:0 0 22px;
}

body.playlists-page .playlist-modeBar__colorReset[hidden]{
  display:none !important;
}

body.playlists-page .playlist-playerShell__marquee{
  display:flex;
  align-items:center;
  gap:6px;
}

body.playlists-page .playlist-playerShell__marquee::before{
  content:"Now";
  flex:0 0 auto;
  padding:1px 6px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.5;
}

body.playlists-page.is-dark .playlist-playerShell__marquee::before{
  background:#f4f1ea;
  color:#141414;
}

body.playlists-page .playlist-playerShell__marqueeTrack{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}

body.playlists-page .playlist-playerShell__status{
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

body.playlists-page .playlist-coverButton.is-current{
  box-shadow:0 0 0 3px #111, 0 16px 26px rgba(0,0,0,.18);
}

body.playlists-page .playlist-coverButton.is-current::after{
  content:"Now";
  font-weight:700;
  letter-spacing:.14em;
}

body.playlists-page.is-dark .playlist-coverButton.is-current{
  box-shadow:0 0 0 3px #f4f1ea, 0 16px 26px rgba(0,0,0,.28);
}

html body.playlists-page[data-menu-color] :is(.playlist-modeBar, .playlist-playerShell){
  background:var(--playlist-menu-bg);
  color:var(--playlist-menu-fg);
  border-color:color-mix(in srgb, var(--playlist-menu-fg) 32%, transparent);
}

html body.playlists-page[data-menu-color] :is(
  .playlist-modeBar__btn,
  .playlist-modeBar__colorReset,
  .playlist-dockGrip,
  .playlist-dockToggle,
  .playlist-playerShell__status,
  .playlist-playerShell__time,
  .playlist-playerShell__marquee
){
  color:var(--playlist-menu-fg);
  border-color:transparent;
}

html body.playlists-page[data-menu-color] .playlist-playerShell__button{
  background:color-mix(in srgb, var(--playlist-menu-fg) 12%, var(--playlist-menu-bg));
  color:var(--playlist-menu-fg);
  border-color:color-mix(in srgb, var(--playlist-menu-fg) 28%, transparent);
}

html body.playlists-page[data-menu-color] :is(
  .playlist-modeBar__btn--mode.is-active,
  .playlist-playerShell__button.is-playing,
  .playlist-playerShell__button.is-scrubbing
){
  background:var(--playlist-menu-fg);
  color:var(--playlist-menu-bg);
  border-color:var(--playlist-menu-fg);
}

html body.playlists-page[data-menu-color] :is(.playlist-modeBar__sep, .playlist-playerShell__timeSlash){
  color:color-mix(in srgb, var(--playlist-menu-fg) 55%, transparent);
}

html body.playlists-page[data-menu-color] .playlist-playerShell__marquee::before{
  background:var(--playlist-menu-fg);
  color:var(--playlist-menu-bg);
}

html body.playlists-page[data-menu-color] .playlist-modeBar__color{
  border-color:var(--playlist-menu-fg);
}

@media (max-width:900px){
  body.playlists-page .playlist-mobileControlsDock > .playlist-playerShell{
    grid-template-areas:
      "transport transport time"
      "metadata metadata metadata";
    grid-template-columns:auto minmax(0, 1fr) auto;
    row-gap:4px;
  }

  body.playlists-page .playlist-playerShell__marqueeTrack{
    animation:none;
  }

  body.playlists-page .playlist-modeBar__color{
    width:28px;
    height:28px;
    flex-basis:28px;
  }
}


/* Autoplay stays within the bottom HUD at every dock size. */
body.playlists-page .playlist-playerShell{
  grid-template-areas:"transport metadata time autoplay";
  grid-template-columns:auto minmax(0,1fr) auto auto;
}
body.playlists-page .playlist-playerShell__controls{grid-area:transport;}
body.playlists-page .playlist-playerShell__meta{grid-area:metadata;}
body.playlists-page .playlist-playerShell__time{grid-area:time;}
body.playlists-page .playlist-playerShell__autoplay{
  grid-area:autoplay;
  justify-self:end;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:auto;
  min-width:58px;
  height:31px;
  min-height:31px;
  padding:3px 6px;
  font:inherit;
  font-size:10px;
  line-height:1;
  color:inherit;
  background:transparent;
  border:1px solid currentColor;
  border-radius:8px;
}
body.playlists-page .playlist-playerShell__autoplay strong{font-weight:700;}
body.playlists-page .playlist-playerShell__autoplay[aria-pressed="true"]{
  background:#111;
  color:#fff;
}
body.playlists-page.is-dark .playlist-playerShell__autoplay[aria-pressed="true"]{
  background:#f4f1ea;
  color:#141414;
}
html body.playlists-page[data-menu-color] .playlist-playerShell__autoplay[aria-pressed="true"]{
  background:var(--playlist-menu-fg);
  color:var(--playlist-menu-bg);
  border-color:var(--playlist-menu-fg);
}
body.playlists-page .playlist-playerShell__autoplay:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}
@media (max-width:900px){
  body.playlists-page .playlist-mobileControlsDock > .playlist-playerShell{
    grid-template-areas:"transport transport time" "metadata metadata autoplay";
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  body.playlists-page .playlist-playerShell__autoplay{min-width:58px;min-height:31px;}
}