/* v93-creator (owner OK 10:19 PM CT Oct 20, DRAFT: Creator only, Pro untouched). Creator mode ONLY: every rule is scoped to
   .creator / Creator-only ids (#crPl, #crPlLayer ...). Pro mode never renders these elements, so Pro is unchanged. */

/* 2) song name + counter on the clip: name may use two lines instead of a hard cut, counter never wraps */
.creator .cr-count{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.12em}
.creator .cr-title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;word-break:break-word}

/* 2) short phone screens (375x667, 360x640): compact panel under the clip so the 9:16 video gets about 100 px taller */
@media (max-height:700px) and (max-width:560px){
  .creator .cr-sheet{display:flex;flex-wrap:wrap;align-items:center;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .creator .cr-sheet>*{flex:1 1 100%;min-width:0}
  .creator .cr-lite{padding:4px 0 2px}
  .creator .crl-score{margin-bottom:4px}
  .creator .crl-go{min-height:38px;font-size:12px}
  .creator .crl-score.done .crl-go,.creator .crl-score.done .crl-duck{min-height:32px}
  .creator .crl-moods{margin-top:4px;gap:6px}
  .creator .crl-mood{min-height:32px;font-size:11px}
  .creator .crl-row{margin-top:0}
  .creator .crl-range{height:26px}
  .creator .cr-sum{padding:4px 0 2px}
  .creator .cr-sum .sheet-grip{margin-bottom:3px}
  .creator .cr-actions{gap:6px;padding-top:2px}
  .creator .cr-actions .cr-act{padding:8px 6px;min-height:34px}
  /* Change video + "What's in your export" share one row (both still there; New clip in the top bar does the same as Change video) */
  .creator .cr-cvrow{flex:0 0 auto;margin:6px 8px 0 0;justify-content:flex-start}
  .creator .cr-cvrow .cr-act{min-height:32px;padding:6px 12px;font-size:10px}
  .creator .cr-what{flex:1 1 0;margin:6px 0 0;max-width:none;font-size:11px}
  .creator .cr-what[open]{flex-basis:100%}
  .creator .cr-cvrow[hidden]+.cr-what{flex-basis:100%}
  .creator .cr-title{font-size:16px}
  .creator .cr-info{padding-top:18px}
}

/* 4) Playlists button: visible "Songs" label on phones (it used to be a bare "≡" icon) */
#crPl .cr-pl-short{display:none}
@media (max-width:560px){
  #crPl .cr-pl-short{display:inline;font-size:11px;letter-spacing:.08em}
  #crPl{gap:4px}
}
@media (max-width:400px){
  /* room for the label at 360 px: Exit shows its arrow only (aria-label unchanged), slimmer top-bar spacing */
  .creator .cr-exit span{display:none}
  .creator .cr-exit{padding:0 8px;min-width:34px;justify-content:center}
  .creator .cr-top{padding:0 6px;gap:4px}
  .creator .cr-topr{gap:3px}
  .creator .cr-top .mode-tog button{padding-left:9px;padding-right:9px}
  #crPl,.creator .cr-filt{padding:7px 7px}
}

/* 3) All tracks list in the Playlists popup */
#crPlLayer .cr-plmore{text-align:center;padding:10px 0;color:var(--dim);font-size:12px}