@layer components {
  /* Tooltips — the name of a control, for anyone who can see it.
   *
   * Shown on hover and on keyboard focus, in CSS. There is no open state and
   * nothing to dismiss, which is why this is not a popover: a hint that has to
   * be dismissed is a hint that got in the way.
   *
   * It repeats what the control is already called. tooltip_controller points
   * the trigger's aria-describedby at the label, so a screen reader gets it
   * too — but a tooltip is the wrong place for anything that exists nowhere
   * else, because it is unreachable on a touch screen, where there is no hover
   * to have. If the operator has to read it to act correctly, it belongs on the
   * page.
   */
  .tooltip {
    --tooltip-delay: var(--duration-slow);
    --tooltip-duration: var(--duration-fast);
    --tooltip-offset: var(--space-quarter);
    --tooltip-max-width: 18rem;

    position: relative;
    display: inline-flex;
  }

  .tooltip__label {
    position: absolute;
    z-index: var(--z-popup);
    inset-block-end: calc(100% + var(--tooltip-offset));
    inset-inline-start: 50%;
    padding: var(--space-eighth) var(--space-half);
    border-radius: var(--radius-small);
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--text-x-small);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    text-align: center;
    text-wrap: balance;

    /* max-content, then clamped: without it an absolutely positioned box
       shrink-wraps to the width of the trigger, and a two-word label on an icon
       button comes out one word per line. */
    inline-size: max-content;
    max-inline-size: min(var(--tooltip-max-width), calc(100dvw - var(--space-double)));

    /* The centring and the helper's correction ride on the same property, so
       the correction is added to it rather than replacing it. */
    translate: calc(-50% + var(--orient-shift));

    opacity: 0;
    /* Never in the way of the thing it describes: a tooltip sits directly over
       whatever is above the control, and one that took clicks would be a
       target the operator can't see coming. */
    pointer-events: none;
    transition: opacity var(--tooltip-duration) var(--ease-out);

    &[data-orient-block="flip"] {
      inset-block: calc(100% + var(--tooltip-offset)) auto;
    }
  }

  /* The delay is on the way in only: it stops a tooltip firing at everything
     the pointer crosses on its way somewhere, and taking it back out on the way
     out would leave the label sitting over the next control. */
  .tooltip:has(:focus-visible) .tooltip__label {
    opacity: 1;
    transition-delay: var(--tooltip-delay);
  }

  @media (any-hover: hover) {
    .tooltip:hover .tooltip__label {
      opacity: 1;
      transition-delay: var(--tooltip-delay);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tooltip__label {
      transition-duration: 0s;
    }
  }
}