/* <button class="w-button" data-tooltip="Copy to clipboard">…</button>
   Shows on hover and on keyboard focus. tooltip.js also gives screen readers the same text. */
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 20;
  transform: translate(-50%, 4px); padding: 5px 9px; border-radius: 6px; pointer-events: none; white-space: nowrap;
  background: var(--w-primary); color: var(--w-primary-fg); font: 500 12px/1.3 var(--w-font);
  opacity: 0; transition: opacity var(--w-speed), transform var(--w-speed); }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
[data-tooltip-side="bottom"]::after { bottom: auto; top: calc(100% + 6px); }