/* JF4213 — keep the album-classification editor inside the viewport and make it draggable. */
.music-classification-editor form[data-classification-window]{
  position:fixed!important;
  z-index:1000;
  box-sizing:border-box;
  left:12px!important;
  right:auto!important;
  top:12px!important;
  bottom:auto!important;
  width:min(520px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 24px);
  overflow:auto;
  overscroll-behavior:contain;
}
.classification-window-header{
  position:sticky;
  z-index:3;
  top:-15px;
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:2px 12px;
  margin:-15px -15px 3px;
  padding:12px 12px 10px 15px;
  border-bottom:1px solid #eadfd5;
  border-radius:17px 17px 0 0;
  background:#fbf7f2;
  color:#443a32;
  cursor:move;
  user-select:none;
  touch-action:none;
}
.classification-window-header strong{font-size:.94rem;line-height:1.25}
.classification-window-header span{grid-column:1;color:#85796e;font-size:.7rem;font-weight:600;line-height:1.25}
.classification-window-header button{
  grid-column:2;
  grid-row:1/3;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#efe5dc;
  color:#51463e;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
}
.classification-window-header:active{cursor:grabbing}
body.classification-window-dragging{user-select:none}
body.classification-window-dragging *{cursor:grabbing!important}

@media(max-width:600px){
  .music-classification-editor form[data-classification-window]{
    width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px);
    grid-template-columns:1fr;
  }
  .music-classification-editor form[data-classification-window] label,
  .music-classification-editor form[data-classification-window] .classification-genre-field,
  .music-classification-editor form[data-classification-window] .classification-artist-apply,
  .music-classification-editor form[data-classification-window]>small,
  .music-classification-editor form[data-classification-window]>button,
  .classification-window-header{grid-column:1}
}

@media(prefers-reduced-motion:no-preference){
  .music-classification-editor form[data-classification-window]{animation:classification-window-in .16s ease-out}
  @keyframes classification-window-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}