/* apple-mobile-nav.css — Apple 手机功能底栏共享组件（M222）
   ═══════════════════════════════════════════════════════════════════════════
   提炼自 M185 静态样板（references/apple-preview/index.html 的「页内提案稿」段）
   的可复用版本：本文件只描述组件自己的 DOM（.apple-mobar* 与「我的」格挂载点
   里的身份下拉落位）；页面专属的挂载、身份行为与可见菜单由宿主应用接入
   （business/portal 迁移 missions）。JS 侧见 assets/apple-mobile-nav.js
   （全局 LimsAppleMobileNav），类名/属性与它一一对应。

   双重门纪律（承样板原稿）：生效规则全部同时锁 @media(max-width:767.98px) 和
   [data-theme="apple"]；门外的只有纯 display:none 的静默底。任一条件不满足
   逐条零命中——≥768px（含 768 整数档）、默认主题（含手机档）、未挂载组件的
   页面，全部保持现网形态。壳层让位三条（.app-shell/.content/.toast）再叠加
   html[data-apple-mobar] 一道门（JS init 挂上、destroy 摘下），不挂载零足迹。
   断点唯一来源：本文件的 @media(max-width:767.98px) 与 apple-mobile-nav.js 的
   MQ 常量是同一个值，两处必须同步改（同 sidebar.js 的 DRAWER_MQ 与 lims2.css
   的纪律）。JS 侧 matchMedia 只做「跨断点复位临时浮层」的清理，可见性始终由
   本文件把门，两处失同步也不会漏显示。

   z 序（docs/z-index-contract.md §2.3「独立体系」已登记的 Apple 预览页口径，
   本组件沿用同一组值；fixed 直挂 body，根上下文）：
     底栏 20 < 抽屉遮罩 25 < 抽屉面板 26 < topbar 30 < 页面级浮层面板 45
     < 账号菜单 60 < 更多面板遮罩 70 < 更多面板 71 < 演示入口 90 < modal 100
     < toast 150
   · 底栏压在抽屉遮罩之下：抽屉打开时遮罩天然把底栏压暗、点底栏先点到遮罩
     （sidebar.js 即收抽屉）——「变暗且不可点」由层叠结构保证，不写一行 JS；
     这也与 iOS「sheet 盖过 tab bar」一致，避免同一屏出现两套抢点击的导航面。
   · 更多面板是半模态底部弹层：遮罩(70) 高于 topbar(30)——整页连顶栏一起压暗，
     不留「页面罩住了顶栏还能点」的错层；低于 modal(100)——弹窗永远最高。
   · 账号菜单（「我的」格挂载点里的 identity.js 现网下拉）沿用 lims2.css 的 60：
     它在底栏（z=20 的层叠上下文）内，盖过本栏、低于抽屉遮罩的关系按整页口径
     继承，互斥由 JS 收。

   高度/安全区/动态视口：--apple-mobar-safe 收口 env(safe-area-inset-bottom)，
   测试/评审可在 html 上覆写该变量模拟刘海屏；手机档容器 100vh 一律改 100dvh，
   手机地址栏收放不跳。 */

:root {
  --apple-mobar-h: 56px;
  --apple-mobar-safe: env(safe-area-inset-bottom, 0px);
}

/* ── 静默底：门外（非手机档 / 非 Apple 主题）一律不显示；打印不残留
   （z-index 契约 §5.2「打印」项——媒体查询对打印页宽不可靠，显式补一条） */
.apple-mobar,
.apple-mobar-sheet-backdrop,
.apple-mobar-sheet-panel { display: none }

@media print {
  .apple-mobar,
  .apple-mobar-sheet-backdrop,
  .apple-mobar-sheet-panel { display: none !important }
}

