Work has weight.

<li
  id="wi-294"
  data-body="attract"
  data-strength="1.42"
  data-feedback
  data-hot
  data-act="0.91" data-rec="0.99"
  data-field-at="2026-06-09T22:41:00Z"
  data-field-halflife="86400000"
  data-refs="wi-282 wi-269"
  style="--w: 0.94; --cat: #2dd4bf;"
>
  <!-- #number · kind · title · author -->
</li>

<!-- data-rec is the snapshot's freshness —
     freshness(updatedAt, snapshot, 24h), the
     @fundamental-engine/core temporal kernel. data-field-at
     declares the same updatedAt as WORLD TIME, so
     the platform's recency lane is grounded in the
     data: --field-recency = freshness(at, now). -->

/* the cycle bar is a real sink body that also
   declares itself as its own measurement:
   <div id="wl-cycle" data-body="sink" data-absorb
        data-max="8" data-feedback data-hot
        data-field-visual-for="#wl-cycle"
        data-field-visual-role="measurement">

   channel 1 — data arithmetic: the FILL is
   shipped ÷ capacity from closedAt dates. */
width: 100%;  /* 32/20 this cycle */

/* channel 2 — the live engine: --load (0..1) as
   particles accrete into the sink, blended with
   --live (the engine's local density, --d). */
box-shadow: 0 0
  calc((var(--load, 0) + var(--live) * 0.5) * 22px)
  color-mix(in srgb, var(--accent)
    calc(var(--load, 0) * 40% + var(--live) * 20%),
    transparent);

.wl-title {
  font-variation-settings:
    'wght' calc(380 + var(--w) * 360);
}
.wl-item {
  /* --d: the engine's live local density,
     written every frame; it gathers toward 1
     when a data-hot card is hovered/focused.
     --field-attention: the scoped pattern's
     eased attention lane (hover/focus +
     viewport-center proximity + visibility). */
  --live: var(--d, 0);
  box-shadow: 0 0 calc(var(--live) * 16px) -6px
    color-mix(in srgb, var(--cat)
      calc(var(--live) * 55%), transparent);
  background: color-mix(in srgb, var(--text)
    calc(1.5% + var(--w) * 4% + var(--live) * 4%
      + var(--field-attention, 0) * 4%),
    transparent);
}

// hand-rolled pointer drag — no library, no HTML5 DnD.
card.addEventListener("pointerdown", (e) => {
  if (e.target.closest("a")) return; // links still click
  pend(e); // arms only after 6px of travel
});
function lift(card, e) { // past the threshold
  card.setPointerCapture(e.pointerId);
  placeholderFor(card); // a gap holds the origin slot
  card.classList.add("wl-drag"); // fixed, grabbing,
                                 // touch-action: none
  // pick a card up and the field re-measures it in
  // flight: data-active marks the body engaged, so the
  // attention metric writes a rising --field-attention.
  card.setAttribute("data-active", "");
}
function track(e) { // every pointermove
  card.style.transform = `translate(${e.clientX - x0}px,
    ${e.clientY - y0}px) scale(1.03)`;
  placeSlotIndicator(e); // the slim line between cards
  edgeScroll(e.clientY); // ±60px, proportional speed
}
function drop() { // pointerup — Esc/pointercancel aborts
  insertAtSlot(card); // displaced cards FLIP-settle
  card.removeAttribute("data-active");
  recountLanes(); // counts + cycle bar go "(local)"
  save(); // localStorage only — GitHub is never written
}