/* The tooltip never takes the pointer.

   Bootstrap ships `pointer-events: none` on `.tooltip`, and it is not cosmetic:
   the box is drawn floating over the page, beside the thing it describes, so
   whatever it covers has to stay reachable. The theme redeclares `.tooltip`
   without that line, which turns every tooltip of the platform into the hit
   target for the area underneath it.

   Where it surfaced is the grid of language flags of a listing. Each flag is a
   small link, the tooltip of one is several times wider than a flag, and it
   opens over its neighbours: hovering any flag left the ones it covered
   unclickable, because the click landed on the tooltip and nothing happened.
   The symptom reads as a broken link rather than as a tooltip, since the flag
   stays perfectly visible through the box that is eating the click.

   Nothing inside a tooltip is ever clickable — it is dismissed by the very act
   of moving the pointer towards it — so it never needs the pointer anywhere.

   This sheet loads after the theme, so the single class is enough to win and no
   `!important` is needed. */

.tooltip {
    pointer-events: none;
}

/* The tooltip of an icon in a dense grid stays on one line.

   A tooltip wraps at 200px and grows downwards, so the box that describes a
   15px-tall flag ends up three lines and 65px tall — taller than the gap
   between one row of flags and the next. Whichever way it opens it lands on
   flags of a neighbouring row, hiding exactly the one the reader is aiming at.
   Letting the pointer through is not enough there: the reader still has to see
   which flag is which to pick one.

   Released from the wrap the same text is a single line, and a single line fits
   in the gap without reaching either row. It gets wider instead of taller,
   which costs nothing: the flags it now spans horizontally sit on its own line,
   above or below the box, never under it.

   The modifier is asked for with `data-custom-class` on the element that owns
   the tooltip, so it needs no initialisation of its own and holds no matter
   which screen builds the tooltip. */

.tooltip.sf-tooltip-one-line .tooltip-inner {
    max-width: none;
    white-space: nowrap;
    padding: 0.25rem 0.65rem;
}