/* ============================================================================
   tooltip.css — 文字提示（B3 /
   ============================================================================
   ⭐ 一条铁律：**tooltip 不承载必要信息**。

     触屏设备**没有 hover** ⇒ tooltip 在手机上等于不存在。
     ⇒ 凡是"用户必须知道"的内容，绝不能只放在 tooltip 里。
     ⇒ 判据：tooltip 里的文字必须与触发元素的可见文字/aria-label **不重复**，
        否则说明它承载了本该可见的信息。

   另外：
     · **键盘必须可达**（focus 时也要能出）
     · `Esc` 必须能关（WCAG 1.4.13 Content on Hover or Focus）
   ============================================================================ */

.tooltip {
  position: absolute;
  z-index: var(--z-raised);
  max-width: 260px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--tooltip-bg);          /* 深色气泡（浅色作用域下） */
  color: var(--tooltip-fg);
  font-size: var(--fs-xs);
  line-height: 1.5;
  border-radius: var(--r-sm);
  /* 描边用 inset 环而不用 border：同色时零像素，暗色下正好贴在原边线上。
     `--shadow-2` 是公开令牌，不写兜底字面量（兜底 = 第二份真值，见 I-7）。 */
  box-shadow: inset 0 0 0 1px var(--tooltip-border), var(--shadow-2);
  /* 文字不被选中（否则会误选） */
  user-select: none;
  /* 淡入用透明度，不用 display（display 会让读屏读不到）*/
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms var(--ease-out, ease);
  pointer-events: none;                  /* 不挡住下面的元素 */
}

.tooltip[data-state="open"] {
  opacity: 1;
  visibility: visible;
}

/* ---------- 箭头（小三角，用 CSS 画，不引图片）---------- */
.tooltip::after {
  content: "";
  position: absolute;
  border: 5px solid transparent;
}

/* 上下是**块轴**（RTL 不翻转，写物理没问题）；
   左右是**内联轴**（RTL 会翻转 ⇒ 必须写逻辑属性）。
   🔴 0.4.2 修：原本写物理 border-left/right-color。小三角是
   "给哪条边上色、尖角就指向反方向" —— RTL 下左边变成内联终点 ⇒ 尖角指反，
   指向气泡外侧而不是锚点（I-12 同一类：不报错，只是看着不对）。 */
.tooltip--top::after {
  top: 100%; inset-inline-start: 50%;
  margin-inline-start: -5px;
  border-top-color: var(--tooltip-bg);
}
.tooltip--bottom::after {
  bottom: 100%; inset-inline-start: 50%;
  margin-inline-start: -5px;
  border-bottom-color: var(--tooltip-bg);
}
.tooltip--inset-inline-start::after {
  inset-inline-start: 100%; top: 50%;
  margin-top: -5px;
  border-inline-start-color: var(--tooltip-bg);
}
.tooltip--inset-inline-end::after {
  inset-inline-end: 100%; top: 50%;
  margin-top: -5px;
  border-inline-end-color: var(--tooltip-bg);
}

/* 原有一段 `@media (prefers-color-scheme: dark)`，已改为令牌驱动：
   主题能挂在容器上之后，media 只反映系统偏好（RFC-THEME-SCOPE D5）。 */

/* ---------- 减弱动效：不要淡入动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tooltip { transition: none; }
}

/* ---------- 悬停显示：只对真能悬停的设备 ----------
   🔴 触屏上 hover 会"粘住" ⇒ 触屏靠 JS 的 click/focus 触发。 */
@media (hover: hover) and (pointer: fine) {
  [data-tooltip]:hover + .tooltip,
  [data-tooltip]:focus-visible + .tooltip { opacity: 1; visibility: visible; }
}