.info-tooltip { position: relative; display: inline-flex; align-items: center; line-height: 0; } .info-tooltip__trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-subtle); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transition: color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); } /* Invisible hit-area halo widening the pointer target past the 14px icon without affecting layout; larger for coarse pointers below. */ .info-tooltip__trigger::before { content: ""; position: absolute; inset: -4px; border-radius: var(--radius-pill); } @media (pointer: coarse) { .info-tooltip__trigger::before { inset: -7px; } } .info-tooltip__trigger:hover, .info-tooltip.is-open .info-tooltip__trigger, .info-tooltip__trigger:focus-visible { color: var(--color-text-muted); background: var(--color-divider); } .info-tooltip__trigger:focus-visible { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: var(--focus-ring-offset); } .info-tooltip__icon { width: 14px; height: 14px; } /* No z-index on purpose: it would make this a stacking context that traps its own fixed popover under a later card's icon. */ .info-tooltip--card-corner { position: absolute; top: var(--space-3); right: var(--space-3); } /* Fixed so no overflow:auto ancestor (e.g. the scrolling Top Movers table) can clip it; info-tooltip.js writes top / left each open. */ .info-tooltip__popover { position: fixed; top: 0; left: 0; z-index: var(--z-popover); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text-base); box-shadow: var(--shadow-popover); font-size: var(--font-size-sm); line-height: var(--line-normal); text-align: left; text-transform: none; letter-spacing: 0; font-weight: var(--font-weight-regular); white-space: normal; width: max-content; /* Mirrors PANEL_MAX_WIDTH / VIEWPORT_MARGIN in info-tooltip.js (the inline style wins at runtime); the viewport term caps narrow screens. */ max-width: min(480px, calc(100vw - 16px)); transform-origin: top center; transition: opacity var(--motion-slow) var(--ease-decelerate), transform var(--motion-slow) var(--ease-decelerate); /* placePopover caps max-height to the viewport; scroll internally then rather than clip off-screen (scroll stays inside the tooltip root). */ overflow-y: auto; overscroll-behavior: contain; } .info-tooltip__popover.is-collapsed { opacity: 0; transform: translateY(var(--tip-enter-shift, -4px)) scale(0.96); } .info-tooltip__popover[hidden] { display: none; } /* ── Mobile bottom-sheet (pointer: coarse) ──────────────────────── Shared node mounted on by info-tooltip.js so it escapes every overflow:auto ancestor; JS owns open/close, drag, focus, scroll lock. */ .info-sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; justify-content: flex-end; background: var(--color-scrim, rgba(0, 0, 0, 0.5)); opacity: 1; transition: opacity var(--motion-sheet) var(--ease-decelerate); /* Swallow pan/zoom on the scrim; no overscroll chains to the page. */ touch-action: none; overscroll-behavior: none; } .info-sheet-backdrop[hidden] { display: none; } .info-sheet-backdrop.is-collapsed { opacity: 0; } .info-sheet { position: relative; width: 100%; /* dvh tracks the browser-chrome-aware viewport; vh is the fallback. */ height: 90vh; height: 90dvh; display: flex; flex-direction: column; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); border-top: 1px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-text-base); box-shadow: var(--shadow-popover); transform: translateY(0); transition: transform var(--motion-sheet) var(--ease-decelerate); /* Block stray pans on the chrome; grip drags, scroll region pans-y. */ touch-action: none; } /* Programmatic focus on open should not paint a ring on the panel. */ .info-sheet:focus { outline: none; } /* Drag updates the inline transform per pointermove, so the transition must be off or the sheet lags the finger; restored on release. */ .info-sheet.is-dragging { transition: none; } .info-sheet-backdrop.is-collapsed .info-sheet { transform: translateY(100%); } /* The whole strip is the swipe-down target (info-tooltip.js binds the drag here), so give it a comfortable ~44px touch height rather than a thin band around the handle, which is fiddly to catch on a phone. */ .info-sheet__grip { flex: none; display: flex; justify-content: center; align-items: center; min-height: 44px; padding: var(--space-4) 0 var(--space-3); box-sizing: border-box; cursor: grab; touch-action: none; } .info-sheet__grip:active { cursor: grabbing; } .info-sheet__handle { width: 44px; height: 5px; border-radius: var(--radius-pill); background: var(--color-border-strong); } .info-sheet__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; /* none (not contain): also kills the local rubber-band bounce. */ overscroll-behavior: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: var(--space-6) var(--space-5) 0; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); } /* Fade the clipped edges when the stack overflows; JS forces the reached edge opaque so the first/last line is never left dimmed. */ .info-sheet__scroll.is-overflowing { --info-fade: var(--space-12); --info-fade-top: transparent; --info-fade-bottom: transparent; -webkit-mask-image: linear-gradient( to bottom, var(--info-fade-top) 0, #000 var(--info-fade), #000 calc(100% - var(--info-fade)), var(--info-fade-bottom) 100% ); mask-image: linear-gradient( to bottom, var(--info-fade-top) 0, #000 var(--info-fade), #000 calc(100% - var(--info-fade)), var(--info-fade-bottom) 100% ); } .info-sheet__scroll.is-overflowing.is-at-top { --info-fade-top: #000; } .info-sheet__scroll.is-overflowing.is-at-bottom { --info-fade-bottom: #000; } .info-sheet__card { display: flex; flex-direction: column; gap: var(--space-2); } .info-sheet__card[hidden] { display: none; } .info-sheet__divider { height: 0; margin: var(--space-4) 0; border: 0; border-top: 1px solid var(--color-divider); } .info-sheet__divider[hidden] { display: none; } .info-sheet__body { font-size: var(--font-size-base); line-height: var(--line-normal); } /* Scroll-lock the page behind the sheet (mirrors body.has-nav-open). */ body.has-info-sheet-open { overflow: hidden; overscroll-behavior: none; }