/* Cursor leader tag. Rewritten from Sadewa's case-study cursor (teardown 09-30): over a card the pointer becomes a
   small square dot with a hairline leader running down-right at 45deg to a boxed mono tag ("Learn more" + arrow),
   like a callout on a technical drawing; the whole callout trails the pointer at a quarter of the gap per frame.
   Markup: put data-leader-tag="Learn more" on any card or link; part.js builds the callout inside it:
     <span class="lt" aria-hidden="true"><i class="lt__dot"></i><i class="lt__line"></i>
       <span class="lt__tag"><span class="lt__text">Learn more</span><svg class="lt__ic">...</svg></span></span>
   The callout lives inside its card, so the card's own overflow clips it at the card's edges (as the source). */
.lt-host {
  --lt-accent: #98fe00;     /* dot, line, tag border and text */
  --lt-bg: #233802;         /* tag fill */
  --lt-ink: var(--lt-accent);
  --lt-dot: 6px;            /* square dot, centred on the pointer */
  --lt-line: 24px;          /* leader length */
  --lt-angle: 45deg;        /* leader direction (down-right) */
  --lt-tag-x: 14px;         /* tag's top-left corner from the pointer: the leader ends just inside it */
  --lt-tag-y: 12px;
  --lt-border: 2px;         /* tag outline, drawn inset (no layout change) */
  --lt-font: 400 14px/14px "Roboto Mono", ui-monospace, Menlo, monospace;
  --lt-pad: 6px 8px;
  --lt-gap: 6px;
  --lt-fade: .3s;           /* show / hide */
  --lt-z: 5;
}
.lt {
  position: absolute; left: 0; top: 0; z-index: var(--lt-z);
  width: 0; height: 0;
  pointer-events: none;
  opacity: 0; transition: opacity var(--lt-fade);
  will-change: transform;
}
.lt.is-on { opacity: 1; }
.lt__dot {
  position: absolute;
  left: calc(var(--lt-dot) / -2); top: calc(var(--lt-dot) / -2);
  width: var(--lt-dot); height: var(--lt-dot);
  background: var(--lt-accent);
}
.lt__line {
  position: absolute; left: 0; top: 0;
  width: var(--lt-line); height: 1px;
  background: var(--lt-accent);
  transform-origin: 0 0; transform: rotate(var(--lt-angle));
}
.lt__tag {
  position: absolute; left: var(--lt-tag-x); top: var(--lt-tag-y);
  display: flex; align-items: center; gap: var(--lt-gap);
  padding: var(--lt-pad);
  background: var(--lt-bg);
  box-shadow: inset 0 0 0 var(--lt-border) var(--lt-accent);
  color: var(--lt-ink);
  font: var(--lt-font); text-transform: uppercase; white-space: nowrap;
}
.lt__ic { width: 14px; height: 14px; flex: none; }

/* the callout replaces the pointer over its card (data-lt-cursor="keep" keeps the arrow) */
@media (hover: hover) and (pointer: fine) {
  .lt-host:not([data-lt-cursor="keep"]), .lt-host:not([data-lt-cursor="keep"]) * { cursor: none; }
}
/* touch / no hover: never shown, nothing to get stuck */
@media (hover: none), (pointer: coarse) {
  .lt { display: none; }
}
html.is-menu-open .lt { opacity: 0; }