/* Floating tooltip created by tooltip_controller.js. Lives on rather than as a pseudo-element so it escapes ancestor overflow clipping (e.g. the horizontally-scrolling attempts table wrapper). */ .tooltip-floater { position: fixed; z-index: 100; padding: 5px 10px; background: #0F172A; color: #fff; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease; } .tooltip-floater[data-position="below"] { transform: translateY(-4px); } .tooltip-floater--visible { opacity: 1; transform: translateY(0); } .tooltip-floater::after { content: ""; position: absolute; left: var(--tooltip-arrow-x, 50%); width: 0; height: 0; transform: translateX(-50%); border: 6px solid transparent; } .tooltip-floater[data-position="above"]::after { top: 100%; border-top-color: #0F172A; } .tooltip-floater[data-position="below"]::after { bottom: 100%; border-bottom-color: #0F172A; }