/* The Well — scene layers: canvas world, DOM label overlay, minimap.
 * Canvas draws shapes only; every glyph of text here is a DOM label.
 * Vocabulary is tokens.css only. */

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;          /* pointer pan/zoom owns gestures */
  cursor: default;
}

/* ---- label overlay ------------------------------------------------ */

#labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;        /* clicks fall through to the canvas */
  z-index: 1;
  transition: opacity var(--t-micro) var(--glide);
}
#labels.labels-hidden { opacity: 0; }

.well-label {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  white-space: nowrap;
  font-family: var(--sans);
  color: var(--text);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* node labels: code chip + title, parked just under the node */
.lbl-node {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 1.1;
  text-shadow: 0 1px 3px var(--label-halo), 0 0 2px var(--label-halo);
}
.lbl-node .lbl-title {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

/* group (cluster) names: letter-spaced small-caps */
.lbl-group {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--hue, var(--text-2)) 78%, var(--text));
  text-shadow: 0 1px 4px var(--label-halo), 0 0 3px var(--label-halo);
}

/* region names: the biggest, quietest chrome */
.lbl-region {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--hue, var(--text-3)) 60%, var(--text-3));
  text-shadow: 0 1px 6px var(--label-halo), 0 0 3px var(--label-halo);
}

.well-label .code-chip { flex: none; }

/* ---- minimap ------------------------------------------------------ */

#minimap-wrap {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  padding: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

#minimap {
  display: block;
  width: 160px;
  height: 110px;
  border-radius: 5px;
  cursor: crosshair;
}

@media (max-width: 720px) {
  #minimap-wrap { transform: scale(0.85); transform-origin: bottom right; }
}