/* ============================================================
   App shell（2026-10-26）
   目标：让服务端渲染的页面在导航、安装、触摸手感上接近原生 App。
   不接管路由，不改任何页面逻辑；不支持的浏览器会自动忽略。
   ============================================================ */

/* 首屏底色：避免深色模式下出现白闪 */
html { background: #f6f7f9; }
@media (prefers-color-scheme: dark) { html { background: #0d1015; } }

/* 去掉移动端点击高亮 / 双击缩放延迟 */
a, button, [role="button"], .tab, summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---------- 跨文档转场（Chrome 126+ / Safari 18+） ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: shell-out .16s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: shell-in .24s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes shell-in {
  from { opacity: 0; transform: translateY(8px) scale(.996); }
  to   { opacity: 1; transform: none; }
}
@keyframes shell-out {
  to { opacity: 0; transform: translateY(-6px) scale(.998); }
}

/* ---------- 顶部进度条：点击链接 / 提交表单时出现 ---------- */
.shell-bar {
  position: fixed; left: 0; top: 0; height: 2px; width: 0; opacity: 0;
  background: linear-gradient(90deg, var(--accent, #3b5bdb), #31d8ee);
  box-shadow: 0 0 10px rgba(49, 216, 238, .5);
  transition: width .25s ease, opacity .3s ease;
  z-index: 2147483000; pointer-events: none;
}
.shell-bar.on { opacity: 1; }

/* ---------- 添加到主屏（standalone）时贴安全区 ---------- */
@media (display-mode: standalone) {
  header.top { padding-top: max(12px, env(safe-area-inset-top)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- 可访问性 ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .shell-bar { transition: none; }
}

/* 内容区只作为朗读锚点，不画焦点框（Safari 会对脚本聚焦的元素画蓝圈） */
#content:focus,
#content:focus-visible,
#content:focus-within { outline: none !important; }

/* 仅供读屏使用的播报区 */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 底部导航只做容器，不因为内部链接获得焦点而描边 */
nav.user-nav:focus-within,
nav.bottom:focus-within { outline: none !important; }