/* sd-tooltip — in-house tooltip system (replaces Bootstrap 4 tooltips, 2026-07-16).
   Design language mirrors sd-toast: flat card, dedicated --tooltip-* tokens
   (theme.css) so both light and dark are real themes, not "dark overrides
   light". Positioned by Popper v1 (already vendored — see sd-tooltip.js);
   arrow drawn as a rotated bordered square, joined seamlessly to the box by
   dropping two of its four borders per edge (a standard Popper-arrow trick).
   Loaded globally from fragments/header/css.html; JS in sd-tooltip.js. */

.sd-tooltip {
  position: absolute;
  z-index: 10800; /* matches sd-toast — above Bootstrap modals (1050) / SweetAlert2 (~1060) */
  pointer-events: none; /* tooltips are informational, never interactive (matches Bootstrap) */
  color: var(--tooltip-text); /* inherited by __timer's `background: currentColor` (a sibling of __inner, not a descendant) */
  /* No top/left/animation on THIS element: Popper positions it via an inline
     `transform: translate3d(...)`, applied on its own schedule (see sd-tooltip.js show()
     — the tip stays visibility:hidden until Popper's first frame lands). A CSS animation
     on the same element/property wins the cascade over that inline style for as long as
     it stays attached — with fill-mode: both, that's forever — which is exactly what
     pinned every tooltip to top:0/left:0 regardless of the hovered/focused control.
     Entrance/exit visuals live on .sd-tooltip__inner instead, which Popper never touches. */
}

.sd-tooltip__inner {
  max-width: 260px;
  padding: 6px 10px 9px;
  font-size: 12.5px;
  line-height: 1.4;
  background: var(--tooltip-bg);
  border: 1px solid var(--tooltip-border);
  border-radius: 6px;
  box-shadow: var(--tooltip-shadow);
  overflow-wrap: break-word;
  animation: sd-tooltip-in 0.12s ease both;
}

/* ---- arrow (rotated bordered square, edge borders dropped to blend into the box) ---- */
.sd-tooltip__arrow,
.sd-tooltip__arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
}
.sd-tooltip__arrow::before {
  content: "";
  transform: rotate(45deg);
  background: var(--tooltip-bg);
  border: 1px solid var(--tooltip-border);
}
[x-placement^="top"] .sd-tooltip__arrow { bottom: -5px; }
[x-placement^="top"] .sd-tooltip__arrow::before { border-top: none; border-left: none; }

[x-placement^="bottom"] .sd-tooltip__arrow { top: -5px; }
[x-placement^="bottom"] .sd-tooltip__arrow::before { border-bottom: none; border-right: none; }

[x-placement^="left"] .sd-tooltip__arrow { right: -5px; }
[x-placement^="left"] .sd-tooltip__arrow::before { border-bottom: none; border-left: none; }

[x-placement^="right"] .sd-tooltip__arrow { left: -5px; }
[x-placement^="right"] .sd-tooltip__arrow::before { border-top: none; border-right: none; }

/* ---- 5s auto-dismiss countdown hairline (see sd-tooltip.js file header) ---- */
.sd-tooltip__timer {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 3px;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
}
.sd-tooltip__timer > i {
  display: block;
  height: 100%;
  background: currentColor;
  opacity: 0.4;
  transform-origin: left;
  animation: sd-tooltip-timer linear both;
}

/* ---- exit ---- */
.sd-tooltip--out {
  /* Targets the outer element, which carries no animation of its own (see .sd-tooltip
     above) — so this transition is never at risk of being outranked by a fill-mode:both
     keyframe the way .sd-tooltip__inner's entrance animation would be. */
  opacity: 0;
  transition: opacity 0.15s ease;
}

@keyframes sd-tooltip-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sd-tooltip-timer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sd-tooltip__inner { animation: none; }
  .sd-tooltip__timer { display: none; }
}