/* ==========================================================================
   The Lead Gen Company — tools layer styling (v2)
   Loads after the guide layer. Only styles the affordances added by tools.js,
   so removing the script leaves nothing dangling.
   ========================================================================== */

.lgc-sort-hint {
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 10px;
}

/* The header cell keeps its own padding; the button fills it so the whole
   cell is the hit area, not just the words. */
.lgc-sortable th { padding: 0 !important; }

.lgc-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .15s var(--ease), background .15s var(--ease);
}
/* These tables sit on the light .paper surface, where the dark-theme lime has
   almost no contrast. --accent (#4d7a05) is the guide layer's own token for
   exactly this, and falls back to lime anywhere the dark theme applies. */
.lgc-sort:hover {
  color: var(--accent, var(--lime));
  background: color-mix(in srgb, var(--accent, var(--lime)) 8%, transparent);
}
.lgc-sort:focus-visible {
  outline: 2px solid var(--accent, var(--lime));
  outline-offset: -2px;
}

/* Indicator: a muted pair of chevrons that resolves to one when active, so the
   column that is actually sorting is unambiguous. */
.lgc-sort__ind {
  flex: 0 0 auto;
  width: 9px;
  height: 12px;
  opacity: .34;
  background: currentColor;
  transition: opacity .15s var(--ease);
  clip-path: polygon(50% 0, 100% 42%, 0 42%, 50% 0,
                     50% 100%, 0 58%, 100% 58%, 50% 100%);
}
.lgc-sort:hover .lgc-sort__ind { opacity: .7; }
.lgc-sort[data-dir="asc"] .lgc-sort__ind {
  opacity: 1;
  clip-path: polygon(50% 12%, 100% 78%, 0 78%);
}
.lgc-sort[data-dir="desc"] .lgc-sort__ind {
  opacity: 1;
  clip-path: polygon(0 22%, 100% 22%, 50% 88%);
}
.lgc-sortable th[aria-sort="ascending"] .lgc-sort,
.lgc-sortable th[aria-sort="descending"] .lgc-sort {
  color: var(--accent, var(--lime));
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .lgc-sort, .lgc-sort__ind { transition: none; }
}