/* Match the supplied PC music design inside the existing website shell. */
@media (min-width: 921px) {
  /* This workspace scrolls its panels, so it needs no document scrollbar gutter. */
  html:has(body > #creation-app[data-creation-page="music"]) {
    scrollbar-gutter: auto;
    overflow: hidden;
  }

  /* Shared workstation rules otherwise enlarge the design's compact controls. */
  #fuuvo-music-pc :is(.topbar, .composer, .library, .player, dialog) button {
    min-height: 0;
  }
  #fuuvo-music-pc :is(.topbar, .composer, .library, .player, dialog) :is(button, input, textarea, select) {
    font-family: inherit !important;
  }

  #fuuvo-music-pc .library {
    container-name: music-library;
    container-type: inline-size;
  }

  /* Use the available panel width when the website sidebar is expanded. */
  @container music-library (max-width: 560px) {
    #fuuvo-music-pc .library-toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
    }
    #fuuvo-music-pc .library-toolbar .search-box { width: 100%; }
    #fuuvo-music-pc .track-grid,
    #fuuvo-music-pc .studio[data-app-view="create"] .track-grid,
    #fuuvo-music-pc .studio[data-app-view="saved"] .track-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #fuuvo-music-pc .playlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #fuuvo-music-pc .category-tabs { gap: 16px; }
    #fuuvo-music-pc .catalog-total { font-size: 8px; }
  }

  /* Preserve the reference's text hierarchy against shared dark main/p rules. */
  :where(html[data-ui-theme="dark"]) #fuuvo-music-pc .hero-copy p {
    color: #c1b9cf !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(html[data-ui-theme="dark"]) #fuuvo-music-pc .track-style {
    color: #a39bad !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(html[data-ui-theme="dark"]) #fuuvo-music-pc .catalog-footer {
    color: #8f859d !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(html[data-ui-theme="dark"]) #fuuvo-music-pc .recent-track small {
    color: #a29aac !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(html[data-ui-theme="dark"]) #fuuvo-music-pc .playlist-detail-copy p {
    color: #bdb1cc !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(html[data-ui-theme="dark"]) #fuuvo-music-pc .song-main small {
    color: #a499af !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(html[data-ui-theme="dark"]) #fuuvo-music-pc .draft-card p {
    color: #ada3bb !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(html[data-ui-theme="dark"]) #fuuvo-music-pc .draft-card small {
    color: #93889f !important;
    -webkit-text-fill-color: currentColor !important;
  }
}