/* 启动占位层的样式（2026-07-29 加，用户提「打开网站有好几秒钟的加载时间」）。
 *
 * 🔴 **它必须是纯 HTML/CSS**：这几秒钟里 Flutter 引擎与编译产物还在下载，
 * 一行 Dart 都没跑，所以 app 内部的任何 loading widget 在这个阶段都是不存在的
 * —— 用户看到的是**纯白屏**，分不出「在加载」还是「坏了」。
 *
 * 三条刻意的处置：
 * ① **spinner 延迟 400ms 才出现**（animation-delay）。加载快时它压根不露面 ——
 *    闪一下比不出现更糟；慢时这 400ms 用户还没开始怀疑。
 * ② **深浅两套跟随系统**（prefers-color-scheme）。占位层与首屏底色不一致的话，
 *    Flutter 接手那一刻会闪一记白或黑。
 * ③ **prefers-reduced-motion 下不转**，只留静态字标。
 *
 * ⚠ **这一层没有自动化测试覆盖，是已知缺口不是漏写**：它活在 Flutter 之外，
 * 而 `flutter test` 与 L4 的测试代码都跑在 app 进程内、看不到这段 DOM，
 * 且 first-frame 之后它已经被移除。验法是 in-app browser —— 导航过去，
 * 在首帧之前查 `#boot` 还在不在。
 *
 * 🔴 **2026-08-02 从 index.html 的内联 <style> 挪到这个文件**：web 端上公网
 * 之后 CSP 是 AC-1.6 的部署前提（spec.md「无内联脚本、无外部脚本源」），
 * 而内联样式要么逼出 `style-src 'unsafe-inline'`、要么靠 hash —— hash 每改
 * 一个像素就失效，是那种「改完忘了更新、线上白屏」的债。外链文件没这问题。
 */

:root {
  --boot-bg: #f4f8f4;
  --boot-fg: #1b5e45; /* AppTheme.brandSeed */
  --boot-dim: #5f7264;
}

@media (prefers-color-scheme: dark) {
  :root {
    --boot-bg: #101512;
    --boot-fg: #9ed8b8;
    --boot-dim: #7d8f83;
  }
}

html, body { margin: 0; height: 100%; background: var(--boot-bg); }

#boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--boot-bg);
  font: 500 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--boot-fg);
  transition: opacity .26s ease;
  z-index: 2147483647;
}

#boot.boot--gone { opacity: 0; pointer-events: none; }
#boot .mark { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
#boot .sub { font-size: 13px; font-weight: 400; color: var(--boot-dim); }

#boot .ring {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(127, 127, 127, .28);
  border-top-color: var(--boot-fg);
  opacity: 0;
  /* 400ms 之后才淡入 —— 快的时候这个圈不出现。 */
  animation: boot-spin .8s linear infinite, boot-in .2s ease 400ms both;
}

@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #boot .ring { display: none; }
}