/* Bit-Map · Lens — styles. Uses Bit-Map's colour variables, with fallbacks. */
html.lens-open, html.lens-open * {
  cursor: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.lens {
  position: fixed;
  z-index: 2147482000;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: var(--paper, #f2f3f0);
  border: 2px solid var(--ink, #1b2023);
  box-shadow: 0 0 0 3px var(--card, #fbfbf9), 0 6px 18px rgba(27, 32, 35, .28);
}
.lens.is-open { opacity: 1; }
.lens-view { display: block; }

/* The cursor ring, drawn at the lens centre (the real cursor is hidden while the lens is open).
   Over a target it grows and fills yellow: size + colour, not colour alone. */
.lens-cursor { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.lens-cursor svg { display: block; overflow: visible; }
.lens-cursor .lc-halo { fill: none; stroke: var(--card, #fbfbf9); stroke-width: 3.5; }
.lens-cursor .lc-ring { fill: none; stroke: var(--ink, #1b2023); stroke-width: 1.5; }
.lens-cursor .lc-dot  { fill: var(--ink, #1b2023); }
.lens-cursor .lc-g { transform-box: view-box; transform-origin: 0 0; }
.lens-cursor.is-hot .lc-g { transform: scale(1.7); }
.lens-cursor.is-hot .lc-ring { fill: var(--sel, #f2c230); fill-opacity: .55; stroke-width: 2; }

/* Outline around the target a click would pick (follow mode snaps to the nearest one). */
.lens-pick {
  position: absolute;
  display: none;
  border: 2px solid var(--ink, #1b2023);
  box-shadow: 0 0 0 2px var(--sel, #f2c230), 0 0 0 3.5px var(--card, #fbfbf9);
  border-radius: 3px;
  pointer-events: none;
}

/* Name of what is under the spot (text, so meaning is not colour-only). */
.lens-name {
  position: absolute;
  left: 50%; top: 22px;   /* top centre: no option pill sits there with 2, 3 or 4 options */
  transform: translateX(-50%);
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 9px;
  border-radius: 10px;
  font: 700 12px/1.35 Lato, system-ui, sans-serif;
  color: var(--ink, #1b2023);
  background: var(--card, #fbfbf9);
  border: 1px solid var(--ink, #1b2023);
}
.lens-name.is-empty { font-weight: 400; color: var(--mute, #5c6569); border-color: var(--line, #d3d8d5); }

@media (pointer: coarse) { .lens { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .lens { transition: none !important; } }