/* The folder list takes only the space left between navigation and account. */
@media (min-width:701px) {
  .sidebar { position:sticky; top:0; align-self:start; height:calc(100dvh - 87px); padding:24px 18px 12px; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
  .sidebar .brand { margin-bottom:24px; flex-shrink:0; }
  .sidebar nav, .sidebar>.overline, .side-heading, .side-bottom { flex-shrink:0; }
  .side-heading { margin-top:20px; }
  .folders { flex:1 1 0; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
  .side-bottom { position:static; margin-top:8px; background:#131a15; }
  .disk { padding:8px 10px; }
}
@media (min-width:701px) and (max-height:650px) {
  .sidebar { padding-top:10px; }
  .sidebar .brand { margin-bottom:10px; }
  .sidebar nav { gap:1px; }
  .sidebar nav button { padding-top:7px; padding-bottom:7px; }
  .side-heading { margin-top:10px; margin-bottom:5px; }
  .disk { font-size:10px; line-height:1.3; }
}
.account #userName { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account .avatar { flex-shrink:0; }
.track-select { display:flex; flex-direction:column; align-items:center; gap:5px; }
.drag-handle { cursor:grab; padding:0 7px; font-size:20px; border:0; background:transparent; color:var(--muted); touch-action:auto; }
.drag-handle:active { cursor:grabbing; }
.track.dragging { opacity:.55; }
[data-drop-folder].drop-target { background:#395333!important; color:var(--accent)!important; outline:2px solid var(--accent); outline-offset:-2px; }
body.moving-tracks [data-drop-folder] { border:1px dashed #608255; }
.track-actions { flex-wrap:wrap; justify-content:flex-end; max-width:240px; }
.move-picker { max-height:40vh; overflow-y:auto; border:1px solid var(--line); border-radius:9px; }
.move-destination { display:flex; align-items:center; gap:10px; padding:12px; margin:0; cursor:pointer; border-bottom:1px solid var(--line); }
.move-destination:last-child { border-bottom:0; }
.move-destination:has(input:checked) { background:var(--accent-dark); color:var(--accent); }
.move-destination input { width:auto; margin:0; accent-color:var(--accent); flex-shrink:0; }
.move-destination span { overflow-wrap:anywhere; }
.youtube-auth { border-left:3px solid var(--accent); }
.youtube-auth .inline, .modal-footer { flex-wrap:wrap; }
.move-hint { margin:0; font-size:11px; color:var(--muted); }
@media (max-width:700px) {
  .track-actions { justify-content:flex-start; max-width:none; }
  .drag-handle { display:none; }
  .move-hint { display:none; }
  .sidebar .side-bottom { margin:0; }
}