/* 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.css), unchanged.
   Feature Library copy of HaTac UI mock-ups `styles/atmos/style.css` (d5d98b1). The world labels' look (a pill with a stem), with its own variables, hidden states that leave the tab order, focus, forced colours and reduced motion added.
   Feature Library pass of 2026-11-06: this is the plain look, over world-labels.base.css (load that first);
   every rule is .wpl-layer plus a :where(), so one selector of yours on a part (data-part) wins; the shared
   tokens fall back to the library's own light values.

   Map these to your app's tokens: --wpl-bg, --wpl-fg, --wpl-muted, --wpl-line, --wpl-accent, --wpl-fade. */
.wpl-layer :where(.wpl-label) {
  --_bg: var(--wpl-bg, color-mix(in srgb, var(--surface, #ffffff) 88%, transparent));
  --_fg: var(--wpl-fg, var(--text, #0c0e13));
  --_line: var(--wpl-line, color-mix(in srgb, var(--text, #0c0e13) 26%, transparent));
  gap: 0.45em; min-height: 24px;
  padding: 0.3em 0.7em; border-radius: 999px;
  background: var(--_bg); color: var(--_fg); border: var(--line, 1px) var(--line-style, solid) var(--_line);
  font: 500 12px/1.25 var(--font, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); text-align: start;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
}
.wpl-layer :where(.wpl-label)::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: var(--wpl-gap, 10px);
  background: linear-gradient(var(--_line), transparent); pointer-events: none;
}
.wpl-layer :where(.wpl-value) { color: var(--wpl-muted, var(--text-2, #4c5363)); font: 500 11px/1.25 var(--mono, ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace); font-variant-numeric: tabular-nums; }

/* Under the pointer or with keyboard focus, the accent. */
.wpl-layer :where(button.wpl-label:hover) { border-color: var(--wpl-accent, var(--accent, #4c5ce0)); }
.wpl-layer :where(.wpl-label:focus-visible) { outline: 2px solid var(--wpl-accent, var(--accent, #4c5ce0)); outline-offset: 2px; }