@charset "UTF-8";
@layer bf-reset, bf-base, bf-auto, bf-tokens, bf-components, bf-utilities, bf-overrides;
@layer bf-components {
  /* The framework tooltip is positioned synchronously by `src/js/tooltip.ts`,
   * which writes the final coords to `style.translate` and relies on
   * `.bf-tooltip` being `position: fixed; top: 0; left: 0` so the offsets
   * resolve against the viewport. Don't change those three properties without
   * coordinating the change in the JS layer. The arrow node is also positioned
   * by JS.
   *
   * Entrance is opacity-only — no transform/scale. A scale entrance combined
   * with `transform-origin: center` would visually grow the tooltip outward
   * during the transition (a few px on each side), which reads as the tooltip
   * "moving into place" after first appearing. Pure opacity is faster to read
   * and never appears to drift.
   */
  .bf-tooltip {
    /* DO NOT TOUCH — required by JS positioning in src/js/tooltip.ts */
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bf-z-tooltip);
    pointer-events: none;
    background-color: var(--bf-color-bg-inverse);
    color: var(--bf-color-text-inverse);
    padding: var(--bf-space-1) var(--bf-space-2);
    border-radius: var(--bf-radius-sm);
    font-size: var(--bf-text-xs);
    line-height: 1.4;
    font-weight: var(--bf-weight-medium);
    letter-spacing: 0.01em;
    max-width: 240px;
    width: -moz-max-content;
    width: max-content;
    box-shadow: var(--bf-shadow-md);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    opacity: 0;
    transition: opacity 120ms ease-out;
  }
  .bf-tooltip[data-bf-show=true] {
    opacity: 1;
  }
  /* Arrow — JS positions it; CSS only paints. The square is 8 px rotated 45°
   * so the visible triangle measures ~5.6 px on each leg. Matches popover. */
  .bf-tooltip__arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: inherit;
    transform: rotate(45deg);
    pointer-events: none;
  }
  /* Larger / multi-line variant — for help bubbles that need a couple of
   * sentences. Triggers via `.bf-tooltip--rich`. */
  .bf-tooltip--rich {
    max-width: 320px;
    padding: var(--bf-space-2) var(--bf-space-3);
    font-size: var(--bf-text-sm);
    line-height: 1.5;
    font-weight: var(--bf-weight-regular);
    text-align: left;
    white-space: normal;
  }
  /* No CSS-only fallback for [data-bf-tooltip]. The previous version painted a
   * `::after` pseudo-element on hover when `aria-describedby` was unset — but
   * that fired *during* the 200ms JS show-delay, so the user saw the pseudo
   * appear, then disappear when the JS attached its overlay at the computed
   * coordinates. The two tooltips were positioned slightly differently, which
   * read as "the tooltip starts in one place and then moves." Pages that need
   * tooltips load bf.min.js; auto-init covers every [data-bf-tooltip] element
   * on DOMContentLoaded.
   */
} /* end @layer */
/*# sourceMappingURL=bf.tooltip.css.map */