/* ============================================================================
   27 · ADMIN GUILDS LIST — sortable column headers (.th-sort)

   The /admin/guilds table sorts from its own header, so the header cell is a
   control rather than a label: the column name toggles the direction, and each
   of the two arrows picks one outright. Both arrows are drawn on every
   sortable column — the lit one is the direction the list is currently in —
   so an unsorted column still reads as sortable at a glance.

   It lives in its own part rather than in 02-base.css because it is the only
   table in the console that carries it, and it sits last so it wins over the
   generic `th` rules on source order alone (see parts/README.md).

   Nothing here has its own idea of the header's metrics: the cell hands its
   padding to the inner buttons, and the buttons inherit the header's font,
   size, weight, letter-spacing and uppercase, so the row keeps matching every
   other table on the dashboard to the pixel.
   ========================================================================== */

/* The cell is packaging only — the padding moves onto the controls, so the name and each
   arrow are clickable in their own right instead of the cell's padding swallowing the
   click. */
.th-sort { padding: 0; }

.th-sort-head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  min-height: 2.4rem;
}

/* Members / Net growth are right-aligned in the body, so their headers are too. The pair
   sits NEXT TO the name in both cases (`flex: 1` on the label would instead push the
   arrows to the far edge of a wide cell, reading as a control that belongs to nothing). */
.th-sort--right .th-sort-head { justify-content: flex-end; }

/* A <button> does NOT inherit its font by default; without these the label would
   drop the header's size, weight, tracking and uppercase all at once. */
.th-sort-label,
.th-sort-arrow {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  /* Without this, iOS/macOS Safari keep the platform's button chrome and these render
     as two grey pills inside the header. */
  appearance: none;
  -webkit-appearance: none;
}

.th-sort-label {
  text-align: left;
  padding: 0.75rem 0 0.75rem 1rem;
  transition: color 0.12s ease;
}

.th-sort--right .th-sort-label { text-align: right; }

/* Stacked, so the pair reads as one control and costs the header no extra height. */
.th-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 1rem;
}

.th-sort-arrow {
  display: inline-flex;
  font-size: 0.5625rem;
  color: var(--text-muted);
  opacity: 0.35;
  transition: color 0.12s ease, opacity 0.12s ease;
}

.th-sort-arrow ion-icon { display: block; }

/* Only the sorted column's active arrow is lit; the other three states are
   quieter than the header text so the lit one is unmistakable. */
.th-sort-arrow:hover { opacity: 0.8; }
.th-sort-arrow.is-on { color: var(--blurple); opacity: 1; }

.th-sort:hover .th-sort-label,
.th-sort.is-active .th-sort-label { color: var(--text); }
.th-sort.is-active .th-sort-label { font-weight: 800; }

.th-sort-label:focus-visible,
.th-sort-arrow:focus-visible {
  outline: 2px solid var(--blurple);
  outline-offset: -2px;
  border-radius: 4px;
}

/* 10-responsive.css tightens `th, td` to 0.625rem 0.75rem on a phone. The cell's own
   padding is 0 here, so the controls have to shrink instead — otherwise this one table
   would sit taller than every other one at the same breakpoint. */
@media (max-width: 640px) {
  .th-sort-label { padding: 0.625rem 0 0.625rem 0.75rem; }
  .th-sort-arrows { padding-right: 0.75rem; }
}