/* ═══════════════════════════════════════════════
   Ákotí Tooltip — Pure CSS (zero JS)
   Uses popover API where supported, falls back to CSS.

   Usage:
     <button class="akt-tip" data-tip="Bold (Ctrl+B)">B</button>

   Position variants:
     data-tip-pos="top" (default) | "bottom" | "left" | "right"

   Styles:
     Default: dark bg
     data-tip-style="light" — light bg
   ═══════════════════════════════════════════════ */

/* Tooltip container */
.akt-tip {
  position: relative;
}

/* Tooltip bubble */
.akt-tip::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 9000;
  padding: 5px 10px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 10px 3px 10px 3px;
  pointer-events: none;

  /* Default: dark */
  background: #1e1e24;
  color: #faf8f6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);

  /* Hidden by default */
  opacity: 0;
  transform: translateY(4px) scale(0.95);
  transition: opacity 0.2s cubic-bezier(0.4,0,0.2,1),
              transform 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* Arrow */
.akt-tip::before {
  content: '';
  position: absolute;
  z-index: 9001;
  width: 6px;
  height: 6px;
  background: #1e1e24;
  transform: rotate(45deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Show on hover */
.akt-tip:hover::after,
.akt-tip:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.akt-tip:hover::before,
.akt-tip:focus-visible::before {
  opacity: 1;
}

/* ═══ POSITIONS ═══ */

/* Top (default) */
.akt-tip::after,
.akt-tip[data-tip-pos="top"]::after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.95);
}
.akt-tip:hover::after,
.akt-tip[data-tip-pos="top"]:hover::after {
  transform: translateX(-50%) translateY(0) scale(1);
}
.akt-tip::before,
.akt-tip[data-tip-pos="top"]::before {
  bottom: calc(100% + 5px);
  left: 50%;
  margin-left: -3px;
}

/* Bottom */
.akt-tip[data-tip-pos="bottom"]::after {
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-4px) scale(0.95);
}
.akt-tip[data-tip-pos="bottom"]:hover::after {
  transform: translateX(-50%) translateY(0) scale(1);
}
.akt-tip[data-tip-pos="bottom"]::before {
  top: calc(100% + 5px);
  bottom: auto;
  left: 50%;
  margin-left: -3px;
}

/* Left */
.akt-tip[data-tip-pos="left"]::after {
  right: calc(100% + 8px);
  left: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(4px) scale(0.95);
}
.akt-tip[data-tip-pos="left"]:hover::after {
  transform: translateY(-50%) translateX(0) scale(1);
}
.akt-tip[data-tip-pos="left"]::before {
  right: calc(100% + 5px);
  left: auto;
  top: 50%;
  bottom: auto;
  margin-top: -3px;
}

/* Right */
.akt-tip[data-tip-pos="right"]::after {
  left: calc(100% + 8px);
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-4px) scale(0.95);
}
.akt-tip[data-tip-pos="right"]:hover::after {
  transform: translateY(-50%) translateX(0) scale(1);
}
.akt-tip[data-tip-pos="right"]::before {
  left: calc(100% + 5px);
  right: auto;
  top: 50%;
  bottom: auto;
  margin-top: -3px;
}

/* ═══ LIGHT STYLE ═══ */
.akt-tip[data-tip-style="light"]::after {
  background: white;
  color: #1e1e24;
  border: 1px solid rgba(26,47,94,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.akt-tip[data-tip-style="light"]::before {
  background: white;
  border-right: 1px solid rgba(26,47,94,0.1);
  border-bottom: 1px solid rgba(26,47,94,0.1);
}

/* ═══ BLUE ACCENT ═══ */
.akt-tip[data-tip-style="blue"]::after {
  background: #a8c8e8;
  color: #0f1b3d;
}
.akt-tip[data-tip-style="blue"]::before {
  background: #a8c8e8;
}

/* ═══ MULTILINE ═══ */
.akt-tip[data-tip-wrap]::after {
  white-space: normal;
  max-width: 200px;
  text-align: center;
}