/*
  Gener8 style kit — labels on the model.

  Each label is a small paper tag joined to a dot on the structure by a thin
  leader line. The viewer's JS places them (two columns either side of the model)
  and hides them while the model is moving (#pins.moving).

  Markup the JS builds inside #pins:
    <svg id="pinLines"><line …></svg>
    <div class="pin-dot">   the point on the structure
    <div class="pin-lab">   the tag (tappable: selects the structure)
*/
#pins { position: absolute; inset: 0; pointer-events: none; z-index: 4; transition: opacity var(--dur) var(--ease); }
#pins.moving { opacity: 0; }
#pinLines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Thin line with a soft paper halo so it reads on light and dark scenes alike */
#pinLines line { stroke: var(--label-line); stroke-width: 1.25; filter: drop-shadow(0 0 1.5px var(--label-bg)); }

.pin-dot {
  position: absolute; width: calc(var(--u) * .9); height: calc(var(--u) * .9);
  margin: calc(var(--u) * -.45) 0 0 calc(var(--u) * -.45); border-radius: 50%;
  background: var(--label-dot); box-shadow: 0 0 0 2px var(--label-bg);
}
.pin-lab {
  position: absolute; transform: translateY(-50%);
  /* Big enough to tap on a wall, small enough not to cover the anatomy */
  min-height: calc(var(--u) * 3.6); display: flex; align-items: center;
  padding: 0 calc(var(--u) * 1); border-radius: var(--r-sm);
  font-size: calc(var(--tu) * 1.3); font-weight: 400; white-space: nowrap;
  background: var(--label-bg); color: var(--label-ink);
  border: 1px solid var(--panel-line); box-shadow: 0 1px 4px rgba(40, 32, 20, .14);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: auto; cursor: pointer;
}
.pin-lab.left { transform: translate(-100%, -50%); }
.pin-lab:active { background: var(--accent); color: var(--accent-ink); }

/* A label beside its dot or moved by hand (js/label-places.js): centred on its place,
   the leader line runs under it to its middle */
.pin-lab.placed, .pin-lab.placed.left { transform: translate(-50%, -50%); }
.pin-lab.dragging { box-shadow: 0 4px 14px rgba(40, 32, 20, .28); z-index: 2; cursor: grabbing; }