/* HSG App Shell v1 — 三个内部壳（admin/layout、layouts/staff、repair/layout）+ 顾客端 layouts/shop（portal=shop， 0923 新首页 v2 并入第四个壳）经 partials/app-shell/head 引入，首帧前生效。 谁写什么： 服务端 app-shell / app-tabs / app-leaf / app-rt / is-native / data-app-portal（App\Support\AppShell::htmlAttrs） head 里的 boot 脚本 is-ios / is-android / is-standalone / is-native / is-inapp / is-touch 底部栏 JS 一格都画不出来时摘掉 app-tabs app-shell-base.js app-overlay（有弹层开着） app-shell.js app-kb / app-locked / --app-kb-h（只在 app-rt 时加载） 这里不量任何东西：栏高、顶栏高都是常量。 */ :root { /* 安全区：Capacitor ≥8.3 SystemBars(insetsHandling:'css') 注入 --safe-area-inset-*；浏览器用 env() */ --app-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --app-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px)); --app-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); --app-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px)); --app-header-h: 0px; /* 壳的顶栏内容高（下面按门户、按宽度写常量） */ --app-tabbar-h: 0px; /* 底部栏内容高：有栏时 61px */ --app-bottom-reserve: calc(var(--app-tabbar-h) + var(--app-safe-bottom)); /* body 唯一的底部让位 */ --app-dock-offset: var(--app-bottom-reserve); /* 页面贴底条离屏幕底的距离，会自动收回 */ --app-sticky-top: calc(var(--app-header-h) + var(--app-safe-top) + var(--imp-h, 0px)); /* 页面吸顶元素的 top（含扮演横幅） */ --app-kb-h: 0px; /* app-shell.js 写 */ --app-vh: 100vh; --app-dvh: 100vh; /* 层级梯度（CLAUDE.md 视图层公约 #2）：底部栏在所有弹层与侧栏遮罩之下——漏判也是弹层盖栏，不会栏压弹层 */ --z-page: 10; --z-dropdown: 100; --z-header: 900; --z-tabbar: 980; --z-drawer: 1000; --z-overlay: 5000; --z-toast: 9000; } @supports (height: 100svh) { :root { --app-vh: 100svh; --app-dvh: 100dvh; } } /* ── 顶栏高度（常量）：hsg 手机档 .topbar 固定 56；维修端 .rp-top 定高 55，手机档（按钮 40 起）63 ── */ @media screen and (max-width: 768px) { html[data-app-portal="hsg"] { --app-header-h: 56px; } } html[data-app-portal="repair"] { --app-header-h: 55px; } @media screen and (max-width: 767.98px) { html[data-app-portal="repair"] { --app-header-h: 63px; } } /* ── 有没有栏：服务端说有（app-tabs）、不是叶子页、宽度在手机档 ── */ @media screen and (max-width: 768px) { html.app-tabs:not(.app-leaf)[data-app-portal="hsg"] { --app-tabbar-h: 61px; } } @media screen and (max-width: 860px) { html.app-tabs:not(.app-leaf)[data-app-portal="repair"] { --app-tabbar-h: 61px; } } /* 栏让开（打字 / 弹层）：贴底条落到安全区；body 让位不变，文档高度不跳 */ html.app-kb, html.app-overlay { --app-dock-offset: var(--app-safe-bottom); } @media screen { /* 文档是唯一的滚动者；只有 body 一处让位 */ html { scroll-padding-top: calc(var(--app-sticky-top) + 8px); scroll-padding-bottom: calc(var(--app-bottom-reserve) + 12px); } html.app-shell body { padding-bottom: var(--app-bottom-reserve); padding-left: var(--app-safe-left); padding-right: var(--app-safe-right); box-sizing: border-box; } .app-main { min-height: calc(var(--app-vh) - var(--app-bottom-reserve) - var(--imp-h, 0px)); box-sizing: border-box; } /* ── 底部栏：标记与格子在 partials/mobile-bottom-nav，这里只管几何与状态 ── */ .app-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); height: var(--app-bottom-reserve); box-sizing: border-box; transition: transform .18s ease-out, visibility 0s; } html.app-kb .app-tabbar, html.app-overlay .app-tabbar { transform: translateY(100%); visibility: hidden; transition: transform .18s ease-out, visibility 0s linear .18s; } /* ── 页面贴底条：显式声明（取代 liftBottomAnchored）。偏移全由变量给，不写内联几何、不累加高度 ──
fixed / sticky 贴底
自带离底距离的（FAB、toast）
打字时默认藏；keep 不动；ride 贴在键盘上沿 弹层自己滚动区里的贴底条写 data-app-inner-dock（不加偏移，弹层自己让安全区） */ [data-app-dock] { bottom: calc(var(--dock-gap, 0px) + var(--app-dock-offset)) !important; } html.app-kb [data-app-dock]:not([data-kb]):not(:focus-within) { visibility: hidden; } html.app-kb [data-app-dock][data-kb="ride"] { bottom: calc(var(--dock-gap, 0px) + var(--app-kb-h)) !important; } /* ── 页面吸顶（汇总条、搜索卡）：粘在壳顶栏下沿；--sticky-gap 自带间距。滚动容器必须是文档 ── */ [data-app-sticky-top] { top: calc(var(--app-sticky-top, 0px) + var(--sticky-gap, 0px)) !important; } /* ── 汉堡：有栏的手机档首帧就藏（更多面板已含全部入口）；叶子页留着，另给「返回」 ── */ .app-back { display: none; } html.app-leaf .app-back { display: inline-flex; } /* ── 弹层自己滚：面板 / 遮罩（更多面板用） ── */ .app-scrim { position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 10); background: rgba(15, 23, 42, .35); } .app-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay); max-height: calc(var(--app-dvh) * .82); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(16px + var(--app-safe-bottom)); box-sizing: border-box; } html.app-locked, html.app-locked body { overflow: hidden; } } @media screen and (max-width: 768px) { html.app-tabs:not(.app-leaf)[data-app-portal="hsg"] .app-tabbar:not([hidden]) { display: flex; } html.app-tabs:not(.app-leaf)[data-app-portal="hsg"] .topbar-toggle { display: none; } } @media screen and (max-width: 860px) { html.app-tabs:not(.app-leaf)[data-app-portal="repair"] .app-tabbar:not([hidden]) { display: flex; } html.app-tabs:not(.app-leaf)[data-app-portal="repair"] .rp-burger { display: none; } } @media print { .app-tabbar, .app-sheet, .app-scrim { display: none !important; } } /* ── 装成 app / 原生壳 ── */ html.is-ios.is-standalone, html.is-native { overscroll-behavior-y: none; } /* 安卓装机版留着下拉刷新（那里唯一的刷新方式） */ html.is-native { -webkit-touch-callout: none; } html.is-standalone .app-install, html.is-native .app-install, html.is-inapp .app-install { display: none !important; } @media (prefers-reduced-motion: reduce) { .app-tabbar, .app-sheet, .app-scrim { transition: none !important; } } /* ── 顾客端 shop 门户（0923 新首页 P1，计划 docs/v2/2026-09-23-新首页-P1P2-计划.md）：页头行 56（≥1024 为 64）；底部栏 56，<1024 才有 ── */ html[data-app-portal="shop"] { --app-header-h: 56px; } @media screen and (min-width: 1024px) { html[data-app-portal="shop"] { --app-header-h: 64px; } } @media screen and (max-width: 1023.98px) { html.app-tabs:not(.app-leaf)[data-app-portal="shop"] { --app-tabbar-h: 56px; } html.app-tabs:not(.app-leaf)[data-app-portal="shop"] .app-tabbar:not([hidden]) { display: grid; } }