/* terms: a few terms over the same months, one face for every saved post that mentions each (components/terms.js).
     <figure class="demo terms" aria-label="…"><script type="application/json">
       {"from": "2026-01-01", "to": "2026-09-30", "avatars": "../course/assets/…/", "pick": ["handle"],
        "lanes": [{"term": "…", "pat": "regex for the term", "posts": [{"d": "2026-01-09", "h": "handle", "n": "Name", "s": "the sentence", "u": "url"}]}]}
     </script></figure>
   Faces stack where saves crowd. Tap or hover a face: the post shows under the table, the term marked.
   The dotted table matches the node canvases and sketches. */
.terms { --terms-mark: color-mix(in oklab, #d9822b 24%, transparent); }
@media (prefers-color-scheme: dark) { .terms { --terms-mark: color-mix(in oklab, #e39a4f 30%, transparent); } }
.terms-card { border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
@media (prefers-color-scheme: dark) { .terms-card { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); } }
.terms-table { position: relative; padding: 14px 16px 0;
  background: radial-gradient(circle, rgb(0 0 0 / 0.08) 0.8px, transparent 0.9px) 0 0 / 16px 16px, var(--gray-100); }
@media (prefers-color-scheme: dark) { .terms-table { background: radial-gradient(circle, rgb(255 255 255 / 0.07) 0.8px, transparent 0.9px) 0 0 / 16px 16px, var(--gray-100); } }
.terms-lane + .terms-lane { margin-top: 10px; }
.terms-name { margin: 0 0 2px; font: 500 14px/1.3 'Shantell Sans', cursive; color: var(--gray-1200); }
.terms-name span { margin-left: 6px; font: 11px/1 var(--mono); color: var(--gray-1000); font-variant-numeric: tabular-nums; }
.terms-swarm { position: relative; border-bottom: 1px solid var(--gray-400); }
.terms-swarm > b { position: absolute; top: 0; bottom: 0; width: 1px; background: rgb(0 0 0 / 0.06); pointer-events: none; }
@media (prefers-color-scheme: dark) { .terms-swarm > b { background: rgb(255 255 255 / 0.06); } }
.terms-axis { position: relative; height: 26px; }
.terms-axis span { position: absolute; top: 6px; transform: translateX(-50%); font-size: var(--text-xs); color: var(--gray-1000); white-space: nowrap; }

.terms-av { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%;
  background: var(--gray-300); box-shadow: 0 0 0 2px var(--gray-100); overflow: visible; cursor: pointer;
  transform: translate(var(--x), var(--y)); }
.terms-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.terms-av i, .terms .post-avatar i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font: 600 calc(var(--s, 40px) * 0.45)/1 var(--font, inherit); font-style: normal; color: var(--gray-1100); background: var(--gray-300); }
.terms-av::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.terms-av[aria-pressed="true"], .terms-av:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gray-100), 0 0 0 4px var(--gray-1200); z-index: 2; }
@media (hover: hover) and (pointer: fine) { .terms-av:hover { z-index: 3; } }
.terms.is-entering .terms-av { animation: terms-drop 260ms cubic-bezier(0.23, 1, 0.32, 1) backwards; animation-delay: var(--delay); }
@keyframes terms-drop { from { opacity: 0; transform: translate(var(--x), calc(var(--y) - 14px)) scale(0.9); } }

.terms-post { padding: 16px; border-top: 1px solid var(--gray-300); min-height: 108px; box-sizing: border-box; }
.terms .post.social { max-width: none; margin: 0; }
.terms .post.social > span:last-child { min-width: 0; }
.terms .post-avatar { display: block; overflow: hidden; }
.terms .post-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.terms .post-who { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terms .post-said { display: block; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.terms a.post { color: inherit; text-decoration: none; }
.terms a.post:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 4px; border-radius: 6px; }
.terms mark { background: var(--terms-mark); color: inherit; border-radius: 3px; padding: 0 2px; }
@media (prefers-reduced-motion: reduce) { .terms.is-entering .terms-av { animation: none; } }