/**! ----------------------------------------------------------------------------
 * @file    SwTooltip.css  (shared)
 * @desc    Styling for the shared pretty-tooltip (SwTooltip.js) — a single
 *          floating bubble that replaces the browser's native title tooltip.
 *          Multi-line aware (one .sw-tip__line per line). Dark by default; a
 *          light/white variant is available via .sw-tip--light (set globally with
 *          window.SW_TOOLTIP_THEME='light' or per element with
 *          data-sw-tip-theme="light").
 * @version v6 2026-08-17 - Initial version.
 * @author  Charlie Samra
 * @see     SwTooltip.js
 * ------------------------------------------------------------------------- */
.sw-tip {
    position: absolute;
    z-index: 100000;
    max-width: 360px;
    background: #1f2937;
    color: #f8fafc;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.sw-tip.is-visible { opacity: 1; transform: none; }

.sw-tip__line { white-space: normal; overflow-wrap: anywhere; }
.sw-tip__line + .sw-tip__line { margin-top: 3px; }
/* The first line reads as a subtle label ("Appears in:", "Marked in:"). */
.sw-tip__line:first-child { color: #cbd5e1; }
.sw-tip--single .sw-tip__line:first-child { color: #f8fafc; }

/* Little arrow, centered on the anchor's midpoint. */
.sw-tip::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
}
.sw-tip:not(.sw-tip--below)::after { top: 100%; border-top-color: #1f2937; }
.sw-tip--below::after            { bottom: 100%; border-bottom-color: #1f2937; }

/* ---- Light / white variant ------------------------------------------------ */
.sw-tip--light {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.sw-tip--light .sw-tip__line:first-child { color: #64748b; }
.sw-tip--light.sw-tip--single .sw-tip__line:first-child { color: #1f2937; }
.sw-tip--light:not(.sw-tip--below)::after { border-top-color: #ffffff; }
.sw-tip--light.sw-tip--below::after       { border-bottom-color: #ffffff; }