/* 天空背景层 —— 固定在最底层。
   渐变的实际值由 js/sky-gradient.js 按当前时刻逐帧插值后写进 inline style，
   这里的色值只是 JS 就绪前的兜底（按下下午的浅蓝天空给）。 */
.sky-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #b8d4e8 0%, #dce8ed 54%, #ece8df 100%);
  /* 🔴 这里**故意不要 transition**（2026-09-29 删掉，别加回来）。
     background 是 linear-gradient（即 background-image），而 CSS 对渐变不做插值：
     值一变就是「一步跳到位」。所以原先那句 transition: background 3s 让人以为天色
     在平滑过渡，其实天空一直是硬跳的 —— 它唯一真实的效果是给下面 .sky-edge-tint
     埋雷：那两条带是纯色 background-color（*会*插值），于是它们会花 3 秒去追一个
     早就跳完的天空，这三秒里带色与身后的天色明显不符，就是用户看到的「亮条」。 */
  pointer-events: none;
}

/* ============================================================
   视口边缘 tint 条（2026-09-28 新增，别删）
   ------------------------------------------------------------
   背景：Safari 26 不再采信 <meta name="theme-color">，改成自己在页面里找一个
   「贴着视口边缘的 fixed / sticky 元素」，取它的 background-color 当作浏览器
   工具栏底色；取不到就退到 body 的 background-color（html 的被忽略）；
   再取不到才用系统默认 —— 浅色外观下就是纯白。

   我们的 .sky-backdrop 虽然 inset:0 铺满全屏，但它画的是渐变
   （background-image），background-color 是 transparent；而 body 为了不盖住
   负 z-index 的天空层也必须是 transparent。逐级落空 → 深色页面上顶着纯白横条。

   所以补两条贴边的纯色带专门当采样源：顶部取天空 top 色、底部取 bot 色。

   🔴 逐条对齐公开逆向出的采样门槛（出处：andesco/safari-color-tinting，
      也就是 WebKit bug 301756 里反复引用的那份），任何一条不满足就整条被跳过：
        position: fixed | sticky            ✓
        距顶 ≤4px / 距底 ≤3px                ✓（top:0 / bottom:0）
        宽 ≥80% 视口                         ✓（left:0;right:0 满宽）
        高 >4px，实测要 11–12px              ✓（12px ← 曾错写成 4px，踩在门槛下面）
        不能有 backdrop-filter / display:none ✓
      注意：**「4px」是位置门槛，不是高度门槛**，别再把 height 写成 4px。

   两条带画在渐变之上、颜色就是渐变的 0% / 100% 端点色，边缘处差异只有两三个
   色阶，肉眼不可见 —— test/edge-tint.mjs 有像素级对比守着这条。

   色值由 js/sky-gradient.js 的 applySkyTheme() 逐次写进 inline style；
   这里的色值只是 JS 就绪前的兜底，与 .sky-backdrop 兜底渐变的两端一致。
   ============================================================ */
.sky-edge-tint {
  position: fixed;
  left: 0;
  right: 0;
  height: 12px;              /* 门槛 >4px；实测 11–12px 才稳，别调小 */
  z-index: -1;               /* 压在天空渐变之上、正文之下（正文是 z auto） */
  pointer-events: none;
  /* 🔴 绝不能加 transition: background-color —— 这正是「刷新时上下两条亮带」的来源。
     天空层是渐变（不可插值、一步跳到位），若这两条带做 3 秒过渡，就会在色变后的
     三秒里顶着与身后天色不符的底色。实测（2026-09-29，本地加载全程逐帧采集）：
       天空已跳到 rgb(101,121,181) 时，顶带还停在 rgb(165,192,221) —— 差 64 个色阶，
       一路追到 t≈4.3s 才咬合，观感正是用户报的「刷新时背景上下有两条亮条，
       过一会儿就消失了」。
     两边必须同时跳：渐变跳，带子也跳。test/edge-tint.mjs 的 E 段逐帧守着这条。 */
}

.sky-edge-top { top: 0; background-color: #b8d4e8; }

.sky-edge-bottom { bottom: 0; background-color: #ece8df; }