/* ========================================================================
   Centroid labels overlay
   ===================================================================== */

#label-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-overlay);
  /* Centroid labels are part of the plot, not the interface: they keep one
     size on every pointer, the size figure export reproduces. */
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.centroid-label {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-shadow:
    0 0 3px color-mix(in srgb, var(--color-text-inverse) 85%, transparent),
    0 0 2px rgba(var(--shadow-rgb), var(--opacity-60));
}

/* View title overlay for small multiples */
#view-title-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-overlay);
  font-size: var(--type-label);
  color: var(--color-text-primary);
  /* The sidebar and its toggle tab overlay the left of the plot. No title chip
     may start left of this edge, or it sits under them, unreadable and
     unclickable. */
  --view-title-safe-left: calc(
    var(--space-2-5) + var(--sidebar-width) + var(--sidebar-toggle-width) + var(--space-2)
  );
}

body:has(#sidebar.hidden) #view-title-layer {
  --view-title-safe-left: calc(
    var(--space-2-5) + var(--sidebar-toggle-width) + var(--space-2)
  );
}

/* Centred on its cell (the viewer publishes the centre as --view-title-x/-y),
   but never left of the safe edge: the horizontal shift is the centring -50%
   unless that would cross --view-title-safe-left, in which case the chip's
   left edge sits on it. */
.view-title-chip {
  position: absolute;
  left: var(--view-title-x);
  top: var(--view-title-y);
  translate: max(-50%, calc(var(--view-title-safe-left) - var(--view-title-x))) -50%;
  /* A long label in a narrow pane ends in an ellipsis inside its own pane
     rather than running into the next pane's chip; the full label is the
     chip's title. Centred, it may span the pane less a gap each side; pushed
     right of the safe edge, it may reach from there to the pane's right edge
     less a gap. */
  box-sizing: border-box;
  max-width: min(
    calc(var(--view-title-pane-width, 100vw) - 2 * var(--space-2)),
    calc(
      var(--view-title-x) + var(--view-title-pane-width, 100vw) / 2
        - var(--space-2) - var(--view-title-safe-left)
    )
  );
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: calc(var(--space-0-5) + var(--space-px)) var(--space-2);
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-surface-elevated) 90%, transparent);
  border: var(--border-width-1) solid color-mix(in srgb, var(--color-border-strong) 35%, transparent);
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  cursor: pointer;
  transition: var(--transition-colors);
}

.view-title-chip:hover {
  background-color: color-mix(in srgb, var(--color-surface-secondary) 95%, transparent);
}

.view-title-chip.active {
  background-color: var(--color-interactive-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-interactive-primary);
  box-shadow: var(--shadow-sm);
}

.view-title-chip.active:hover {
  background-color: var(--color-interactive-primary-hover);
  border-color: var(--color-interactive-primary-hover);
}