/* ===========================================================================
   EmbedSheets v2 - Tooltips
   ---------------------------------------------------------------------------
   Shared by the SaaS builder and the published calculator, so a tooltip looks
   the same in both. Nothing here reads --es-* or --calc-*: a tooltip floats
   above whatever theme is underneath it, and black-on-white stays legible on
   a Light, Dark, Black or Transparent calculator alike.

   jQuery UI's own theme stylesheet is not vendored, so every class the widget
   relies on is defined here - including the visually-hidden live region,
   which would otherwise render as loose text in the middle of the page.
   =========================================================================== */

.ui-tooltip,
.es-tip {
    position: absolute;
    z-index: 9999;
    max-width: 280px;
    padding: 8px 11px;
    box-sizing: border-box;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    /* Left aligned even inside a centred column or a right-aligned button. */
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;

    color: #ffffff;
    background: #000000;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);

    pointer-events: none;
}

.ui-tooltip-content { text-align: left; }

/*
 * The widget mirrors the tooltip into a live region for screen readers. It is
 * meant to be invisible; jQuery UI puts that rule in its theme CSS, which we
 * do not ship, so without this the tooltip text would appear twice - once
 * floating and once as stray text in the document flow.
 */
.ui-helper-hidden-accessible {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The "?" badge that carries a field's tooltip on the calculator frontend.
   Its colors stay themed - it is part of the calculator, not the tooltip. */
.calc-tip { cursor: help; }
.calc-tip:focus-visible {
    outline: 2px solid var(--calc-input-focus-border, #5b5bd6);
    outline-offset: 2px;
}