/* Universal click-to-sort headers (paired with js/tablesort.js).
   Kept in its own file so it stays independent of the main stylesheet. */
th.th-sortable { cursor: pointer; user-select: none; }
th.th-sortable:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
th.th-sortable::after { content: ''; font-size: .82em; opacity: .5; margin-left: 3px; }
th.th-sortable:hover::after { content: '⇅'; }
th.th-sortable.sort-asc::after { content: '▲'; opacity: .95; }
th.th-sortable.sort-desc::after { content: '▼'; opacity: .95; }
th.th-sortable[data-sort-rank]::before {
  content: attr(data-sort-rank); font-size: .68em; font-weight: 800;
  background: var(--brand); color: #fff; border-radius: 8px; padding: 0 4px; margin-right: 3px; vertical-align: middle;
}
@media print {
  th.th-sortable { cursor: auto; }
  th.th-sortable::after, th.th-sortable::before { content: '' !important; }
}