/* =============================================================
   五岔 · 云匣子 · 基础层：reset / 排版 / 表面材质 / 原子工具类
   -------------------------------------------------------------
   v3「Ink & Paper」：不再有玻璃、光晕、噪点。
   表面就是纯色 + 发丝描边；背景就是一块安静的浅灰画布。
   ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-1);
  /* 背景柔光晕染（静态渐变，零滤镜开销）—— 年轻化的底色氛围 */
  background-color: var(--bg);
  background-image: radial-gradient(1100px 700px at 8% -10%, rgba(91, 108, 255, 0.1), transparent 62%),
    radial-gradient(900px 620px at 100% 0%, rgba(236, 72, 153, 0.07), transparent 58%),
    radial-gradient(1000px 800px at 55% 120%, rgba(139, 92, 246, 0.09), transparent 62%);
  background-attachment: fixed;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

::selection {
  background: rgba(23, 24, 28, 0.14);
}

/* ---------- 数字等宽（文件大小/时间对齐） ---------- */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 自定义滚动条（悬停时滑块变深） ---------- */
.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 128, 145, 0.35) transparent;
}

.scroll-y::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll-y::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-y::-webkit-scrollbar-thumb {
  background: rgba(120, 128, 145, 0.28);
  border: 3px solid transparent;
  border-radius: var(--r-full);
  background-clip: content-box;
  transition: background var(--dur-2) var(--ease);
}

.scroll-y:hover::-webkit-scrollbar-thumb {
  background: rgba(110, 118, 135, 0.45);
  background-clip: content-box;
}

.scroll-y::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 108, 125, 0.6);
  background-clip: content-box;
}

/* =============================================================
   表面材质（全实色）
   -------------------------------------------------------------
   .surface —— 页面级面板（侧边栏 / 顶栏 / 内容 / 详情栏）
   .pop    —— 浮层（菜单 / 弹窗 / Toast / 上传面板）
   两者的层级差只靠「底色 + 描边 + 阴影轻重」，没有任何透明玻璃。
   ============================================================= */
/* =============================================================
   浮层（菜单 / 弹窗 / Toast / 上传面板）：白面 + 柔阴影（无硬线）
   ============================================================= */
.pop {
  position: relative;
  background: var(--surface);
  border: 1px solid transparent;
  box-shadow: var(--shadow-l);
}

/* =============================================================
   焦点：鼠标点击绝不出现外圈，键盘导航才出现
   ============================================================= */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid rgba(91, 108, 255, 0.65);
  outline-offset: 2px;
}

.filerow:focus-visible,
.card:focus-visible,
.wf-item:focus-visible {
  outline-offset: -2px;
}

/* =============================================================
   入场 / 通用动画
   -------------------------------------------------------------
   ★ fill 一律 backwards 而不是 both：
     both 会把最终帧永久钉住，transform 被动画值占据后，
     hover 位移与 FLIP 平滑搬家全部失效。
   ============================================================= */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes fade-rise-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slide-up-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.99); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes slide-right-in {
  from { opacity: 0; transform: translate3d(22px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes shimmer {
  0%   { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 2026-10-23 修复：原来动画 box-shadow（违反"动画只动 transform/opacity"红线）。
   改为 transform + opacity：由一个 ::before/::after 光环元素（border 圆环）
   从 1 放大到 1.3 并淡出，视觉同为"环从边缘向外扩散、渐隐"。
   用法不变：animation: pulse-ring … 挂在光环元素上。 */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

.anim-rise { animation: rise-in var(--dur-3) var(--ease) backwards; }
.anim-pop  { animation: pop-in var(--dur-2) var(--ease-back) backwards; }

/* =============================================================
   ★ 文本更新过渡（2026-10-16 用户要求）
   -------------------------------------------------------------
   规则：**没变的元素不动；文字内容更新或位置变换时必须有过渡**。
   用法（包住会变的文字，key 就是文字本身）：
     <Transition name="txt" mode="out-in"><span :key="文本">{{ 文本 }}</span></Transition>
   旧文字上滑淡出、新文字从下方淡入；只动 opacity / transform（性能红线）。
   ============================================================= */
.txt-enter-active,
.txt-leave-active {
  display: inline-block;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.txt-enter-from {
  opacity: 0;
  transform: translateY(4px);
}
.txt-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

.skeleton {
  background: linear-gradient(90deg, #eceef2 25%, #f6f7f9 37%, #eceef2 63%);
  background-size: 420px 100%;
  animation: shimmer 2s linear infinite;
  border-radius: var(--r-xs);
}

/* =============================================================
   ★ 动效开关：这里**故意什么都不做**（2026-10-08 事故复盘）
   -------------------------------------------------------------
   事故：上一批"清理死代码"把下面这条规则从
     .reduce-motion * { animation-duration: .01ms !important; … }
   （要求手动给 <body> 加 class="reduce-motion"，而全仓库没有任何
     JS/HTML 加过这个类 —— 所以它**本来永远不会生效**）
   改成了真正会生效的 @media (prefers-reduced-motion: reduce)。
   后果：系统开着「减弱动态效果」的用户，全站 animation/transition
   被压成 0.01ms —— 表现就是"所有页面的过渡动画全都消失了"。
   无头实测（Emulation.setEmulatedMedia 切 reduce）：
     .nav-pill              0.28s  → 1e-05s
     .storage-bar > i       0.56s  → 1e-05s
     .user-chip             0.13s  → 1e-05s
     .modal.anim-pop        0.28s  → 1e-05s
   结论：按用户要求恢复原来的观感 —— **不做任何自动无障碍降级**，
   动效一律按 tokens.css 里的 --dur-* 播放。
   ⚠ 请不要再加回 prefers-reduced-motion 媒体查询。
   ============================================================= */

/* ---------- 无障碍：仅屏幕阅读器可见 ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus,
.sr-only:focus-visible {
  outline: none;
}