/* ============================================================
   全局基础
   变量、重置、页面骨架、容器、通用动画工具
   ============================================================ */

/* ============================================================
   !important 使用纪律（2026-10-23 F5 立，改样式前先读这一段）
   ------------------------------------------------------------
   历史上这里出现过"你加我也加"的自我延续：基础胶囊给 color 加了
   !important，于是覆盖它的规则不得不也加，再加的又逼着下一层加……
   最终 28 处 !important 里至少 6 处纯属误判（!important 不提升特异性，
   它们本来就靠特异性/源码顺序赢了）。

   允许用的三种情形（其余一律不加）：
   1) 要压的是【内联样式】（JS 写在 element.style 上的 cursor/transform/
      opacity 等）—— 这是 CSS 唯一合法的翻盘手段；
   2) 要压的是【HTML 属性语义】，典型是 `[hidden]` 与 `.is-hidden`
      这类工具类：属性/工具类的语义必须是"无条件生效"；
   3) 动画降级：@media (prefers-reduced-motion: reduce) 里关掉
      animation / transition，必须无视任何具体动效声明。

   不许用的情形：
   · 想让自己的规则赢过别人的规则 —— 那是特异性问题，
     加一个类名（.a.b）或多一层上下文（.parent .a）就能解决；
   · 从别处复制粘贴时顺手带过来的 —— 先删掉再看有没有坏。
   ============================================================ */

