/* Detail popover (tip.js): square, cobalt top rule like dialogs, tabular figures. No motion. */
.tip { position: fixed; z-index: 50; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--accent); box-shadow: 0 10px 28px rgb(0 0 0 / .16); font: 400 13px/1.45 var(--font-body); pointer-events: auto; }
.tip[hidden] { display: none !important; }
.tip-head { margin: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.tip dl { margin: 6px 0 0; display: grid; gap: 3px; }
.tip dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.tip dt { color: var(--muted-foreground); white-space: nowrap; }
.tip dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Targets: a visible response to hover, focus, and tap. */
[data-tip-title] { cursor: default; }
a[data-tip-title] { cursor: pointer; }
span[data-tip-title]:not([role]), strong[data-tip-title], code[data-tip-title] { text-decoration: underline dotted var(--muted-foreground); text-underline-offset: 3px; text-decoration-thickness: 1px; }
span[data-tip-title]:not([role]):hover, strong[data-tip-title]:hover, code[data-tip-title]:hover, [data-tip-title].is-tip-active:not([role]) { text-decoration-color: var(--accent); }
[data-tip-title]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-tip-group]:focus-within { outline: none; }