/* ORD-0158 — what a sortable column heading looks like.
 *
 * HIS ORDER 2026-09-13: "make all spreadsheets sortable by click on the column
 * header while holding their column and row integraty".
 *
 * ITS OWN SHEET, not three edits into three portal stylesheets, for the same
 * reason the engine is its own script: one place to change, one tag to move,
 * and a portal that gains the behaviour gains the look with it rather than
 * ending up with clickable headings that give no sign they are clickable.
 *
 * NO COLOURS OF ITS OWN. Every value here is a Waypoint token already defined
 * by whichever portal sheet loaded first, with a plain fallback for the one
 * page that might not define it. A second palette living in a shared file is
 * how a fleet stops matching.
 */

/* A HEADING YOU CAN CLICK LOOKS LIKE ONE, before anybody clicks it. The
 * pointer and the faint marker are the whole affordance — a person should not
 * have to discover the feature by accident. */
th.wp-sortable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  padding-right: 18px;   /* room for the marker, so the label never shifts */
}

th.wp-sortable::after {
  content: "\2195";                     /* ↕ — this column can be sorted */
  position: absolute;
  right: 5px;
  opacity: .3;
  font-size: 10px;
  font-weight: 400;
  line-height: inherit;
}

th.wp-sortable:hover::after { opacity: .6; }

/* THE COLUMN IT IS ACTUALLY ON, and which way. Two states, both readable at a
 * glance, because "which column is this sorted by" is the question somebody
 * asks a half-second after the rows move. */
th.wp-sortable.wp-sorted::after {
  content: "\2191";                     /* ↑ ascending */
  opacity: 1;
  color: var(--blue, #2563EB);
}

th.wp-sortable.wp-sorted.wp-sorted-desc::after {
  content: "\2193";                     /* ↓ descending */
}

/* REACHABLE WITHOUT A MOUSE, and visibly so. A focus ring that only appears
 * for keyboard users is the browser's own :focus-visible, and suppressing it
 * would leave somebody tabbing through a table with no idea where they are. */
th.wp-sortable:focus-visible {
  outline: 2px solid var(--blue, #2563EB);
  outline-offset: -2px;
}

/* Printing a sorted listing should print the listing, not the furniture. */
@media print {
  th.wp-sortable::after { content: none; }
}