/* ============================================================================
 * 东方智慧 · 基础层 foundation.css（v1.70 第二阶段 UI 架构统一）
 * ----------------------------------------------------------------------------
 * 必须在 theme.css / theme-ext.css / admin-nav.css / editor.css **之前**加载。
 * 本文件只提供三样东西，不定义任何业务外观：
 *   1) 视口单位修正：移动端浏览器地址栏伸缩导致的 100vh 跳动/内容被裁
 *   2) 层级令牌：z-index 从「0 到 10095 乱散」收敛为 10 档命名层级
 *   3) 可访问性兜底：[hidden] 失效、焦点不可见、reduced-motion 未尊重
 *
 * 为什么单独成文件：theme.css 已 3700+ 行（「编年史」），继续往上堆规则会
 * 加剧「后写的赢，前面的失效」的不确定性。新建立一层可控的地基，后续所有
 * 组件统一引用这里的令牌，theme.css 逐步向令牌迁移。
 * ========================================================================== */

/* ============ 1. 视口高度：修复移动端 100vh 抖动/被地址栏遮挡 ============
 * 现象：iOS Safari / 安卓 Chrome 的地址栏收起展开时，100vh 不随之变化，
 *      表现为全屏弹窗底部按钮被截、播放器高度跳动。
 * 方案：dvh 优先（动态跟随），不支持的浏览器静默回落 100vh。
 * 用法：把所有 height/min-height: 100vh 换成 var(--app-vh)。 */
:root {
  --app-vh: 100vh;
  --app-vh-full: 100%;
}
@supports (height: 100dvh) {
  :root {
    --app-vh: 100dvh;
  }
}
/* 贴底工具栏等需要避开 iOS 底部小黑条的场景 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  :root {
    --safe-b: env(safe-area-inset-bottom, 0px);
  }
}

/* ============ 2. 层级令牌（唯一权威来源） ============
 * 历史问题：z-index 取值从 1 一路写到 10095，业务只能靠「再加一层」解决
 * 遮挡事故，导致-modal（100）反被 admin-nav（9999）压住之类的问题。
 * 收敛为 10 档，新增浮层必须复用，不得再写裸数字。 */
:root {
  --z-base: 0;              /* 常规文档流内的局部叠放 */
  --z-raised: 1;            /* 卡片 hover 抬起 */
  --z-sticky-bar: 60;       /* 顶栏 / 底部 tab / 吸底购物车条 */
  --z-side-nav: 70;         /* 侧边抽屉导航 */
  --z-dropdown: 80;         /* 下拉菜单、语言选择器 */
  --z-tooltip: 90;          /* 提示气泡 */
  --z-modal: 100;           /* .modal-bg 标准弹窗（对齐现有值，保证兼容） */
  --z-popover: 200;         /* 分享面板 / 报表 / AI 助教窗等次级浮层 */
  --z-editor-picker: 3200;  /* 后台富文本 picker / 符号面板（对齐现有值） */
  --z-editor-overlay: 3400; /* 后台编辑器盖层（对齐现有值） */
  --z-media-capture: 3600;  /* 字幕 / 媒体截取全屏盖层（对齐现有值） */
  --z-toast: 10000;         /* 轻提示，永远最上层 */
  --z-emergency: 10095;     /* 第三方 SDK 兜底（保留既有的最高值语义） */
}

/* ============ 3. 可访问性与行为兜底 ============ */

/* 3.1 [hidden] 兜底：只要某个规则给元素设了 display，[hidden] 就会失效。
 *     这是「界面上明明删了却还在」类幽灵元素的常见根因。 */
[hidden] {
  display: none !important;
}

/* 3.2 键盘焦点可见：去掉 outline 的地方必须补可见环，否则键盘用户完全
 *     不知道自己在哪儿。只在键盘导航时出现，鼠标点击不打扰视觉。 */
:focus-visible {
  outline: 2px solid var(--gold-light, #D9B98A);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 3.3 尊重「减少动态效果」系统设置：前庭功能障碍用户会因视差/缩放不适。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 3.4 弹窗打开时的背景滚动锁：JS 给 <body data-modal-open> 并补偿滚动条宽度。
 *     刻意只锁 body 而非 html——给 html 加 overflow:hidden 会改变包含块，
 *     令页面里的 position:sticky 吸顶/侧边全部失效，关闭弹窗时可见跳动。
 *     滚动穿透（iOS）改由浮层自身的 overscroll-behavior 拦截，见 3.7。 */
body[data-modal-open] {
  overflow: hidden;
  padding-right: var(--ow-sbw, 0px);
}

/* 3.7 浮层的滚动边界：防止弹窗内滚动到尽头后继续带动背后页面滚动（滚动链） */
.modal-bg,
.ow-dialog__mask,
[role="dialog"] {
  overscroll-behavior: contain;
}

/* 3.8 统一浮层的进入/退出动画（尊重 reduced-motion，见 3.3 自动降为 0ms） */
@keyframes ow-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .modal-bg {
    animation: ow-fade-in 0.16s ease both;
  }
}

/* 3.5 触摸目标下限：WCAG 2.5.5 建议 ≥44px。对历史按钮做最小侵入补偿，
 *     只在明确的「图标按钮」上生效，不改动布局型元素。 */
button[aria-label]:not([class*="modal"]),
.tb-btn,
.icon-btn {
  min-width: 32px;
  min-height: 32px;
}

/* 3.6 长文本溢出兜底：避免单行容器被超长标题撑破布局 */
.ow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ 4. OW.dialog 统一弹窗组件样式 ============
 * 由 assets/js/ow-dialog.js 创建；只提供骨架（标题栏/正文/按钮行），
 * 配色沿用 theme.css 的语义变量，因此深浅主题自动适配。 */
.ow-dialog__mask {
  background: var(--modal-mask);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overscroll-behavior: contain;
}
.ow-dialog__panel {
  position: relative;
  width: min(640px, 92vw);
  max-height: calc(var(--app-vh) - 80px);
  overflow: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 26px;
}
.ow-dialog__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
}
.ow-dialog__close:hover { color: var(--cream); background: rgba(255, 255, 255, 0.06); }
.ow-dialog__title {
  margin: 0 34px 14px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cream);
}
.ow-dialog__body { font-size: 14px; line-height: 1.7; color: var(--beige); }
.ow-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .ow-dialog__panel { padding: 20px 16px; border-radius: 14px; }
  /* 移动端按钮上下排布避免横向挤压导致误触 */
  .ow-dialog__actions { flex-direction: column-reverse; }
  .ow-dialog__actions > .btn { width: 100%; justify-content: center; }
}