| /* The context popover (docs/interface_guidelines.md). Styled from the shared tokens, so it reads the | |
| same on every surface it opens over: the light case-review and source-trace screens and the dark | |
| chrome alike. */ | |
| .info-pop { | |
| position: relative; | |
| display: inline-flex; | |
| vertical-align: baseline; | |
| margin-left: 6px; | |
| } | |
| /* A circled "i", sized to sit beside a label without changing the line's height. */ | |
| .info-pop-trigger { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 16px; | |
| height: 16px; | |
| padding: 0; | |
| border: 1px solid currentColor; | |
| border-radius: 50%; | |
| background: none; | |
| color: inherit; | |
| opacity: 0.55; | |
| font: inherit; | |
| font-size: 10px; | |
| font-style: italic; | |
| font-weight: 700; | |
| line-height: 1; | |
| /* An eyebrow or a column header sets uppercase and letter-spacing on its children, which would | |
| render the trigger's "i" as a spaced capital. The glyph is fixed, so it opts out of both. */ | |
| text-transform: none; | |
| letter-spacing: normal; | |
| cursor: pointer; | |
| transition: opacity 0.12s ease; | |
| } | |
| .info-pop-trigger:hover, | |
| .info-pop-trigger[aria-expanded="true"] { | |
| opacity: 1; | |
| } | |
| .info-pop-trigger:focus-visible { | |
| outline: 2px solid currentColor; | |
| outline-offset: 2px; | |
| } | |
| /* Opens in place, below and left-aligned to its trigger, and floats over the content rather than | |
| pushing it. Width is capped so the body stays a readable measure. */ | |
| .info-pop-panel { | |
| position: absolute; | |
| top: calc(100% + 8px); | |
| left: -8px; | |
| z-index: 60; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| width: max-content; | |
| max-width: min(340px, 78vw); | |
| padding: 12px 14px; | |
| border: 1px solid var(--hairline, rgba(0, 0, 0, 0.12)); | |
| border-radius: 8px; | |
| background: var(--surface, #fff); | |
| color: var(--ink, #1c2b36); | |
| box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16); | |
| text-align: left; | |
| white-space: normal; | |
| text-transform: none; | |
| letter-spacing: normal; | |
| cursor: default; | |
| } | |
| .info-pop-title { | |
| font-size: 12px; | |
| font-weight: 650; | |
| letter-spacing: 0.02em; | |
| } | |
| .info-pop-body { | |
| font-size: 13px; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| color: var(--ink-muted, #51626e); | |
| } | |
| /* Near the right edge the panel would overflow, so a caller marks it to open leftward instead. */ | |
| .info-pop.align-end .info-pop-panel { | |
| left: auto; | |
| right: -8px; | |
| } | |
| @media (max-width: 700px) { | |
| .info-pop-panel { | |
| max-width: 78vw; | |
| } | |
| } | |