/**
 * App-wide tooltip bubble (public/js/app-tooltip.js).
 *
 * Replaces the browser's native `title` box. Shaped like the selection
 * toolbar's tooltip — pill, white text, small arrow — in a neutral slate so it
 * reads the same on any screen.
 */
.app-tooltip {
    position: fixed;
    z-index: 2000;
    max-width: 320px;
    /* Padding, type, colour, shadow and easing all copied from the selection
       toolbar's tooltip (.st-action-btn[data-st-label]::after) so a hover hint
       looks the same wherever it comes from. #4b5563 is that toolbar's default
       --st-action-color, i.e. the colour an un-themed action already uses. */
    padding: 7px 11px;
    border-radius: 10px;
    background: #4b5563;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.01em;
    /* Long titles (a GPT rating reason, say) wrap rather than run off screen. */
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-align: center;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: translateY(8px);
    transition: transform 260ms cubic-bezier(.22, .85, .3, 1.2), opacity 180ms ease;
    /* Never intercept the pointer: the bubble sits over the very element being
       hovered, and swallowing events would break clicks underneath it. */
    pointer-events: none;
}

/* Prose variant — the AI rating reasons (GPT reason, Required, Preferred) run
   to whole paragraphs. A narrow bold white-on-slate label is the wrong shape
   for that: it forces a tall thin column of cramped text. These get a wide,
   light, comfortably-set card instead, matching the cell popover, which is
   already the app's surface for reading long values.

   The dark pill stays for short labels, so the two are visually distinct in a
   useful way: dark = a control's name, light = something to read. */
.app-tooltip--prose {
    max-width: min(820px, calc(100vw - 32px));
    padding: 12px 16px;
    background: #fff;
    color: #33404f;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: left;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

/* No arrow on the prose card: it is a panel rather than a pointer, and an
   arrow on a bordered light box needs a matching border to not look broken. */
.app-tooltip--prose::after {
    display: none;
}

/* Short, single-line hints get the toolbar's exact pill. Longer text keeps the
   softer radius above — a wrapped paragraph in a 999px pill reads as a lozenge. */
.app-tooltip--pill {
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

.app-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Arrow. --app-tooltip-arrow is set by the script so it keeps pointing at the
   element even when the bubble is clamped against a viewport edge. */
.app-tooltip::after {
    /* Matches the toolbar arrow: 6px, drop-shadowed rather than box-shadowed so
       it does not darken the bubble edge. */
    content: "";
    position: absolute;
    left: var(--app-tooltip-arrow, 50%);
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #4b5563;
    top: 100%;
    filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.14));
}

.app-tooltip--below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #4b5563;
}

@media print {
    .app-tooltip { display: none !important; }
}