/* components/info-tip.css · THE ONE ⓘ
   ---------------------------------------------------------------
   The Tickets page carried this tooltip twice over: a page-local [data-tip]
   helper that opened on hover only, and a second placement of the glyph
   depending on which block it sat in (bottom-left of a tile, beside a heading
   elsewhere). One component now: the glyph is .tip-icon, the words ride
   data-tip, it opens on hover AND on focus, and it sits at the right end of
   the title row of whatever block it explains. kpi-tile.js emits exactly this
   markup for the corner of a tile; a heading emits it inline after its words.
   Tokens only; no colour of its own. */

[data-tip]{position:relative;cursor:default}
[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--surface-modal-bg);color:var(--text);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);padding:.45rem .7rem;
  font-size:var(--text-xs);font-family:var(--font-body);font-weight:400;line-height:1.45;
  text-transform:none;letter-spacing:normal;white-space:normal;max-width:280px;width:max-content;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  pointer-events:none;opacity:0;transition:opacity var(--duration-fast) var(--ease);
  z-index:var(--z-dropdown);box-shadow:var(--shadow-md)
}
[data-tip]:hover::after,[data-tip]:focus-visible::after,[data-tip]:focus-within::after{opacity:1}
[data-tip-align="right"]::after{left:auto;right:0;transform:none}
[data-tip-align="left"]::after{left:0;right:auto;transform:none}
/* below the control instead of above it, for a control that sits at the top edge of a
   clipping box (the first row of the notification list) */
[data-tip-side="below"]::after{bottom:auto;top:calc(100% + 6px)}
@media (prefers-reduced-motion:reduce){[data-tip]::after{transition:none}}

.tip-icon{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:var(--glass-bg);color:var(--text-tertiary);font-size:9px;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
}
.tip-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}