:root {
    --color-bg: #f5f5f7;
    --color-text: #1d1d1f;
    --color-text-sub: #6e6e73;
    --color-accent: #0071e3;
    --color-accent-hover: #0077ed;
    --color-nav-text: rgba(0, 0, 0, 0.8);        /* 导航文字：深灰而非纯黑 */

    /* ---- 色板（2026-10-23 F5 收口）----
       纪律：这里每一个令牌的值必须【逐字节等于】它替换掉的字面值，
       否则就是"顺手改色"，不属于本批范围。所以下面几档看着很接近
       （--color-fill vs --color-fill-2 只差 1 阶）也不许合并——
       合并就是视觉改动，要改另开一轮。
       历史令牌 --color-bg / --color-text / --color-text-sub /
       --color-accent / --color-accent-hover 在文件开头，命名不统一是历史原因，
       本批不动它们（改名会牵动 100+ 消费点，收益不抵风险）。

       不变量（2026-10-23 立）：
       · 色板令牌（--color-* / --wp-white|black|ink|ink-soft|line|fill|bg）
         的值必须是字面值，不许指向别的令牌 —— 否则改一处颜色要追两跳，
         而且极易写成自引用（--x: var(--x)，整条声明失效且不报错）。
       · 语义令牌（如 --hlts-glry-card-bg、--ph-bg）可以指向色板令牌，
         这是项目既有写法（--selected-row: var(--ad-row-selected) 同理），
         语义令牌本来就是"某个色板值在某个场景下的别名"。 */
    --color-white: #fff;                /* 纯白面 / 反白文字 */
    --color-fill: #e8e8ed;              /* 填充灰：分段控件底、悬停底 */
    --color-fill-2: #e9e9eb;            /* 次一档填充灰（与上者差 1 阶，勿合并） */
    --color-border: #d2d2d7;            /* 标准描边灰 */
    --color-danger: #d70015;            /* 危险 / 删除（苹果 systemRed 深色档） */
    --nav-height: 48px;
    --container: 1920px;
    /* 首页专用：仿苹果官网"贴左不对齐中间"，用 6vw 让它随屏幕温和增长，40px 是窄屏兜底 */
    --gutter-home: max(20px, calc(50vw - 742px));
    /* 苹果商店页三档渐变留白（apple.com.cn/store 实测，store-home.css rs-merch-4.19.6）：
       <1024px 恒 22px；1024→1440 线性渐增 22→140；≥1440px 固定 140px。
       苹果源码用三段 @media + translateX 实现，这里 clamp 数学等价、任意屏宽逐像素同值：
       中段表达式照抄苹果原值（-268.46154px + 28.36538vw，即 22 + 118×(vw−1024)/416 的直线），
       两端由 clamp 自动钳位，在 1024/1440 两个衔接点与相邻档严格同值、无跳变 */
    --gutter-ramp: clamp(22px, 28.36538vw - 268.46154px, 140px);
    /* 全站卡片统一阴影（苹果官网同款，主页帮手卡为基准）：
       各页面卡片一律引用这两个变量，想全局调阴影只改这里一处 */
    --card-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);        /* 默认（苹果 #00000014） */
    --card-shadow-hover: 2px 4px 16px rgba(0, 0, 0, 0.16);  /* 悬停（苹果 #00000029） */

    /* ============================================================
       层叠顺序令牌（2026-10-23 F5 收口）
       ------------------------------------------------------------
       为什么要有这一层：此前 z-index 从 -1 一路散到 5,000,000，想知道
       "这个浮层会不会被谁压住"只能 grep 全站再逐个脑内比大小。
       现在把「跨组件 / 全站级」的层收进一条有序阶梯，档与档之间留出空位，
       将来加新浮层往空位里塞就行，不必再发明 5,000,000 这种数。

       纪律：
       1) 阶内取值与原值保序（本批为纯重编号，相邻关系逐一保持）→ 像素零变化；
       2) 每档留 ≥10 的空位，插入新层用中间值，不整体挪动；
       3) 0~5 的组件内部微层叠【不进令牌】——例如 cards.css 里
          wf-stretch(2) < card-meta(3) < edit-wrap(5)，只在几十行的
          同一个组件块内互相比较，起个名字反而看不出谁压谁。

       跨世界提醒：.studio 编辑器与前台是两个互不加载样式表的世界
       （editor.html 不引 base.css，前台不引 editor/*），各自的 :root
       各存一份；--z-behind-1/-2 两个世界都有，值必须保持一致。
       ============================================================ */
    --z-behind-2: -2;           /* 模组内双层背景的底层（scrollytelling / scroll-captions） */
    --z-behind-1: -1;           /* 玻璃/高光垫层：垫在本层文字之下，仍在容器层叠上下文内
                                   ⚠️ 与 studio/css/theme.css 同名同值，改一处必须改两处 */
    --z-player-bar: 10;         /* 苹果播放器浮条（首页「先刷重点」的圆点/播放钮），
                                   压在画廊媒体之上、同层级内居中 */
    --z-carousel-arrow: 10;     /* 首页横滑轨道的左右箭头（压在卡片上、可点）
                                   ⚠️ 与 --z-player-bar 同值但不同物：两者永不相邻，
                                   拆开是为了将来单独调箭头时不必牵动播放器浮条 */
    --z-menu: 20;               /* 卡片内浮出菜单（作品行「…」菜单） */
    --z-rail-scrim: 62;         /* 作品详情侧浮栏的幕布 */
    --z-rail: 66;               /* 作品详情侧悬浮栏（必须高于幕布 62） */
    --z-dropdown: 300;          /* 行内下拉浮层（压过下方列表行） */
    --z-nav-scrim: 998;         /* 手机全屏菜单幕布 */
    --z-nav-menu: 999;          /* 手机全屏菜单本体 */
    --z-flash: 1000;            /* 页内吐司（登录/注册结果提示，与导航同层）
                                   ⚠️ 不叫 --z-toast：编辑器层梯里 --z-toast 是 700 的轻提示 */
    --z-nav: 1000;              /* 置顶导航条 */
    --z-nav-overlay: 1001;      /* 搜索浮层 / 导航下拉（在导航条之上） */
    --z-nav-control: 1002;      /* 汉堡 / 搜索按钮（必须可点，压过所有导航浮层） */
    --z-share-bar: 1200;        /* 分享预览条 */
    --z-page-modal: 2000;       /* 模态遮罩
                                   ⚠️ 不叫 --z-modal：编辑器层梯里 --z-modal 是 800 */
    --z-alert-top: 2500;        /* 全屏遮罩型提示：封禁提示吐司 / 头衔裁切器 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--color-bg);
    color: var(--color-text);
    /* 字体栈：多端统一走鸿蒙黑体 webfont（2026-10-13 起，Mac 也走鸿蒙——
       用户要求全端观感一致）。鸿蒙字形骨架接近苹方，Mac 上不会有突兀感，
       且全平台字形一致后，字号/折行观感在任何设备上都对得上。
       HarmonyOS Sans SC 必须排在所有系统字体之前才能接管全部平台 */
    font-family: "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont,
                 "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 22px;
}

main { min-height: 60vh; }

/* 滚动 reveals（JS 给元素加 .revealed 触发） */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.revealed { opacity: 1; transform: none; }

/* 尊重系统"减少动画"偏好 */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}