/* SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0 */
/* SPDX-FileCopyrightText: 2026 Hannes Andersson */
/* Ruckus copy of the Feature Library's `world-pinned-labels` (entries/world-pinned-labels/module/world-labels.base.css), unchanged.
   What the world labels need to work at all: the layer over the view, each label placed by the
   transform the script writes (from its foot, so it stands on its point), the front-most label under
   the pointer or focus, and the hidden states, which take a label out of the tab order and the
   accessibility tree after it fades. No colours or shapes: world-labels.css is the plain look.
   Feature Library pass of 2026-11-06: split out of world-labels.css (HaTac UI mock-ups styles/atmos/style.css, d5d98b1). */
.wpl-layer {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  z-index: var(--wpl-z, 1); /* its own stacking context: the labels' z-index stays inside it */
}

.wpl-layer :where(.wpl-label) {
  position: absolute; left: 0; top: 0; transform-origin: 50% 100%;
  display: inline-flex; align-items: center; max-width: 16em;
  margin: 0; box-sizing: border-box; white-space: nowrap;
  pointer-events: auto; user-select: none;
  transition: opacity var(--wpl-fade, 160ms) ease-out, visibility 0s, border-color var(--wpl-fade, 160ms);
}
.wpl-layer :where(button.wpl-label) { cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; }
.wpl-layer :where(.wpl-text) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wpl-layer :where(.wpl-value) { flex: none; }

/* Under the pointer or with keyboard focus, a label comes to the front (over the z-index the script
   writes on the element itself, hence important). */
.wpl-layer :where(button.wpl-label:hover) { z-index: 100000 !important; }
.wpl-layer :where(.wpl-label:focus-visible) { z-index: 100001 !important; }

/* Hidden labels leave the tab order and the accessibility tree (visibility, important so a look
   cannot undo it, like [hidden]), after fading out. */
.wpl-layer :where(.wpl-label[data-wpl-state='under'], .wpl-label[data-wpl-state='crowd']) {
  opacity: 0; visibility: hidden !important; pointer-events: none !important;
  transition: opacity var(--wpl-fade, 160ms) ease-in, visibility 0s linear var(--wpl-fade, 160ms);
}
/* Off screen or behind the camera: gone at once (it is out of sight anyway). */
.wpl-layer :where(.wpl-label[data-wpl-state='out'], .wpl-label[data-wpl-state='behind']) { opacity: 0; visibility: hidden !important; pointer-events: none !important; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .wpl-layer :where(.wpl-label) { transition-duration: 0s !important; transition-delay: 0s !important; }
}
@media (forced-colors: active) {
  .wpl-layer :where(.wpl-label) { border-color: CanvasText !important; background: Canvas !important; color: CanvasText !important; box-shadow: none !important; }
  .wpl-layer :where(.wpl-label)::after { background: CanvasText !important; }
  .wpl-layer :where(button.wpl-label) { border-color: ButtonText !important; color: ButtonText !important; }
  .wpl-layer :where(.wpl-label:focus-visible) { outline-color: Highlight !important; }
}