/* Icon tooltip (Figma Tooltip 2372:154417, showcase 2372:154418; Prompt 24 / 25 Part D). One floating element for every icon-only
   button or link on the site (js/icon-tooltip.js). Bubble: padding 6/10, radius 8, Desktop/13 text, surface/media-overlay with
   text/on-media (both stay dark in Dark mode); 10 × 5 arrow; 4px from the control, above by default, below when there is no room.
   Named constants, not a Figma token yet: arrow 10 × 5, gap 4 and viewport margin 8 (in js/icon-tooltip.js), delays 400 / 300 ms, fade 120 ms. */
.icon-tip{position:fixed;left:0;top:0;z-index:1000;display:flex;flex-direction:column;align-items:center;pointer-events:none;
  opacity:0;transition:opacity .12s linear}
.icon-tip[hidden]{display:none}
.icon-tip.is-on{opacity:1}
.icon-tip__bubble{padding:var(--space-6) var(--space-10);border-radius:var(--radius-md);background:var(--surface-media-overlay);color:var(--text-on-media);
  font:var(--text-xs);white-space:nowrap}
.icon-tip__arrow{position:relative;width:10px;height:5px;overflow:hidden;align-self:flex-start}
.icon-tip__arrow::before{content:"";position:absolute;left:50%;width:8px;height:8px;background:var(--surface-media-overlay);transform:translateX(-50%) rotate(45deg)}
.icon-tip--top .icon-tip__arrow{order:2}
.icon-tip--top .icon-tip__arrow::before{top:-5px}
.icon-tip--bottom .icon-tip__arrow{order:0}
.icon-tip--bottom .icon-tip__bubble{order:1}
.icon-tip--bottom .icon-tip__arrow::before{top:1px}
/* static specimen on the components page */
.icon-tip--static{position:static;display:inline-flex;opacity:1;vertical-align:middle}
@media (prefers-reduced-motion:reduce){.icon-tip{transition:none}}
.icon-tip.is-on .icon-tip__bubble{pointer-events:auto}   /* the pointer may rest on the bubble (150 ms grace in the script) */
/* Cut-off text (Prompt 26 Part C): wraps at 320, up to 4 lines, then an ellipsis. 320 = not a Figma token yet */
.icon-tip--text .icon-tip__bubble{max-width:320px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;overflow-wrap:anywhere}
/* pointer devices only (Prompt 26): touch and coarse pointers never show it */
@media not all and (hover:hover) and (pointer:fine){.icon-tip:not(.icon-tip--static){display:none!important}}