/* xot-truncate-reveal — ONE themewide reveal for any truncated card label. A styled popover (this file) is positioned by xot-truncate-reveal.js and appended to , so it escapes every overflow:hidden / scroller ancestor and never reflows the page. It only ever appears for a label that ACTUALLY overflows (the JS measures scrollWidth/scrollHeight). No component CSS here changes — this layers on top of the existing ~160 ellipsis / line-clamp labels generically. */ .xot-reveal-pop { position: fixed; z-index: 2147483000; /* above headers, sticky bars, modals */ left: 0; top: 0; max-width: min(360px, 90vw); padding: 0.5rem 0.7rem; border-radius: 10px; background: #1f1f22; /* matches the dark card surface tier */ color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); font-family: "Satoshi", -apple-system, system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; line-height: 1.32; letter-spacing: 0.1px; overflow-wrap: anywhere; /* long unbroken titles still wrap */ -webkit-font-smoothing: antialiased; pointer-events: none; /* never steals hover from the label */ opacity: 0; transform: translateY(2px); transition: opacity 0.14s ease, transform 0.14s ease; will-change: opacity, transform; } .xot-reveal-pop--show { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .xot-reveal-pop { transition: opacity 0.01s linear; transform: none; } .xot-reveal-pop--show { transform: none; } }