/* app-download 落地页样式。所有颜色/间距/圆角/断点取自 tokens.css 的设计令牌，
不重复写死数值——Stitch 设计稿用的是 Tailwind 任意值类，这里手写等价规则。
引用方必须在本文件之前先 tokens.css。 */
.appdl-page {
margin: 0; /* 清掉浏览器 UA 样式表默认的 body margin（通常 8px） */
font-family: var(--font-default);
color: var(--color-text-body);
background: var(--color-surface-alt);
}
/* 全局 border-box——本文件到处是 width:100% 再叠 padding（.appdl-hero__left、
.appdl-header、.appdl-feature 等），默认 content-box 下 padding 会加到 100% 之外，
在窄屏把盒子撑到比视口还宽，挤出横向溢出（.appdl-hero__left 在 390px 视口下
实测渲染到 422px，多出来的部分正好是左右 padding）。scope 在 .appdl-page 下，
不影响本文件外共享的 tokens.css 使用方。 */
.appdl-page, .appdl-page *, .appdl-page *::before, .appdl-page *::after {
box-sizing: border-box;
}
/* loading 指示——1:1 照抄 appweb 的 busy-icon 视觉（rm1/appweb
src/themes/rmApp/components/loader.html + src/style/sass/apps/components/
_loader.scss）。原版的 .loader-backdrop 本身不设背景色，是完全透明的——
唯一作用是铺满整个视口拦截点击；真正看得见的只有居中悬浮的深色圆角框
（.loader-wrapper：70x70，10px padding 内嵌一个 50x50、8px 描边的白色圆环
spinner，1.1s 转一圈）浮在原页面内容之上，页面本身不做任何遮挡/变暗。
App 里其它页面用的就是这一套 loader，这里必须保持同样的观感：只在原有
页面上盖一个 spinner，而不是用一块实色把整页糊住。
脚本加载链（jsResourcesLoader.js 编排的 navigate-js → JSFiles →
rmapp.min.js/appDownloadPage.min.js）跑完前先拦住整页点击、露出 spinner，
避免用户在按钮还没绑定事件时误触。揭开时机跟 img[data-src] 兜底共用同一个
信号（见 里的 revealPendingContent()）：JS 全部加载完
（'rmresources:ready'）就关掉，不重复起计时器。
跟原版的差异只有"怎么让浮框居中"这一处纯实现细节：原版用
position:fixed + top/left:50% + 负 margin 各推半个框宽/高，这里改用
flex 居中整个透明拦截层——两者渲染结果像素级相同，flex 版本不用跟着浮框
尺寸手改 margin 负值。 */
.appdl-loading-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.appdl-loading-overlay--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.appdl-loading-overlay__box {
width: 70px;
height: 70px;
padding: 10px;
border-radius: 7px;
background: rgba(0, 0, 0, 0.68);
display: flex;
align-items: center;
justify-content: center;
}
.appdl-loading-overlay__spinner {
width: 50px;
height: 50px;
border-radius: 50%;
border: 8px solid rgba(255, 255, 255, 0.2);
border-left-color: #fff;
animation: appdl-loading-spin 1.1s infinite linear;
}
@keyframes appdl-loading-spin {
to { transform: rotate(360deg); }
}
/* 通栏：背景/边框/阴影放外层 ，铺满整个视口宽度；内容另包一层
.appdl-header__inner 限宽 1152px 居中——跟 max-width 直接写在 上不
一样，那样背景会跟内容一起被裁到 1152px，宽屏下两侧露出页面底色，
header 看起来像断开的一截，不是通栏。.appdl-features/.appdl-feature 已经是这个
两层结构，这里对齐同一套写法。 */
.appdl-header {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--elev-card);
position: sticky;
top: 0;
z-index: 50;
}
.appdl-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1152px;
margin: 0 auto;
padding: var(--sp-4) var(--sp-8);
position: relative; /* 返回按钮绝对定位的锚点，见 .appdl-header__back */
}
/* max-width 防止英文等横向 wordmark logo（比中文方块字更宽）在窄屏下把右侧语言
下拉挤到换行叠在一起——150px 留给语言切换触发器 + 两者间距。 */
.appdl-header__logo { height: 32px; width: auto; max-width: calc(100% - 150px); object-fit: contain; }
/* fromApp 时只隐藏 logo 的可见内容，不用 hidden 属性（=display:none）—— 那样
会把 logo 从 flex 布局里整个抽掉，.appdl-header__inner 就只剩语言下拉一个
flex 子项，justify-content:space-between 在只有一个子项时会把它摆在左边
而不是右边，语言切换整个跳到左边去了。改成只让 visibility 隐藏（见
appDownloadPage.js 的 bindAppChrome()/header 后面的内联脚本），logo 的
布局占位保留，语言下拉照常被推到右边；返回按钮再用绝对定位盖在 logo 原来
的位置上。 */
.appdl-header__logo--hidden { visibility: hidden; }
/* 返回/分享——只在 App 自带 WebView 内由 JS 取消 hidden(见 appDownloadPage.js
的 bindAppChrome())，微信内置浏览器/普通手机浏览器/PC 都不显示：微信有自己
的右上角菜单分享入口，普通浏览器本来就有系统自带的返回/分享，不需要页面
自己再画一套。1:1 对齐旧 dlPage.coffee 的两处布局——返回箭头顶替 header
左侧的品牌位（跟 logo 同一个视觉位置），分享固定在右下角。 */
/* App 内其它原生页面（goopenhouse 等）的返回点击区都是 44×44px 的方块
（Ratchet `.bar .icon` 的触摸区惯例）。绝对定位、以 .appdl-header__inner
为锚点——不是外层 .appdl-header，那样会贴到整个 sticky header 的最顶端，
无视 header 自己的上下内边距，在视觉上偏高，跟 logo/语言下拉的垂直居中
对不上。left:0 贴 .appdl-header__inner 的左边界（窄屏下跟屏幕左边缘重合），
top:50%+transform 在 header 这一行的高度内上下居中，覆盖在 logo 占位的
位置上。 */
.appdl-header__back {
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
padding: 0; border: 0; background: none;
color: var(--color-action-primary); font-size: 22px; cursor: pointer;
}
.appdl-header__back[hidden] { display: none; }
/* 1:1 对齐旧 dlPage.coffee 的 `.bar.bar-standard.bar-footer`——不是浮动徽标，
是通栏固定在页面底部的 44px 工具条，图标贴右侧，跟旧页面的
`.bar{height:44px;padding:0 10px;background:#fff}` + `.bar-footer{border-top:
1px solid #ddd}` + `.bar .icon{padding:10px 0;font-size:21px}` 数值保持一致
（10px/21px/44px 是旧页面写死的具体像素，不是本文件其它地方复用的设计令牌，
这里照抄以保证视觉 1:1，不额外发明一套间距）。 */
.appdl-header__share {
position: fixed;
z-index: 60; /* 盖过 header 自己的 z-index:50 */
bottom: 0; left: 0; right: 0;
height: 44px; padding: 0 10px; border: 0; border-top: 1px solid var(--color-border);
display: flex; align-items: center; justify-content: flex-end;
background: var(--color-surface); cursor: pointer;
}
.appdl-header__share .fa { color: var(--color-action-primary); font-size: 21px; }
.appdl-header__share[hidden] { display: none; }
/* 分享这条通栏 footer 是 fixed 定位，不占文档流——照抄旧页面 `.bar-footer ~
.content {padding-bottom:44px}` 的思路，让出等高的底部空间避免内容被挡住。
页面真正的最后一个元素是