/* The mockups' turn-3 addition: pointing at a stand-in says what it covers,
   without ever putting the real term into the output.

   That distinction is the whole point of the component — the popover is a
   sibling of the output, never a child, so nothing it says can be selected,
   copied, or read back out of the pane. The clipboard takes the engine's string
   regardless (F09), so this cannot leak into a paste even in principle.

   Positioned from JavaScript through the CSSOM, for the same reason
   .selection-add is: F13's `style-src 'self'` carries no 'unsafe-inline', and a
   fixed-position element cannot state its coordinates in a stylesheet. */

.peek {
  position: fixed;
  /* Below .selection-add: when both could show, the offer the user is reaching
     for wins. */
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-small);
  background: var(--colour-ink);
  color: var(--colour-ink-text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-pop);
  /* It answers a question about the text underneath it; it must never be in the
     way of reaching that text. */
  pointer-events: none;
}

.peek[hidden] {
  display: none;
}

.peek__label {
  color: var(--colour-ink-label);
}

.peek__term {
  overflow: hidden;
  text-overflow: ellipsis;
}

.peek__hits {
  color: rgb(255 255 255 / 40%);
}