/* ============================================================
 * HGFAST Primitives — 跨组件共享的原语类
 * ------------------------------------------------------------
 * 目标路径: /www/wwwroot/demo.hgfastapp.com/public/css/primitives.css
 * 依赖: tokens.css 必须先加载
 *
 * 严格收录范围: 仅限"必须跨三处共享且有 @supports/降级逻辑
 *              的 CSS 片段"
 *
 * 当前允许的类(白名单, 新增必须 cch 批准):
 *   .hg-modal-overlay    — 居中弹窗遮罩 + backdrop-filter 回退
 *
 * 计划中但未实现(等第一次真实需求出现再加, 不写空壳):
 *   .hg-no-scroll        — body 锁滚动(modal open 时)
 *   .hg-sr-only          — 视觉隐藏 + 屏幕阅读器可见
 *   .hg-focus-ring       — 统一 focus 环
 *
 * 不收录:
 *   - flex/grid 布局 utility  → 写在各自组件 CSS 里
 *   - 文字截断                → 组件 CSS
 *   - 任何业务语义类          → 组件 CSS
 *
 * 违规添加会被 cch 在 review 时打回。
 *
 * 版本: 2026-04-17 rev 2
 * 更新 primitives 时必须 bump 查询串(primitives.css?v=N)
 * ============================================================ */

/* ------------------------------------------------------------
 * .hg-modal-overlay
 *
 * 弹窗遮罩基类, 所有 modal 必须用这个, 不得自写 overlay。
 *
 * 处理了三件事:
 *   1. inset: 0 在老 WebView(iOS 14 前 QQ/微信 WKWebView) 上
 *      可能不生效, 加 top/right/bottom/left 四件套兜底
 *   2. backdrop-filter 不支持时降级到更深的纯黑半透明
 *      (微信/QQ WebView O16 关联)
 *   3. -webkit-backdrop-filter 前缀在前, 保证 Safari < 18 正确识别
 *
 * 语义收紧(重要):
 *   本类专为"居中弹窗"设计, flex 居中是内聚逻辑不是 utility。
 *   drawer/toast/sheet 等非居中场景请建独立基类
 *   (.hg-drawer-overlay / .hg-toast-container 等), 不要扩展此类。
 *   范围守护方式是"拒绝扩展", 不是"砍掉内聚"。
 *
 * 使用:
 *   <div class="hg-modal-overlay">
 *     <div class="hg-modal">...</div>
 *   </div>
 * ------------------------------------------------------------ */

.hg-modal-overlay {
  position: fixed;

  /* 兜底四件套在前, 给不支持 inset 的老 WebView */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* 新语法覆盖, 现代浏览器用这个 */
  inset: 0;

  z-index: var(--z-overlay);

  /* fallback: backdrop-filter 不支持时用更深的黑 */
  background: rgba(0, 0, 0, 0.72);

  /* flex 居中子元素(弹窗本体), 移动端全屏时子元素自行覆盖 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 支持 backdrop-filter 时(双前缀条件), 降低 bg 不透明度 + 加毛玻璃 */
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .hg-modal-overlay {
    background: rgba(0, 0, 0, 0.56);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}