/* ================================================================ INFOTIPS — the small ⓘ that sits beside every tab and every feature. ONE shape now: `.dd-info`, the generic dot infotips.js injects beside whatever carries `data-dd-info`. 🔴 There was a second, `.dd-info.tab-info` — a hand-written dot beside every tab. All ten were deleted on 2026-08-23 (Seth: "there's information icons literally everywhere ... it's overkill"), and the topbar rules that sized them went with the markup. Two things got better: the strip stopped reading as ten labels each trailed by a stray "i", and `.tab`'s `border-bottom` — the active underline — stopped looking offset, because it spans the label and the eye had been reading label+dot as the tab. The panel (.dd-infopop) is a single reused element parked on and positioned fixed, so it escapes every overflow:hidden ancestor — the topbar, the practice split, the knowledge-graph pane. ================================================================ */ .dd-info { /* Reset: these are injected next to wildly different neighbours. */ appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; margin: 0 0 0 6px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--muted); font-family: inherit; font-size: 10px; font-weight: 700; font-style: normal; line-height: 1; text-transform: none; letter-spacing: 0; cursor: help; vertical-align: middle; transition: color 0.15s, border-color 0.15s, background 0.15s; } .dd-info:hover, .dd-info:focus-visible { color: var(--white); border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.15); outline: none; } .dd-info[aria-expanded="true"] { color: var(--on-accent); border-color: var(--accent-text); background: var(--accent); } .dd-info.hidden, .dd-info[hidden] { display: none !important; } /* ---- The panel ------------------------------------------------------- */ .dd-infopop { position: fixed; z-index: 200; width: min(320px, calc(100vw - 24px)); padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px var(--shadow-strong); color: var(--text); font-size: 13px; line-height: 1.5; } .dd-infopop[hidden] { display: none; } .dd-infopop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .dd-infopop-title { font-size: 13px; font-weight: 700; color: var(--white); } .dd-infopop-close { flex: none; padding: 0 2px; border: none; background: none; color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; } .dd-infopop-close:hover { color: var(--white); } .dd-infopop-body { color: var(--text); } .dd-infopop-body strong { color: var(--white); } .dd-infopop-body code { padding: 1px 4px; border-radius: 4px; background: rgb(var(--well-rgb) / calc(0.3 * var(--well-k))); font-size: 12px; }