/* tooltip.css — component styles for tooltip.js
 *
 * Laravel: copy next to resources/css/app.css and `@import './tooltip.css';`,
 * or `import './tooltip.css'` in app.js (Vite inlines it).
 * Trigger elements keep their own look — .tt-ref only adds touch guards;
 * everything visual lives on .tt-tip.
 */

/* Every trigger: kill double-tap zoom, long-press callout and text selection */
.tt-ref {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* Wrapper — keep it transform-free so position:fixed on the bubble stays viewport-relative */
.tt { position: relative; display: inline-flex; }

/* Bubble — fixed to the viewport, positioned by JS (escapes overflow clipping) */
.tt-tip {
  position: fixed; z-index: 9999;
  max-width: min(16rem, calc(100vw - 16px));
  background: #18181b; color: #fafafa;
  font-size: 12px; line-height: 1.45; font-weight: 400; letter-spacing: .01em;
  padding: 5px 9px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .13s ease, transform .13s ease, visibility 0s linear .13s;
}
.tt.is-open > .tt-tip {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .13s ease, transform .13s ease;
}
/* Enter direction follows the side it actually landed on (set by JS as data-side) */
.tt-tip[data-side="top"]    { transform: translateY(4px);  transform-origin: 50% 100%; }
.tt-tip[data-side="bottom"] { transform: translateY(-4px); transform-origin: 50% 0%; }
.tt-tip[data-side="right"]  { transform: translateX(-4px); transform-origin: 0% 50%; }
.tt-tip[data-side="left"]   { transform: translateX(4px);  transform-origin: 100% 50%; }
.tt.is-open > .tt-tip { transform: translate(0, 0); }

/* Rich variant — multi-paragraph content */
.tt-tip.rich { max-width: min(20rem, calc(100vw - 16px)); padding: 12px 14px; font-size: 13px; border-radius: 10px; }
.tt-tip.rich p { margin: 0; }
.tt-tip.rich p + p { margin-top: 8px; }

.tt-tip kbd {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #27272a; border: 1px solid #3f3f46; border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .tt-tip { transition: opacity .01s linear, visibility 0s linear .01s; }
  .tt-tip[data-side] { transform: none; }
}