/* tooltip.css: Tooltip (component 26) and the info popover surface shared by Figure and Control chip. Owner: group B (P2.T5).
   Tooltip: --inverse-bg, --type-caption, 4 by 8 padding, --radius-control, max 280, --z-tooltip, no shadow, no border (02). */
[data-component="tooltip"] {
  position: fixed;
  inset-block-start: var(--pop-y, 0);
  inset-inline-start: var(--pop-x, 0);
  z-index: var(--z-tooltip);
  box-sizing: border-box;
  max-inline-size: var(--size-tooltip-max);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font: var(--type-caption);
  overflow-wrap: anywhere;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
[data-component="tooltip"][data-state="open"] { opacity: 1; }
[data-component="tooltip"][data-state="closing"] { opacity: 0; }

/* In flow, for the kitchen sink: the same bubble without the fixed position. */
[data-component="tooltip"][data-static="true"] {
  position: static;
  inline-size: fit-content;
  opacity: 1;
}

/* Info popover (02 Menu and popover, info variant): the surface the Figure and the Control chip open. It floats, so it carries the
   overlay shadow through [data-overlay]; the manager positions it. */
.info-popover {
  box-sizing: border-box;
  inline-size: var(--size-popover-md);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-overlay);
  color: var(--text);
  font: var(--type-body);
}
.info-popover[data-overlay] { box-shadow: var(--shadow-overlay); }
.info-popover__body { display: grid; gap: var(--space-3); }
.info-popover__title { font: var(--type-button); color: var(--text); }
.info-popover__text { font: var(--type-body); color: var(--text); }
.info-popover__caption { font: var(--type-caption); color: var(--text-secondary); }

/* Kitchen sink only: a value that truncates, so the tooltip can spell it out. */
.tooltip-demo__truncated {
  display: inline-block;
  max-inline-size: var(--size-field-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--type-body);
}