/* packages/shared/components/hover-hint.css Generic "what is this" hover tooltip — a small info icon next to any label or title. Desktop: hover/focus. Touch: hover-hint.js toggles it on tap since there's no hover on a touchscreen. Reuses --tooltip-bg/--tooltip-fg (packages/shared/global.css) — the same pair the sidebar's existing footer-icon tooltip uses. Verified AA-compliant in both themes (~13.5:1 light, ~15.6:1 dark) — see docs/superpowers/specs/2026-07-16-hover-hint-design.md. The tooltip (.hover-hint-tooltip) is a single element appended to and positioned via inline style (hover-hint.js), NOT a CSS ::after pseudo-element on the icon. A pseudo-element can never escape an ancestor's `overflow: hidden` — and the sidebar nav rail (.ck-sb-nav) is exactly that (load-bearing, tied to its height-fit mechanism) — so a same-DOM tooltip would render clipped there. A body-appended, position:fixed element has no such ancestor. */ .hover-hint-anchor { display: inline-flex; flex-shrink: 0; vertical-align: middle; } .hover-hint-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; /* ~32px touch target around the 14px glyph, without pushing surrounding layout (negative margin cancels the padding's box-size increase). box-sizing:content-box is required here — the app-wide `*` reset (shared.css) sets border-box, which would fold the 9px padding INTO the 14px box instead of adding to it, so the -9px margin then shifts the whole glyph 9px toward whatever precedes it instead of just expanding the invisible tap target. That's what made the icon crowd (visually overlap) the label text it sits next to — this line pins the box model this component actually needs. */ box-sizing: content-box; padding: 9px; margin: -9px; border: none; background: none; color: currentColor; opacity: 0.45; cursor: pointer; transition: opacity .15s ease; } .hover-hint-icon svg { width: 14px; height: 14px; /* Without this, the svg (a replaced element with only a viewBox — no width/height attributes) computes an automatic minimum width of 0 inside its flex-row parent and renders invisible-but-present: found live in browser verification, where the icon existed in the DOM (correct aria-label, correct hint text) with a real 18x18 clickable box, but the glyph inside it had 0 rendered width — height alone came from the CSS above; width silently collapsed. flex-shrink:0 stops it shrinking past its own explicit size. */ flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hover-hint-icon:hover, .hover-hint-icon:focus-visible { opacity: 1; } .hover-hint-icon:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; } /* The shared floating tooltip — one instance, repositioned per icon. Full sentences, so font-size is 14px (THEME_RULES.md body-text floor) and text wraps, unlike the footer-icon tooltip's single-word nowrap/11.5px (sidebar.css:808-832). */ .hover-hint-tooltip { position: fixed; width: max-content; max-width: 220px; padding: 8px 12px; border-radius: 8px; background: var(--tooltip-bg); color: var(--tooltip-fg); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; white-space: normal; text-align: left; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 300; } .hover-hint-tooltip.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hover-hint-icon, .hover-hint-tooltip { transition: none; } }