/**
 * CsgHoverPopover — 悬停 / 聚焦 /（帮助图标）点击 时的浮动说明层
 * 脚本：__STATIC__/csg_hover_popover/csg_hover_popover.js
 * 视觉对齐 Bootstrap 5 下拉与卡片：浅描边、轻阴影、常规圆角。
 */

.csg-hover-popover-layer {
    --csg-pop-bg: var(--bs-body-bg, #fff);
    --csg-pop-fg: var(--bs-body-color, #212529);
    --csg-pop-border: var(--bs-border-color, #dee2e6);
    --csg-pop-radius: var(--bs-border-radius, 0.375rem);
    --csg-pop-arrow: 7px;
    --csg-pop-arrow-x: 50%;
    --csg-pop-arrow-y: 50%;

    position: fixed;
    z-index: 1080;
    box-sizing: border-box;
    min-width: 8rem;
    max-width: min(20rem, calc(100vw - 1.5rem));
    max-height: min(60vh, 24rem);
    margin: 0;
    padding: 0;
    color: var(--csg-pop-fg);
    background: var(--csg-pop-bg);
    border: 1px solid var(--csg-pop-border);
    border-radius: var(--csg-pop-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
}
.csg-hover-popover-layer.csg-hover-popover-layer--wide {
    max-width: min(34rem, calc(100vw - 1.5rem));
    max-height: min(78vh, 40rem);
}

.csg-hover-popover-layer.csg-hover-popover-layer--visible {
    opacity: 1;
    visibility: visible;
}

.csg-hover-popover-layer[hidden] {
    display: none !important;
}

.csg-hover-popover-arrow {
    position: absolute;
    width: var(--csg-pop-arrow);
    height: var(--csg-pop-arrow);
    background: var(--csg-pop-bg);
    border: 1px solid var(--csg-pop-border);
    transform: rotate(45deg);
    pointer-events: none;
}

.csg-hover-popover-layer[data-placement="bottom"] .csg-hover-popover-arrow {
    top: calc(var(--csg-pop-arrow) / -2);
    left: var(--csg-pop-arrow-x);
    margin-left: calc(var(--csg-pop-arrow) / -2);
    border-right: 0;
    border-bottom: 0;
}

.csg-hover-popover-layer[data-placement="top"] .csg-hover-popover-arrow {
    bottom: calc(var(--csg-pop-arrow) / -2);
    left: var(--csg-pop-arrow-x);
    margin-left: calc(var(--csg-pop-arrow) / -2);
    border-left: 0;
    border-top: 0;
}

.csg-hover-popover-layer[data-placement="right"] .csg-hover-popover-arrow {
    left: calc(var(--csg-pop-arrow) / -2);
    top: var(--csg-pop-arrow-y);
    margin-top: calc(var(--csg-pop-arrow) / -2);
    border-right: 0;
    border-top: 0;
}

.csg-hover-popover-layer[data-placement="left"] .csg-hover-popover-arrow {
    right: calc(var(--csg-pop-arrow) / -2);
    top: var(--csg-pop-arrow-y);
    margin-top: calc(var(--csg-pop-arrow) / -2);
    border-left: 0;
    border-bottom: 0;
}

.csg-hover-popover-inner {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: inherit;
    padding: 0.5rem 0.7rem;
}

.csg-hover-popover-heading {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0 0 0.35rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--csg-pop-border);
    line-height: 1.4;
}

.csg-hover-popover-body {
    font-size: 0.8125rem;
    line-height: 1.5;
}

.csg-hover-popover-body .cn-text {
    display: block;
}

.csg-hover-popover-body .en-text {
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    opacity: 0.72;
    margin-top: 0.35rem;
    line-height: 1.45;
}

.csg-hover-popover-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.csg-hover-popover-list li {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.2rem 0;
    margin: 0;
    word-break: break-all;
}

.csg-hover-popover-list li + li {
    border-top: 1px solid var(--csg-pop-border);
}

/* template / inline：页面可信 HTML，按卡片排版而不是纯文本 */
.csg-hover-popover-html {
    font-size: 0.8125rem;
    line-height: 1.5;
}
.csg-hover-popover-html > .csg-bilingual-stack .en-text {
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    opacity: 0.72;
    margin-top: 0.35rem;
    line-height: 1.45;
}
.csg-hover-popover-html p {
    margin: 0 0 0.45rem;
}
.csg-hover-popover-html p:last-child {
    margin-bottom: 0;
}
.csg-hover-popover-html ul,
.csg-hover-popover-html ol {
    margin: 0.2rem 0 0.45rem;
    padding-left: 1.15rem;
}
.csg-hover-popover-html code,
.csg-hover-popover-body code {
    font-size: 0.84em;
    font-weight: 600;
    padding: 0.06em 0.32em;
    border-radius: 0.22rem;
    background: rgba(13, 110, 253, 0.1);
    color: #1d4ed8;
}

[data-csg-hover-popover] {
    cursor: help;
}

button[data-csg-hover-popover],
a[data-csg-hover-popover],
.btn[data-csg-hover-popover] {
    cursor: pointer;
}

.csg-hover-popover-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1;
    vertical-align: middle;
}

.csg-hover-popover-help:hover,
.csg-hover-popover-help:focus-visible {
    color: var(--bs-body-color, #212529);
}

.csg-hover-popover-help:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
    border-radius: 0.2rem;
}