/* ═══════════════════════════════════════════════════════════════════════════
   TACTIX — column heat shading + sort affordance          [heat-20260831]
   Loaded after the cols sheet. See tactix-heat-grid.js for the reasoning.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the shaded cells ─────────────────────────────────────────────────────
   The background is set inline per cell (it is a computed ramp); this only
   carries what is constant. The transition makes the toggle feel like a
   change of view rather than a re-render. */
td.tx-heat {
  border-radius: 4px;
  transition: background 140ms ease;
}

/* ⚠ CONTRAST. The ramp tops out at 0.78 of the way to teal, which is light
   enough that the default pale text fails against it. Hot cells flip to dark
   ink — the same trick the goal-timing grid uses at frac > .55, kept in step
   with it deliberately. Colour is never the only signal here: the number is
   still printed in every cell. */
td.tx-heat-hot { color: #04221b !important; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  td.tx-heat { transition: none; }
}

/* ── the toggle ──────────────────────────────────────────────────────────
   Sits above the table, styled like the estate's existing small controls
   (Show xPTS, Scored/Conceded) rather than inventing a new affordance. */
.tx-heat-toggle {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 11px;
  min-height: 32px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted2, #8896B3);
  background: transparent;
  border: 1px solid var(--rim, #252D42);
  border-radius: 8px;
  cursor: pointer;
}
.tx-heat-toggle[aria-pressed="true"] {
  color: var(--teal, #00D4A8);
  border-color: rgba(0, 212, 168, .45);
}
.tx-heat-toggle:hover { border-color: var(--teal, #00D4A8); }
.tx-heat-toggle:focus-visible {
  outline: 2px solid var(--teal, #00D4A8);
  outline-offset: 3px;
}

/* ── the note ────────────────────────────────────────────────────────────
   ⚠ Part of the feature, not chrome. Shading means "most of this column",
   NOT "good" — a hot GA is the leakiest defence in the league. This sentence
   is what stops that reading as praise, so it is not `display:none`-able
   without changing what the colour means. */
.tx-heat-note {
  margin: 8px 2px 2px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted2, #8896B3);
}

/* ── the resting sort affordance ─────────────────────────────────────────
   ⚠ THE ACTUAL BUG BEHIND "these aren't sortable". League Tables and the
   three leader boards were already fully sortable — every header carries a
   sort key and .st-sortable sets cursor:pointer — but .st-sort-ind is
   border-top:0 until a column is active, so at rest NOTHING on screen says
   the headers do anything. You had to hover to find out.

   A faint permanent chevron on every sortable header fixes that without
   touching a single line of the sorting itself. */
th.tx-sort-hint { position: relative; }
th.tx-sort-hint::after {
  content: "⇅";
  margin-left: 5px;
  font-size: 9px;
  line-height: 1;
  opacity: .32;
  vertical-align: middle;
}
th.tx-sort-hint:hover::after { opacity: .75; }
/* The live indicator wins once a column is actually sorted — two arrows on
   one header would be worse than none. */
th.tx-sort-hint.st-sort-asc::after,
th.tx-sort-hint.st-sort-desc::after { content: ""; margin-left: 0; }