/* ==========================================================================
   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;
}

/* Inside a .tablewrap the hint is a child of a bordered, rounded, horizontally
   scrolling box, so with no padding it sat 1px off the border. Style it as the
   table's own caption bar rather than loose text that happens to be in there. */
.tablewrap > .lgc-sort-hint {
  margin: 0;
  padding: 11px 14px;
  font-size: .66rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--line-2);
  background: var(--panel);
  border-radius: 12px 12px 0 0;   /* follow the wrapper's own corners */
  /* The wrapper scrolls horizontally and the hint is only as wide as the
     viewport, so without this it slides out of sight as soon as you scroll
     the table sideways. */
  position: sticky;
  left: 0;
}

/* 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; }
}