@media (max-width: 767.98px) {

  /* ── 挂载页的壳层让位（锁 html[data-apple-mobar]，JS init/destroy 维护）────
     内容让位：滚到底最后一个元素完整露在底栏之上；toast（lims2.css 固定
     right/bottom 24px）一并上移；容器 dvh：地址栏/工具栏收放不产生 100vh 跳动。
     切回默认主题时 [data-theme="apple"] 门关闭，三条规则一起失效，自动回现网。 */
  html[data-apple-mobar][data-theme="apple"] .app-shell { min-height: 100dvh }
  html[data-apple-mobar][data-theme="apple"] .content { padding-bottom: calc(var(--apple-mobar-h) + var(--apple-mobar-safe) + 24px) }
  html[data-apple-mobar][data-theme="apple"] .toast { bottom: calc(var(--apple-mobar-h) + var(--apple-mobar-safe) + 12px) }

  /* ── 底栏 ──────────────────────────────────────────────────────────────
     层级：手机功能底栏（独立体系），值 20
     上下文：根上下文（position:fixed 直挂 body，本组件自己建的节点）
     裁剪：无（fixed 定位，祖先链是 body） */
  [data-theme="apple"] .apple-mobar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    height: calc(var(--apple-mobar-h) + var(--apple-mobar-safe));
    padding: 5px 2px var(--apple-mobar-safe);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line, #e5e5ea);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1)
  }

  /* 图标语言 = iOS tab bar：扁平单色线性 glyph 随文字染色（未选 #8e8e93/400，
     选中 #0071e3/600），不用彩色方块——彩色圆角方块是侧栏的语言，两处必须区分 */
  [data-theme="apple"] .apple-mobar-item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    border: 0; background: transparent;
    padding: 2px 2px 0;
    color: #8e8e93; font-size: 10px; font-weight: 400; line-height: 1.2;
    text-decoration: none; cursor: pointer
  }
  [data-theme="apple"] .apple-mobar-item:active { opacity: .5 }
  [data-theme="apple"] .apple-mobar-item.active { color: #0071e3; font-weight: 600 }
  [data-theme="apple"] .apple-mobar-item:focus-visible { outline: 2px solid var(--blue-500, #0071e3); outline-offset: -2px }
  [data-theme="apple"] .apple-mobar-glyph { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none }
  [data-theme="apple"] .apple-mobar-glyph svg { display: block; width: 24px; height: 24px }
  [data-theme="apple"] .apple-mobar-label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }

  /* 「我的」格：功能位是 wrapper（按钮 + 身份挂载点两层）——身份菜单内含
     可点行，不能塞进 button；wrapper relative，让挂载点里的下拉锚到本格。
     挂载点自身保持常规块级：宿主渲染进来的 identity.js 下拉（触发钮藏起、
     菜单绝对定位到本格）全靠它在槽内展开，display:none 会连菜单一起藏没。 */
  [data-theme="apple"] .apple-mobar-slot { flex: 1; min-width: 0; position: relative; display: flex }

  /* 账号菜单 = identity.js 的现网两级下拉（宿主渲染进挂载点），手机档改从
     底栏上方弹出：触发钮藏掉（「我的」格按钮转发 click），下拉改 static、
     menu 相对 .apple-mobar-slot 定位。菜单在底栏的层叠上下文内——盖过本栏、
     低于抽屉遮罩/modal 的相对关系继承整页 z 序口径（账号菜单 60）。 */
  [data-theme="apple"] .apple-mobar .identity-dropdown { position: static }
  [data-theme="apple"] .apple-mobar .identity-trigger { display: none }
  [data-theme="apple"] .apple-mobar .identity-menu { top: auto; bottom: calc(100% + 10px); right: 0 }

  /* ── 「更多」半模态底部弹层（遮罩 70 / 面板 71）──────────────────────────
     基态 display:none（静默底），:not([hidden]) 才立起——hidden 由 JS 摘挂。
     面板 fixed 直挂 body：无裁剪祖先，max-height 用 dvh 封顶自己滚。 */
  [data-theme="apple"] .apple-mobar-sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed; inset: 0;
    z-index: 70;
    background: rgba(16, 26, 40, .42)
  }
  [data-theme="apple"] .apple-mobar-sheet-panel:not([hidden]) {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 71;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 34px rgba(23, 32, 51, .16);
    padding: 8px 10px calc(14px + var(--apple-mobar-safe));
    max-height: 70dvh;
    overflow-y: auto;
    animation: apple-mobar-sheet-in .24s cubic-bezier(.22, 1, .36, 1)
  }
  [data-theme="apple"] .apple-mobar-sheet-grab { width: 36px; height: 4px; border-radius: 99px; background: #e5e5ea; margin: 2px auto 8px }
  [data-theme="apple"] .apple-mobar-sheet-label { padding: 10px 10px 4px; font-size: 10px; letter-spacing: .12em; color: #86868b }
  [data-theme="apple"] .apple-mobar-sheet-group:first-of-type .apple-mobar-sheet-label { padding-top: 4px }
  [data-theme="apple"] .apple-mobar-sheet-group--home { border-top: 1px solid #e5e5ea; margin-top: 6px; padding-top: 6px }
  [data-theme="apple"] .apple-mobar-sheet-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 11px 10px;
    border: 0; background: transparent;
    border-radius: 10px;
    font-size: 14px; color: #1d1d1f;
    text-decoration: none; cursor: pointer; text-align: left
  }
  [data-theme="apple"] .apple-mobar-sheet-item:hover,
  [data-theme="apple"] .apple-mobar-sheet-item:active { background: #f5f5f7 }
  [data-theme="apple"] .apple-mobar-sheet-item:focus-visible { outline: 2px solid var(--blue-500, #0071e3); outline-offset: -2px }
  [data-theme="apple"] .apple-mobar-sheet-item.active { color: #0071e3; font-weight: 600 }
  [data-theme="apple"] .apple-mobar-sheet-item .apple-mobar-sheet-current {
    margin-left: auto; flex: none;
    background: rgba(0, 113, 227, .1); color: #0071e3;
    font-size: 10px; padding: 1px 7px; border-radius: 99px
  }

  /* 键盘避让：可输入元素聚焦（html[data-apple-mobar-keyboard]）时底栏整条滑出
     屏外，输入框与候选栏拿回全部可视高度；失焦即回。实现与局限见 JS 注释。 */
  [data-theme="apple"][data-apple-mobar-keyboard="open"] .apple-mobar { transform: translateY(100%) }
}

@keyframes apple-mobar-sheet-in {
  from { transform: translateY(100%) }
  to { transform: none }
}

/* reduced motion：底栏滑入滑出与 sheet 入场动画全部瞬时化。lims2.css:612 的
   全局 *{animation:none!important;transition:none!important} 在加载了基座的
   页面上已经覆盖，这一段是组件自身不依赖基座的兜底。 */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  [data-theme="apple"] .apple-mobar { transition: none }
  [data-theme="apple"] .apple-mobar-sheet-panel:not([hidden]) { animation: none }
}