/* ───────────────────────────────────────────────
   brainvi.ai — Phase 2 · leader-line label overlay
   Educational labels for the persistent particle brain.
   Loaded after styles.css / v2.css; reads brand tokens
   (--mono, --ink, --mid, --hair, --orange) from :root.
   The overlay never intercepts pointer events.
   ─────────────────────────────────────────────── */

/* Fixed, full-viewport, transparent stage that sits above the
   brain canvas background but below the topbar (z-index 50). */
.brain-labels-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  /* Invisible & harmless until a region is active. */
  contain: layout style;
}

/* The single SVG that draws the thin leader line. Spans the
   whole viewport so we can use absolute viewport coordinates. */
.brain-labels-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow: visible;
}
.brain-labels-overlay.is-active .brain-labels-line { opacity: 1; }

.brain-labels-line line {
  stroke: var(--mid, #7a7975);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

/* Small orange target dot pinned to the region centroid on screen.
   Soft ring echoes the brand's signal-dot treatment (.kicker::before). */
.brain-labels-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange, #f77527);
  box-shadow: 0 0 0 3px rgba(247, 117, 39, 0.18),
              0 0 0 6px rgba(247, 117, 39, 0.08);
  /* Centre the dot on the (x,y) we translate to. */
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
.brain-labels-overlay.is-active .brain-labels-dot { opacity: 1; }

/* The card holding the real, accessible region name. Cream /
   translucent Swiss card with a hairline border + mono ink text. */
.brain-labels-card {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 240px;
  padding: 7px 11px;
  background: color-mix(in oklab, var(--paper, #f4f1ea) 86%, transparent);
  border: 0.5px solid var(--hair, #d6d2c7);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.04),
              0 6px 18px rgba(10, 10, 10, 0.07);
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  opacity: 0;
  /* Subtle slide-up-into-place on top of the opacity fade. */
  transform: translate(0, 4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: transform, opacity;
}
.brain-labels-overlay.is-active .brain-labels-card {
  opacity: 1;
  transform: translate(0, 0);
}

/* Tiny orange tick on the card edge nearest the line — ties the
   card visually to the leader line without extra DOM. */
.brain-labels-card::before {
  content: "";
  position: absolute;
  left: 9px;
  bottom: -1px;
  width: 14px;
  height: 1px;
  background: var(--orange, #f77527);
  opacity: 0.55;
}

.brain-labels-name {
  display: block;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink, #0a0a0a);
  white-space: normal;
}

/* Reduced motion: no slide, just an instant/opacity presence. */
@media (prefers-reduced-motion: reduce) {
  .brain-labels-card {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .brain-labels-overlay.is-active .brain-labels-card { transform: none; }
  .brain-labels-line,
  .brain-labels-dot { transition: opacity 0.2s ease; }
}

/* Mobile: the brain is a small pinned band and the region name is already printed under
   each stop — so the floating leader-line card/line just clutter. Hide the overlay; the
   orange highlighted region itself stays the visual cue. */
@media (max-width: 760px) {
  .brain-labels-overlay { display: none; }
}