/* 字段说明 —— 字段下方的「批注」条（※ + 灰底卡 + 左竖标）
 * 常驻可见、灰底弱化、紧凑：安静地给出指引，尽量不与输入框争注意力。
 * 用「※」批注符 + 左侧竖标标识"备注/说明"，读起来是批注而非错误或强调。
 *
 * 仅作用于表单字段说明（.form-group 内）；排除：
 *   - 校验报错 .help-block.with-errors
 *   - 表格空状态 td[colspan] .help-block（由 erp-grid-empty.css 负责，勿抢 ::before）
 */

.form-group .help-block:not(.with-errors) {
    position: relative;
    display: block;
    margin: 6px 0 2px;
    padding: 7px 12px 7px 28px;
    background: #f4f5f7 !important;
    border: 1px solid #e7e9ee;
    border-left: 2px solid #c3cad6;
    border-radius: 6px;
    color: #5b6472 !important;
    font-size: 12.5px;
    line-height: 1.65;
    font-weight: 400;
    box-shadow: none;
    transition: border-left-color .15s ease, background-color .15s ease;
}

/* 隐藏 Dcat 默认帮助图标，改用「※」批注符（无图标字体依赖，更像批注） */
.form-group .help-block:not(.with-errors) > i:first-child,
.form-group .help-block:not(.with-errors) > .fa:first-child {
    display: none;
}
.form-group .help-block:not(.with-errors)::before {
    content: "\203B"; /* ※ */
    position: absolute;
    left: 9px;
    top: 7px;
    color: #8a94a2;
    font-size: 12.5px;
    line-height: 1.65;
    font-weight: 700;
}

/* 聚焦该字段时，其备注左竖标加深、底色微沉——把指引与正在填的字段轻轻连起来 */
.form-group:focus-within > .help-block:not(.with-errors),
.form-group:focus-within .help-block:not(.with-errors) {
    border-left-color: #7c8aa0;
    background: #eef0f4 !important;
}

/* 说明内的强调与风险提示 */
.form-group .help-block:not(.with-errors) b,
.form-group .help-block:not(.with-errors) strong {
    color: #3f4753;
    font-weight: 600;
}
.form-group .help-block:not(.with-errors) span[style*="color"] {
    font-weight: 500;
}

/* 窄屏下同样紧凑 */
@media (max-width: 767px) {
    .form-group .help-block:not(.with-errors) {
        font-size: 12px;
        padding: 6px 10px 6px 26px;
    }
}

/* 尊重"减少动态"偏好 */
@media (prefers-reduced-motion: reduce) {
    .form-group .help-block:not(.with-errors) {
        transition: none;
    }
}