/* ─────────────────────────────────────────────
   组件：小问号提示（tooltip.js 增强出来的气泡）
   颜色一律取 tokens.css 的语义变量，浅色 / 深色共用同一组声明。
   ───────────────────────────────────────────── */

/* ─── 触发器：小问号 ───
   排在分组标题的 <h2> 后面，承担原来常驻一大段的说明文字。
   尺寸固定 16px，flex 不参与伸缩：标题行是 flex-wrap 布局，
   问号被压扁或换行都会跟着标题一起乱。 */
.tip-q {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

/* hover / 键盘聚焦 / 气泡展开：三者同一档强调，让「这条说明正开着」一眼可辨。
   background 只提一点色相（--primary-soft），不做实心填充 ——
   问号是标题的附属标记，实心块会在标题行里抢主次。 */
.tip-q:hover,
.tip-q:focus-visible,
.tip-q.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-fg);
}

/* 触发器自己要能聚焦（tooltip.js 会补 tabindex），聚焦环按全站口径走 */
.tip-q:focus-visible { box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce) {
  .tip-q { transition: none; }
}

/* ─── 气泡 ───
   position: fixed 且打开期间挂在 body 上：.panel 是 overflow:hidden，
   absolute 的气泡会被卡片裁掉一截（select.js 同样处理，见 css/select.css）。
   纯展示、不接收指针事件 —— 气泡跟着鼠标跑会挡住下面的控件，
   也会让「移开问号就收起」的判定失效。 */
.tip-bubble {
  position: fixed;
  z-index: 35;              /* 与下拉浮层同档：在弹窗遮罩（30）之上、轻提示（40）之下 */
  display: none;
  max-width: 288px;         /* 18rem 档；内容里有长串时由 tooltip.js 再放宽到 320px */
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--primary);
  /* 主色底上的前景：与主按钮（components.css 的 button.primary）同款派生 ——
     直接用 --surface 在深色主题会得到近黑字，这里向白提亮才是可读的近白 */
  color: color-mix(in srgb, var(--surface) 8%, white);
  font-size: 11.5px;
  line-height: 1.55;
  /* 说明里可能带长 URL / 长单词，按词断行，必要时由 JS 升级为 anywhere */
  overflow-wrap: break-word;
  word-break: normal;
  /* 换行由内容结构表达（多行文案在 tooltip.js 里逐行渲染成 .tip-line），
     这里保持默认的空白处理即可 */
  white-space: normal;
  box-shadow: var(--shadow-3);
  pointer-events: none;
  /* 进场起点：由 tooltip.js 按方向下发（top 动画从下往上、bottom 从上往下） */
  --tip-shift: -4px;
  --tip-arrow-x: 50%;
  --tip-origin: 50% 0%;
}

.tip-bubble.open {
  display: block;
  animation: tip-in .15s ease both;
  transform-origin: var(--tip-origin);
}

/* ─── 箭头 ───
   旋转 45° 的同色小方块，由 JS 下发的 --tip-arrow-x 落在锚点正对处。
   贴在气泡与锚点相邻的那一侧：默认贴着上边缘（气泡在锚点下方），
   翻到上方时（.is-top）换成下边缘。 */
.tip-bubble::after {
  content: "";
  position: absolute;
  left: var(--tip-arrow-x);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--primary);
  transform: rotate(45deg);
  /* 只留朝外的那一半：整块方块会把气泡边缘顶出一个鼓包 */
  top: -4px;
  border-radius: 1px;
}

.tip-bubble.is-top::after {
  top: auto;
  bottom: -4px;
}

/* ─── 读数值的卡片变体（[data-tip-variant="plain"]）───
   默认气泡是品牌蓝底白字 —— 那是**说明性文案**的形态（一两句解释）。
   报表图表的悬停读数是另一类内容：日期 / 总量 / 每个模型一行的表格形态，
   蓝底承载多行数字会糊成一片。这一档换成浅底深字的卡片（容器底色 + 描边 +
   阴影），深浅主题各自取令牌 —— 与参考项目（OmniProxy）统计悬浮提示的
   形态一致（那边同样是「容器底色 + 1px 强描边 + 阴影」，从不给读数用彩色底）。
   变体只由锚点的 data-tip-variant 触发，别处的气泡不受影响。 */
.tip-bubble[data-variant="plain"] {
  background: var(--surface-raised);
  /* 描边用一个比 --border 更实的档：浅色下 --border（10% 黑）在白底上几乎看不见，
     而这张卡片没有彩色底做边界，全靠描边与页面区分 */
  border: 1px solid var(--border-strong);
  color: var(--text);
}

/* 箭头跟着换成容器底色。刻意不加描边：8px 的小方块旋转 45° 后，
   要让它只显出朝外的两条边得叠两层伪元素，收益不值这点复杂度 ——
   1px 的描边在箭头根部有极小一处的断续，肉眼基本看不出。 */
.tip-bubble[data-variant="plain"]::after {
  background: var(--surface-raised);
}

/* ─── 多行读数的行结构（tooltip.js 的 paint 生成）───
   每行一个块级 .tip-line；行间不加额外间距（line-height 已经把行距给足）。 */
.tip-bubble .tip-line { display: block; }

/* 带色点的行（模型用量行）：悬挂缩进 —— 行首色点占 8px + 间距 5px，
   名字太长折到第二行时与文字左缘对齐，不会缩到色点下面去 */
.tip-bubble .tip-line-dot {
  padding-left: 13px;
  text-indent: -13px;
}

/* 行首色点：与环形图图例（.donut-dot）同尺寸同圆角，
   同一份报表里「气泡与环形图说的是同一个模型」靠颜色对上 */
.tip-bubble-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: middle;
}


@keyframes tip-in {
  from {
    opacity: 0;
    transform: translateY(var(--tip-shift)) scale(.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 只保留瞬显：缩放与位移一并关掉（透明度也一并去掉，
     弱动效诉求里「闪一下」同样不受欢迎） */
  .tip-bubble.open { animation: none; }
}