/*
 * 28-app-loading — 等主包那一段的 loading 屏（LOADING-SCREEN-001，C-560；稿 docs/prototypes/elyrem-web/step-app-frame/LOADING-SCREEN.md，
 * 画板 loading-screen-board.html 里 <style id="draft-28-app-loading"> 那一段原样搬来，只去掉画板专用的 ② 之 A「不走数、字标呼吸」三条——C-560 ③ 定了 B）。
 * DOM 由 src/scripts/app-loading.js 搭，字从 ElyremGate（appFrameCopy）来。公开的那一小包，排在 config/entry.json 的 styles 最后（27 之后）。
 */

/* 一、开 app 那一段（.eload）：壳的启动画面在网页里再画一遍。DOM 由 app-loading.js 搭（照 app-gate.js 搭 .egate／.eturn 的做法）。
 *    两对颜色＝01 css 的 --em-bg／--em-ink 末尾那条 light-dark() 真值（与 ios-shell/scripts/build-assets.mjs 同一个取法），check.mjs 核一致。 */
.eload {
  position: fixed; inset: 0; z-index: 900;              /* 首开那一层 200、答案之书 240 之上；「转过来」1000 之下 */
  color-scheme: light dark;
  --eload-bg: light-dark(#f4f3ef, #171819);
  --eload-ink: light-dark(#2c322f, #eeeee8);
  background: var(--eload-bg); color: var(--eload-ink);
  opacity: 1; transition: opacity 320ms ease-out;
}
.eload[hidden] { display: none; }
.eload[data-state="fading"] { opacity: 0; pointer-events: none; }
/* 字标：与 LaunchScreen.storyboard 同一份 SVG（Wordmark.imageset）、同一个尺寸、居中——壳淡出启动画面时底下就是同一张画。
   BRAND-001 起那一份是 R02＋确认字标的横向组合（C-633 ①），168 × 52.49（ios-shell 的 LOCKUP_WIDTH_PT，check.mjs 核这里的宽高与 SVG 一致）。 */
.eload-brand { position: absolute; inset: 0; margin: auto; display: block; width: 168px; height: 52.49px; }
/* 字标底下的东西单独绝对定位：出现、消失都不挪字标。 */
.eload-below { position: absolute; left: 0; right: 0; top: calc(50% + 26.245px + 18px); display: grid; justify-items: center; gap: 14px; padding: 0 24px; text-align: center; }
.eload-line { width: 168px; height: 1px; background: color-mix(in srgb, currentColor 14%, transparent); opacity: 0; transition: opacity 400ms; }
.eload-line > i { display: block; height: 100%; width: var(--eload-progress, 0%); background: color-mix(in srgb, currentColor 62%, transparent); transition: width 240ms linear; }
.eload-note { margin: 0; font: 400 13px/1.6 "Noto Sans SC", sans-serif; letter-spacing: .04em; color: color-mix(in srgb, currentColor 62%, transparent); opacity: 0; transition: opacity 400ms; }
.eload-message { margin: 0; font: 400 15px/1.6 "Noto Sans SC", sans-serif; letter-spacing: .03em; }
/* 「再试一次」照壳的断网页 .retry（ios-shell/Resources/offline.css）：细描边药丸，系统字换成 Noto Sans SC。 */
.eload-retry { margin-top: 6px; min-width: 96px; padding: 10px 28px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: 400 16px/1.5 "Noto Sans SC", sans-serif; letter-spacing: .02em; -webkit-tap-highlight-color: transparent; }
.eload-retry:active { opacity: .55; }
[data-wait="slow"] .eload-line, [data-wait="long"] .eload-line, [data-wait="long"] .eload-note { opacity: 1; }
.eload:not([data-state="failed"]):not([data-state="unreachable"]) .eload-message, .eload-inline:not([data-state="failed"]):not([data-state="unreachable"]) .eload-message,
.eload:not([data-state="failed"]):not([data-state="unreachable"]) .eload-retry, .eload-inline:not([data-state="failed"]):not([data-state="unreachable"]) .eload-retry { display: none; }
[data-state="failed"] .eload-line, [data-state="unreachable"] .eload-line,
[data-state="failed"] .eload-note, [data-state="unreachable"] .eload-note { display: none; }
/* 二、核完码那一段（.eload-inline）：挂在验证码那张表单（#efa-code-form，data-auth 下它是 position:relative）里，绝对定位在「已验证」键底下，
 *    不推动原稿的排版；颜色用这一屏自己的令牌。 */
#em-first-open .eload-inline { position: absolute; top: calc(100% + 14px); left: 0; right: 0; display: grid; justify-items: center; gap: 10px; text-align: center; }
#em-first-open .eload-inline .eload-line { width: 100%; background: var(--efg-line); }
#em-first-open .eload-inline .eload-line > i { background: var(--efg-focus); }
#em-first-open .eload-inline .eload-note { font-size: 12px; color: var(--efg-muted); }
#em-first-open .eload-inline .eload-message { font-size: 13px; line-height: 1.6; color: var(--efg-ink); }
#em-first-open .eload-inline .eload-retry { margin: 0; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--efg-ink); font: 400 13px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif; text-decoration: underline; text-underline-offset: 4px; }
/* 三、减少动态效果：淡出缩短、线不加缓动；没有呼吸可停（这一层本来就不呼吸）。 */
@media (prefers-reduced-motion: reduce) {
  .eload { transition-duration: 160ms; }
  .eload-line, .eload-note, .eload-line > i { transition: none; }
}