/**
 * tooltip.css — 图标提示气泡样式（与 js/sr-tooltip.js 配套，可独立复用）
 *
 * 全站只有一个气泡节点 #sr-tip，位置由 JS 计算（fixed 定位），
 * data-pos 决定箭头方向（top / bottom / left / right）。
 */

.sr-tip {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    max-width: 220px;
    padding: 7px 11px;
    border-radius: 8px;
    /* 跟随主题令牌：浅色下深底白字，深色下自动反转为浅底深字（令牌缺失时回退） */
    background: var(--ink, #211f27);
    color: var(--paper, #fff);
    font-size: .78rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: .01em;
    text-align: center;
    box-shadow: 0 10px 26px rgba(20, 18, 26, .26);
    opacity: 0;
    transform: translateY(2px) scale(.98);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;   /* 不遮挡鼠标，避免闪烁 */
    will-change: opacity, transform;
}

.sr-tip.is-visible {
    opacity: 1;
    transform: none;
}

/* 箭头：旋转 45° 的小方块，颜色随气泡 */
.sr-tip::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    border-radius: 2px;
    transform: rotate(45deg);
}
.sr-tip[data-pos="top"]::after    { left: 50%; bottom: -3px; margin-left: -4px; }
.sr-tip[data-pos="bottom"]::after { left: 50%; top: -3px;    margin-left: -4px; }
.sr-tip[data-pos="left"]::after   { right: -3px; top: 50%;   margin-top: -4px; }
.sr-tip[data-pos="right"]::after  { left: -3px;  top: 50%;   margin-top: -4px; }

/* 带提示的元素：光标与反馈统一 */
[data-tip] {
    cursor: pointer;
}

/* 关闭总开关时不做任何视觉变化（引擎也不会创建气泡） */
html.tip-off [data-tip] {
    cursor: inherit;
}

/* 无障碍：系统要求减少动态效果时只保留淡入 */
@media (prefers-reduced-motion: reduce) {
    .sr-tip {
        transform: none;
        transition: opacity .12s linear;
    }
    .sr-tip.is-visible { transform: none; }
}