/* ============================================================
   URBINO · TOOLTIP
   Atomic component. Small contextual bubble.
   Two variants (dark / light), four positions, arrow, hover+focus trigger.

   Production positioning needs JS (Floating UI / Popper) to escape
   `overflow: hidden` containers. The CSS below is the visual
   foundation + a simple wrapper pattern for prototypes.
   ============================================================ */

.u-tooltip {
  position: absolute;
  z-index: var(--u-z-tooltip);
  background: var(--u-slate-900);
  color: var(--u-fg-inv);
  font-family: var(--u-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 6px var(--u-space-2);                       /* 6 / 8 — sub-grid atom-internal */
  border-radius: var(--u-radius-xs);                   /* 6 */
  max-width: 280px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--u-dur-fast) var(--u-ease-out);
  white-space: normal;
  text-align: center;
}
.u-tooltip.is-visible { opacity: 1; }

/* ---------- ARROW ---------- */
.u-tooltip::before {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border: 5px solid transparent;
}

/* ---------- POSITION — top (anchor below tooltip) ---------- */
.u-tooltip--top {
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
}
.u-tooltip--top::before {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--u-slate-900);
}

/* ---------- POSITION — bottom (anchor above) ---------- */
.u-tooltip--bottom {
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
}
.u-tooltip--bottom::before {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--u-slate-900);
}

/* ---------- POSITION — right (anchor on left) ---------- */
.u-tooltip--right {
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}
.u-tooltip--right::before {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--u-slate-900);
}

/* ---------- POSITION — left (anchor on right) ---------- */
.u-tooltip--left {
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
}
.u-tooltip--left::before {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--u-slate-900);
}

/* ============================================================
   VARIANT — LIGHT (white surface, slate text)
   Use on photo or dark-image backgrounds where the dark default
   competes with surroundings. Also a softer feel on citizen-mobile.
   ============================================================ */

.u-tooltip--light {
  background: var(--u-surface);
  color: var(--u-fg-1);
  border: 1px solid var(--u-border);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}
.u-tooltip--light.u-tooltip--top::before    { border-top-color: var(--u-surface); }
.u-tooltip--light.u-tooltip--bottom::before { border-bottom-color: var(--u-surface); }
.u-tooltip--light.u-tooltip--right::before  { border-right-color: var(--u-surface); }
.u-tooltip--light.u-tooltip--left::before   { border-left-color: var(--u-surface); }

/* ============================================================
   WRAPPER — pure-CSS hover/focus trigger (PROTOTYPE only)
   Production: use JS-positioned tooltips (see docs/components/tooltip.md).
   ============================================================ */

.u-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.u-tooltip-wrap > .u-tooltip { opacity: 0; }
.u-tooltip-wrap:hover > .u-tooltip,
.u-tooltip-wrap:focus-within > .u-tooltip,
.u-tooltip-wrap > .u-tooltip.is-visible { opacity: 1; }

/* Delay show by 300ms (matches the recommended UX delay) */
.u-tooltip-wrap > .u-tooltip { transition: opacity var(--u-dur-fast) var(--u-ease-out) 300ms; }
.u-tooltip-wrap > .u-tooltip.is-visible { transition-delay: 0ms; }