/* ==========================================================================
   Cursor label — the site's one pointer system (cursor-system, Oct 2026).

   Over anything clickable, on a mouse, the native pointer gives way to a small
   label: a word and an icon. Everywhere else the native cursor stays. Built by
   assets/js/cursor.js; which elements get which word is decided there.

   One box built like the case-study facts strip (.facts in case-study.css):
   the white plate, the --color-line hairline, a 4px corner, and the word and
   the icon as two cells split by a 1px rule. The word is DM Mono in sentence
   case, like the strip's labels. The pointer sits on the icon cell.

   It enters with the site's own hover fill — two bands, the top one first, on
   --step-ease — growing out of the icon, i.e. from the pointer's side. That
   clip-path is driven by cursor.js, which is why there is no transition on it
   here.

   Linked after motion.css on every page except the frozen v0 home, which
   never used a cursor label. It replaced the older .cursor-label badge
   (site.css / site.js), removed once nothing carried data-cursor-label.
   Chosen on a dev-only lab board (five directions), deleted before merge.
   ========================================================================== */

.cursor-tag {
  position: fixed;
  top: 0;
  left: 0;
  /* Above the lightbox (200). */
  z-index: 1000;
  display: flex;
  height: 2.125rem;
  overflow: hidden;
  background: var(--color-plate);
  color: var(--color-dark);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  /* Closed until cursor.js opens it. */
  clip-path: polygon(100% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 100% 100%);
  /* No will-change: transform. It rasters the label once and slides the
     bitmap, so at the fractional positions the follow produces the word and
     icon came out soft — the lightbox image had the same problem. cursor.js
     also snaps every position to a whole device pixel. */
}

.cursor-tag__word {
  display: grid;
  align-items: center;
  justify-items: start;
  padding: 0 var(--sp-3);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--ls-label);
  transition: width 260ms var(--step-ease), padding 260ms var(--step-ease);
}

.cursor-tag__word.is-empty {
  padding: 0;
}

.cursor-tag__txt {
  display: inline-block;
  white-space: nowrap;
}

.cursor-tag__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  border-left: 1px solid var(--color-line);
}

.cursor-tag__word.is-empty + .cursor-tag__icon {
  border-left-color: transparent;
}

/* Near the left edge (the logo, the scroll arrow) there is no room for the
   word before the pointer, so it goes after it: icon first, the rule on the
   icon's other side, and the fill grows from the left. */
.cursor-tag.is-flipped {
  flex-direction: row-reverse;
}

.cursor-tag.is-flipped .cursor-tag__icon {
  border-left: 0;
  border-right: 1px solid var(--color-line);
}

.cursor-tag.is-flipped .cursor-tag__word.is-empty + .cursor-tag__icon {
  border-right-color: transparent;
}

.cursor-tag__icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* While the label is showing it IS the pointer, whatever the element's own
   cursor (the lightbox's zoom-in / grab included). */
html.has-cursor-tag,
html.has-cursor-tag * {
  cursor: none !important;
}

/* Backstop: cursor.js never builds it on touch or under reduced motion. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-tag {
    display: none;
  }
}