.tooltip { display:inline-flex; }
.tooltip__trigger { display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--color-text-muted); cursor:help; }
.tooltip__trigger:hover,.tooltip__trigger:focus-visible { color:var(--color-accent); background:var(--color-hover); }
.tooltip__trigger:focus-visible { outline:1px solid var(--color-accent); }
.tooltip__trigger > span { display:block; width:14px; height:14px; background:currentColor; mask-position:center; mask-repeat:no-repeat; mask-size:contain; }
.tooltip__popup { position:fixed; z-index:10000; box-sizing:border-box; width:300px; max-width:calc(100vw - 24px); padding:16px; border:1px solid var(--color-border); border-radius:var(--window-radius,16px); background:var(--color-panel); color:var(--color-ink); box-shadow:var(--shadow-window); font-family:var(--font-family); font-size:12px; line-height:1.5; }
.tooltip__popup strong { display:block; margin-bottom:12px; font-size:13px; }
.tooltip__popup p { margin:10px 0 0; }
.tooltip__examples { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; align-items:center; }
.tooltip__popup code { font-size:11px; overflow-wrap:anywhere; }
.tooltip__muted { color:var(--color-text-muted); }

.tooltip__popup > p:first-child { margin-top:0; }

.tooltip__icon-row { display:flex; align-items:flex-start; gap:10px; }
.tooltip__icon-row > [data-icon] { display:block; flex:none; width:16px; height:16px; margin-top:1px; background:var(--color-text-muted); mask-size:contain; mask-position:center; mask-repeat:no-repeat; }