/* css/components/tooltip.css
   One styled tooltip for the whole site, the API console's bubble made
   general: any element carrying data-tip shows it above itself on hover and
   on keyboard focus. Glass fill, hairline border, a small arrow, tokens only
   so both themes hold. Icon buttons and the (i) explainers use it instead of
   the browser's own title bubble.

   Two layers: the CSS pseudo-bubble below is the NO-JS fallback (fixed to the
   anchor, so it can clip at a screen edge). When src/components/tooltip.js
   runs it adds `js-tips` to <html> and takes over with a single floating
   element (.po-tip) that flips above/below by where the anchor sits and
   clamps to the viewport, so the fallback is suppressed to avoid a double
   bubble. */

/* ---- the smart floating tooltip (JS-positioned) ---- */
.po-tip {
  position: fixed; left: 0; top: 0; z-index: 12050;
  max-width: min(28rem, 90vw);
  padding: 6px 10px; border-radius: 7px;
  font: 500 .75rem/1.3 inherit; letter-spacing: 0; text-transform: none;
  color: var(--ink);
  background: color-mix(in srgb, var(--glass) 78%, var(--surface-deep, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  box-shadow: var(--bg-deep), 0 6px 20px color-mix(in srgb, var(--ink) 12%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  pointer-events: none;
  opacity: 0; transform: translateY(3px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.po-tip.is-shown { opacity: 1; transform: translateY(0); }
.po-tip-text { display: block; }
.po-tip-arrow {
  position: absolute; width: 8px; height: 8px;
  background: color-mix(in srgb, var(--glass) 78%, var(--surface-deep, transparent));
  transform: translateX(-50%) rotate(45deg);
}
.po-tip.is-below .po-tip-arrow { top: -4px; border-left: 1px solid color-mix(in srgb, var(--border) 88%, transparent); border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent); }
.po-tip.is-above .po-tip-arrow { bottom: -4px; border-right: 1px solid color-mix(in srgb, var(--border) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent); }
@media (prefers-reduced-motion: reduce) { .po-tip { transition: none; } }
/* Once the JS tooltip is active, the pseudo-bubble fallback stands down. */
html.js-tips [data-tip]::after, html.js-tips [data-tip]::before { display: none !important; content: none !important; }

[data-tip] { position: relative; }

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  border-radius: 7px;
  font: 500 .75rem/1.25 var(--font, inherit);
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  max-width: min(28rem, 80vw);
  color: var(--ink);
  background: color-mix(in srgb, var(--glass) 70%, var(--surface-deep, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow: var(--bg-deep);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  display: none;
  pointer-events: none;
  z-index: 30;
}
[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: color-mix(in srgb, var(--glass) 70%, var(--surface-deep, transparent));
  border-left: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  rotate: -45deg;
  display: none;
  pointer-events: none;
  z-index: 31;
}
/* Shown only on hover or focus: a hidden tip must not exist in layout, or its width would give a narrow page a sideways scroll. */
[data-tip]:hover::after, [data-tip]:focus-visible::after { display: block; transform: translateX(-50%) translateY(0); }
[data-tip]:hover::before, [data-tip]:focus-visible::before { display: block; }
/* A tip that would run off the left or right edge of a narrow screen: pin it to that edge. */
[data-tip].tip-left:hover::after, [data-tip].tip-left:focus-visible::after { left: 0; transform: none; }
[data-tip].tip-right:hover::after, [data-tip].tip-right:focus-visible::after { left: auto; right: 0; transform: none; }
/* Long tips wrap. */
[data-tip].tip-wrap::after { white-space: normal; width: max-content; }
/* Touch screens have no hover: the label is still read by assistive tech through aria-label. */
@media (hover: none) { [data-tip]::after, [data-tip]::before { display: none; } }