/* TP-613: the sort popup (public/sort-popup) — the rows of one related list, dragged or moved by the arrows into a new
   order: on the shared shell (modal.js) over a dimmed page, at the bottom on a phone, in the middle on a wide screen.
   No design yet: POC. */
.sort-popup-back {
  position: fixed; inset: 0; z-index: 21;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.45);
}
@media (min-width: 900px) { .sort-popup-back { align-items: center; } }
.sort-popup { border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 25%); }
.sort-popup .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sort-popup .modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.sort-popup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sort-popup-row { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; border-radius: 10px; background: var(--surface-2, var(--surface)); touch-action: pan-y; }
.sort-popup-row.dragging { position: relative; z-index: 5; box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); }
.sort-popup-grip { flex: none; cursor: grab; touch-action: none; color: var(--muted, inherit); }
.sort-popup-row.dragging .sort-popup-grip { cursor: grabbing; }
.sort-popup-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sort-popup-up, .sort-popup-down { flex: none; }
.sort-popup-error { color: var(--warn); margin: 0 0 8px; }