/* Tooltips, Arc-style (piece 10, 2026-10-29). The bubble arc_tooltip.js owns.
 *
 * Arc tooltip: an inverted bubble (foreground fill, background ink), 15rem
 * at most, a raised shadow since it floats. The first tip rises 3px from
 * .97 after 250ms; inside the skip window the next only fades; new text
 * rises in. Exits are shorter than entrances. The older .oc-tip bubble is
 * retired by the script (it claims window.__ocTipInit), so it never shows.
 */

.oc-arc-tip {
  --oc-tip-y: 3px;
  position: fixed;
  z-index: 100001;
  top: 0;
  left: 0;
  box-sizing: border-box;
  max-width: 15rem;
  padding: 5px var(--arc-space-2) 6px;
  border: 1px solid color-mix(in srgb, var(--arc-background) 14%, var(--arc-foreground));
  border-radius: var(--arc-radius-control);
  background: var(--arc-foreground);
  color: var(--arc-background);
  box-shadow: var(--arc-shadow-raised);
  font-family: var(--font-sans, inherit);
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight);
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--oc-tip-y)) scale(.97);
  transition:
    opacity var(--arc-dur-fast) var(--arc-ease-enter),
    transform var(--arc-dur-fast) var(--arc-ease-enter);
}
.oc-arc-tip[hidden] { display: none; }
.oc-arc-tip[data-side="bottom"] { --oc-tip-y: -3px; }
.oc-arc-tip.is-open { opacity: 1; transform: none; }
.oc-arc-tip.is-instant { transform: none; transition: opacity var(--arc-dur-instant) var(--arc-ease); }
.oc-arc-tip.is-closing {
  opacity: 0;
  transform: scale(.98);
  transition:
    opacity var(--arc-dur-instant) var(--arc-ease-exit),
    transform var(--arc-dur-instant) var(--arc-ease-exit);
}

.oc-arc-tip__title {
  display: flex;
  align-items: center;
  gap: var(--arc-space-2);
  font-weight: var(--arc-weight-strong);
}
.oc-arc-tip__title[hidden], .oc-arc-tip__kbd[hidden], .oc-arc-tip__body[hidden] { display: none; }
.oc-arc-tip__title + .oc-arc-tip__body:not([hidden]) {
  margin-top: 2px;
  color: color-mix(in srgb, var(--arc-background) 78%, var(--arc-foreground));
}
.oc-arc-tip__kbd {
  margin-left: auto;
  padding: 0 var(--arc-space-1);
  border: 1px solid color-mix(in srgb, var(--arc-background) 28%, transparent);
  border-radius: calc(var(--arc-radius-chip) - 2px);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--arc-text-2xs);
  color: inherit;
}
.oc-arc-tip__body code {
  padding: 0 3px;
  border-radius: calc(var(--arc-radius-chip) - 2px);
  background: color-mix(in srgb, var(--arc-background) 16%, transparent);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--arc-text-2xs);
}
.oc-arc-tip__body.is-rising { animation: oc-arc-tip-rise var(--arc-dur) var(--arc-ease-enter) both; }
@keyframes oc-arc-tip-rise {
  from { opacity: 0; transform: translateY(3px); filter: blur(1.5px); }
}
.oc-arc-tip__body { display: block; }

/* The retired bubble never paints, whichever controller ran first. */
html body .oc-tip { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .oc-arc-tip, .oc-arc-tip.is-instant, .oc-arc-tip.is-closing {
    transform: none;
    transition: opacity 90ms linear;
  }
  .oc-arc-tip__body.is-rising { animation: none; }
}