/* ==========================================================================
 * MILLENOVA GLOBAL PLAYER — SAVED PLAYLIST EDITING CONTRACT
 *
 * OWNER:
 * This file owns saved-playlist draft presentation: dirty/Save affordances, editable-order state and playlist-specific Stage editing visuals.
 *
 * MUST NOT OWN:
 * Do not define the normal temporary-queue row layout. Scrollbar chrome remains owned by
 * Styles/scrollbars.css. JavaScript state/queue/provider semantics stay
 * outside CSS.
 *
 * CASCADE CONTRACT:
 * Phase 11A mechanical split: loaded at manifest position 13, after
 * 12-now-playing.css. Rule order is unchanged from the former monolith (baseline
 * df93472, lines 1823–1961). New corrections go into the canonical owning
 * rule; never append dated Phase/fix blocks.
 *
 * DEPENDENCIES:
 * Depends on playlist draft state classes set by Scripts/floating-playlist.js.
 * ========================================================================== */



/* --------------------------------------------------------------------------
 * Phase 6 — saved-playlist draft editing
 * -------------------------------------------------------------------------- */

.floating-playlist__save-draft {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px !important;
  color: var(--mn-muted) !important;
  transition:
    color .15s ease,
    background .15s ease,
    transform .15s ease,
    opacity .15s ease;
}

.floating-playlist__save-draft[hidden] {
  display: none !important;
}

.floating-playlist__save-draft svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.floating-playlist__save-draft:disabled {
  opacity: .32;
  cursor: default;
}

.floating-playlist__save-draft.is-dirty:not(:disabled) {
  color: var(--mn-cyan) !important;
  background: rgba(110,242,255,.065);
  box-shadow: 0 0 18px rgba(110,242,255,.10);
}

.floating-playlist__save-draft.is-dirty:not(:disabled):hover,
.floating-playlist__save-draft.is-dirty:not(:disabled):focus-visible {
  color: #fff !important;
  background: rgba(110,242,255,.12);
  outline: 0;
  transform: scale(1.07);
}

.floating-playlist__track-menu {
  position: relative;
}

.floating-playlist__track-menu > summary {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  color: var(--mn-muted);
  font-size: .85rem;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.floating-playlist__track-menu > summary::-webkit-details-marker {
  display: none;
}

.floating-playlist__track-menu > summary:hover,
.floating-playlist__track-menu > summary:focus-visible,
.floating-playlist__track-menu[open] > summary {
  background: rgba(255,255,255,.05);
  color: var(--mn-cyan);
  outline: 0;
}

.floating-playlist__track-menu-list {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 5px);
  width: max-content;
  min-width: 138px;
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(9,10,14,.985);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}

.floating-playlist__track-menu-list button {
  width: 100%;
  height: auto;
  min-height: 30px;
  display: flex;
  justify-content: flex-start;
  padding: .38rem .52rem;
  border-radius: 7px;
  white-space: nowrap;
  font-size: .52rem;
  text-align: left;
}

.floating-playlist__track-menu-list button:disabled {
  opacity: .28;
}

.floating-playlist.is-playlist-dirty .floating-playlist__title::after {
  content: " •";
  color: var(--mn-cyan);
}

@media (max-width: 640px) and (pointer: coarse) {
  .floating-playlist__save-draft {
    width: 34px;
    height: 34px;
  }

  .floating-playlist__save-draft svg {
    width: 18px;
    height: 18px;
  }

  .floating-playlist__track-menu > summary {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .floating-playlist__track-menu-list {
    min-width: 156px;
  }

  .floating-playlist__track-menu-list button {
    min-height: 40px;
    font-size: .66rem;
  }
}