/*
 * sortable-table.css — visual affordances for sortable-table.js
 *
 * Uses a single CSS custom property (--st-accent) that defers to the host
 * page's --accent if defined, falling back to a neutral grey. Apply on
 * <th data-sort="..."> headers only — non-sortable headers stay untouched.
 */

table[data-sortable] th.st-sortable {
  --st-accent: var(--accent, #444);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color 0.12s ease;
}

table[data-sortable] th.st-sortable:hover,
table[data-sortable] th.st-sortable:focus {
  color: var(--st-accent);
  outline: none;
}

table[data-sortable] th.st-sortable::after {
  content: " ⇅";
  font-size: 0.85em;
  opacity: 0.4;
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: -1px;
}

table[data-sortable] th.st-sortable.st-asc::after {
  content: " ▲";
  opacity: 1;
  color: var(--st-accent);
}

table[data-sortable] th.st-sortable.st-desc::after {
  content: " ▼";
  opacity: 1;
  color: var(--st-accent);
}

table[data-sortable] th.st-sortable:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: -2px;
  border-radius: 2px;
}

/* Print: indicators visible but no hover styles */
@media print {
  table[data-sortable] th.st-sortable {
    cursor: default;
  }
  table[data-sortable] th.st-sortable::after,
  table[data-sortable] th.st-sortable.st-asc::after,
  table[data-sortable] th.st-sortable.st-desc::after {
    opacity: 0.6;
  }
}