/* Sidebar Hovercard — VS Code-style reusable tooltip Single node appended to , positioned via transform. Uses only design tokens from common.css. GPU-accelerated. */ .sidebar-hovercard { position: fixed; top: 0; left: 0; z-index: 300; /* above sidebar's collapsed ::after tooltip (z-index 200) */ max-width: 320px; min-width: 160px; padding: var(--sp-2) var(--sp-3); background: var(--bg-raised); color: var(--fg); border: 1px solid var(--border-strong); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); font-size: var(--size-sm); line-height: var(--line-height); pointer-events: none; /* hovercard never steals hover from items */ opacity: 0; transform: translate3d(0, 0, 0) translateY(-50%); transition: opacity var(--duration) ease-out; will-change: opacity, transform; } .sidebar-hovercard--visible { opacity: 1; } .sidebar-hovercard__title { display: block; font-weight: 600; color: var(--fg); font-size: var(--size-sm); } .sidebar-hovercard__desc { display: block; margin-top: var(--sp-1); color: var(--fg-secondary); font-size: var(--size-xs); } .sidebar-hovercard__desc[hidden] { display: none; } /* Reserved hook for future arrow/edge styling when flipped to the item's left */ .sidebar-hovercard--flip { /* Position handled in JS; class retained for potential arrow flip. */ } /* Respect reduced-motion preference — instant show/hide, no fade */ @media (prefers-reduced-motion: reduce) { .sidebar-hovercard { transition: none; } }