.js-sortable-table thead th {
  vertical-align: middle;
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sort-controls {
  display: inline-flex;
  flex-direction: column;
  margin-left: 6px;
}

.sort-button {
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px; /* expands touch target */
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
}

.sort-button:focus-visible {
  outline: 2px solid #3b82f6; /* Tailwind blue-500 */
  outline-offset: 2px;
}

.sort-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.sort-button.is-active {
  color: #1f2937; /* gray-800 */
}

.sort-button:not(.is-active) {
  color: #9ca3af; /* gray-400 */
}

@media (pointer: coarse) {
  .sort-button {
    padding: 10px; /* ~36-40px total tap area with icon */
  }
}