/* =========================================================
   The inline ⓘ explainer (<x-info-tip>).

   Lifted out of dashboard.css so the public site can use the component too.
   It was portal-only for no reason other than where its styles happened to
   live, which meant the marketing pages had no way to explain anything without
   inventing a second tooltip.

   Colour comes from tokens with fallbacks, because the two shells name them
   differently: the portal shell has --primary, the public one has --teal. A
   component shared by both cannot assume either.
   ========================================================= */

.itip{
    position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
    width:15px;height:15px;padding:0;margin-left:5px;border:0;border-radius:50%;
    background:none;color:var(--muted,#64748B);font-size:11px;line-height:1;cursor:help;
    z-index:2147483647;
}
.itip:hover,.itip:focus{color:var(--primary,var(--teal,#00B894));outline:none}
.itip-bubble{
    position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
    width:max-content;max-width:250px;padding:8px 11px;border-radius:9px;z-index:120;
    background:#1E2A3A;color:#fff;box-shadow:0 12px 28px rgba(15,23,42,.24);
    font-family:'Inter',system-ui,sans-serif;font-size:11.5px;font-weight:500;line-height:1.6;
    letter-spacing:0;text-transform:none;text-align:left;white-space:normal;
    opacity:0;visibility:hidden;transition:.16s;pointer-events:none;
}
.itip-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1E2A3A}
.itip:hover .itip-bubble,.itip:focus .itip-bubble{opacity:1;visibility:visible}
/* Edge-aligned variants keep the bubble inside the viewport / card. */
.itip--end .itip-bubble{left:auto;right:-7px;transform:none}
.itip--end .itip-bubble::after{left:auto;right:12px;transform:none}
.itip--start .itip-bubble{left:-7px;transform:none}
.itip--start .itip-bubble::after{left:12px;transform:none}
.itip--below .itip-bubble{bottom:auto;top:calc(100% + 8px)}
.itip--below .itip-bubble::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1E2A3A}

@media(max-width:640px){.itip-bubble{max-width:210px}}

/* =========================================================
   Escaping the card.

   z-index was never the thing keeping these bubbles hidden. A tooltip anchored
   inside a card with `overflow:hidden` — .lg-kpi and .lg-card on the logistics
   screen, .nf-push on notifications, most .mg-card tables — is clipped at the
   card's edge no matter how high its z-index goes, because clipping happens
   before stacking is considered.

   So the bubble is promoted into the browser's TOP LAYER via the popover API
   (info-tip.js). The top layer paints above every stacking context in the
   document and is not clipped by any ancestor, which is what "always on top"
   actually requires. There is no z-index to lose an arms race with.

   The z-index below still matters for the no-JS / no-popover path, and is set
   above everything else the project uses (loader 12000, dialog 10000, idle
   modal 9999) so the fallback wins wherever nothing clips it.
   ========================================================= */
.itip-bubble{z-index:2147483647}

/* In the top layer the bubble is positioned by script in viewport coordinates,
   so every inherited offset has to be cleared — including the ones the
   --start/--end/--below variants set. */
.itip-bubble:popover-open{
    position:fixed;
    inset:auto;
    margin:0;
    border:0;
    overflow:visible;
    opacity:1;
    visibility:visible;
    display:block;
}
/* The arrow is drawn by script too, since which edge it belongs on depends on
   where the bubble actually ended up after any flip. */
.itip-bubble:popover-open::after{display:none}
.itip-bubble:popover-open[data-arrow="down"]::after{
    display:block;top:100%;bottom:auto;left:var(--arrow-x,50%);right:auto;transform:translateX(-50%);
    border-top-color:#1E2A3A;border-bottom-color:transparent;
}
.itip-bubble:popover-open[data-arrow="up"]::after{
    display:block;bottom:100%;top:auto;left:var(--arrow-x,50%);right:auto;transform:translateX(-50%);
    border-bottom-color:#1E2A3A;border-top-color:transparent;
}